Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
KianHome - today increasingly want to discuss about how to create a shadow on the text, whereas this is pure css we use only format. who must understand is how my friend put his CSS code in text format in your template.

then, look at some of the following tutorials:
Basic Shadow:


text-shadow: 5px 5px 0 #959595;

Blurred Shadow:


text-shadow: 5px 5px 7px #959595;

Shadow with text color set to match closely the document's background color:

This example sets the color of the text to match closely the document background's color (white in this case), causing the shadow to define the outer edges of the text.


color: #f2f2f2;
text-shadow: 5px 5px 3px #414141;

Inset (aka Letterpress) Text Shadow:

This example sets out to create inset text, or text that appears slightly pressed into the background. There are a few ways to achieve the look, but one ways is to define just a y shadow offset (leaving the x shadow offset to 0) while specifying a shadow color that's lighter than the text's font color.


text-shadow: 0 -2px 1px #8a8a8a;

Here's a more dramatic example done against a dark background:


text-shadow: 0 1px 2px #8a8a8a;

Multiple, Simultaneous text Shadows

Multiple text shadows can be applied to the same element simultaneously, which can make for some interesting effects. To add multiple text shadows to an element, just separate each text shadow definition with a comma within the same text-shadow property, for example:


text-shadow: 5px 5px 0 red, -5px -5px 0 orange;

The point of the above example is just to highlight how two shadows (or more) can be simultaneously added to a text element, each with its own offsets and color. With that said, lets see a couple of more compelling multiple text shadow examples.

3D looking Text Shadow:

In this example, multiple shadows of the same color are added to a text element, each shadow offset a few pixels more compared to the previous. This creates the illusion of 3D looking text:


color: #12c911;
text-shadow: 1px 1px black, 2px 2px #149c14, 3px 3px #149c14, 4px 4px #149c14, 5px 5px #149c14, 6px 6px #149c14, 7px 7px #149c14, 8px 8px #149c14;

Notice how the very first shadow's color is set to black, to give the text a nice outline.

Glowing Text Shadow:

You can create "glowing text" by using multiple text shadows that do NOT offset at all from the foreground text, essentially hiding behind the text. By gradually increasing the blur strength of each compounding shadow plus darken its color, you create the "glow" effect:


text-shadow: 0 0 5px #FFFFA0, 0 0 10px #FFFF4D, 0 0 15px #FFFF41, 0 0 20px #FFFF2A, 0 0 25px #FFFF2B, 0 0 30px #FEFE00, 0 0 35px #F7F700;

Share to :

Related Post :

About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

0 Response to "modification of the text with CSS 3 Text shadow"

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..

Berita Terkini

Friend Follower's

Tips Health


Hot Nasional


My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |