Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

CSS-Experimente: Flash-artige Links mit CSS erstellen

Posted by sura1 - 10. September 2008

Bookmark and Share

Auf der Webseite http://green-beast.com/css_experiments habe ich ein interessantes Beispiel entdeckt, wie man ein CSS-Menü so gestaltet, dass es den Anschein hat, als ob es mit Flash hergestellt worden wäre.

Mike Cherim als Betreiber der Webseite sagt dazu folgendes:

Flash is cool but leaves a lot to be desired when it comes to accessibility. This technique, while certainly not completely perfect and cross-browser stable due to caching and rendering differences, offers a reasonable Flash alternative. One that is accessible.

Das fertige Beispiel sieht wie folgt aus:

Beispiel ansehen (Button oder Grafik [oben!] anklicken!)

Beispieldateien downloaden (4 KB zip-file: html_datei, 2 css_dateien,  2 Grafiken)

HTML-Code:

Quellcode: (flashy_links.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>CSS - Flashy Links</title>
   <link href="flashy_links.css" rel="stylesheet" type="text/css" media="screen" />
 <!--[if lte IE 7]>
   <style type="text/css">
     @import url(ie7.css);
   </style>
   <![endif]-->
</head>
<body>
<div id="wrapper">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#" class="on">Page</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div> <!-- end wrapper -->
</body>
</html>

CSS-Dateien:

CSS-Code: (flashy_link.css)

#wrapper { width: 300px;
           margin: 100px 0 0 100px;
           border: 2px solid #669933; }
/*
  placement and width of menu body (ul)
*/
ul {
  width : 140px;
  margin-left: 10px;
}
/*
  style the default links width + padding= width overall. set margin
  between links, set deafult image, etc.
*/
ul a {
  display : block;
  width : 140px;
  height : auto;
  padding : 6px 30px 5px;
  margin-bottom : 4px;
  font-weight : bold;
  color : #fff;
  text-align : left;
  text-transform : uppercase;
  text-decoration : none;
  cursor : pointer; /* needed for opera due to .on styling */
  background : #669933 url(cfl_link.gif);
}
/*
  the bottom margin here is for IE6 only
*/
ul li {
  list-style-type : none;
  margin-bottom : 4px;
}
/*
  hover/focus state of links. Please note that applying added
  font weight or letter-spacing on hover can create nasty unwanted
  effects - such as going from one line to two, unless care is taken.
*/
ul a:hover, ul a:focus, ul a:active {
  background : #669900 url(cfl_link_on.gif);
  color : yellow;
  letter-spacing : 0.3em;
}
/*
  current page styling
*/
ul a.on {
  background : #669933 url(cfl_link_on.gif);
  color : #000;
  text-align : right;
  letter-spacing : 0.3em;
}
/*
  everything here is for IE6 with exception to cursor styling
*/
ul a.on:hover, ul a.on:focus, ul a.on:active {
  background : #669933 url(cfl_link_on.gif);
  color : #000;
  text-align : right;
  letter-spacing : 0.3em;
  cursor : default;
}
/* End Styles */
Quellcode: (ie7.css)

/* =======================
    Stylesheet für den IE.7
    Conditional Comments
    Autor: Franz Sadjak
    Datum: 10.9.2008
    Datei: ie7.css
    ======================= */

ul { margin: 5px 0 0 50px;
     padding: 10px 0; }

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: