• Belajar CSS:Target
• Contoh CSS:Target
• (HTML) CSS:Target
• Baca Ini Perlu!

Berhari-hari belajar CSS target akhirnya sekarang bisa, walaupun sedikit-sedikit :p. Sedikit-sedikit lama-lama menjadi bukit :D <-Pepatah Motivasi.

#konten{
width:500px;
margin:auto;
font-size:1.4em;
}
#konten ul, div > div {
margin-bottom:1em;
}
#konten li {
list-style:none;
display:inline;
}
#konten > div {
-webkit-transition: height 2.5s;
-moz-transition: height 2.5s;
-o-transition: height 2.5s;
-webkit-transition:all 900ms linear;
-moz-transition:all 900ms linear;
-o-transition:all 900ms linear;
-ms-transition:all 900ms linear;
transition:all 900ms linear;
display:block;width:0px;margin:0 auto;height:0px;overflow:hidden;position:relative
}
#konten > div:target {
color:#B1B1B1;
text-shadow: 1px 1px 1px #000, 0 0 0 rgba(0, 0, 0, 0.2), 4px 4px 5px #B1B1B1;
display:block;
width:auto;
max-width:100%;
margin:0 auto;
padding:0.5%;
height:auto;
overflow:auto;
border-radius:3px;
-webkit-transition: height 2.5s;
-moz-transition: height 2.5s;
-o-transition: height 2.5s;
-webkit-transition:all 900ms linear;
-moz-transition:all 900ms linear;
-o-transition:all 900ms linear;
-ms-transition:all 900ms linear;
transition:all 900ms linear;
}
#konten > div p:first-line {
font-variant:small-caps;
font-size:1.2em;
}
#konten li{
font-family:verdana;
font-size:10px;
color:#000;
background:#ddd;
padding:5px;
height:auto;
width:50px;
margin-top:5px;
border-radius:20px;
text-align:center;
box-shadow:2px 1px 1px #000;
}
#konten a{
color:#000;
text-decoration:none;
}
#konten li:active{
position:relative;
top:2px;
border: 1px solid hsla(0,0%,0%,.25);
border-radius:10px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;}​
#b1{background:#000;}

<div id="konten">
<ul>
<li><a href="#b1">Contoh1</a></li>
<li><a href="#b2">Contoh2</a></li>
<li><a href="#b3">Contoh3</a></li>
<li><a href="#b4">Contoh4</a></li>
</ul>
<div id="b1">
<p>Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1 Contoh1Contoh1</p> </div>
<div id="b2">
<p>Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2 Contoh2</p>
</div>
<div id="b3">
<p>Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3 Contoh3</p>
</div>
<div id="b4">
<p>Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4 Contoh4</p>
</div>
</div>

Selamat Berkreasi :D