Erstellung von 3 CSS-Listen mit Hintergrund-Grafiken

Wie Sie 3 coole Listen nur mit CSS erstellen können

3 schöne Beispiele von CSS-Listen

Auf der Webseite von FreshDesignWeb habe ich ein interessantes und leicht verständliches Tutorial über die

entdeckt. Ich habe die 3 Originalbespiele ein wenig abgewandelt und möchte Ihnen meine Variationen nachstehend ausführlich vorstellen und erläutern:

Demo ansehen | Zipdatei herunterladen

1. Erstellung einer ungeordneten Liste mit CSS-Sprites als Hintergrundgrafik

CSS-Sprites bezeichnen eine einzelne Grafikdatei, die viele Symbole und Icons enthält. Diese zusammengefassten Grafiken fungieren als Sprites und dienen dazu, die Ladezeit von Webseiten zu minimieren.

HTML-Datei ansehen:

<div id="listsprites">
        <ul>
            <li class="facebook"><a href="http://www.freshdesignweb.com/best-sale-premium-responsive-wordpress-themes-2012.html">Responsive WordPress Themes 2012</a></li>
            <li class="twitter"><a href="http://www.freshdesignweb.com/best-responsive-joomla-templates-free-premium.html">Best Responsive Joomla Templates</a></li>
            <li class="rss"><a href="http://www.freshdesignweb.com/best-drupal-responsive-theme-free-premium.html">Best Drupal Responsive Theme</a></li>
            <li class="digg"><a href="http://www.freshdesignweb.com/best-premium-responsive-magento-themes-2012.html">Best Responsive Magento Themes</a></li>
            <li class="youtube"><a href="http://www.freshdesignweb.com/best-responsive-magazine-news-wordpress-themes.html">Responsive Magazine WordPress</a></li>
        </ul>
</div>

Das Cascading Style Sheet (CSS) als Formatierungsgrundlage für die CSS-Liste sieht wie folgt aus.

CSS-Datei ansehen:

/* css list sprites background ------------- */

#listsprites {float:left; margin:0 0 0 150px; font:14px/16px 'lucida grande', tahoma, verdana, arial, sans-serif;}
#listsprites a {border:0; color:#3B5998; text-decoration:none; line-height:30px;}
#listsprites a:hover,
#listsprites a:focus,
#listsprites a:active {text-decoration:underline; background:transparent;}
#listsprites .user {overflow:hidden; margin:0 0 10px;}
#listsprites .user img {float:left; margin:0 8px 0 0;}
#listsprites .user a {display:block;}
#listsprites .fn {padding:3px 0; font-weight:bold;}
#listsprites ul {width:290px; padding:0; margin:0; list-style:none;}
#listsprites li a {display:block; padding:3px 8px 4px 6px;}
#listsprites li a:hover,
#listsprites li a:focus,
#listsprites li a:active {
        text-decoration:underline;
    -moz-box-shadow: 0px 0px 3px #403f40;
    -webkit-box-shadow: 0px 0px 3px #403f40;
    box-shadow: 0px 0px 3px #403f40;
        }
#listsprites li.current a {font-weight:bold; color:#333; background:#D8DFEA;}

#listsprites li a:before {
    content:"";
    float:left;
    width:28px;
    height:30px;
    margin:0 6px 0 0;
    background:url(images/sprite.png);
}

#listsprites .facebook a:before {background-position:0 -0px;}
#listsprites .twitter a:before {background-position:0 -35px;}
#listsprites .rss a:before {background-position:0 -70px;}
#listsprites .digg a:before {background-position:0 -108px;}
#listsprites .youtube a:before {background-position:0 -148px;}

/* End css list sprites background -------------- */

Hier ist dann das Ergebnis der fertigen CSS-Liste mit CSS-Sprites als Hintergrund-Grafik:

01 -CSS-Liste mit CSS-Sprites

2. Geordnete Liste mit blauen Kreisen als Hintergrund-Farbe

In diesem Beispiel kommt keine Grafik, sondern nur eine Hintergrundfarbe zum Einsatz. Es handelt sich um einen blauen Kreis, in welchen die fortlaufende Zahlen der Liste eingetragen werden.

HTML-Datei ansehen:

<div class="numberlist">
 <ol>
  <li><a href="http://www.freshdesignweb.com/best-premium-wordpress-themes-april-2013.html">40 Best Premium WordPress Themes April 2013</a></li>
  <li><a href="http://www.freshdesignweb.com/45-best-wordpress-themes-for-january-2013.html">45 Best Sale WordPress Themes for January 2013</a></li>
  <li><a href="http://www.freshdesignweb.com/best-premium-wordpress-themes-for-february-2013.html">40 Best Premium WordPress Themes for Feb 2013</a></li>
  <li><a href="http://www.freshdesignweb.com/45-best-responsive-wordpress-themes-march-2013.html">45 Best Responsive WordPress Themes March 2013</a></li>
  <li><a href="http://www.freshdesignweb.com/best-sale-premium-responsive-wordpress-themes-2012.html">107 Best Sale Premium Responsive WordPress Themes 2012</a></li>
  <li><a href="http://www.freshdesignweb.com/best-sale-website-templates-for-april-2013-want-excellent.html">40 Best Sale Website Templates for April 2013</a></li>
 </ol>
</div>

Das ist dann die fertige CSS-Datei:

/* css list with numeber circle background -------------- */
.numberlist{
        width:580px;

}
.numberlist ol{
                    counter-reset: li;
                                list-style: none;
                                *list-style: decimal;
                                font: 15px 'trebuchet MS', 'lucida sans';
                                padding: 0;
                                margin-bottom: 4em;
                                margin-left: 8em;

}
.numberlist ol ol{
                                margin: 0 0 0 2em;
                        }

.numberlist a{
                                position: relative;
                                display: block;
                                padding: .4em .4em .4em 2em;
                                *padding: .4em;
                                margin: .5em 0;
                                background: #FFF;
                                color: #444;
                                text-decoration: none;
                                -moz-border-radius: .3em;
                                -webkit-border-radius: .3em;
                                border-radius: .3em;
                        }

.numberlist a:hover{
                                background: #cbe7f8;
                                text-decoration:underline;
                        }
.numberlist a:before{
                                content: counter(li);
                                counter-increment: li;
                                position: absolute;
                                left: -1.3em;
                                top: 50%;
                                margin-top: -1.3em;
                                background: #87ceeb;
                                height: 2em;
                                width: 2em;
                                line-height: 2em;
                                border: .3em solid #fff;
                                text-align: center;
                                font-weight: bold;
                                -moz-border-radius: 2em;
                                -webkit-border-radius: 2em;
                                border-radius: 2em;
                                color:#FFF;
                        }

/* End css list with numeber circle background -------------- */

Fertige geordnete Liste mit blauen Kreisen ansehen:

02 - CSS-Liste mit blauen Farbkreisen

3. Erstellung einer Liste mit einem gelben Pfeil als Listen-Symbol

Liste Nummer 3 hat als Listensymbol einen kleinen gelben Pfeil.

HTML-Datei ansehen:

<div class="imglist">
 <ul>
 <li><a href="http://www.freshdesignweb.com/best-premium-wordpress-themes-april-2013.html">40 Best Premium WordPress Themes April 2013</a></li>
  <li><a href="http://www.freshdesignweb.com/45-best-wordpress-themes-for-january-2013.html">45 Best Sale WordPress Themes for January 2013</a></li>
  <li><a href="http://www.freshdesignweb.com/best-premium-wordpress-themes-for-february-2013.html">40 Best Premium WordPress Themes for Feb 2013</a></li>
  <li><a href="http://www.freshdesignweb.com/45-best-responsive-wordpress-themes-march-2013.html">45 Best Responsive WordPress Themes March 2013</a></li>
  <li><a href="http://www.freshdesignweb.com/best-sale-premium-responsive-wordpress-themes-2012.html">107 Best Sale Premium Responsive WordPress Themes 2012</a></li>
  <li><a href="http://www.freshdesignweb.com/best-sale-website-templates-for-april-2013-want-excellent.html">40 Best Sale Website Templates for April 2013</a></li>
 </ul>
</div>

CSS-Formatierung ansehen:

/* css list style with arrow images  -------------- */
.imglist ul{
        margin:0 0 0 140px;
}
.imglist li{
        font-size:14px;
        margin-left:25px;
        padding:0px;
        list-style:url(images/arrow.png);
        line-height:30px;
}
.imglist li a:link, .imglist li a:visited{
        color:#1e598e;
        text-decoration:none;

}
.imglist li a:hover{
        color:#0A7CAF;
        padding:2px;
    -moz-box-shadow: 0px 0px 12px #9e9ea3;
    -webkit-box-shadow: 0px 0px 12px #9e9ea3;
    box-shadow: 0px 0px 12px #9e9ea3;
    border:none 0px #000000;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

/* End css list style with arrow images  -------------- */

CSS-Liste mit gelbem Pfeil ansehen:

Demo ansehen | Zipdatei herunterladen

Tweet about this on TwitterShare on Google+7Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *