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 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)


Quellcode: (flashy_links.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" lang="de" xml:lang="de">
   <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);
<div id="wrapper">
    <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>
</div> <!-- end wrapper -->


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; }

Kommentar verfassen

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

Du kommentierst mit Deinem Abmelden / Ändern )


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


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: