Belajar memang perlu pengorbanan dan usaha. Apalagi jika web yang menyajikan tutorial keren-keren disajikan dengan bahasa
China
Mentok-mentok ya pakai google translate :D Koben akan berbagi satu web keren dengan kategori utama meliputi dari CSS3, HTML5, JavaScript dan jQuery. Karena gue cuma modal otodidak, kulihat-lihat artikel disana yg ada demonya saja ;)) Percaya tidak susunan batu bata dapat dibuat memakai attribute CSS!
The following demo works only on mozilla, because I only use mozilla support code :D
Beben Koben
si Bloglang
anu Ganteng Kalem Tea !!!
.batu_bata {
width: 444px;
height: 300px;
margin: 10px auto;
font-family: 'Shadows Into Light', cursive;
text-align: center;
color: #000;
background-image: -moz-radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(0, 0, 0, 0.8) 100%), -moz-linear-gradient(top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px), -moz-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), -moz-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%), -moz-linear-gradient(left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px), -moz-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), -moz-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%);
background-image: -webkit-radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(0, 0, 0, 0.8) 100%), -webkit-linear-gradient(top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px), -webkit-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), -webkit-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%), -webkit-linear-gradient(left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px), -webkit-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), -webkit-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%);
background-image: -ms-radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(0, 0, 0, 0.8) 100%), -ms-linear-gradient(top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px), -ms-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), -ms-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%), -ms-linear-gradient(left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px), -ms-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), -ms-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%);
background-image: -o-radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(0, 0, 0, 0.8) 100%), -o-linear-gradient(top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px), -o-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), -o-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%), -o-linear-gradient(left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px), -o-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), -o-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%);
background-image: radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(0, 0, 0, 0.8) 100%), linear-gradient(top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px), linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%), linear-gradient(left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px), linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%);
background-position: 0 0, 0 0, 13px 0, 28px 15px, 0 0, 0 0, 15px 15px;
background-size: 600px 300px, 30px 30px, 30px 30px, 30px 30px, 30px 30px, 30px 30px, 30px 30px;
background-repeat: repeat
}
.batu_bata p {
padding: 50px;
margin: 0;
font-size: 50px;
color: #eee;
line-height: 50px;
text-shadow: 1px 5px 3px #000;
}
Mark Up HTML
<div class="batu_bata">
<p>YOUR CONTENT BLAH BLEH BLOH HERE</p>
</div>Mau navigasi menu keren punya!!!
Kode CSSul.radial, ul.radial ul {
padding: 0;
margin: 0;
list-style: none
}
ul.radial {
width: 80px;
height: 80px;
position: relative;
z-index: 100;
margin: 190px auto
}
ul.radial > li > a {
display: block;
width: 80px;
height: 80px;
background: #fff;
border-radius: 80px;
overflow: hidden;
text-align: center
}
ul.radial ul {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 80px;
height: 80px
}
ul.radial ul li {
width: 0;
height: 1px;
position: absolute;
left: 50%;
top: 50%;
border-left: 0px solid #ddd;
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
transform-origin: 0px 0px
}
ul.radial ul li a {
display: block;
width: 50px;
height: 50px;
position: absolute;
left: -25px;
top: -25px;
border-radius: 50px;
color: #fff;
background: #f00;
overflow: hidden;
text-align: center;
background-image: -webkit-radial-gradient(circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 100%);
background-image: -moz-radial-gradient(circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 100%);
background-image: -ms-radial-gradient(circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 100%);
background-image: -o-radial-gradient(circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 100%);
background-image: radial-gradient(circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 100%);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2)
}
ul.radial li a img {
border: 0;
position: absolute;
top: 50%;
left: 50%;
margin-top: -24px;
margin-left: -24px
}
ul.radial ul li:nth-child(1) {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: .5s 1.75s;
-moz-transition: .5s 1.75s;
-ms-transition: .5s 1.75s;
-o-transition: .5s 1.75s;
transition: .5s 1.75s
}
ul.radial ul li:nth-child(2) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: .5s 1.5s;
-moz-transition: .5s 1.5s;
-ms-transition: .5s 1.5s;
-o-transition: .5s 1.5s;
transition: .5s 1.5s
}
ul.radial ul li:nth-child(3) {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s 1.25s;
-moz-transition: .5s 1.25s;
-ms-transition: .5s 1.25s;
-o-transition: .5s 1.25s;
transition: .5s 1.25s
}
ul.radial ul li:nth-child(4) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: .5s 1s;
-moz-transition: .5s 1s;
-ms-transition: .5s 1s;
-o-transition: .5s 1s;
transition: .5s 1s
}
ul.radial ul li:nth-child(5) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: .5s 0.75s;
-moz-transition: .5s 0.75s;
-ms-transition: .5s 0.75s;
-o-transition: .5s 0.75s;
transition: .5s 0.75s
}
ul.radial ul li:nth-child(6) {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: .5s 0.5s;
-moz-transition: .5s 0.5s;
-ms-transition: .5s 0.5s;
-o-transition: .5s 0.5s;
transition: .5s 0.5s
}
ul.radial ul li:nth-child(7) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: .5s 0.25s;
-moz-transition: .5s 0.25s;
-ms-transition: .5s 0.25s;
-o-transition: .5s 0.25s;
transition: .5s 0.25s
}
ul.radial ul li:nth-child(8) {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s
}
ul.radial ul li:nth-child(1) a {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: .5s 1.75s;
-moz-transition: .5s 1.75s;
-ms-transition: .5s 1.75s;
-o-transition: .5s 1.75s;
transition: .5s 1.75s
}
ul.radial ul li:nth-child(2) a {
-webkit-transform: rotate45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: .5s 1.5s;
-moz-transition: .5s 1.5s;
-ms-transition: .5s 1.5s;
-o-transition: .5s 1.5s;
transition: .5s 1.5s
}
ul.radial ul li:nth-child(3) a {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s 1.25s;
-moz-transition: .5s 1.25s;
-ms-transition: .5s 1.25s;
-o-transition: .5s 1.25s;
transition: .5s 1.25s
}
ul.radial ul li:nth-child(4) a {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: .5s 1s;
-moz-transition: .5s 1s;
-ms-transition: .5s 1s;
-o-transition: .5s 1s;
transition: .5s 1s
}
ul.radial ul li:nth-child(5) a {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: .5s .75s;
-moz-transition: .5s .75s;
-ms-transition: .5s .75s;
-o-transition: .5s .75s;
transition: .5s .75s
}
ul.radial ul li:nth-child(6) a {
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: .5s .5s;
-moz-transition: .5s .5s;
-ms-transition: .5s .5s;
-o-transition: .5s .5s;
transition: .5s .5s
}
ul.radial ul li:nth-child(7) a {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: .5s .25s;
-moz-transition: .5s .25s;
-ms-transition: .5s .25s;
-o-transition: .5s .25s;
transition: .5s .25s
}
ul.radial ul li:nth-child(8) a {
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
-ms-transform: rotate(-225deg);
-o-transform: rotate(-225deg);
transform: rotate(-225deg);
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s
}
ul.radial li:hover ul {
width: 300px;
height: 300px;
left: -110px;
top: -110px
}
ul.radial li:hover ul li:nth-child(1) {
border-left-width: 150px;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s
}
ul.radial li:hover ul li:nth-child(2) {
border-left-width: 170px;
-webkit-transition: .5s .25s;
-moz-transition: .5s .25s;
-ms-transition: .5s .25s;
-o-transition: .5s .25s;
transition: .5s .25s
}
ul.radial li:hover ul li:nth-child(3) {
border-left-width: 160px;
-webkit-transition: .5s .5s;
-moz-transition: .5s .5s;
-ms-transition: .5s .5s;
-o-transition: .5s .5s;
transition: .5s .5s
}
ul.radial li:hover ul li:nth-child(4) {
border-left-width: 90px;
-webkit-transition: .5s .75s;
-moz-transition: .5s .75s;
-ms-transition: .5s .75s;
-o-transition: .5s .75s;
transition: .5s .75s
}
ul.radial li:hover ul li:nth-child(5) {
border-left-width: 170px;
-webkit-transition: .5s 1s;
-moz-transition: .5s 1s;
-ms-transition: .5s 1s;
-o-transition: .5s 1s;
transition: .5s 1s
}
ul.radial li:hover ul li:nth-child(6) {
border-left-width: 110px;
-webkit-transition: .5s 1.25s;
-moz-transition: .5s 1.25s;
-ms-transition: .5s 1.25s;
-o-transition: .5s 1.25s;
transition: .5s 1.25s
}
ul.radial li:hover ul li:nth-child(7) {
border-left-width: 140px;
-webkit-transition: .5s 1.5s;
-moz-transition: .5s 1.5s;
-ms-transition: .5s 1.5s;
-o-transition: .5s 1.5s;
transition: .5s 1.5s
}
ul.radial li:hover ul li:nth-child(8) {
border-left-width: 85px;
-webkit-transition: .5s 1.75s;
-moz-transition: .5s 1.75s;
-ms-transition: .5s 1.75s;
-o-transition: .5s 1.75s;
transition: .5s 1.75s
}
ul.radial li:hover ul li:nth-child(1) a {
width: 100px;
height: 100px;
left: -50px;
top: -50px;
border-radius: 100px;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s
}
ul.radial li:hover ul li:nth-child(2) a {
width: 80px;
height: 80px;
left: -40px;
top: -40px;
border-radius: 80px;
-webkit-transition: .5s .25s;
-moz-transition: .5s .25s;
-ms-transition: .5s .25s;
-o-transition: .5s .25s;
transition: .5s .25s
}
ul.radial li:hover ul li:nth-child(3) a {
width: 110px;
height: 110px;
left: -55px;
top: -55px;
border-radius: 110px;
-webkit-transition: .5s .5s;
-moz-transition:.5s .5s;
-ms-transition: .5s .5s;
-o-transition: .5s .5s;
transition: .5s .5s
}
ul.radial li:hover ul li:nth-child(4) a {
width: 70px;
height: 70px;
left: -35px;
top: -35px;
border-radius: 70px;
-webkit-transition: .5s .75s;
-moz-transition: .5s .75s;
-ms-transition: .5s .75s;
-o-transition: .5s .75s;
transition: .5s .75s
}
ul.radial li:hover ul li:nth-child(5) a {
width: 90px;
height: 90px;
left: -45px;
top: -45px;
border-radius: 90px;
-webkit-transition: .5s 1s;
-moz-transition: .5s 1s;
-ms-transition: .5s 1s;
-o-transition: .5s 1s;
transition: .5s 1s
}
ul.radial li:hover ul li:nth-child(6) a {
width: 70px;
height: 70px;
left: -35px;
top: -35px;
border-radius: 70px;
-webkit-transition: .5s 1.25s;
-moz-transition: .5s 1.25s;
-ms-transition: .5s 1.25s;
-o-transition: .5s 1.25s;
transition: .5s 1.25s
}
ul.radial li:hover ul li:nth-child(7) a {
width: 90px;
height: 90px;
left: -45px;
top: -45px;
border-radius: 90px;
-webkit-transition: .5s 1.5s;
-moz-transition: .5s 1.5s;
-ms-transition: .5s 1.5s;
-o-transition: .5s 1.5s;
transition: .5s 1.5s
}
ul.radial li:hover ul li:nth-child(8) a {
width: 70px;
height: 70px;
left: -35px;
top: -35px;
border-radius: 70px;
-webkit-transition: .5s 1.75s;
-moz-transition: .5s 1.75s;
-ms-transition: .5s 1.75s;
-o-transition: .5s 1.75s;
transition: .5s 1.75s
}
ul.radial > li:hover > a {
background-color: #fff;
-webkit-transition: 0s;
-moz-transition: 0s;
-ms-transition: 0s;
-o-transition: 0s;
transition: 0s
}
ul.radial li:hover ul li a:hover {
background-color: #bbb;
-webkit-transition: 0s;
-moz-transition: 0s;
-ms-transition: 0s;
-o-transition: 0s;
transition: 0s;
}
Kode HTML<ul class="radial">
<li><a href="#LINK"><img src="IMAGE-50px x 50px.PNG"></a>
<ul>
<li><a href="#LINK"><img src="IMAGE-50px x 50px.PNG"></a></li>
<li><a href="#LINK"><img src="IMAGE-50px x 50px.PNG"></a></li>
<li><a href="#LINK"><img src="IMAGE-50px x 50px.PNG"></a></li>
<li><a href="#LINK"><img src="IMAGE-50px x 50px.PNG"></a></li>
<li><a href="#LINK"><img src="IMAGE-50px x 50px.PNG"></a></li>
<li><a href="#LINK"><img src="IMAGE-50px x 50px.PNG"></a></li>
<li><a href="#LINK"><img src="IMAGE-50px x 50px.PNG"></a></li>
<li><a href="#LINK"><img src="IMAGE-50px x 50px.PNG"></a></li>
</ul>
</li>
</ul>
Dua saja contoh konten pilihan gue dari web
html5sum Silahkan kunjungi, dan lihat ada apa saja disana :))
Happy blogging \m/
