DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial belajar css # Mengenal function value di css

advertisement
Mengenal function value di css

Sebelumnya kita sudah belajar tentang propeti dan rule css.
Sekarang kita berkenalan dengan yang namanya function value css, sebuah nilai dari properti yang dibuat menggunakan fungsi dan parameter tertu.
Yuk kita langsung saja ketutorialnya,

Apa itu function di css?

Function css adalah sebuah  fungsi yang memiliki inputan parameter dan pengembalian berupa nilai properti css. 
Mengenal function value di css
Function selalu digunakan sebagai nilai dari sebuah properti.

Macam-macam function css

Berikut fungsi-fungsi css yang bisa kita gunakan,

Fungsi calc

Digunakan untuk mengkalkulasi nilai properti angka seperti width, height, dan lainnya
Contoh kodenya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>	
         div{
         background-color: red;
         width:calc(100% - 250px);
	 height:250px
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>
Hasilnya,

Fungsi attr

Digunakan untuk mengambil nilai atribut elemen yang di seleksi
Contoh kodenya
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>	
         a{color: red;}
         a:after{
         content: attr(href);
         }
      </style>
   </head>
   <body>
      <a href="https://deretcode.com" ></a>
   </body>
</html>
Hasilnya,

Fungi url

Digunakan untuk mengambil file gambar
Contoh kodenya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>	
         div{
         background-image: url('gambar.jpg');
         height:150px;
         width:100%;
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>
Hasilnya,

Fungsi hsl

Digunakan untuk memberikan nilai warna tipe hsl
Contoh kodenya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>	
         div{
         background-color:hsl(120,100%,50%);
         height:250px;
         width:100%;
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>
Hasilnya,

Fungsi hsla

Digunakan untuk memberikan nilai warna tipe hsla
Contoh kodenya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>	
         div{
         background-color:hsla(120,100%,50%,0.3);
         height:250px;
         width:100%;
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>
Hasilnya,

Fungsi linier-gradient

Digunakan untuk mengatur linear gradasi sebagai gambar latar belakang
Contoh kodenya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>	
         div{
         background-image: linear-gradient(red, yellow, blue);
         height:250px;
         width:100%;
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>
Hasilnya,

Fungsi radial-gradient

Digunakan untuk mengatur radial gradasi sebagai gambar latar belakang
Contoh kodenya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>	
         div{
         background-image: radial-gradient(red, green, blue);
         height:250px;
         width:100%;
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>
Hasilnya,

Fungsi repeating-radial-gradient

Digunakan untuk mengulang radial gradasi
Contoh kodenya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>	
         div{
         background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
         height:250px;
         width:100%;
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>
Hasilnya,

Fungsi repeating-linear-gradient

Digunakan untuk mengulang linier gradasi
Contoh kodenya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>	
         div{
         background-image: repeating-radial-gradient(red, yellow 10%, green 20%);
         height:250px;
         width:100%;
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>
Hasilnya,

Fungsi cubic-bezier

Digunakan untuk mengatur kurva kubik bezier
Contoh kodenya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>	
         div{
         transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
         transition:background-color 5s;
         height:250px;
         width:100%;
         }
         div:hover{background-color:red;}
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>
Hasilnya,

Fungsi var

Digunakan untuk membuat variabel
Contoh kodenya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>	
         body{
         --bground:red;
         }
         div{
         background-color: var(--bground);
         height:250px;
         width:100%;
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>
Hasilnya,

Fungsi rgb

Digunakan untuk memberikan warna nilai tipe rgb
Contoh kodenya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>	
         div{
         background-color:rgb(255,255,0);
         height:250px;
         width:100%;
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>
Hasilnya,

Fungsi rgba

Digunakan untuk memberikan warna nilai tipe rgba
Contoh kodenya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>	
         div{
         background-color:rgba(255,0,0,0.3);
         height:250px;
         width:100%;
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>
Hasilnya,


Sekian dulu tutorial pengenala function value css. Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share. Jika ada hal yang ingin ditanyakan atau disampaikan silahkan tulis dikolom komentar.
Good luck !
advertisement



0 Komentar untuk " Tutorial belajar css # Mengenal function value di css"

Silahkan berkomentar dengan baik dan bijak!