Media Pengembangan Web & App | by APPKEY

Pembuatan Website Front end Inilah 6 Properti CSS yang Belum Banyak Dikenal Developer

Inilah 6 Properti CSS yang Belum Banyak Dikenal Developer

-

CSS adalah bahasa pemrograman dengan fungsi unik. Berbeda dengan bahasa pemrograman lainnya, CSS digunakan untuk melakukan styling khusus pada tampilan project website dan juga aplikasi.  Karena fungsinya yang khas dan tiada duanya inilah, CSS masih banyak digunakan oleh para programmer sampai hari ini.

Anda yang menguasai bahasa pemrograman CSS tentunya sudah akrab dengan properti. Namun tahukah Anda bahwa ada 6 properti CSS yang tidak banyak dikenal oleh developer?

Anda juga beruntung karena artikel kali ini akan membahas 6 properti CSS beserta fungsinya yang belum dikenal banyak developer. Tentunya Anda juga bisa mengoptimalkan pemrograman styling dengan memakai keenam properti CSS berikut ini. Selamat membaca!

Melihat Kembali CSS: Apa Itu CSS Properti?

css front end

Setiap bahasa pemrograman tentunya memiliki elemen yang menjadi ciri khasnya. Dalam bahasa pemrograman CSS, elemen properti adalah kekhasan tersendiri sekaligus unsur dasar yang harus dikuasai setiap programmer spesialis bahasa ini.

Apa itu properti CSS? Properti CSS adalah sebuah elemen dan jenis style dari tag HTML yang dapat Anda ubah sesuai keinginan. Dengan memanfaatkan properti CSS ini, Anda bisa melakukan aneka kustomisasi sehingga memperoleh hasil akhir berupa tampilan tertentu untuk website dan aplikasi.

Dari definisi di atas pula, Anda dapat melihat bahwa CSS selalu ‘saling melengkapi’ dengan HTML. Ketika HTML bertanggung jawab untuk membangun isi atau bagian fungsional dari website, maka CSS dan semua propertinya digunakan untuk membungkus bagian isi agar lebih menarik dan mudah dipakai user.

Ada banyak sekali jenis properti CSS beserta fungsinya. Ya, setiap jenis properti CSS pasti memiliki fungsi yang berbeda. Semisal properti CSS untuk mengubah font style adalah font-style, font-size, dan font-family.

Uniknya, seiring perkembangan waktu, jumlah properti CSS pun bertambah. Kembali pada contoh CSS untuk styling font – kini ada lebih banyak properti yang kita punya untuk melaksanakan tugas tersebut. Sekarang, contoh-contoh properti CSS untuk mengubah font style adalah font, font-variant, font-style, font-weight, font-family, dan font-size.

Artikel Terkait  Contoh PHP Curl : 10 Hal Luar Biasa Yang Dapat Anda Kembangkan dengan Curl

Memang, menguasai tipe-tipe properti seperti properti CSS untuk mengubah font style adalah hal yang biasa bagi programmer CSS. Namun bagaimana jadinya jika ternyata ada properti CSS yang keberadaannya selama ini menjadi ‘rahasia’? Melebihi pengetahuan yang sudah Anda miliki, ternyata ada 6 properti CSS yang baru-baru ini fungsinya terkuak ke publik.

Artikel Terkait  Laman Google Tidak Nyaman Dilihat? Ini Cara Menghapus CSE Tanpa Ganti Browser

6 Properti CSS Beserta Fungsinya yang Belum Anda Ketahui Sampai Sekarang

css

Dinamika perkembangan dunia IT memang sangat cepat dan sering mengejutkan. Ada begitu banyak informasi dalam dunia IT yang faktanya belum terkuak oleh manusia, bahkan pada hal-hal yang sudah dirasa terkenal sekalipun. Alhasil, wajar saja jika rasanya dunia IT tidak pernah habis dengan update terbaru.

Kini, penemuan tersebut datang dari bahasa pemrograman CSS, khususnya pada fungsi propertinya. Meskipun sampai hari ini sudah ada puluhan, atau mungkin ratusan, jenis properti pada CSS, ternyata masih ada 6 jenis CSS properti dan trik yang tidak banyak diketahui oleh programmer profesional.

Apa sajakah? Berikut jawabannya:

Writing-Mode

Tipe properti pertama adalah writing-mode. Fungsi properti ini adalah memungkinkan programmer untuk meletakkan teks dalam website dalam posisi-posisi yang tidak biasa, seperti miring vertikal di kanan, vertical ke kiri, dan memanjang horizontal atau sideways.

Jika Anda pernah kebetulan mendapati website dengan teks yang sengaja didesain dalam bentuk vertikal atau sideways, besar kemungkinan website tersebut mengaplikasikan CSS properti writing-mode.

CSS properti writing-mode mendukung sejumlah value, yakni:

sideways-lr

Teks dengan value ini akan tampil secara vertikal dari atas ke bawah menghadap ke arah kiri.

sideways-rl

Teks dengan value ini akan tampil secara vertikal dari atas ke bawah menghadap ke arah kanan.

horizontal-tb

Value ini berguna untuk menampilkan tampilan standar dari teks pada website.

vertical-lr

Teks ditampilkan secara horizontal seperti biasa dari kiri ke kanan. Namun jika teks terdiri lebih dari 1 baris, maka baris ke-2 dan seterusnyaa akan ditempatkan otomatis di bagian kanan setelah bagian sebelumnya (rata kanan).

vertical-rl

Mirip seperti pada fungsi vertical-lr. Bedanya, value ini menghadirkan teks dalam susunan rata kiri.

User-Select

Pernah menemukan website yang isi kontennya tidak bisa Anda copy dan paste? Website tersebut sudah dipastikan menggunakan fungsi CSS properti user-select.

CSS properti user-select sengaja diaplikasikan agar pengunjung website tidak bisa seenaknya men-copy dan paste konten-konten yang dipublikasikan website tersebut. Bisa dibilang bahwa CSS properti yang satu ini memiliki dampak positif dalam memberantas aksi plagiarisme.

Artikel Terkait  Trik Menaikkan Konversi Web Toko Online dari Desainnya
Artikel Terkait  Trik Menaikkan Konversi Web Toko Online dari Desainnya

User-select memungkinkan Anda untuk menentukan teks mana saja yang bisa bebas diklik dan copy oleh pengunjung, dan mana yang tidak. Contoh coding pengaplikasian CSS user-select:

.row-of-icons {
-webkit-user-select: none;  /* Chrome all */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE */
user-select: none;
}

All

Berikutnya adalah CSS properti all. Properti ini bisa menyederhanakan kinerja pada CSS framework Anda, khususnya untuk mengeliminasi elemen-elemen yang tidak dibutuhkan secara lebih praktis.

Terdapat 3 jenis value pada properti all ini, yakni initial (all:initial) untuk mereset elemen seperti sediakala sebelum diedit, unset (all:unset) dan inherit (all:inherit). Contoh coding pengaplikasiannya:

.header{
all:initial;
color: red;
font-size: 28px;
}

Border-Image

Sesuai namanya, CSS properti border-image bermanfaat untuk menambahkan garis frame atau border khusus pada gambar yang ada di website Anda.

Anda bisa dengan praktis membuat garis border yang cantik dan menarik sesimpel memakai fungsi ini saja. Anda juga bisa membuat custom border dari aneka gambar yang diinginkan. Dengan adanya border, Anda dapat lebih mudah menonjolkan informasi penting pada website ke pengunjung.

Tak mengherankan sejumlah desainer website tertarik untuk mengaplikasikan CSS properti yang satu ini pada website mereka.

Contoh coding pengaplikasian properti border-image:

<body>
<h1>Selamat Datang</h1>
</body><!-- CSS below -->h1{
border: 14px solid transparent;
padding: 20px;
border-image: url(border.png) 25% round;
}

White-Space

Berikutnya adalah properti white-space. Properti white-space bisa digunakan saat Anda mengaplikasikan CSS properti text-overflow. Saat digunakan, properti white-space berfungsi untuk mengatur alur teks dari sebuah elemen agar rapi atau tersusun sesuai keinginan Anda.

Ada sejumlah value yang bisa di-input dalam fungsi properti white-space ini, antara lain: normal, nowrap, pre, pre-line dan pre-wrap.

  • Value pre digunakan untuk mengarahkan browser melakukan render terhadap spasi kosong dan garis batas yang sesungguhnya ada dalam barisan kode, namun tidak terlihat dalam tampilan default.
  • Value pre-wrap memiliki kegunaan yang mirip dengan pre. Tetapi, pre-wrap juga bisa digunakan untuk ‘membungkus’ teks yang terdapat dalam sebuah elemen tertentu.
  • Value nowrap mencegah terjadinya overflow teks dan wrapping (pembungkusan) elemen yang tak perlu.
  • Value pre-line digunakan untuk memutus baris sesuai dengan titik akhir dari susunan kodenya dan menyisakan garis spasi putih yang tidak dirender.
Artikel Terkait  Tutorial Simpel Membuat Website Dark Mode dengan CSS dan Javascript
Artikel Terkait  Tutorial Simpel Membuat Website Dark Mode dengan CSS dan Javascript

Contoh coding pengaplikasian CSS properti white-space:

div{
width:200px;
}
p{
background:blue;
font-size:3rem;
}
.first{
white-space:nowrap;
}
.second{
white-space:pre;
}
.third{
white-space:pre-line;
}
.fourth{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}

Background-Clip

CSS properti terakhir adalah background-clip. Background-clip juga merupakan CSS properti yang unik. Berbeda dengan properti lainnya, background-clip bisa digunakan untuk mengatur grafis kustom sebagai elemen dari latar belakang (background) website. Kemudian, elemen grafis kustom ini bisa digunakan sebagai elemen untuk mempercantik border-boks, konten-boks, dan padding-boks.

Contoh coding implementasi sederhana dari background-clip adalah:

<p class=”border-box”>The background extends behind the border.</p>
<p class=”padding-box”>The background extends to the inside edge of the border.</p>
<p class=”content-box”>The background extends only to the edge of the content box.</p>
<p class=”text”>The background is clipped to the foreground text.</p>

 p {
border: .10em blue;
border-style: dotted;
margin: 3em 0;
padding: 1.5em;
background: linear-gradient(70deg, green, orange, green, orange, green);
font: 800 1.5em arial;
text-decoration: bold;
}

.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

.text {
background-clip: text;
-webkit-background-clip: text;
color: rgba(153,0,204,1);
}

Demikianlah pembahasan artikel edisi kali ini seputar 6 CSS properti yang kegunaannya masih jarang diketahui oleh para developer CSS, termasuk yang profesional sekalipun. Jumlah CSS properti memang sudah sangat banyak, namun bukan berarti perkembangannya akan berhenti sampai di sini. Mungkin saja kelak kita akan mendapati lebih banyak jenis CSS properti yang lebih canggih dan unik untuk mendesain styling website.

Ada baiknya Anda mengombinasikan penggunaan CSS properti dalam mendesain bagian front end website agar hasil kerja menjadi lebih baik dan cepat. Jangan lupa juga untuk turut mempelajari CSS, HTL dan JavaScript karena ketiga bahasa pemrograman ini adalah kunci sukses dalam dunia programming website.

Untuk itu, yuk ikuti website APPKEY agar tidak ketinggalan informasi dan tips trik belajar aneka bahasa pemrograman terkini gratis setiap hari. Anda pun bisa sekaligus melakukan konsultasi terkait pengembangan website dan aplikasi gratis dari tenaga IT profesional setiap harinya. Langsung klik www.appkey.co.id sekarang juga, ya! Sampai jumpa lagi!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya