Border Radius

-
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: red;
            border-radius: 50px;
            margin: auto;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>
<body>
    <div>Hello guys!</div>
</body>
</html>

Hasil CSS

  • Membuat lingkaran:
border-radius: 300px;
width: 300px;
height: 300px;

Border-radius nilai harus sama dengan witdh dan height atau border-radius menggunakan persenanan 

  • Membuat sudut tumpul 1 atau lebih
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;


  • Shortcut sudut tumpul 1 atau lebih

border-radius: 100px 0 100px 100px;

Cara membaca nilainya seperti arah jarum jam.

    • atas kiri: 100px
    • atas kanan: 0px
    • bawah kanan 100px
    • bawah kiri:100px


  • Background image

background-image: url(astroboy.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;

    • background-image: menampilkan gambar
    • background-size: untuk menyesuaikan gambar dengan frame yang dibuat
    • background-repeat: agar gambar tidak menampilkan gambar secara berulang, biasanya gambar lebih kecil dari pada frame maka harus menggunakan property CSS ini
    • background-position: agar posisinya benar2 ditengah

Hasil background image

Komentar

Posting Komentar

Postingan populer dari blog ini

Pengenalan AWS dan Cara Membuat Instance pada AWS

-
Gambar
Hai semua nya balik lagi nih ke SMK NETWORK. Seperti yang kalian baca pada judul di atas. Sekarang apa sih AWS? apasih kegunaan AWS? mari kita bahas disini! AWS  atau  Amazon Web Services  adalah sekumpulan layanan-layanan berbasis Cloud Computing yang di sediakan oleh Amazon sejak tahun 2002. Meskipun salah satu perusahaan raksasa internet ini sering kita kenal untuk membeli buku dan lagu, tetapi sekarang Amazon telah menambah layanannya dalam hal infrastrutktur cloud computing.  Amazon Web Services ini menyediakan layanan-layanan nya yang saling terintegrasi dan mudah kustomisasi. Pada tahun 2006, amazon mengenalkan Amazon’s Elastic Compute cloud (EC2) sebagai commercial web service yang menyediakan akses cloud kepada perusahaan dan individu untuk menyewa komputer storage yang bisa digunakan sebagai platform pengembangan aplikasi secara online, inilah awal dari IaaS, yaitu perusahaan yang menyediakan infrastruktur sebagai sebuah layanan. Layanan Komputasi  Lay...
Baca selengkapnya

Transition

-
Gambar
CSS Transition atau Transisi adalah Efek Transis yang memungkinkan sebuah elemen secara bertahap berubah dari satu gaya ke yang lain. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         .kotak {         width : 100 px ;         height : 100 px ;         background-color : red ;         transition : 1 s ;        }         .container {         height : 400 px ;         width : 100 px ;         border : 0.1 px solid black ;        }         .container:hover .kotak {         transfo...
Baca selengkapnya