Media Pengembangan Web & App | by APPKEY

Pembuatan Website Web Programming Mempelajari 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 {

Artikel Terkait  Looping Adalah Algoritma Perulangan: Berikut Contohnya

lebar: 300px;

float: kiri;

bentuk-luar: lingkaran (50%)

}

Inilah hasil dari .shape kelas yang diterapkan pada gambar:

Artikel Terkait  Looping Adalah Algoritma Perulangan: Berikut Contohnya

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;

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  Apa itu OOP? Cara Menjelaskan Kepada Pemula
Artikel Terkait  Mengetahui Penggunaan Fungsi Explode dan Implode Pada PHP

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  Praktis Buat Web dengan “Wix” | Aplikasi Web Development Kekinian
Artikel Terkait  Yuk Belajar CodeIgniter | Tutorial Mudah Terlengkap untuk Pemula

: 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!

Blog Post Ranking 10

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

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

Proses Komunikasi: Encoding dan Decoding

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

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

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

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

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

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

Mau Jadi Front-end Developer? Kamu Perlu Menguasai 10 Skill Berikut Ini!

Secara umum untuk membuat sebuah website impian Anda menjadi nyata, Anda hanya perlu datang ke web developer dan menyampaikan...

Mockup adalah: Membuat Mockup Design untuk Website

Wireframes adalah kerangka. Prototipe menunjukkan perilaku. Mockup adalah kulitnya. Dalam artikel ini, kami akan menjelaskan mengapa mockup sama pentingnya dengan...

Jasa Web

Bisnis online

Pengembangan

Murah

Profesional

Toko online

SEO

Pemasaran

Tips

Jasa Aplikasi

Pembuatan Aplikasi

Bisnis online

Pemasaran

Istilah IT

TIPS

TOOLS

JASA

HARGA

Jasa Marketing

Istilah SEO

Teknik SEO

Tips Marketing

Paling Sering dibaca
Mungkin Anda Menyukainya