Scribd Logo
Unggah

Selamat datang di Scribd!

  • Dokumentasi Latihan CSS3

    Diunggah oleh

    Adha Don'tdif
    28 tayangan5 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    28 tayangan5 halaman

    Dokumentasi Latihan CSS3

    Diunggah oleh

    Adha Don'tdif

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 5

    INTRO

    Gambar 1. Perkembangan css

    Gambar 2. CSS3
    Gambar 3. Kenapa CSS3

    Gambar 4. Value CSS3

    Border Radius

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <title>Border Radius</title>
    5.     <style>
    6.         .rad {
    7.             width: 300px;
    8.             height: 300px;
    9.             background-color: salmon;
    10.            border-radius: 40px;
    11.            text-align: center;
    12.            line-height: 300px;
    13.            margin-bottom: 100px;
    14.        }
    15.        .lingkaran {
    16.            width: 400px;
    17.            height: 400px;
    18.            background-color: seagreen;
    19.            /* setiap border radius setengah dari width & height yang s
    ama, maka akan membentuk lingkaran */
    20.            /* akan berbentuk elips ketika width dan height tidah sama 
    */
    21.            border-radius: 50%;
    22.        }
    23.        .sudut-tumpul {
    24.            width: 300px;
    25.            height: 300px;
    26.            background-color: greenyellow;
    27.            margin-top: 50px;
    28.            border-top-right-radius: 50%;
    29.        }
    30.        .short {
    31.            margin-top: 50px;
    32.            width: 300px;
    33.            height: 300px;
    34.            background-color: hotpink;
    35.            /* short */
    36.            /* dimulai dari top-left dan bergerak searah jarum jam */
    37.            border-radius: 0 50% 0 50%;
    38.        }
    39.        .background {
    40.            margin-top: 50px;
    41.            width: 300px;
    42.            height: 300px;
    43.            border-radius: 0 50% 0 50%;
    44.            background-image: url(gambar/bc.jpg);
    45.            background-size: cover;
    46.        }
    47.        /* mengatasi elemen yang keluar dari tag */
    48.        .over {
    49.            margin-top: 30px;
    50.            width: 300px;
    51.            height: 300px;
    52.            background-color: indigo;
    53.            border-radius: 50%;
    54.            /* overflow: hidden; => semua yang keluar dari border radiu
    s akan disembunyikan */
    55.            overflow: hidden;
    56.        }
    57.        div img {
    58.            width: 300px;
    59.            height: 300px;
    60.        }
    61.        .border {
    62.            width: 300px;
    63.            height: 150px;
    64.            margin-top: 50px;
    65.            border: 5px solid black;
    66.            border-radius: 160px 160px 0 0;
    67.        }
    68.    </style>
    69.</head>
    70.<body>
    71.    <div class="rad">HELLO WORLD</div>
    72.    <div class="lingkaran"></div>
    73.    <div class="sudut-tumpul"></div>
    74.    <div class="short"></div>
    75.    <div class="background"></div>
    76.    <div class="over">
    77.        <img src="gambar/bc.jpg" alt="overflow">
    78.    </div>
    79.    <div class="border"></div>
    80.</body>
    81.</html>

    Opacity

    Property yang digunkan untuk mengatur transparansi sebuah elemen.

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <title>Opacity</title>
    5.     <style>
    6.         body {
    7.             background-image: url(gambar/bg.png);
    8.         }
    9.         div {
    10.            width: 300px;
    11.            height: 300px;
    12.            background-color: #f60;
    13.            opacity: .75; /* .75 = 0.75 */
    14.        }
    15.    </style>
    16.</head>
    17.<body>
    18.    
    19.    <div>
    20.
    21.    </div>
    22.
    23.</body>
    24.</html>

    RGBa & HSLa

    RGBa adalah Property pada CSS untuk memberikan warna pada elemen dengan dengan
    rgba(red, green, blue, alpha) dimana red, green, blue merupakan warna sedangkan alpha
    merupakan opacity atau transparan untuk warna (bukan elemen).

    HSLa (Hue Saturation lightness alpha) adalah Property pada CSS yang fungsinya hamper
    sama dengan RGBa. Hue sering disebut sebagai roda warna, Saturation = Saturasi (0 - 100%),
    Lightness ()

    Anda mungkin juga menyukai