Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Easy CSS 3D Mouse-over Pressed Text Effect

3D

When you move your mouse pointer over the 3D text shown above, the text will appear to be pressed. You can easily turn your text to 3D by using the CSS text-shadow property. The trick is to define multiple shadows that are each offset by one pixel. Shown below is the syntax for the text-shadow property.

text-shadow: horizontal-offset vertical-offset blur-radius color;

The first two values after the property name are the offset. The blur-radius property, the area where the shadow becomes wider and lighter. The last property is the color of the shadow. Shown below is an example style class.

.threeD
{
font-family:verdana;
font-size:50px;
color:rgb(255,0,0);
font-weight:bold;
text-shadow:
1px 1px 0 rgb(255,148,148),
2px 2px 0 rgb(255,148,148),
3px 3px 0 rgb(255,148,148),
4px 4px 0 rgb(255,148,148),
5px 5px 0 rgb(255,148,148),
6px 6px 0 rgb(0,0,0),
7px 7px 6px rgba(0,0,0,.8),
7px 7px 1px rgba(0,0,0,.4),
7px 7px 6px rgba(0,0,0,.2);
}

Note that in the first six shadows, the blur-radius property is set to 0. This causes the sides of the 3d text to look solid. After defining the sides, I have added three more shadows that have their blur-radius property set to non-zero values. This gives the 3d text an actual shadow.

You can control the appearance of your 3d text by adjusting the color values form each shadow layer. In case you're not familiar with the rgb method to specify color, you must provide three comma separated values within the brackets. The values specify the amount of blue, green, and red used to create the color. A scale of 0 to 255 is used, 0 being no color used to 255 being the maximum amount of color.

For the three actual shadows, I used the rgba method to specify color. The rgba method works the same as the rgb method except the fourth value within the brackets is the transparency, also called the alpha. The alpha is specified on a scale of 0.0 to 1.0, 0.0 being completely transparent and 1.0 being completely opaque.

.threeD:hover
{
padding-left:4px;
font-family:verdana;
font-size:50px;
color:rgb(255,0,0);
font-weight:bold;
text-shadow:
1px 1px 0 rgb(255,148,148),
2px 2px 0 rgb(255,148,148),
3px 3px 0 rgb(0,0,0),
5px 5px 2px rgba(0,0,0,.6);
}

To get the mouse-over effect you need to define a sub style with the :hover selector, which is used to select elements when you mouse over them. Shown above is an example style class.

.threeD a
{
text-decoration: none;
color:rgb(255,0,0);
}

In this example, I configured the 3d text in a link. If you don't want the default text styles of a link interfereing with your 3d text, you need define a sub style for the anchor selector, as shown above.

<span class="threeD">
3D
</span>

Lastly, apply the 3d style to an html element. Here we have applied the style class to an html span element containing the text "3D".

More Easy Cascading Style Sheets:
• Style Your Imagemap Tooltips
• Spice Up Your Web Forms with Color and Graphics
• Code to Move the Scrollbar to the Left Side
• Easy CSS Tabbed Navigation
• Easy Three-level Expanding Menu Code
• Easy Oval Image Mask With CSS
• Create Animated Glowing Text
• Make a Fixed-width Variable-height Round Cornered Box
• How to Use a Starburst on Your Web Page
• Display Overlapping Images on Your Webpage

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268