All the fresher web developers these days should focus on new techniques for styling and creation of web pages. CSS3 is very good and provides so many design features from earlier CSS, but the thing is that how new comers learn about these styles. They know, there is CSS3 but they do not know as how to use it. Here I am explaining a very simple way to generate and apply CSS3 code for their websites. One should not make a habit of this, but it is very good for learning as well as for quick design development.
There is a website, www.css3generator.com that provides a feature to generate CSS3 code, that code could be understood and can be copied and applied to your website very easily. Let us take an example step by step:-
1. Go to www.css3generator.com
1. Go to www.css3generator.com
2. From the drop down chose the type of CSS style you want to give. In this example we will use text shadow.
3. Give the parameters as you want and you can see the changes in the preview area. In this example we have given 4px horizontal length for the shadow, 3 px vertical length for the shadow, blur radius is 2px and shadow color is e6092e. You do not have to specify the shadow color, when you click on the text box of shadow color, color picker will appear and you can easily pick the color and its code will be displayed in the box. You can easily see the text shadow in the preview area.
4. In the box next to the browser icons is the code of the CSS3.
5. Click on the notepad icon on this portion of the webpage. The CSS3 code will be copied to your clipboard.
6. Now go to your web page code in which you want to apply this CSS. You can make a class or ID for this.
If you want to make a class they you have to write code as
.class_name{
text-shadow: 4px 3px 2px #e6092e;
filter: dropshadow(color=#e6092e, offx=4, offy=3);
}
and if you want to use it against an ID then you have to write code as
#id_name{
text-shadow: 4px 3px 2px #e6092e;
filter: dropshadow(color=#e6092e, offx=4, offy=3);
}
class_name and id_name could vary according to your naming methodology.
7. Then give the reference of this CSS in your text element. For suppose you have a text element as:
<h2>Hello, This is CSS3 Generator</h2>
Hello, This is CSS3 Generator
and it will be displayed as above. If you want to give that styling that we have generated then you can give
<h2 class="class_name">Hello, This is CSS3 Generator</h2>
if you are implementing as a class
or
<h2 id="id_name">Hello, This is CSS3 Generator</h2>
if you are implementing as a ID.
When you implement this you will get the result as below:
When you implement this you will get the result as below:
No comments:
Post a Comment