div.css3droppanel {position: relative;margin-bottom: 1em;}
div.css3droppanel > div {height: 10px;padding: 5px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;background: #b5e5e0;position: relative;opacity: 0;-moz-transition: all 0.2s ease-in-out 0.1s;-o-transition: all 0.2s ease-in-out 0.1s;-webkit-transition: all 0.2s ease-in-out 0.1s;transition: all 0.2s ease-in-out 0.1s;}
div.css3droppanel:after {content: '';display: block;position: absolute;width: 100%;height: 10px;box-shadow: 0 3px 8px gray, 3px 3px 4px brown inset;background: #5a1619;background: -moz-linear-gradient(top, rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(56,38,39,0.72) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(56,38,39,0.72)));background: -webkit-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);background: -o-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);background: -ms-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);background: linear-gradient(to bottom, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);}
div.css3droppanel input[type="checkbox"] {position: absolute;right: 50px;width: 60px;height: 42px;bottom: -34px;z-index: 10;cursor: pointer;opacity: 0;}
div.css3droppanel input[type="checkbox"]:checked ~ div {height: 250px;opacity: 1;overflow: auto;}
div.css3droppanel label {position: absolute;right: 50px;width: 60px;height: 42px;bottom: -34px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;cursor: pointer;z-index: 5;background: #5a1619;background: -moz-linear-gradient(top, rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(124,31,32,0.72) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(124,31,32,0.72)));background: -webkit-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);background: -o-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);background: -ms-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);background: linear-gradient(to bottom, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset;}
div.css3droppanel label:hover {
box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset, 0 0 15px rgba(255,255,255,0.8) inset;}
div.css3droppanel label:after {content: '';position: absolute;display: block;border: 12px solid transparent;border-color: white transparent transparent transparent;top: 18px;left: 18px;box-shadow: 0 0 7px gray inset;}
Anda sedang membaca sebuah artikel yang berjudul Modifikasi Spoiler Box Dengan CSS3 efek Toggle, Silahkan download software, games, Antivirus ataupun tutorial sepuasnya secara gratis di czikart software dan tetap kunjungi czikart software. Dan bagi yang ingin Copy Paste, Silahkan sertakan link sumbernya karena kami tidak bertanggung jawab jika blog/web anda dihapus oleh google kareana tidak menyertakan link sumbernya sesuai aturan dari google, Semoga artikel tersebut bermanfaat untuk anda, Mohon maaf apabila konten yang anda baca rusak atau salah dalam penulisan. Jika ada pertanyaan, kritik, dan saran yang ingin di sampaikan silahkan komentar.
Posted in: Tutorial Blog
0 komentar:
Posting Komentar