Den neuen YouTube Menübutton mit HTML und CSS 3 nachbauen
In diesem Video zeige ich euch, wie ihr mit HTML und CSS 3 den Button des Benutzermenüs vom neuen YouTube Design nachbauen könnt.
Begleitende Informationen zum Video
Quelltexte aus dem Video
HTML
<a href="#"><img alt="Avatar" src="1.jpg" />DomesticHacks</a>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #e9e9e9;
}
.userbutton {
color: #555555;
text-decoration: none;
text-shadow: 0px 1px 0px #FFF;
font-size: 12px;
float: left;
height: 31px;
line-height: 31px;
padding: 0px 10px 0px 4px;
white-space: nowrap;
border: 1px solid #dddddd;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0px 1px 1px #fff;
-webkit-box-shadow: 0px 1px 1px #fff;
box-shadow: 0px 1px 0px #fff;
-moz-transition: border 0.2s;
-webkit-transition: border 0.2s;
-o-transition: border 0.2s;
transition: border 0.2s;
}
.userbutton img {
float: left;
display: block;
width: 27px;
height: 27px;
margin: 2px 10px 0px 0px;
border: none;
}
.userbutton:hover {
border-color: #999999;
-moz-box-shadow: 0px 1px 1px #c8c8c8, inset 0px 0px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px #c8c8c8, inset 0px 0px 3px #FFF;
box-shadow: 0px 1px 0px #c8c8c8, inset 0px 0px 3px #FFF;
background-color: #eeeeee;
background-image: -o-linear-gradient(top,#fefefe,#e1dfdf);
background-image: -moz-linear-gradient(top,#fefefe,#e1dfdf);
background-image: -webkit-linear-gradient(top,#fefefe,#e1dfdf);
background-image: linear-gradient(top,#fefefe,#e1dfdf);
}
.userbutton:active,
.userbutton.active {
border-color: #a19f9f;
border-bottom-color: #cccccc;
-moz-box-shadow: inset 0px 1px 1px #bebebe;
-webkit-box-shadow: inset 0px 1px 2px #bebebe;
box-shadow: inset 0px 1px 2px #989898;
background-color: #e1e1e1;
background-image: -o-linear-gradient(top,#e5e5e5,#ddd);
background-image: -moz-linear-gradient(top,#e5e5e5,#ddd);
background-image: -webkit-linear-gradient(top,#e5e5e5,#ddd);
background-image: linear-gradient(top,#e5e5e5,#ddd);
}