Linear Gradient dan Radial Gradient

-
<!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: 500px;
            height: 250px;
            margin: 100px auto;
            background-image: linear-gradient(red, rgb(0,34,255), green)
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Linear Gradient adalah warna gradien yang memiliki bentuk garis garis sejajar dengan arah tertentu.

background-image: linear-gradient(red, rgb(0,34,255), green)

Disini juga bisa menggunakan multiple color

  • Degree

Degree adalah untuk menentukan arah menggunakan angka derajat.

jika kalian ingin berlawanan arah dengan angka derajat maka ditambahkan saja min setelah angka

background-image: linear-gradient(40deg, red, rgb(0,34,255), green)


  • Direction
 Direction adalah arah posisi yang lebih spesifik dengan properti: top, right, bottom dan left

Jika kalian ingin posisi yang nyerong atau diagonal maka harus menambahkan 2 arah

background-image: linear-gradient(to left top, red, rgb(0,34,255), green)


  • Color Stop
Color Stop adalah penghentian warna dengan gradien yang memungkinkan kalian mengontrol posisi di mana warna mulai bertransisi dari satu ke warna berikutnya.

background-image: linear-gradient(to bottom, red 30%, rgb(0,34,255), green 70%)


Radial Gradient

  • Radial Gradient adalah warna gradasi yang memiliki satu titik sumber warna dan warna selanjutnya menjadi titik gradasi yang mengitari titik tersebut 360 derajat.
<!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: 600px;
            height: 300px;
            margin: 100px auto;
            background-image: radial-gradient(circle farthest-side at top right, red, yellow 40%)
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

  • Radial gradient ada 2 macam yaitu circle dan ellipse
  • Jangkauan ada farthest side/corner dan closest side/corner
  • arah ada top,bottom,right dan left
Sisanya kalian kreasikan masing-masing sesuai keinginan kalian.
background-image: radial-gradient(circle farthest-side at top right, red, yellow 40%)

Komentar

Posting Komentar

Postingan populer dari blog ini

Filter

-
Gambar
 Filter CSS adalah untuk melakukan berbagai efek terhadap suatu elemen biasanya gambar, efek yang bisa dilakukan properti filter misalnya: saturasi warna, brightness, contrast, efek blur, grayscale, sepia, drop-shadow, invert, hue-rotate, opacity. <! 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 >         img {         filter : brightness ( 300 % ) ;        }         /* Filter             brightness(angka%)             constrast(angka%)             blur(angka px)             saturate(angka%)             grayscale(angka%)             sepia(angka%)             hue-rotate(angka deg)             invert(angka%)             opacity(angka%)             drop-shadow(angka%)             */     </ style > </ head > < body >     < im
Baca selengkapnya

Percabangan Python

-
Gambar
 Hallo balik lagi nih diblog saya setelah sekian lama saya tidak membuat blog. kali ini saya akan membahas tentang Percabangan adalah cara yang digunakan untuk mengambil keputusan apabila di dalam program dihadapkan pada kondisi tertentu, jumlah kondisinya bisa satu, dua atau lebih. percabangan mengevaluasi kondisi atau ekspresi yang hasilnya benar atau salah. Kondisi tersebut disebut ekspresi boolean. Hasil dari pengecekan kondisi adalah True atau False. Bila benar (True), maka pernyataan yang ada di dalam blok kondisi tersebut akan dieksekusi. Bila (False), maka blok pernyataan lain yang dieksekusi. Di Python ada 3 jenis pernyataan yang digunakan untuk percabangan, yaitu sebagai berikut: No Pernyataaan Deskripsi 1. if Pernyataan if terdiri dari ekspresi Boolean diikuti oleh satu baris atau lebih pernyataan 2. If…else Bila pernyataan if benar, maka blok pernyataan if dieksekusi. Bila salah, mak
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 {         transform : rotate ( 180 deg );         margin-top : 300 px ;         background-color : yellow ;        }     </ style > </ head > < body >     < div class = "container" >         < div class = "kotak" ></ div
Baca selengkapnya