Posts Tagged ‘css’

Techie Tip of the Week: Setting Opacity with CSS3

Friday, July 20th, 2012

With the advent of CSS3, you can now add opacity levels to your colors and backgrounds on your web site.

One way to add opacity is to use the opacity property:

background: [desired color]; opacity: [opacity level from 0 to 1 -- e.g., .5 is 50%];}

Another way is to use the new rgba (red, green, blue, alpha transparency) or the new hsla (hue, saturation, lightness, alpha transparency) properties:

background: rgba([amount red], [amount green], [amount blue], [alpha transparency level from 0 to 1]);}

background: hsla([amount hue], [amount saturation], [amount lightness], [alpha transparency level from 0 to 1]);}

For example:
20120721-121406.jpg

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: Create Rounded Corners Using CSS3!

Wednesday, November 23rd, 2011

Until the advent of CSS3, if webmasters wanted to create a rounded border, they would need to create it using an image of a rounded border. (Here’s for an example of the old way of creating a rounded border.)

Now, you no longer need to “fake” your rounded corners — no longer do you need to have boxy entries surrounded by pictures of rounded edges. The new CSS3 property border-radius lets you create the elusive rounded corner!

Because CSS3 is not yet a full standard, you will need to use the vendor browser prefixes.

The CSS properties you’ll need to use are -webkit-border-radius, -moz-border-radius, and border-radius

For example, to produce content in a grey H2 with 10 pixels of padding that has 25-pixel rounded corners:

<h2 style=”-webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background: #ccc; padding: 10px;”>This H2 has rounded corners!</h2>

would produce:

This H2 has rounded corners!

Note: As of this writing, border-radius does NOT work in Internet Explorer version 8 or earlier.

For details, visit http://caniuse.com/#search=border-radius

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: CSS Rules You Can Use in HTML Email Newletters

Friday, August 19th, 2011

When designing an HTML Email Newsletter, you need to be careful about using the newer web-creation techniques like HTML5 and Cascading Style Sheets (CSS).

Several popular email clients (in particular, Outlook and Google Mail) cannot understand or process the majority of CSS rules, so if you use them, the email will end up looking bland and ordinary.

Fortunately, Campaign Monitor (a commercial email newsletter service) has put together a Guide to CSS support in email — a web page version, a PDF version, and an Excel spreadsheet version to help you figure out which CSS rules you can use, and when you can use them!


For more information on creating HTML email newsletters, come to our Techie Festival Lecture Creating HTML Email Newsletters!

These days, email isn’t just plain text anymore. In this class, you’ll learn how to create state-of-the-art-looking emails with colors, fonts, and graphics, laid out into columns and sections. We’ll cover the tools and steps you need to take to create beautiful, professional emails, as well as some of the problems you might encounter (and how to fix them!).

Bring your laptop to play along with the presenter! (Demo files will be provided to participants.)

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/.