Hauptmenü
Weitere Optionen
Tutorial suchen(X)HTML / CSS Tutorial: CSS icon list - Google Style
+1
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/
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:
Schlüsserwörter:  CSS g+ icons liste navigation |
Themenverwandte Tutorials
- AJAX Spiegeleffekt
- Wie erstelle ich eine Prepage (Grafiken + Code)
- Simple Dropdown-Navigation mit HTML/CSS
- Kunstoff Navigation
- Outline fix für Links
- elastische Vorschaubilder mit jQuery
- Horizontale Navigation mit Listen
- [TUTORIAL] CSS/HL2 Models in Cinema 4D Importiern/Import CSS/HL2 Models to Cinema 4D
- Tool Tip mit Hilfe von Jquery - Basics
- Navigationstrenner,Sektionstrenner
Kommentar(e) (2)
dbrandt sagt:
Dieser Beitrag wurde leider gelöscht!
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!
: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 •