-->
Beranda  ›  CSS  ›  Pemrograman Web

Pemrograman Web #4 - CSS Lanjutan



Combinator CSS

  1. Descendant Selector
    Descendant selector berarti pengaturan style untuk seluruh keturunan elemen tertentu. Untuk menggunakan kombinasi descendant selector memakai karakter spasi.
    Contoh :
    <!DOCTYPE html>
<html>
<head>
  <style>
  div p {
    background-color: yellow;
  }
  </style>
</head>
<body>

  <div>
  <p>Paragraf satu di dalam div</p>
  <p>Paragraf dua di dalam div</p>
  <span><p>Paragraf tiga di dalam div</p></span>
  </div>

  <p>Paragraf empat tidak di dalam div</p>
  <p>Paragraf lima tidak di dalam div</p>
  
</body>
</html>
  2. Child Selector
    Child selector digunakan untuk melakukan styling pada elemen anak saja. Untuk menggunakan kombinasi child selector memakai karakter >.
    Contoh:
    <!DOCTYPE html>
<html>
<head>
  <style>
  div > p {
    background-color: yellow;
  }
  </style>
</head>
<body>

  <div>
  <p>Paragraf satu di dalam div</p>
  <p>Paragraf dua di dalam div</p>
  <span><p>Paragraf tiga di dalam div</p></span> <!-- Bukan Anak, namun turunan -->
  </div>

  <p>Paragraf empat tidak di dalam div</p>
  <p>Paragraf lima tidak di dalam div</p>

</body>
</html>
  3. Adjacent Sibling selector
    Merupakan kombiasi css untuk mengatur style elemen yang berdekatan dan berada tepat setelah blok elemen pertama. Untuk menggunakan kombinasi Adjacent Sibling selector memakai karakter +.
    Contoh penggunaan:
    <!DOCTYPE html>
<html>
<head>
  <style>
  div + p {
    background-color: yellow;
  }
  </style>
</head>
<body>

  <div>
  <p>Paragraf satu di dalam div</p>
  <p>Paragraf dua di dalam div</p>
  <span><p>Paragraf tiga di dalam div</p></span>
  </div>

  <p>Paragraf empat tidak di dalam div</p>
  <p>Paragraf lima tidak di dalam div</p>

</body>
</html>
  4. General sibling selector
    Merupakan kombinasi selector untuk mengatur style dari elemen yang berdekatan dengan elemen induk/utama. Untuk menggunakan kombinasi general Sibling selector memakai karakter ~.
    Contoh:
    <!DOCTYPE html>
<html>
<head>
  <style>
  div ~ p {
    background-color: yellow;
  }
  </style>
</head>
<body>

  <p>Paragraf 1</p>

  <div>
  <code>beberapa code</code>
  <span><p>Paragraf dua di dalam div</p></span>
  </div>

  <p>Paragraf tiga</p>
  <code>beberapa code</code>
  <p>Paragraf empat</p>

</body>
</html>

CSS Property

Property ini digunakan untuk mendefinisikan posisi elemen secara spesifik. Ada 4 macam type yang dapat digunakan untuk mengatur posisi elemen: static | relative | fixed | absolute
  1. position : static
    Properti static merupakan properti bawaan semua elemen, dimana semua elemen akan memiliki properti ini. Dengan properti ini, elemen akan menempati posisi mengikuti alur halaman. Jadi, apabila kita menambahkan value top, bottom, left, right, value tersebut tidak akan menghasilkan apapun.
    Contoh :
    div.static {
 position : static;
 border : 3px solid #73ad21;
}
  2. position : relative
    Posisi elemen tetap mengikuti alur dokumen, hampir sama dengan value static. Yang menjadi perbedaan yaitu, value top, bottom, left, right akan berfungsi. Pengaturan posisi pada suatu elemen menggunakan value tersebut akan “mendorong” elemen tersebut ke arah yang diinginkan. Contoh:
    div.relative {
 position : relative;
 left : 30px;
 border : 3px solid #73ad21;
}
  3. position : fixed
    Fixed position mendasarkan perhitungan posisi pada "body" dan pengaturannya dilakukan melalui left, top, bottom dan right property. Ketika "position:fixed" digunakan pada sebuah elemen, maka elemen tersebut akan selalu pada posisi tertentu dan akan tetap pada posisinya sekalipun halaman digulung hingga ujung terbawah. Posisi elemen biasanya diatur pada bagian atas halaman sehingga ketika halaman dibuka maka elemen yang "dalam position:fixed" akan langsung terlihat dan selalu terlihat.
    Contoh:
    div.fixed {
 position : fixed;
 bottom : 0;
 right : 0;
 width : 300px;
 border : 3px solid #73ad21;
}
  4. position : absolute
    "Absolute" membuat elemen bersifat "melayang". Pengaturan posisi dilakukan dengan properti left, right, top & bottom. Untuk membuat sebuah elemen dengan posisi "absolute", elemen tersebut harus berada dalam elemen lain yang menggunakan posisi "relative". Dengan pengaturan position: absolute ini, kita bebas mendefinisikan letak elemen.
    Contoh:
    div.relative {
 position : relative
 width : 300px;
 height : 200px;
 border : 3px solid #73ad21;
}
div.absolute {
 position : absolute;
 top : 80px;
 right : 0;
 width : 200px;
 height : 100px;
 border : 3px solid #73ad21;
}


Styling Link

Link dapat diatur style nya dengan beberapa property, misalnya: color, font-family,background, dan lain-lain. Ada 4 kondisi khusus dalam link yang bisa di atur style nya, yakni:
  • a:link – kondisi link saat normal, belum dikunjungi, belum di klik
  • a:visited – kondisi link saat user mengunjungi link
  • a:hover – kondisi pada saat mouse berada di atas link
  • a:active – kondisi pada saat link di klick

Poperty Text Decoration

text decoration digunakan untuk menampakkan atau menghilangkan efek garis bawah pada hyperlink. Secara default text decoration akan di-set underline untuk menghilangkannya kita dapat mengisikan value:none
Contoh :
a:link, a:visited {
 background-color : #f44336;
 color : white;
 padding : 14px 25px;
 text-align : center;
 text-decoration : none;
 display : inline-block;
 border-radius : 5px;
}
a:hover, a:active {
 background-color : red;
}

CSS Opacity/ Transparency

Opacity digunakan untuk mengatur tingkat transparansi suatu elemen.
Contoh penggunaan:
img {
 opacity : 0.5;
 filter : alpha(opacity=50); /* untuk IE 8 dan yang lebih baru */
}
Range nilai dari opacity = 0.0 - 1.0
Range nilai filter opacity = 0 - 100

CSS Transition

CSS transition digunakan untuk memberikan perubahan nilai dari suatu nilai ke nilai lain atau memberikan durasi waktu terhadap perubahan nilai. Cara membuat transition effect:
a. Tentukan CSS property yang ingin di beri effect
b. Tentukan durasi effect
Kalau durasi tidak ditentukan, maka efek tidak akan Nampak, karna default dari durasi CSS = 0.
Contoh:
<!DOCTYPE html>
<html>
<head>
  <style>
  div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
  }
  div:hover {
    width: 300px
  }

  </style>
</head>
<body>

  <div></div>

</body>
</html>
Standar pengaturan waktu yang dapat digunakan:
  • easy
  • linear
  • easy-in
  • easy-out
  • easy-in-out
  • cubic-bezier(n,n,n,n)
contoh penggunaan:
#div1 {transition-timing-function : linear}
#div2 {transition-timing-function : easy}
#div3 {transition-timing-function : easy-in}
#div4 {transition-timing-function : easy-out}
#div5 {transition-timing-function : easy-out}
#div6 {transition-timing-function : easy-in-out}

CSS Transformation

Dengan css transform kita dapat melakukan perubahan translasi, rotasi, scale, dan skew.
Contoh transform :
transform: scale(2, 3); 
transform: rotate(-20deg); 
transform: translate(50px, 100px); 
transform: skewX(20deg); 
transform: skewY(20deg); 
transform: skew(20deg, 10deg); 
transform: matrix(1, -0.3, 0, 1, 0, 0);
Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel