CSS3 Text Effects
February 9th, 2012 - 1 Comment »
The new CSS3 properties give developers a wonderful chance to enhance their designs in a way that’s quick and easy, Almost all of the major browsers support the many CSS3 features. A big change in CSS3 is Web Typography. Text styling and impressive effects can be achieved without the use of javascript or images!
Below is a collection of some of the best CSS3 Text Effects!
Letterpress Effect
Add the following CSS properties to your selector:
|
1 2 3 4 |
.text { color: #222; text-shadow: 0px 2px 3px #555; } |
So your markup should look like this…
|
1 |
<span class="text">Text goes here</span> |
Outline and transparent Effect
Outlined text
|
1 2 3 4 |
.stroke { color: #c00; /*- text color -*/ -webkit-text-stroke: 1px #000; /*- stroke color and weight -*/ } |
…your markup should look like this:
|
1 |
<span class="stroke">Text goes here</span> |
Outline and Transparent fill text
|
1 2 3 4 |
.stroke-transparent { -webkit-text-stroke: 1px #000; /*- stroke color and weight -*/ -webkit-text-fill-color: transparent; /*- fill color (transparent) -*/ } |
…your markup should look like this:
|
1 |
<span class="stroke-transparent">Text goes here</span> |
Glowing Effect
|
1 2 3 4 5 6 7 8 9 10 |
.glow { color:#FFFFFF ; text-shadow:0 0 20px yellow ; } /*-- Deeper glowing text --*/ .deeperGlow { color:white; text-shadow:0 0 30px yellow , 0 0 70px yellow ; } |
…your markup should look like this
|
1 2 3 |
<span class="glow">Text goes here</span> <span class="deeperGlow">Text goes here</span> |
Photoshop Emboss
|
1 2 3 4 5 |
.Emboss { background:#ccc ; color:#ccc; text-shadow: -1px -1px white, 1px 1px #333; } |
…your markup should look like this:
|
1 |
<span class="Emboss">Text goes here</span> |
Blury Text
|
1 2 3 4 |
.blurytext { color: transparent; text-shadow: #fff 0 0 10px; } |
…your markup should look like this:
|
1 |
<span class="blurytext">Text goes here</span> |
Remember, these don’t work just yet in some browsers! *cough* IE *cough* So use with some caution.
Give some of these a go and let us know how you get on and if you have used any of the above techniques in any of your projects!
Related posts:
One Response
Leave a Reply
reallyy this is veryyy helpul for me to learn a simple little little things which is very important nd helpful in my website designn thankuuuu soo muchhhhhh