Sintaks-sintaks yang berlaku pada CSS3
Sebelum beranjak pada Sintaks-sintaks yang berlaku pada CSS3 akan lebih baik anda membaca Sejarah Serta Pengertian HTML5 dan CSS3 dan Fitur Baru di HTML5 & CSS3.
Introduction
Sintaks-sintaks CSS3 terbagi menjadi “modul-modul”. Beberapa dari modul yang paling penting dalam CSS3 adalah
- Selectors
- Box Model
- Borders CSS3
- Backgrounds CSS3
- Text Effects
- 2D/3D Transformations
- Animations
- Multiple column Layout
- User Interface
CSS3 Borders
Dengan CSS3, kamu dapat membuat border dengan bentuk yang tak selalu kotak, menambahkan efek shadow dalam objek, dan menggunakan gambar sebagai border tanpa menggunakan program desain seperti Photoshop.
Di bagian ini akan mempelajari tentang border properties seperti ini:
- border-radius
- border-shadow
- border-image
Internet Explorer 9 hanya support dua dari properties border terbaru
Firefox membutuhkan prefix –moz- untuk menampilkan border-image
Chrome dan Safari membutuhkan prefix –webkit- untuk menampilkan border-image
Opera membutuhkan prefix –o- untuk menampilkan border-image
Property dari fasilitas borders
Property dari fasilitas borders
| ||
Property
|
Description
|
Values
|
border-image
|
Sebuah wadah untuk mensetting seluruh property dari border-image
|
-source: none|image;
-slice: number| % | fill;
-width: number | % | auto;
-outset: length | number;
-repeat: stretch | repeat | round;
|
border-radius
|
Sebuah wadah untuk mensetting seluruh dari 4 ujung-ujung border (radius)
|
length
%
|
box-shadow
|
Menempelkan satu atau lebih efek bayangan pada border
|
h-shadow v-shadow blur spread color inset
|
Contoh-contoh implementasi border dalam CSS3
CSS3 Rounded Corners
CSS3 Rounded Corners
|
<!DOCTYPE HTML >
<html>
<head>
<style type="text/css">
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>
</head>
<body>
<div>Dengan CSS3, kita bisa membuat border yang tidak selalu berbentuk kotak dengan mudah.</div>
</body>
</html>
|
Inilah hasil dari CSS3 Rounded Corners
CSS3 Box Shadow
CSS3 Box Shadow
|
<!DOCTYPE HTML >
<html>
<head>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:yellow;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
Inilah hasil dari CSS3 Box Shadow
CSS3 border-image
CSS3 border-image
|
<!DOCTYPE HTML >
<html>
<head>
<style type="text/css">
div
{
border-width:15px;
width:250px;
padding:10px 20px;
}
#round
{
-moz-border-image:url(images/border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(images/border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(images/border.png) 30 30 round; /* Opera */
border-image:url(images/border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(images/border.png) 30 30 stretch; /* Firefox */
-webkit-border-image:url(images/border.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(images/border.png) 30 30 stretch; /* Opera */
border-image:url(images/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">Border ini hasil dari pengulangan bagian dari gambar yang tersedia.</div>
<br />
<div id="stretch">Kalau disini, bordernya ditarik hingga memenuhi tempat yang tersedia.</div>
<p>Dari gambar inilah border terbuat:</p>
<img src="images/border.png" />
</body>
</html>
|
Inilah hasil dari CSS3 border-image
Itu adalah Sintaks-sintaks yang berlaku pada CSS3
Baca artikel lain nya tentang HTML5 dan CSS3 disini
No comments:
Post a Comment