Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Memahami CSS Shorthand pada CSS

Complete Guide to CSS Shorthand

Apa itu CSS Shorthand - Secara bahasa Shorthand adalah tangan pendek, artinya memperpendek CSS yang tadinya panjang. Hal ini tentunya berguna untuk effisiensi, baik penulisan ataupun ukuran CSS.

Margin, Padding dan Outline

Margin, padding dan Outline mempunyai value (nilai) yang sama. Disini saya hanya akan mencontohkan margin.

margin-top:5px;
margin-right:10px;
margin-bottom:20px;
margin-left:25px;
maka Shorthand dari CSS di atas adalah
margin: 5px 10px 20px 25px;
yang perlu diperhatikan cara menulisnya searah jarum jam. atas > kanan > bawah > kiri

Satu Value

margin:10px;
apabila satu value seperti itu, maka artinya semua valua sama memiliki margin:10px, jadi apabila kode diatas dipanjangkan, hasilnya seperti ini
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

Dua Value

margin: 10px 15px;
karena mempunya dua value (nilai) maka berarti hanya atas dan kanan, bawah dan kiri tidak ada. Maka akan disamakan yang sejajar / bersebrangan. atas=bawah dan kanan=kiri. jadi apabila dipanjangkan hasilnya seperti ini
margin-top:10px;
margin-right:15px;
margin-bottom:10px;
margin-left:15px;

Tiga Value

margin: 10px 15px 20px;
perhatikan, value yang ada adalah atas > kanan > bawah. Maka untuk kiri yang tidak ada akan disamakan dengan kanan. jadi hasilnya seperti ini
margin-top:10px;
margin-right:15px;
margin-bottom:20px;
margin-left:15px;
Kesimpulannya, apabila 2 atau 3 value maka yang tidak ada akan disamakan dengan yang ada. atas=bawah dan kiri=kanan

Border

Pada property border, nilai yang bisa di set adalah border-width, border-style dan border-color
border: 1px solid black;
apabila diterjemahkan maka hasilnya adalah
border-width: 1px;
border-style: solid;
border-color: black;

Font

Contoh dari CSS Shorthand pada Font
font: bold italic small-caps 16px/30px Arial, sans-serif;
maka artinya adalah
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 16px;
line-height: 30px;
font-family: Arial, sans-serif;

Background

Contoh Shorthand pada CSS Background
background: #fff url(kangismet.png) no-repeat top right fixed;
maka artinya adalah
background-color: #fff;
background-image: url(kangismet.png);
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;

Peningkatan pada CSS Backround di CSS3

Pada CSS3 ada penambahan background-size, background-origin dan background-clip. Dan ini bisa digabung pada CSS Shorthand di atas. Maka sebagai contoh seperti ini
background: #fff url(kangismet.png) no-repeat top right fixed / 50% 30% border-box content-box;

List

Contoh CSS Shorthand pada List
list-style: circle inside url(bullet.gif);
maka artinya
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);

Color

Warna juga bisa disingkat seperti #ffffff menjadi #fff atau #33dd77 menjadi #3d7. Tapi memang lebih mudah yang mempunyai 6 digit sama. atau dengan penyebutan warna seperti color: red;.

Semoga bermanfaat...

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

5 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Haha..uda lama ngeblog baru tahu saya..ternyata begitu...keren kang ^_^
    1. terkadang kita menulis kode ga effisien ya... hehe
  2. Jika edit css biasanya saya edit pake inspect elemen mas, jika sdh fix tinggal copy ke html.
    1. iya itu paling enak mas
  3. Keren sih mas, emang biasanya saya inspeck element terus coba-coba aja itu pengaruhnya dimana.

    Tanpa tau mana sebenarnya fungsi kodenya. hehe

    https://www.iwnefndi.com/
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.