Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.
Showing posts with label CSS Codes. Show all posts
Showing posts with label CSS Codes. Show all posts

Wednesday, July 10, 2013

How To Stretch A Font/Text Horizontally And Vertically With CSS?

How To Stretch A Font/Text Horizontally And Vertically With CSS?

Some days ago I was designing a template. I liked a font that is long in it's vertical length. I added it to my template and then it start looking good. Then when it comes for SEO, I checked it on PageLoading time then it was too high that is totally against SEO. So I start checking again what the real problem and i got it on WebFont. So I have to remove it but I also liked it. In the new era SEO is on top beyond the designing so I removed that font. Then here came an idea about converting a WebSafeFont into that stylish new font. I got the 99% matching WebSafeFont but 1% difference came on font vertical length. Then it's time to remove that 1% difference also.
Read More ...

How To Add Rainbow Animation Into Header Logo Or Text?

How To Add Rainbow Animation Into Header Logo Or Text?

Hi visitors!! Now days CSS3 has become very popular and it gives a nice and stylish touch to your blog. It is totally different and easy to handle then jquery , but it gives similar results as comparison of it. Its very light and easy to install, So today we have came up with a kind of trick which is supported by css3, after applying this trick your header logo will perform a rainbow effect when a visitor will hover over your blog’s logo or header, the tricks contains simple but effective coding so it will not affect your page speed, Let’s see the demo first.
Read More ...

Monday, May 6, 2013

How To Customize Title Tag Of A Link Through CSS-JavaScript?

Customize Title Tag Of A Link Through CSS-JavaScript

Before proceeding further first we have to learn that What Is Title Tag And Why They Are Important. When you're trying to create effective page content that will appeal to both human visitors and search engine spiders, you need to get the most out of every page element. One way to do this is to use ALT TAG for SEO and TITLE TAG for Visitor . They increase your site's usability level and promotion possibilities if you clearly understand where to put them, when to use them, and why.

What Is ALT Tag:-

The ALT attribute is designed to be an alternative text description for images. ALT text displays before the image is loaded (if it's loaded at all) in the major browsers and instead of the image in text-based browsers. ALT is a required element for images and can only be used for image tags because its specific purpose is to describe images.

What Is TITLE Tag:-

The Title attribute is designed to be a description for images and links that if a visitor want to open a link, they should be known of what they are going to open through hover description.

***BUT***

There is a problem that in default title tag you can not edit it or customize it like if you want to see a breif description of link like heading and paragraph with tables and image, That is something that can attract your visitor,Don't be afraid it's so easy. I am going to show how you can do it as you have seen in the above screen shoot.Just have a look on live demo throught the given link.
Read More ...

Saturday, April 13, 2013

How To Change CSS .class Of A DIV On Mouse Hover?

How To Change CSS .class Of A DIV On Hover?

ToDay The Question Is That How To Change CSS .class Of A DIV On Mouse Over Or Hover Using DOM Effect Without JavaScript Or J-Query? The Ans Is Simpley Given Below. This Is Also Questioned By Many Friends So I Am Here Again, If You Have To CSS .class And Want To Change On Movse Hove r Then It Will Automatically Pick Up Second .class CSS Code And Start Displaying But On Again Mouse Out, It Will Be Back On The First .class And Start Displaying It. This Is Best For Idealogical Designer Or Can Be Used For New Style Gadget And Widget. You Have Full Right To Change The .class SIZE, COLORS, Fonts, Padding, POSITION And etc. It's Pure DOM Effect Not Within The <script> Tag Or Even $document Tag... So If You Want It, Just Add It Now With Easy Setps.

Read More ...

Friday, April 12, 2013

Awesome Success, Warning, Notice, And Error DIVs Codes

Awesome Success, Warning, Notice, And Error DIVs Codes

After viewing on many sites that are showing there message in a related box as the message wants to be displayed, I also want to do something like this, I started searching Google by i could not found any best with full tuotoria so I started myself. It seems easy to code but the reason is that you must have to short your code and remain mind others templates code as you did not know what type of template other have, so you have to design a cross template and cross browser code to be OK. So I designed a simple code that even didn't have tag because i embed the style in one div so now it is easy to use and install with out touching any other codes.
Read More ...

Monday, March 18, 2013

"Two Try Download Button" Like MediaFire Without J-Query

"Two Try Download Button" Like MediaFire Without J-Query

Hi, I am again here with a new awesome and stylish code that also did not have j-query or {script} tag as according to may law to make it quick to load and make your webpage lite. It is actually based upon my previous article about How To Change DIV Content/Data On Mouse Click?, Now after some up-gradation  The code is fully changes and become new after giving him some time.
Read More ...

Saturday, March 16, 2013

How To Open/Show And Close/Hide DIV With CSS Code?

How To Open/Show And Close/Hide DIV With CSS Code?

Many time ago i am also searching for "How To Open Or Show A Hidden DIV And Close Or Hide An Open DIV With Pure HTML-CSS-DOM Code Without JavaScript Or J-Query Code In Quick Way With Short Code?" but everywhere i got the JavaScript code to open or show and close or hide a div id. But my target is to get only CSS code because i did not want to make my page heavy using even a single line JavaScript. So i start creating Ideas and finally i got the code which seems very easy but it was difficult to generate, However i do this and I am glad to share it with you so that you can also take the Benefits from it and make your page quick to load. There are two codes below, First is to close a div in which you will get the code through which you can close a div and in Second code you will receive that code which will help you to open a hidden div.
Read More ...

Monday, February 25, 2013

Awesome And Stylish Pure CSS 3D Pressable Button

Awesome And Stylish Pure CSS 3D Pressable Button

Internet expands the design industry and web standards are changing and being improved almost every year.Although still having problems with browsers, the abilities of CSS3 allows more control on animated elements in web design. You know coding size is reduced by CSS so we see more and more animations on websites. In today’s post we've collected 3D animated ”press-able” buttons created with pure CSS3. You can easily integrate them in your websites or blogs. You may also take a look at our CSS tutorials.
Read More ...

Monday, February 11, 2013

How To Align DIV In Straight Line (Horizontally) With CSS?

How To Align DIV In Straight Line (Horizontally) With CSS?

I have been asked this question several times - How to align two DIV's next to each other using CSS. Here's a simple solution that I have been using for quite a while now. When playing with custom web designs, or off the shelf templates, the most common CSS work involves changing the margin, padding, color and background of HTML elements. I usually also usually align elements either to the left, right, or center using CSS.If you want to align a div to the right and another div opposite to the first on the left you can use the following CSS classes.
Read More ...

Monday, February 4, 2013

How To Highlight All TextArea Content Using CSS?

How To Highlight All TextArea Content Using CSS?

After previous article about "How To Highlight All TextArea Content Using JavaScript Button?" Today the question is that "How To HighlightAll/Select All TextArea Content/Data Using HTML+CSS+DOM Through One-Click, Double-Click, Button-Click Or OnText-Click?" Many websites use this little JavaScript functionality. It enables you to give a user the option of selecting or highlighting all text within a textarea element of an HTML form, just by clicking on something as opposed to dragging their mouse over the text to highlight it.
Read More ...

Sunday, December 30, 2012

How To Stop Highlighting A Web-Page Using Pure CSS Code?

How To Stop Highlighting A Web-Page Using Pure CSS Code?

After my previous article that is "How To Disable Highlighting The Text From DIV, Blog And Website?" I am here to share the CSS version that are also better then that in some ways that is is quick to load then that and also will works on JavaScript blocker because it is not a JavaScript code but it will not full-fill all the features of JavaScript code.
Read More ...

Wednesday, December 26, 2012

PADDING: A CSS Property To Manage Your DIV Data.

PADDING: A CSS Property To Manage Your DIV Data.

The CSS Padding properties define the space between the element border and the element content.
Padding The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties.
Read More ...

Monday, December 17, 2012

How To Change DIV Content/Data On Mouse Click?

How To Change DIV Content/Data On Mouse Click?

ToDay The Question Is How To Change DIV Content, Data, Text On Mouse Click Using HTML, CSS, DOM Effect Without <script> Tag? And Can Also Customize Both DIVs With Estra CSS. Many Guy's Are Asking About It To Make There Widgets, Sites And Blog Awesome By Adding Something Uniques Throught This Code. For This Purpose They Are Using JQuery But In The Eye Of SEO, It's UseLess Because It's Need Time To Load The WebPage.
Read More ...

Thursday, June 28, 2012

Open/Show And Close/Hide DIVs On-Click By CSS Code Only

Many time ago i am also searching for it but everywhere i got the JavaScript code to open or show and close or hide a div id. As you can also see that on my earlier post but here i am back again with the same old design but with CSS code to speed it up and make your blog time low.
Open/Show And Close/Hide DIVs On-Click By CSS Code Only

As i share earlier with you same type of widget but many people ask me to share the update in which the close button woll appear at different space so i am here with fulfilling there wish and add a new stylish JavaScript code But here is CSS only to make it clear that we will works for you. So here is the new code first see the screen shoot or the live demo and then if you like it then use it.I got messed with lot of code including JQuery/JavaScript but from there i learned and just make my own simple and shortest CSS code for Multi-division because many other coders providing only one but user want unlimited.
Now here’s a simple tutorial on HShow/Hide Open/Close DIV On Click Widget. This is very simple code and only contain CSS so it is quick ti load and works with every browsers and every system.. Many people want this widget so that they can save there space on website or blog to show there widget on user demand because many visitor did not want everything so if some one needs any thing they just read the title and open if he desire. So without any more preface here we proceed to that widget code.



Features:
1.) This DIV Will Open On Mouse Click Over The Image And Close On Other Image That Will Appear In The Corner Of DIV.
2.) You Can Add More CSS To Make You DIV Stylish And Awesome.
3.) You Can Add Unlimited DIV.
4.) You Can Open All DIV At Same Time And Also Close All At Same Time.
5.) Easy To Install And Quick To Load.
6.) You Can Add Text, HTML Code, JavaScript Code, Video, Pic And Anything .
7.) This Contain Only CSS So It Is Quick To Load.
8.) Supported Browsers (IE (All), Chrome And FireFox, Safari And Opera And All CSS Supported.)
9.) The Open And Close Image Will Change As Required.
10.) Simply Fast And Awesome.
Read More ...

Wednesday, May 30, 2012

How To Add External CSS File/Code In Blogger/Website?

How To Add External CSS File/Code In Blogger/Website?
This post explains how to host CSS files in blogger itself, so you don't need to worry about bandwidth limitations,etc:-
"How To Host CSS Files For Free With Unlimited Bandwidth?" is one of the most frequently asked questions in the blogger community. There are tons of hosting providers out there who can help you host your .css files for Free, but all have some bandwidth limitations and also they are not very reliable.
Did you ask yourself why in blogspot posts some css code works but in some cases don't. In this article you will find answer.
Somewhere I founded tip to make CSS file with CSS code and put this file on the web. After that call CSS function addressing that file.
I think that this method have too many steps and that is too complicated (you must upload you CSS file somewhere on the web and later call this file from your blogspot post).

Benefits Of This Trick:
» No file size limitations
» No bandwith limitations
» Super fast page loading (bcoz files are stored in blogger itself)

There Are 4 Step To Link External CSS File Into Blogger And Website?
Read More ...

Monday, May 7, 2012

Use CSS3/HTML5 Outlines To Upgrade Your Website

Use CSS3/HTML5 Outlines To Upgrade Your Website

You definitely want your website to standout from the countless boring sites out there. After all, you spent time and money on the thing so you want it to be great. One very effective way to make your website shine is by using CSS3/HTML5 outlines to upgrade your website. To do that, follow the guidelines below:


Introduction:
Advancing to HTML5 is as simple as:
Altering your doctype to:
<!DOCTYPE HTML>
Reorganize your CSS stylesheets by browsing through this link: 
http://html5doctor.com/html-5-reset-stylesheet/
The most important idea of HTML5 is the option of moving away from senseless <div> tags to tags that are more specific such as <header> and <footer>. The impressive word for this is semantic.
The most important result of this is that it works better for search engines to read the code.

Read More ...

Friday, May 4, 2012

Use of CSS for Multiple Backgrounds

Use of CSS for Multiple Backgrounds

Today most of the website designers have preferred to go for Cascading Style Sheets applications to design their website as the best and efficient one that too with unique style. Compare to the web designing methods that have been used in the earlier days, CSS would probably provide web designers with the best options to edit their web pages. It would also make people to manage the web pages in a reliable way. 

When you have considered about CSS the main goal of this style sheet would be providing the best appearance to the web page and also to separate the content of particular web page rather than the way it has shown in the browser. This would probably be helpful for the website designer to make editing in the web pages. Apart from all these things there are many reasons why people have interested to go with CSS for their websites.
Read More ...

Friday, April 20, 2012

All About CSS3 With Features, Requirment And Information

All About CSS3 With Features, Requirment And Information

A View On History Of CSS:-

CSS1:-
CSS1 is the first edition of Cascading Style Sheets which were introduced in 1996. It came with the support for several properties. Introduction of unique ‘id’ for each property and introduction of classes to properties that should have the same styles attributes were the most important things there were. Margin, border, padding and positioning also powered by style sheets although they could be done by using the HTML elements. Spacing between lines and rows of tables are also easily done using the stylesheets. The W3C stated the importance of using CSS instead of having the html as the giving the ability to optimization and making it easy for the designers to design and settle down the design easily.

CSS2:-
CSS2 was published in 1998. Positioning of index with several property values such like fixed, absolute, relative and indexing were the commonly highlighted ones among them. Bidirectional texts and some other new front properties such as shadows were introduced by this edition of CSS. Two updates and features came in to fix the errors in CSS 2. CSS 2.1 was the last 2nd generation edition of CSS.

CSS3:-
CSS3 is the latest edition of the CSS Stylesheets. There are several new functionalities have been provided through CSS3. Functions such like opacity, Text-overflow, media queries and box shadows are some of the much attractive introductions.
Read More ...

Wednesday, April 4, 2012

HEX Color Code With Image

HEX Color Code With Image
Identifying the color code of an image on the screen is not an easy task. Usually it involves a multi step process and is time consuming.
So you're working on a web design project and your colleague has just asked you to "send me the hex color codes". You reply "OK - no problem".
You think "What on earth are hex color codes?".
Well, "hex color codes" is another way of saying "hexadecimal color codes" or "hexadecimal values". The format is a hash (#) followed by 6 numbers or letters. The position of the numbers/letters correlate to the RGB value. For example, #0000ff translates into Red:000, Green:000, Blue:255. In laymans terms, this translates into "blue". This is because blue has it's full value (i.e. "ff" in hex or "255" in RGB), and both red and green have no value (i.e. "00" in hex or "000" in RGB).
When coding HTML, you often need to specify what color an element should be. For example, the color of text, the background color of a table cell etc. For any given color, there are various ways of specifying a value. For example, you can provide the color name (i.e. blue) or you can provide the hexadecimal value (#0000ff). Using hex color codes (and various other models), you have many more options for different shades of color than just the color names. Instead of just "blue" you can nominate a specific shade of blue using a hexadecimal value.
If you're ever presented with the RGB value of a color, you will be able to determine the hex color code. To get an idea of how this works. This color picker enables you to view the hex and RGB values of any color. If you have an image editor such as Photoshop or The GIMP, this color picker will be familiar.
Counting in Hexadecimal
Hexadecimal can be a little difficult to understand at first. This is because most of us are used to counting in decimal. When using decimal, we count from 0 to 10, then once we reach 10, we just go from 0 to 10 again but prefix with a 1 (i.e. 10,11,12,13...).
On the other hand, if we were to count using Hexadecimal, we would go from 1 to 16, then start again. But using Hexadecimal, once we go past 10 we add a letter instead of numbers. So instead of using 11, 12, 13, 14 etc, we use A, B, C, D etc. Therefore, this is what we use: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
This is why most hexadecimal values include a combination of letters and digits.
Zoom These Images And Get Your Desire Color Code Easily.
Read More ...