Example of 3D text (emboss) with drop shadow using CSS3 only

 

 

3dText

                                                         The effect in Firefox

 

CSS3 has some nice new properties and one of them is the text-shadow property. You can use it to add depth to your text and have an emboss effect. You can have several text-shadow properties on the same element which enables you to create some creative effects. Before CSS3, one had to use a paint program like Photoshop to add the 3D effect by using layers and adding a drop shadow. Before Photoshop I used a Photoshop plugin called Eye Candy from Alien Skin to add drop shadows with very little effort. We have come a long way to using CSS3.

The text-shadow property has several values. The first one is for the horizontal offset, the second for the vertical offset, the third for the blur radius and then the rgba values for the shadow’s color and opacity.

In this demo I decided to use a free web-font. A web-font is a font the browser downloads and uses to display any text whose declaration is set to use that font. I am using a free font called Calluna from Exljbris. Only the regular style is free. The other styles are commercial. The downloadable font is in the OpenType format (otf) which is supported by all the modern browsers, (IE9).

To create the 3D effect I gave the text 3 text shadows including the white one which is offset towards the top to give the text some depth.

I tried the page in FireFox 3.6, Google Chrome 8 and Safari 5. I did not like how Chrome displayed the drop shadows because Chrome gave them hard edges which make them look like they were cut off. See below. The above image is from Firefox and the drop shadow blends nicely with the background.

 

3dText Chrome

                                                The effect in Google Chrome

 

The html:

<!DOCTYPE html>
<html>
<head>
<!--
Sample by Abdu : jentel at hotmail.com
Description at /
-->

<title>3D text with dropshadow & web font using CSS3 only</title>
<meta charset=utf-8>
<style>
@font-face
{
font-family : "Calluna-Regular";
src : url("Calluna-Regular.otf")
format("opentype");
}
body { font-family : "Calluna-Regular", Helvetica, Arial;
background-color: rgb(210,210,210); }
header h1
{
font-size: 86px;
text-shadow:
0 -2px 3px rgba(255,255,255,1),
0 4px 2px rgba(0,0,0,.3),
0 8px 26px rgba(0,0,0,.5);
text-align: center;
color: rgb(50,50,50);
}
</style>

<body>
<header>
<h1>This is a Test</h1>
</header>
</body>
</html>


separator

On Microsoft embracing HTML5 instead of Silverlight

There are lots of posts these days about Microsoft embracing HTML5 over Silverlight. One prominent post is from Mary-Jo Foley. She follows Microsoft closely.


About two months ago, I made a personal decision not to pursue learning and developing in Silverlight and concentrate my efforts in improving my current skills in JavaScript, jQuery, CSS, HTML(5) and other related technologies. What I am hearing today validates my decision.

The areas where I find Silverlight being most useful are in:

  • Windows Phone 7 applications
  • Video playing and streaming
  • Higher end games
  • Heavy data entry Internal Line of Business applications (LOB) replacing legacy WinForm Apps or new apps in favor of WPF. #1 is the most important one.

 

I have yet to see LOB applications in the web projects I have worked on which couldn't be satisfied with the use of AJAX and optimized web services to give them the feel of a desktop application.I have seen some cool UI effects in some public web pages. When I see some of these, I expecting Flash or Silverlight behind the scenes. When I right-mouse click, to my surprise, I notice the page is not using Flash or Silverlight. Web developers are getting more creative and pushing the envelope on what web standards and browsers without plugins can do.

I believe when Internet Explorer 9 is released and being adapted by most IE users, there will be a big transformation in what a web page can do. Web development will be more fun to create and use.
Apple with its blocking of Flash and Silverlight in its devices is a major force in getting developers abandon proprietary standards in favor of open ones.

When you're developing an application or service to meet the public demands, you should follow what users are using instead of going after a technology you have a personal interest in. A basic technology, which works for most users, is better than some eye candy which doesn't last long. An app made for tens of millions of users is better than a few thousand. Follow the money.

separator