Posts Tagged ‘cascading style sheets’

Techie Tip of the Week: Adding drop shadow effects using box-shadow (CSS3)

Friday, February 17th, 2012

A few months ago, we talked about how you can use cascading style sheets to add a drop-shadow effect to text by using the CSS property text-shadow.

Today, we’d like to show how you can add a drop-shadow effect to box elements, using the new CSS3 property box-shadow.

For example, suppose you want to have the words Stanford University highlighted in light grey background with a cardinal red drop shadow, here’s the code you would write:

<!DOCTYPE HTML>
<html>
<head>
<title>Stanford University</title>
<style type="text/css">
h1
   {
   -moz-box-shadow: 5px 10px 15px #820000;
   -webkit-box-shadow: 5px 10px 15px #820000;
   box-shadow: 5px 10px 15px #820000;
   background: #eee;
   }
</style>
</head>
<body>
<h1>Stanford University</h1>
</body>
</html>

And here is how it will look (in most browsers — visit http://caniuse.com/#search=box-shadow for details):
Stanford University with a drop-shadow

Techie Tip of the Week: Use any font on a webpage with @fontface! (CSS3)

Friday, November 18th, 2011

Prior to CSS3 (Cascading Style Sheets specification 3), webmasters were limited to only using those fonts found on most computers (“web-safe” fonts). But with the advent of CSS3, you can now use the @fontface rule to use ANY font on ANY web page!

This rule works on most modern browsers (in Internet Explorer 8 and earlier, only “embedded open-type” fonts work; otherwise, most other browsers support it fully).  For details, visit http://caniuse.com/#feat=eot.

To apply a @fontface rule:

  1. Make sure you have uploaded your font to your web server, or are using one of the public font repositories (http://www.google.com/webfonts and http://www.fontsquirrel.com are good choices).
  2. In the CSS for your web page, use the following code:
@font-face {
  font-family: 'Name-Of-Font';
  font-style: normal;
  font-weight: normal;
  src: local('Name-Of-Font'), url('http://www.website-where-font-is-located/Name-Of-Font.ttf') format('truetype');

For example, if I want to change my h1′s to be in the Tangerine font and size 42px, and the Tangerine font is found on the Google Font site, here are the HTML and CSS codes I would use:

<!doctype html>
<html>
<head>
<title>My Web Site</title>
<style type="text/css">
@font-face
{
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/static/fonts/tangerine/v1/HGfsyCL5WASpHOFnouG-RCZ2oysoEQEeKwjgmXLRnTc.ttf') format('truetype');
}
h1 {font-family: Tangerine; font-size: 42px;}
</style>
</head>

<body>
<h1>This Heading 1 text should be in Tangerine font, a font not found on most people's machines!</h1>
</body>
</html>

and here is how it would look:

Techie Tip of the Week: Creating Linear Gradients Using CSS

Friday, July 15th, 2011

Want to add a linear gradient effect on your web content? Now you can do so with CSS!

  • Webkit browsers (e.g., Safari, Chrome)
    • background: -webkit-gradient(linear, starting point, ending point,
      starting color, ending color);
    • For example –
      .gradient {background: -webkit-gradient(linear, left top, right bottom, from(#000), to(#900);>
  • Gecko browsers (e.g., Firefox)
    • background: -moz-linear-gradient(starting point,  starting color,  ending color);
    • For example –
  • Internet Explorer
    • filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='starting color', endColorstr='ending color');
    • For example  – .gradient {filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#990000');>

Here’s a complete example:
<!DOCTYPE html> <html> <head> <title>Linear Gradient</title> <style type="text/css"> h1 {  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#820000', endColorstr='#ffffff'); /* for IE */       background: -webkit-gradient(linear, left top, left bottom, from(#820000), to(#fff));       background: -moz-linear-gradient(top,  #820000,  #fff);    }  </style> </head>  <body> <h1>This heading is in a gradient.</h1> </body> </html>
heading in a gradient - red to white


Want to learn more great Cascading Style Sheets tips? Come take one of our CSS classes:

Techie Tip of the Week – CSS: Hiding Content using display:none vs. visibility:hidden

Friday, April 22nd, 2011

Using Cascading Style Sheets, there are two different ways you can hide objects from view — visibility: hidden; and display: none;

  • With the display: none; declaration, elements are removed from view and take up no space. When you use this declaration, it is as if the elements were never placed on the web page.
  • With the visibility: hidden; declaration, elements are merely hidden from view. They still occupy the same place that they originally would have taken up.

In this week’s tip, we’ll explore the differences between the two.


Example — Neither display:none nor visibility:hidden

This is the original web page, with 3 flowers — Dandelion, Spiked, and Sunflower. To produce this web page:

3 flowers

The HTML and CSS code are:

<!DOCTYPE HTML>
<html>
<head>
<title>Flowers</title>
<style type="text/css">
.hidden { visibility: hidden; }
.nodisplay { display: none; }
</style>
</head>
<body>
 <img src="Dandelion.gif" />
 <img src="Spiked.gif" />
 <img src="Sunflower.gif" />
</body>
</html>

Example — display:none;

In this example, we will use display:none; to remove the Spiked flower. Note that it is as if the Spiked flower never existed. To produce this web page:

2 flowers - just Dandelion and Sunflower

The HTML and CSS code are:

<!DOCTYPE HTML>
<html>
<head>
<title>Flowers</title>
<style type="text/css">
.hidden { visibility: hidden; }
.nodisplay { display: none; }
</style>
</head>
<body>
 <img src="Dandelion.gif" />
 <img src="Spiked.gif" class="nodisplay" />
 <img src="Sunflower.gif" />
</body>
</html>

Example — visibility:hidden;

In this example, we will use visibility:hidden; to remove the Spiked flower. Note that the space that the Spiked flower would have taken up remains — but it’s empty. To produce this web page:

2 flowers -- Dandelion with a space the size of Spiked followed by the Sunflower

The HTML and CSS code are:

<!DOCTYPE HTML>
<html>
<head>
<title>Flowers</title>
<style type="text/css">
.hidden { visibility: hidden; }
.nodisplay { display: none; }
</style>
</head>
<body>
 <img src="Dandelion.gif" />
 <img src="Spiked.gif" class="hidden" />
 <img src="Sunflower.gif" />
</body>
</html>

Techie Tip of the Week – CSS: Adding Drop Shadows to Text

Friday, April 15th, 2011

Want to add a drop shadow effect on your web content? Using Cascading Style Sheets, it’s a breeze!

To add a drop shadow effect, the CSS declaration is:

text-shadow

To define the text-shadow, you must define four values:

  1. The color of the text-shadow (using the 6-digit hex, 3-digit hex, color name, or RGB method)
  2. The X-coordinate of the text-shadow, relative to the text (distance towards the right)
  3. The Y-coordinate of the text-shadow, relative to the text (distance downwards)
  4. The blur radius (amount of blurriness) of the text-shadow.

For example, suppose you write the following CSS (highlighted in yellow) and HTML code:

<!DOCTYPE HTML>
<html>
<head>
<title>Stanford Widget Department</title>
<style type="text/css">
 h1 {text-shadow: #820000 5px 3px 5px;} 
</style>
</head>
<body>
 <h1>Stanford University Department of Widgets</h1>
</body>
</html>

This would be the result:

Stanford University Department of Widgets (black font with a cardinal red drop shadow)

Want to learn more great Cascading Style Sheets tips? Come take one of our CSS classes:

For more information about Tech Training and our classes, visit http://techtraining.stanford.edu/.