CSS3 Text Shadows

CSS3 Text Shadows by Dmitriy, Divine Elemente Team | |
{clear} THUMBNAIL_BEGIN #image: text-shadows.jpg; #description: CSS provides us with plenty of ways to stylize the text. Some techniques are used more often, some less often. In this article I would like to present the most interesting methods of text stylization with the help of shadows. THUMBNAIL_END {/clear}

CSS provides us with plenty of ways to stylize the text. Some techniques are used more often, some less often. In this article I would like to present the most interesting methods of text stylization with the help of shadows.


"Text-shadow" property

Text-shadow property adds shadow to the text, and also sets its parameters (shadow color, shift against text box and blur radius). It is acceptable to specify several parameters of shadow separated by commas.

The following order is considered in CSS3: the first shadow in the list is placed at the top; the last is placed at the bottom. In CSS2 the order is inversed: the first shadow is placed at the bottom, and the last is placed at the top.

Syntax:

text-shadow: none | shadow [,shadow]*

where "shadow":

<color> <x shift> <y shift> <blur radius>

Values:

  • None: cancels the addition of shadow.
  • Color: shadow color in any CSS format available. Shadow color is the same as text color by default. Optional parameter.
  • X shift: horizontal shift of shadow against text box. Positive value of this parameter sets shadow shift to the right, negative - to the left. Mandatory parameter.
  • Y shift: vertical shift of shadow against text box. It is also acceptable to use negative value, which lifts shadow above the text. Mandatory parameter.
  • Radius: sets blur radius of shadow. The larger the value, the more shadow is smoothed, and becomes wider and lighter. If this parameter is not specified, it will be set to 0 by default.

Note: usually, smoothing algorithm is different in browsers; therefore appearance of shadow may be different depending on smoothing parameters.


1. Simple shadow

Simple shadow effect, which is frequently used..

Simple shadow
p { font-size: 4em; text-shadow: 3px 3px 3px #000; color: #f9f5ed; }

2. Complex shadows

Complex shadows are obtained with the help of combining of several shadows.

Complex shadows
p { font-size: 4em; text-shadow: 3px 3px 10px red, -3px -3px 10px yellow; color: #101921; }

3. Outline text

This effect allows you to create a border around each letter. It looks quite nice and it is often applied.

Outline text
p { font-size: 4em; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #fff; }

4. Indented text

Creates the effect of indented letters..

Indented text
p { font-size: 4em; text-shadow: -1px -1px #666, 1px 1px #FFF; color: #ccc; }

5. Volume text

Very attractive effect, which creates the impression that letters are embossed.

Volume text
p { font-size: 4em; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; color: #ccc; }

6. Retro style

This effect is created thanks to ornamental artifacts created with the help of text-shadow value.

Retro style
p { background-color: #ccc; 
     color: #707070;
     font-family: Times New Roman;
     font-size: 4em;
     margin: 0 auto;
     text-transform: uppercase;
     text-shadow: 5px 5px 0px #ccc, 7px 7px 0px #707070; }

7. Neon

The effect of glowing neon lamp. Looks best on dark background.

Neon
p{ 
     color: #fff;
     font-family: Times New Roman;
     font-size: 4em;
     margin: 0 auto;
     text-transform: uppercase;
     text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; }

8. Flaming text

The effect of flaming text, which is also preferable to use on dark background.

Flaming text
p { background-color: #000;
     padding: 90px 0 0;
     margin: 20px auto;
     font-family: Arial;
     font-size: 200px; 
     text-transform: uppercase; 
     color: #fff;
     text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; }

9. 3D text

This effect is pretty spectacular, and it is created only with the help of shadows.

3D text
p { color: #fff; 
     font: 4em 'ChunkFiveRegular'; 
     margin: 20px auto; 
     text-shadow: 0 1px 0 #ccc,
                         0 2px 0 #c9c9c9,
                         0 3px 0 #bbb,
                         0 4px 0 #b9b9b9,
                         0 5px 0 #aaa,
                         0 6px 1px rgba( 0, 0, 0, .1 ),
                         0 0 5px rgba( 0, 0, 0, .1 ),
                         0 1px 3px rgba( 0, 0, 0, .3 ),
                         0 3px 5px rgba( 0, 0, 0, .2 ),
                         0 5px 10px rgba( 0, 0, 0, .25),
                         0 10px 10px rgba( 0, 0, 0, .2 ),
                         0 20px 20px rgba( 0, 0, 0, .15 ); }

You can turn this text for greater effect:

3D text

Write the following styles for implementation:

p.skew { 
    font-family: 'times new roman', serif;
    padding: 0; margin:200px 0 0 150px;
    position: relative;
    color: #fff;
    font-size: 100px;
    text-shadow:
        -1px -1px 0 #f8f8f8,
        -2px -2px 0 #f0f0f0,
        -3px -3px 0 #e8e8e8, 
        -4px -4px 0 #e0e0e0,
        -5px -5px 0 #d8d8d8,
        -6px -6px 0 #d0d0d0,
        -7px -7px 0 #c8c8c8;
    -moz-transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -0-transform-origin: bottom left;
    transform-origin: bottom left;
    -moz-transform: skewY( -15deg );
    -webkit-transform: skewY( -15deg );
    -ms-transform: skewY( -15deg );
    -o-transform: skewY( -15deg );
    transform: skewY( -15deg );
    position: absolute;
    z-index: 100; }
.skew:before {
    content: attr(title);
    color: transparent;
    position: absolute;
    left: 0; bottom: 0;
    text-shadow:
        0 0 5px rgba( 0, 0, 0, .25 );
        0 0 10px rgba( 0, 0, 0, .2 );
        0 0 20px rgba( 0, 0, 0, .15 );
        0 0 40px rgba( 0, 0, 0, .1 );
    -moz-transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -0-transform-origin: bottom left;
    transform-origin: bottom left;
    -moz-transform: skewX( 60deg );
    -webkit-transform: skewX( 60deg );
    -ms-transform: skewX( 60deg );
    -o-transform: skewX( 60deg );
    transform: skewX( 60 deg );
    z-index: -1; }

Here we used some of the properties, which are still at the stage of testing:

  • transform-origin - sets coordinates of the transformation center. The element can be moved, resized, rotated and tilted with respect to the point with specified coordinates;
  • transform - applies transformation to an element (you can apply several transformations by specifying values by space). The element can be moved, resized, rotated and tilted.

Conclusion

It is difficult to come up with options for the application of this property, but you can always use the existing practises to make a website more stylish. If you have something interesting that I have not described - don’t be lazy to share :)

Read More »

Tutorial: Dropdown Menu With CSS3 Only

Tutorial: Dropdown Menu With CSS3 Only by Dmitriy, Divine Elemente Team | |
Drop-down menu is an irreplaceable attribute of the most websiites currently. There are numerous ways and methods to implement the drop-down menu. This article concerns Drop-down menu implemented in CSS3.

Drop-down menu is an irreplaceable attribute of the most websiites currently. There are numerous ways and methods to implement the drop-down menu. This article concerns Drop-down menu implemented in CSS3.


Menu structure

At first, it is necessary to create menu structure using HTML. Let’s use unsorted list to create structure, which will include nested lists to create drop-down effect.

This method has a wide range of disadvantages. As you can see from the code, the image has to be overlaid on the background, but that is not the thing we really want to do.

When an image has small elements, it will also be small; but having gradient overlaid on the whole website background will cause noticeable changes. Besides, uploading multiple resources has bad influence on the website.


Gradient implementation with the help of CSS3

The long-waited function (gradient background) has been added into CSS3 (Cascading Style Sheets); and thanks to this feature gradient creation on the block became possible.

Parameters list of CSS attribute of linear-gradient()


In the code above, you can see <UL> nested lists. UL was added into the parent UL tag, and inserted into <LI> element. Using this method, we can create drop-down menu; after CSS is added, everything will flatten out and will look different.

"headerList" class was set for every element of the list, except for Item5, the last item. This class will be used to create separating char to the right side of every menu item; the last item does not require border on the right side, so this class was not assigned to it.


Horizontal drop-down menu stylization with the help of CSS.

At first, note the border radius property, which allows to create rounded angles.

"border-radius", "-moz-border-radius" and "-webkit-border-radius" properties are set by the same rounded angles, but for different browsers. "-moz" is for Firefox, "-webkit" is for Safari and Chrome, but perhaps standard "border-radius" property will be working in the new versions of all the browsers.

At first, note the border radius property, which allows to create rounded angles.
#menu{
    float: left;

    /* Create rounded angles */
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

    /* Add gradient */
    background: -moz-linear-gradient( bottom, #cccccc, #f2f2f2 );
    background: -webkit-gradient( linear, left bottom, left top, from( #cccccc ), 
                                                to( #f2f2f2 ) );
    /* Add shadow */
    -moz-box-shadow: 0 1px 10px #161617;
    box-shadow: 0 1px 10px #161617;
}
#menu ul ul{
    display: none;
}

The image on the left shows the result we will get using these styles. As you can see, you just need to set value, 10px in this case.

After that, gradient was added. It was done with the help of usual background property, but with different value. As well as with rounded angles, “-moz” is used for Firefox browser; gradient beginning and two colors, which will be used for gradient creation, are indicated in this value.

Finally, a shadow was added to menu box. Box shadow setting has 4 values:

  • horizontal shift;
  • vertical shift;
  • blurring radius;
  • color value.
Menu. Step 2
#menu ul {
    padding:0;
    margin:0;
    list-style:none;
    position:relative;
}

With the help of these styles we have disposed shifting and items of the list. Besides, relative positioning was set. It was done because we need to use absolute positioning for inserted <UL> tags.

Menu. Step 3
#menu ul li{
    display: block;
    float: left;
    padding-top: 9px;
    padding-bottom: 9px; 
}
#menu ul li span a{
    border-left: solid #8cab9e thin;
}
#navBar1 ul li span a{
    border-left: solid #555 thin;
}

setting was applied here, and also , which allows every menu item to have shifting and flow over. Besides, inner shifts from below and from above were implemented, so the menu items were set on center.

.headerList a{ 
    border-right: solid #ccc thin; 
}
#menu ul li a{
    display: block;
    padding: 4px;
    padding-left: 13px;
    padding-right: 13px;
    color: #333;
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 80%;
}
Menu. Step 4

The second separating char was added to the right. Also, color, size and font family were set.

#menu ul li a:hover{
    color: #F00;
    text-decoration: underline;
}

Color change and font underline during mouse cursor guidance were set.

#menu ul ul{
    position: absolute;
    top: 42px;
    width: 310px;
    border: thin solid #849c92;
    font-size: 70%;
    display: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: -moz-linear-gradient( bottom, #cccccc, #f2f2f2 );
    background: -webkit-gradient( linear, left bottom, left top, from(#cccccc), to( #f2f2f2 ) );
    -moz-box-shadow: 0 1px 10px #161617;
    box-shadow: 0 1px 10px #161617;
}

Absolute positioning, 42px shift, and also background image were implemented; the border and font size were added, drop-down menu size assigned.

Menu. Step 5
#menu ul li:hover ul{
    position:absolute;
    left:60px;
    display:block;
}

The nested menu was shifted 60px to the right, and also <display:block;> property was implemented, which provides menu visibility during cursor shift.

#menu ul ul li{
    padding: 0;
    padding-top: 3px;
    padding-bottom: 2px;
}
#menu ul ul li a{
    border: none;
    color: #333;
}

The last strokes that let us dispose the undesired border and change text color.

Read More »

How to Make Gradient With CSS3

How to Make Gradient With CSS3 by Dmitriy, Divine Elemente Team | |
{clear} THUMBNAIL_BEGIN #image: gradient-with-css3.jpg; #description: What is gradient? Gradient is a fill type when you have one color gradually turning into another.

To implement gradient, it is necessary to specify color and opacity of certain key points, as well as color and transparency of the remaining points that are calculated according to certain mathematical algorithms. THUMBNAIL_END {/clear}

What is gradient? Gradient is a fill type when you have one color gradually turning into another.

To implement gradient, it is necessary to specify color and opacity of certain key points, as well as color and transparency of the remaining points that are calculated according to certain mathematical algorithms.


Gradient with the help of "CSS+image"

Gradient background can be found on various websites, and it is probably the most popular web design method. It adds 3D form to web design, and website becomes a lot more attractive.

We can see light gradient in the main menu on www.apple.com

We can see light gradient in the main menu on www.apple.com

Most commonly "CSS + image" is used for layout. This effect has already become a norm; and usually, it is carried out in this way:

div { background: url(picture.png) repeat-x #ссс; }

This method has a wide range of disadvantages. As you can see from the code, the image has to be overlaid on the background, but that is not the thing we really want to do.

When an image has small elements, it will also be small; but having gradient overlaid on the whole website background will cause noticeable changes. Besides, uploading multiple resources has bad influence on the website.


Gradient implementation with the help of CSS3

The long-waited function (gradient background) has been added into CSS3 (Cascading Style Sheets); and thanks to this feature gradient creation on the block became possible.

Parameters list of CSS attribute of linear-gradient()

Linear gradient.
.gradient{ linear-gradient( “bg-position”, “angle”, “colors” ); }
  • "bg-position" parameter sets gradient beginning in the block (“Top 0px left 0px” by default).
.gradient{ linear-gradient( right top, yellow, blue ); }
.gradient{ linear-gradient( left 20px top 30px, yellow, blue ); }
.gradient{ linear-gradient( -10px 20px, yellow, blue ); }
  • "angle" parameter sets gradient spreading angle ("0 deg" by default).
.gradient{ linear-gradient(right top, 30deg, yellow, blue); }
.gradient{ linear-gradient( 45deg, yellow, blue );}
  • "colors" parameter sets gradient key points colors. It is the mandatory parameter which includes no less than two colors.
.gradient{ linear-gradient( right top, 30deg, yellow, blue ); }
.gradient{ linear-gradient( right top, 30deg, yellow 10%, #0f0 ); } 
.gradient{ linear-gradient( right top, 30deg, yellow, blue ); }
.gradient{ linear-gradient( right top, 30deg, yellow 10%, #0f0 ); }
.gradient{ linear-gradient( yellow, blue 30px ); }
.gradient{ linear-gradient( yellow 10px, blue 20%, #0f0 ); }

Parameters list of CSS property of radial-gradient ()

Radial gradient.
.gradient{ radial-gradient( "bg-position", "angle", "shape", "size", "colors" ); }
  • "bg-position" parameter sets gradient central position in the block (“center” “center” by default).
.gradient{ radial-gradient( right top, yellow, blue ); }
.gradient{ radial-gradient( left 20px top 30px, yellow, blue ); }
.gradient{ linear-gradient( -10px 20px, yellow, blue ); }
  • "angle" parameter sets gradient spreading angle ("0 deg" by default).
.gradient{ radial-gradient( right top, 30deg, yellow, blue ); }
.gradient{ radial-gradient( 45deg, ellipse, yellow, blue ); }
  • "shape" parameter sets gradient form. Values: "circle", "ellipse". ("circle" by default).
.gradient{ radial-gradient( circle, yellow, blue ); }
.gradient{ radial-gradient( right top, 30deg, ellipse, yellow 10%, #0f0 ); }
  • "size" parameter sets gradient alignment regarding to angles and sides of the block. It can be defined by the following parameters: "closest-side", "closest-corner", "farthest-side", "farthest-corner", contain (synonym is closest-side), cover (synonym is farthest-corner).
.gradient{ radial-gradient( bottom left, farthest-side, red, yellow 50px, green ); }
.gradient{ radial-gradient( 20px 30px, contain, red, yellow, green ) }

At first sight everything looks perfect, but there is only one "but". The truth is that CSS3 is not supported by all the browsers yet.


Browser support

CSS3 gradient and Mozilla Firefox

Firefox 3.6. was released on January 21st, 2010. It supports linear –moz-linear-gradient() and radial -moz-radial-gradient() CSS3 gradients.

With their help both simple two-colored gradients and multicolor gradients can be created; and repeated gradient can also be created.

.gradient { background: -moz-linear-gradient( top, #0066FF, #83CA54 ); }
.gradient { background: -moz-repeating-linear-gradient( top left -45deg, red, red 5px, white 5px,       
                 white 10px ); }
.gradient { background-image: -moz-radial-gradient( center 45deg, circle closest-side, 
                 orange 0%, red 100% ); }

FF versions lower than 3.6 do not support CSS3 "linear-gradient" and "radial-gradient" functions!

CSS3 gradient in Chrome and Safari

Starting from 4.0 version Safari (and 2.0 version for Chrome) supports -webkit-gradient() command for linear and radial gradients creating.

.gradient{ background: -webkit-gradient( linear, left top, left bottom, from( rgb( 0, 102, 255 ) ), 
                to( rgb( 131, 202, 84 ) ) ) }

The latest Chrome versions use the same syntax for gradient, as Firefox does.

.gradient{ background: -webkit-linear-gradient( top, #0066FF, #83CA54 ); }
.gradient{ background: -webkit-repeating-linear-gradient( top left -45deg, red, red 5px, white 5px, 
               white 10px ); }
.gradient{ background-image: -webkit-radial-gradient( center 45deg, circle closest-side, orange 0%, 
               red 100% ); }

Besides, there is possibility of setting radial repeated gradient.

.gradient{ background-image: -webkit-radial-gradient( center 45deg, circle closest-side, orange, red 10%, 
               orange 30% ); }

CSS3 gradient and Internet Explorer

Filters are used for gradients creating in IE. Starting from IE 5.5 version you can create gradient with the help of that filter.

.gradient{ filter: progid:DXImageTransform.Microsoft.gradient( GradientType=0, startColorstr=#FF0066FF, 
              endColorstr=#FF83CA54 ); }

This non-recurrent gradient may have two directions:

  • Horizontal: GradientType = 1
  • Vertical: GradientType = 0

For Internet Explorer 8.0 you can write the individual filter.

.gradient{ -ms-filter: "progid:DXImageTransform.Microsoft.gradient( GradientType=0,                 
              startColorstr=#FF0066FF, endColorstr=#FF83CA54 )"; }

But the old entry can also be read by IE8.

CSS3 gradient and Opera

Starting from 9.5 version Opera provides gradient creating possibility using SVG as a background. Starting from 11.1 version Opera supports vendor value property for “background-o-linear-gradient” and “-o-repeating-linear-gradient”.

.gradient{ background: -o-linear-gradient( top, #0066FF, #83CA54 ); }
.gradient{ background: -o-repeating-linear-gradient( top left -45deg, red, red 5px, white 5px, white 10px); }

And what about the old versions of browsers?

The oldest versions of browsers will just ignore gradient-fill handling, thus, at first, the background color should be set before gradient description.

Read More »