CSS 3
CSS
3 merupakan
versi terbaru dari pengembangan css sebelumnya. Peningkatan yang paling mencolok
pada versi ini yaitu peningkatan fitur yang mengarah pada efek animasi, seperti
text effects, border, accordion, crop, dll. Namun yang perlu di ingat tidak
semua browser mendukung Css3. Kita harus memilih browser yang sudah mendukung
versi css3 seperti Mozilla Firefox 3.6, Opera, Safari 5, dan Google Chrome.
Internet Explore (IE) versi 9 belum mendukung penuh Css3.
1.
Border Effects
Css3
menyediakan fitur menarik dari segi border misalnya kita dapat mengganti border
dengan image, menerapkan sisi gradient, dan bahkan kita bisa membuat sudut
melengkung pada bagian sisinya tanpa menggunakan gambar.
latihan1.html
<!DOCTYPE html> <head>
<title>Latihan 1</title>
<link rel="stylesheet"
href="border.css" type="text/css" /> </head>
<body>
<p id="melengkung">
Kotak ini memiliki sudut round </p>
<p id="gradien">
Kotak ini menggunakan efek gradien </p>
<p id="bayangan">
Kotak ini memiliki sudut round dan ada
bayangan(shadow) </p>
<p id="gambar">
Kotak ini menggunakan gambar untuk bordernya.
</p>
</body>
</html>
border.css
#melengkung
{
border:2px
solid red; padding:10px 40px; background:yellow; width:600px; border-radius:30px;
}
#gradien
/*tampil di firefox */
{
width:600px;
border:10px solid #000;
padding:5px
5px 5px 15px;
-moz-border-bottom-colors: #555 #666 #777
#888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888
#999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa
#bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888
#999 #aaa #bbb #ccc;
}
#bayangan
{
width:600px; height:150px; background-color:pink;
box-shadow: 10px 10px 5px #888888;
padding:10px 40px;
}
#gambar /*suport di chrome */
{
width:600px;
-webkit-border-image:url(border.png) 40 40
stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 40 40
stretch; /* Opera */ border-image:url(border.png) 40 40 stretch;
padding:10px 40px;
Output di
browser :
latihan2.html
<!DOCTYPE html> <html>
<head>
<title>Latihan 2</title> <style
type="text/css"> div
{
width:100px;
height:75px; background-color:purple;
border:1px solid yellow; color:white;
}
#dua
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari
and Chrome */
}
</style>
</head>
<body>
<div>STMIK AMikom Yogyakarta</div>
<div id="dua">Unggul dalam tren IT</div>
</body>
</html>
Pemrograman Web – Strata 1 Teknik Informatika
Output
di browser :
2.
Accordion
Accordion adalah menu yang telah disusun atau
dikelompokkan. Efek dari accordion ini ketika kita klick kelompok menu
tersebut, akan terlihat menu lainnya dengan animasi geser.
latihan3.html
<!DOCTYPE html> <html>
<head>
<title>Latihan
3</title>
<link rel="stylesheet"
href="accordion.css" type="text/css"> </head>
<body>
<dl>
<dt><a
href="#Section1">STMIK AMIKOM Yogyakarta</a></dt>
<dd id="Section1">
<p>STMIK
AMIKOM YOGYAKARTA adalah sebuah perguruan tinggi hasil pengembangan dari
Akademi Manajemen Informatika dan Komputer "AMIKOM YOGYAKARTA".
</p>
</dd>
<dt><a
href="#Section2">Visi & Misi</a></dt> <dd
id="Section2">
<p><b>Visi Perguruan Tinggi</b>:Menjadi
Perguruan Tinggi Komputer Terbaik di Asia
Tenggara.<br/><br/><b>Misi Perguruan
Tinggi</b>:Menghasilkan lulusan yang berkualitas global, produktif,
berjiwa entrepreneur, profesional</p>
</dd>
<dt><a
href="#Section3">Sejarah Berdiri</a></dt> <dd
id="Section3">
<p><b>STMIK AMIKOM YOGYAKARTA</b>merupakan
salah satu perguruan tinggi swasta yang berkedudukan di Provinsi DIY Kabupaten
Sleman di bawah naungan Yayasan AMIKOM Yogyakarta.</p>
</dd>
<dt><a
href="#Section4">Kontak</a></dt> <dd
id="Section4">
<p>Kampus
Terpadu : Jl. Ring Road Utara, Condong Catur, Sleman, Yogyakarta<br>
Telp: (0274) 884201 - 207 <br>
Fax: (0274)
884208 Kodepos: 55283<br> E-Mail: amikom@amikom.ac.id</p>
</dd>
</dl>
</body>
</html>
accordion.css
*{
font-family: Verdana, Arial,
Helvetica, sans-serif;
}
body{
background-color:
#380a62; font-size: 0.75em;
}
p{
font-size:
1em; margin: 0 0 1em 0; text-align: justify;
}
dl{
padding:
10px; min-width: 960px;
}
dl dt{ -webkit-border-radius: 5px;
-moz-border-radius: 5px; border-radius: 5px; border:1px solid #B6B4B4;
margin:0;
width:400px;
}
dl dt a{ color:#ffffff; font-weight:bold;
text-decoration:none; padding:10px; display:block;
}
dl dd{
color:#cccccc; margin:0; width:400px; overflow:hidden;
-webkit-transition:
height 1s ease; -moz-transition: height 1s ease; -o-transition: height 1s ease;
}
dl dd p { padding:10px; margin:0;
}
dl dd:not(:target) { height:0;
}
dl dd:target
{ height:9.5em;
}
dl a.ie:hover dd, dl a.ie:focus dd {
height:auto;
color:#cccccc;
}
Output di browser :
3. Text Effects
latihan4.html
<!DOCTYPE html> <html>
<head>
<title>Latihan
4</title> <style type="text/css"> h1
{
text-shadow: 5px 5px 5px red; color:yellow;
font-size:50px;
}
</style>
</head>
<body>
<h1>Teks ini menggunakan efek
bayangan</h1>
</body>
</html>
Output di
browser :
4. Sexy Image Hover
latihan5.html
<!DOCTYPE HTML> <html>
<head>
<title>Latihan
5</title>
<link rel="stylesheet"
href="sexy.css" type="type/css"> </head>
<body>
<div class='img' id='img-1'> <div
class='mask'></div>
<img
src='kucing1.jpg' width='200' height='150' /> </div>
<div class='img' id='img-2'> <div
class='mask'></div>
<img
src='kucing2.jpg' width='200' height='150' /> </div>
<div class='img' id='img-3'> <div
class='mask'></div>
<img
src='kucing3.jpg' width='200' height='150' /> </div>
<div class='img' id='img-4'> <div
class='mask'></div>
<img
src='kucing4.jpg' width='200' height='150' /> </div>
<div class='img' id='img-5'> <div
class='mask'></div>
<img
src='kucing5.jpg' width='200' height='150' /> </div>
<div class='img' id='img-6'> <div
class='mask'></div>
<img
src='kucing6.jpg' width='200' height='150' /> </div>
sexy.css
.img{
float:left; -webkit-transition-duration:
0.5s;
}
.img img{ padding:10px; border:1px solid #fff;
}
.img:hover{
-webkit-transform:scale(0.8); -webkit-box-shadow:0px 0px 30px #ccc;
}
.img .mask{ width: 100%;
background-color: rgb(0, 0, 0); position:
absolute;
height:
100%; opacity:0.6; cursor:pointer;
-webkit-transition-duration:
0.5s;
}
#img-1:hover .mask{
height:0%;
}
#img-2:hover .mask{
height:0%;
margin-top:130px;
}
#img-3 #mask-1 {
width:50%;
}
#img-3 #mask-2{
width:50%;
margin-left:211px;
}
#img-3:hover
#mask-1{
width:0%;
}
#img-3:hover #mask-2{
margin-left:430px;
width:0%;
}
#img-4:hover
.mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
}
#img-5:hover
.mask{
margin-left:219px;
margin-top:135px;
height:0%; width:0%;
-webkit-transform: rotateX(360deg);
}
#img-6:hover
.mask{
margin-left:219px;
margin-top:135px;
height:0%; width:0%;
}
Output di
browser :
