Sebuah hidangan media umum yang terbuat dari (hampir) murni CSS3. Di sini Saya memakai kombinasi CSS3 Gradien dan Box Shadow untuk membuat efek realistis. Pada dasarnya, tombol panah di sisi kanan ialah pseudo elemen dari elemen <label> yang lalu Saya tutupi dengan elemen checkbox.
Setelah itu, Saya menyembunyikan wujudnya dengan CSS transparasi.
Jadi, dikala Anda mengeklik tombol drop down di bab kanan, maka yang terjadi bahu-membahu ialah Anda sedang mengeklik elemen checkbox transparan yang berada di atas elemen palsu (pseudo elemen) dari <label>:
HTML
<div class="glossy-selectbox"> <input type="checkbox"> <label data-default="Share This Post!" data-focus="Select one of the social media service..."></label> <ul> <li><a class="social-rss" href="#" target="_blank">RSS Feed</a></li> <li><a class="social-facebook" href="#" target="_blank">Facebook</a></li> <li><a class="social-twitter" href="#" target="_blank">Twitter</a></li> <li><a class="social-google" href="#" target="_blank">Google+</a></li> </ul> </div>CSS
/* * Pure CSS3 (with some data URI images for the social media icons) Drop Down Menu for Social Media Sharing * Author: Taufik Nurrohman * URL: https://plus.google.com/108949996304093815163/about */ .glossy-selectbox { display:inline-block; font:normal bold 12px Arial,Sans-Serif; position:relative; width:300px; background-color:#111; text-align:left; /* CSS3 Browser */ background-image:-webkit-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%); background-image:-moz-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%); background-image:-ms-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%); background-image:-o-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%); background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%); /* IE only */ filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111'); -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; -webkit-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7); -moz-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7); box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7); } .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:25%; right:5px; z-index:4; } .glossy-selectbox:after { border-color:#999 transparent transparent; top:auto; bottom:25%; } .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:45px; color:rgba(255,255,255,.5); padding:0 15px; -webkit-transition:all 0s ease-out; -moz-transition:all 0s ease-out; -ms-transition:all 0s ease-out; -o-transition:all 0s ease-out; transition:all 0s 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:0 0; position:absolute; top:100%; left:14px; right:14px; background-color:#222; border:1px solid #111; -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4); -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4); box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px 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-top:1px solid #111; border-right:1px solid #111; 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 .social-rss:before {background-image:url('img/social_rss.png');} .glossy-selectbox .social-facebook:before {background-image:url('img/social_facebook.png');} .glossy-selectbox .social-twitter:before {background-image:url('img/social_twitter.png');} .glossy-selectbox .social-google:before {background-image:url('img/social_google.png');} .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; }