Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteWeb ProgrammingMempelajari Trick CSS Tingkat Lanjut

Mempelajari Trick CSS Tingkat Lanjut

-

Seiring berjalannya waktu, CSS menjadi semakin kuat dan saat ini ia menawarkan banyak kemungkinan untuk membuat situs web yang menakjubkan secara visual.

Artikel ini akan membantu Anda mempelajari tips dan teknik CSS tingkat lanjut dan canggih untuk menguasai desain web dan keterampilan pengembangan web front-end Anda. Setiap teknik menampilkan cuplikan kode sampel, demo, dan penjelasan.

Sejajarkan Secara Vertikal Dengan Flexbox

Memusatkan teks atau elemen secara vertikal selalu menjadi masalah bagi banyak pengembang front-end. Diperkenalkan dalam spesifikasi CSS tingkat lanjut ini ialah display: flexproperti / nilai menyediakan cara mudah untuk menyelaraskan elemen apa pun secara vertikal.

Perhatikan HTML berikut ini:

lt;div class = “align-vertically”>

Saya berada di tengah secara vertikal!

</div>

Dan CSS terkait:

.align-vertically {

latar belakang: # 13b5ea;

warna: #fff;

tampilan: fleksibel;

sejajarkan-item: tengah;

tinggi: 200px;

}

display: flex menentukan tata letak Flexbox untuk elemen tersebut, dan align-items: center menangani pemusatan vertikal.

Menggunakan SVG untuk Ikon dan Logo

css-3

SVG didukung oleh semua browser modern dan diskalakan dengan baik untuk semua jenis resolusi, jadi tidak ada alasan untuk terus menggunakan .jpg atau .gif gambar untuk logo atau ikon.

Kode di bawah ini mewakili kode CSS tingkat lanjut yang digunakan untuk menampilkan logo situs web

#logo

{

tampilan: blok;

teks-indentasi: -9999px;

lebar: 100px;

tinggi: 82px;

background: url (logo.svg);

background-size: 100px 82px;

}

Perhatikan penggunaan background-size properti, yang digunakan untuk menskalakan gambar latar belakang agar sesuai dengan ukuran wadah.

Teks Kurva di Sekitar Gambar Mengambang

shape-outside adalah properti CSS tingkat lanjut yang memungkinkan pengaturan bentuk geometris, untuk menentukan area untuk teks mengalir.

.shape {

lebar: 300px;

Artikel Terkait  Pedoman Mudah Membuat Hyperlink dengan HTML | Seri Belajar Ngoding

float: kiri;

bentuk-luar: lingkaran (50%)

}

Inilah hasil dari .shape kelas yang diterapkan pada gambar:

Artikel Terkait  Belajar Ngoding Anda Macet? Yuk Segarkan Lagi dengan 10 Tips Ini

Perubahan Warna Halus Aktif : arahkan kursor

The transition properti memungkinkan pengembang web front-end untuk membuat halus dan menarik secara visual efek hover pada link atau unsur lainnya.

Mari kita lihat transisi CSS dasar ke CSS tingkat lanjut untuk membuat tautan atau elemen lain terlihat lebih baik. Perubahan warna yang halus ini digunakan pada tautan CatsWhoCode.

a {

warna: # 1b80b7;

transisi: semua .2s linier;

}

a: hover {color: # 52bff2;

}

Teknik ini dapat digunakan untuk membuat efek hover yang jauh lebih canggih. Dengan menggunakan transition, Anda dapat menganimasikan banyak properti (lebar, tinggi, latar belakang, dll) dari elemen tertentu.

Gradien dan Teks Gradien

Satu dekade yang lalu, satu-satunya cara perancang web atau pengembang web dapat membuat latar belakang gradien adalah dengan menggunakan Photoshop untuk membuat gambar, yang kemudian ditampilkan di situs web menggunakan background-imageproperti.

Berkat spesifikasi CSS tingkat lanjut yaitu 3, sekarang dimungkinkan untuk membuat gradien dalam HTML/CSS, menghasilkan lebih sedikit sumber daya, waktu pemuatan lebih cepat, dan pengalaman pengguna yang lebih baik.

CSS berikut digunakan untuk membuat gradien yang diterapkan ke badan dokumen:

Body {

background: linear-gradient (ke kanan, # 000, # 0575e6);

text-align: center;

}

The linear-gradient() Fungsi menciptakan gradien linier dan mendefinisikan sebagai gambar latar belakang untuk body. Fungsi ini membutuhkan 3 argumen: arah atau sudut, dan 2 warna berhenti.

Menggunakan gradien CSS dan properti khusus WebKit, dimungkinkan untuk menerapkan gradien ke teks:

h1 {

font-family: Arial;

ukuran font: 50px;background: -webkit-gradient (linier, kiri atas, kiri bawah, dari (#eee), ke (# 333));

-webkit-background-clip: teks;

-webkit-text-fill-color: transparan;

}

Animasi CSS

Sejak spesifikasi CSS3 dirilis, Anda dapat menganimasikan elemen HTML secara native dalam CSS tingkat lanjut murni. Mulai 2019, animasi CSS didukung oleh semua browser.

Lihat kode berikut:

@ contoh @

from {background-color: green;

}

to {

background-color: yellow;

}

}

div {lebar: 100px;

tinggi: 100px;

warna latar belakang: hijau

;animasi-nama: contoh;

Artikel Terkait  Bagaimana Cara Melakukan Lokal Testing dengan Selenium WebDriver?

animasi-durasi: 4s;

}

Seperti yang Anda lihat, kode dimulai dengan @keyframes example: Ini membuat animasi yang dapat diterapkan ke elemen HTML apa pun.

Artikel Terkait  Mempelajari Pengenalan Suara Web Dengan TensorFlow.JS

Pada baris 10 dan 11, Anda dapat melihat penggunaan animation-name yang menentukan animasi mana yang akan digunakan, dan animation-duration yang menentukan berapa lama animasi harus berjalan.

Setelah animasi selesai, elemen berubah kembali ke keadaan normalnya.

Gaya Gambar Rusak

css-1

Gambar yang rusak tidak terlihat bagus di situs web, tetapi bisa terjadi sesekali gambar hilang dari server dan tidak dapat ditampilkan.

Menggunakan beberapa CSS tingkat lanjut, dimungkinkan untuk mengatur gaya gambar yang rusak dan memberikan pesan kesalahan khusus kepada pengunjung Anda.

img {

font-family: ‘Helvetica’;

font-weight: 300;

tinggi garis: 2;

text-align: center;

lebar: 100%;

tinggi: otomatis;

tampilan: blok;

posisi: relatif;

}

img: before {

konten: ‘Maaf, gambar di bawah rusak :(“;

tampilan: blok;

margin-bottom: 10px;

}

img: after {

konten: “(url:” attr (src) “)”;

tampilan: blok;

ukuran font: 12px;

}

Contoh ini menggunakan kelas :before dan :after pseudo, yang digunakan untuk menampilkan pesan kesalahan kepada pengguna akhir.

Fungsi attr() CSS digunakan untuk mengembalikan nilai src properti, sehingga menampilkan url yang salah.

Potong String di CSS

Desainer web dan pengembang web front-end sering menghadapi masalah umum ini: Sebuah teks terlalu besar untuk wadahnya. Dengan menggunakan CSS, masalah ini dapat dengan mudah diperbaiki.

Mari kita lihat kelas CSS tingkat lanjut berikut,

.truncate {

lebar: 250px;

white room: nowrap;

overflow: hidden;

text-overflow: elipsis;

}

Kelas menentukan lebar tetap dan mencegah teks meluap dari penampung. Pada baris 5, text-overflow: ellipsis; secara otomatis menambahkan elipsis di akhir teks untuk menunjukkan bahwa teks telah terpotong.

Variabel CSS

Poin kuat dari praprosesor CSS adalah kemungkinan menggunakan variabel untuk membuat nilai yang dapat digunakan kembali dan menghindari redundansi kode.

Meskipun alat seperti SASS sangat berguna untuk pengembangan web front-end, mereka tidak diharuskan untuk menggunakan variabel, karena ini dapat dilakukan di CSS tingkat lanjut asli.

Pertimbangkan CSS di bawah ini:

Artikel Terkait  Mengetahui Penggunaan Fungsi Explode dan Implode Pada PHP
Artikel Terkait  Contoh PHP Curl : 10 Hal Luar Biasa Yang Dapat Anda Kembangkan dengan Curl

: root {

–main-bg-color: karang;

–main-txt-color: #fff;

–main-padding: 15px;

}

# div1 {

background-color: var (- main-bg-color);

color: var (- main-txt-color);

padding: var (- main-padding);

}

Variabel dideklarasikan dengan memberinya nama diawali dengan dua tanda hubung. Dalam contoh ini, warna utama, warna latar belakang utama, dan padding dasar dideklarasikan.

Ketika ingin menggunakan variabel yang dibuat sebelumnya, gunakan var()fungsi seperti yang ditunjukkan pada baris 8 sampai 10.

Kontainer Tinggi Penuh

Vh adalah unit yang sedikit diketahui yang dapat digunakan di CSS. 1 vhmewakili 1% tinggi area pandang, apa pun ukuran layarnya.

Dengan menggunakan unit ini, mudah untuk membuat kontainer dengan tinggi penuh:

.fullheight {tinggi: 100vh; }

Karena 1 vh berarti 1% dari tinggi viewport, kode di atas mendefinisikan wadah yang akan mengambil 100% dari tinggi vertikal layar.

Unit serupa yang disebut vwdigunakan untuk membuat wadah dengan lebar penuh.

Kutipan Cerdas dalam HTML / CSS

Kutipan cerdas adalah bagian integral dari tipografi yang indah dan desain web modern, karena memberikan keterbacaan dan pengalaman pengguna yang lebih baik.

Menggunakan <q>tag HTML (Yang mendefinisikan kutipan pendek) dan beberapa CSS tingkat lanjut, mudah untuk memaksa browser menampilkan kutipan pendek dalam kutipan cerdas:
q {

tanda kutip: “” “” ””;

}

Daftar yang Dipisahkan Koma

Daftar poin peluru sangat banyak digunakan secara online, karena memberikan cara yang bagus untuk menampilkan informasi dengan cara yang jelas dan ringkas.

Potongan CSS berikut akan menambahkan koma pada setiap item dari daftar yang tidak berurutan, kecuali yang terakhir. Ini dicapai dengan menggunakan :not(:last-child)untuk memastikan bahwa koma akan diterapkan ke semua item kecuali yang terakhir.

ul> li: not (: last-child) :: after {

kandungan: “,”;

}


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...

Encoding Adalah : 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...

Cara 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...

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...

10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

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,...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

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...

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