Sintaks-sintaks yang berlaku pada CSS3

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
    1. Selectors
    2. Box Model
    3. Borders CSS3
    4. Backgrounds CSS3
    5. Text Effects
    6. 2D/3D Transformations
    7. Animations
    8. Multiple column Layout
    9. User Interface
    Kenyataannya, saat ini spesifikasi CSS3 sendiri masih dalam pengembangan oleh W3C (World Wide Web Consortium).Namun banyak dari property baru CSS3 telah diimplementasikan ke dalam browser-browser terbaru saat ini.

    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
    CSS3 Borders

    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 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 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

    CSS3 border-image

    Baca artikel lain nya tentang HTML5 dan CSS3 disini

    Sintaks-sintaks yang berlaku pada CSS3 Rating: 4.5 Diposkan Oleh: Unknown

    No comments: