Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: CSS icon list - Google Style



Ranking: +1   Kommentare: 2   |   Bewertung: Keine Berechtigung!  

Eine Google+ / Mobile Me icon liste
Einfach shcnell das CSS dafuer,
Farben etc. muesst ihr natuerlich nach belieben anpassen.

Icons: http://www.webdesignshock.com/google-plus-interface-icons/


Code:






<ul class="icons">

                <li class="icon_left"><img src="" class="icon" alt="settings" /></li>

                <li class="icon_middle_first"><img src="" class="icon" alt="settings" /></li>

                <li class="icon_left"><img src="" class="icon" alt="settings" /></li>

                <li class="icon_middle_first"><img src="" class="icon" alt="settings" /></li>

            </ul>






Code:




ul.icons{

    

}



ul.icons img{

    vertical-align: middle;

    margin-left:10px;

}



ul.icons li{

    line-height:30px;

    width:40px;

    float:left;

    border:solid 1px #191919;

    background:#272727;

}

ul.icons li:hover{

    background:#2e2d2d;

    cursor:pointer;

}



ul.icons li.icon_left{

    -moz-border-radius-bottomleft: 3px;

    -moz-border-radius-topleft: 3px;

    border-right:none;

}



ul.icons li.icon_right{

    -moz-border-radius-bottomright: 3px;

    -moz-border-radius-topright: 3px;

    border-left:none;

}



ul.icons li.icon_middle{

    border-right:none;

}



ul.icons li.icon_middle_first{

    border-right:none;

}






Veröffentlicht von: dbrandt
Veröffentlicht am: 29 Nov. 2011
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: CSS g+ icons liste navigation


Themenverwandte Tutorials


Kommentar(e) (2)


dbrandt sagt:

:EDIT:
Hatte das html fuer die list flash gepasted,

ul
li class=icon_left
li class=icon_middle_first
li class=icon_middle
li class=icon_middle
li class=icon_middle_last
li class=icon_right
ul


Zuletzt bearbeitet am: 30 Nov. 2011 05:58:07

30 Nov. 2011 05:21:13 • Antworten


dbrandt sagt:

Dieser Beitrag wurde leider gelöscht!

Zuletzt bearbeitet am: 30 Nov. 2011 03:05:39

30 Nov. 2011 03:05:14 •



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder