Rabu, 16 Oktober 2013
Lorem Ipsum aja deh
Lorem Ipsum aja deh Lorem Ipsum aja dehLorem Ipsum aja dehLorem Ipsum aja deh Lorem Ipsum aja deh Lorem Ipsum aja deh Lorem Ipsum aja deh Lorem Ipsum aja deh Lorem Ipsum aja deh Lorem Ipsum aja deh
Selasa, 15 Oktober 2013
menu dropdown minimalis
.glossy-selectbox {
display:inline-block;
font:normal bold 12px Electrolize,Arial,San-Serif;
position:relative;
width:300px;
float:right;
margin-top:5px;
background-color:#272727;
border:3px double #3d3d3d;
box-shadow:0 0 3px #000;
text-align:left;
}
.glossy-selectbox:before,
.glossy-selectbox:after {
content:"";
display:block;
width:0;
height:0;
border:3px solid transparent;
border-width:5px 3px;
border-bottom-color:#999;
position:absolute;
top:5%;
right:5px;
z-index:4;
}
.glossy-selectbox:after {
border-color:#999 transparent transparent;
top:auto;
bottom:5%;
}
.glossy-selectbox input {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
height:100%;
opacity:0;
z-index:10;
cursor:pointer;
}
.glossy-selectbox label {
display:block;
line-height:30px;
color:rgba(255,255,255,.5);
padding:0 15px;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}
.glossy-selectbox label:before {
content:attr(data-default);
}
.glossy-selectbox label:after {
content:"";
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
border-left:1px solid rgba(0,0,0,.4);
-webkit-border-radius:0 7px 7px 0;
-moz-border-radius:0 7px 7px 0;
border-radius:0 7px 7px 0;
-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}
.glossy-selectbox input:hover + label {
color:white;
}
.glossy-selectbox input:hover + label:after {
background-color:rgba(255,255,255,.04);
}
.glossy-selectbox ul {
margin:0 0;
padding:2px;
position:absolute;
top:100%;
left:14px;
right:14px;
background-color:#272727;
border:1px solid #3c3c3c;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4);
visibility:hidden;
opacity:0;
z-index:99;
}
.glossy-selectbox li {
margin:0 0;
padding:0 0;
list-style:none;
float:left;
width:50%;
display:inline;
}
.glossy-selectbox a {
display:block;
position:relative;
color:#999;
text-decoration:none;
text-shadow:0 0 2px black;
line-height:30px;
border-bottom:1px solid #171717;
border-right:1px solid #171717;
padding:0 15px 0 32px;
-webkit-box-shadow:inset 0 0 0 1px #333;
-moz-box-shadow:inset 0 0 0 1px #333;
box-shadow:inset 0 0 0 1px #333;
/* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.glossy-selectbox a:nth-child(even) {
border-right-width:0;
}
.glossy-selectbox a:before {
content:"";
display:block;
width:16px;
height:16px;
position:absolute;
top:7px;
left:7px;
background-color:transparent;
background-repeat:no-repeat;
background-position:50% 0;
}
.glossy-selectbox a:hover:before {
background-position:50% 100%;
}
.glossy-selectbox a:hover {
background-color:rgba(0,0,0,.2);
color:#ccc;
}
/* On click, then... */
.glossy-selectbox input:checked + label {
color:rgba(255,255,255,.4);
-webkit-transition-duration:.4s;
-moz-transition-duration:.4s;
-ms-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
}
.glossy-selectbox input:checked + label:before {
content:attr(data-focus);
}
.glossy-selectbox input:checked + label:after {
background-color:rgba(0,0,0,.2);
-webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}
.glossy-selectbox input:checked ~ ul {
visibility:visible;
opacity:1;
}
Langganan:
Postingan (Atom)