10 Properti CSS3 Yang Perlu Anda Ketahui – Kami telah memperkenalkan 30 pemilih CSS yang harus kita semua ingat, tetapi bagaimana dengan properti CSS3 yang baru? Meskipun sebagian besar masih memerlukan prefiks khusus vendor, Anda masih dapat menggunakannya dalam proyek hari ini. Nyatanya, ini menggembirakan!
Di akhir artikel ini, kita akan mendapat tugas akhir yang menarik.

1. border-radius
border-radius
dapat dengan mudah menjadi sekumpulan properti CSS3 yang paling populer, mirip dengan properti CSS3 andalan. Meskipun banyak desainer masih takut dengan gagasan bahwa tata letaknya mungkin berbeda tergantung pada browser, langkah-langkah kecil seperti sudut membulat dapat dengan mudah menarik perhatian mereka!
Ironisnya, ide javascriptoo untuk memberikan pengalaman menonton alternatif untuk peramban seluler sangatlah sempurna. Namun, anehnya, beberapa orang merasa berbeda saat menjelajah desktop.
border-radius:
4px
;
Circles
Beberapa pembaca mungkin tidak menyadari bahwa kita juga dapat menggunakan atribut ini untuk membuat lingkaran. Yang harus Anda lakukan adalah mengatur radius menjadi setengah dari lebar atau tinggi elemen.
border-radius:
50px
;
Dan, jika kita ingin bersenang-senang, kita juga dapat menggunakan “model kotak fleksibel” (dijelaskan di # 8) untuk memusatkan teks secara vertikal dan horizontal di dalam lingkaran. Ini membutuhkan beberapa kode, tetapi ini hanya karena perlu mengkompensasi berbagai vendor.
1 display
: flex;
2 align-items:
center
;
3 justify-
content
:
center
;
2 Juta + Tema Dan Plugin WordPress, Template Web Dan Email, Toolkit UI, Dll.
Gunakan keanggotaan Envato Elements untuk mengunduh ribuan tema dan plugin WordPress, templat web, elemen UI, dan banyak lagi. Akses tak terbatas ke perpustakaan yang berkembang untuk mengakses jutaan aset materi iklan dan kode.
Baca Juga : Tutorial Cara Kelola CSS Z-Index
2. box-shadow
Selanjutnya, kita akan menggunakan box-shadow
di mana-mana, yang memungkinkan Anda menerapkan kedalaman ke elemen dengan segera. Hanya saja, jangan membenci nilai yang Anda tetapkan terlalu banyak!
box-shadow:
1px
1px
3px
#292929
;
box-shadow
menerima empat parameter:
- x offset
- y offset
- blur
- color of shadow
Sekarang, yang tidak disadari banyak orang adalah Anda dapat menerapkan beberapa box-shadows
sekaligus. Ini dapat menyebabkan beberapa efek yang sangat menarik. Misalnya, kita dapat menggunakan warna biru dan hijau untuk memperbesar setiap bayangan.
box-shadow:
1px
1px
3px
green
,
-1px
-1px
3px
blue
;
Clever Shadows
Dengan menerapkan bayangan ::before
dan ::after
pseudo-class, kita dapat membuat beberapa perspektif yang sangat menarik. Ini adalah cara untuk memulai :
The HTML
<
div
class
=
"box"
>
<
img
src
=
"tuts.jpg"
alt
=
"Tuts"
/>
</
div
>
The CSS
.box:after {
content
:
""
;
position
:
absolute
;
z-index
:
-1
;
/* hide shadow behind image */
box-shadow:
0
15px
20px
rgba(
0
,
0
,
0
,
0.3
);
width
:
70%
;
left
:
15%
;
/* one half of the remaining 30% (see width above) */
height
:
100px
;
bottom
:
0
;
}
3. text-shadow
Mirip dengan box-shadow
, itu harus diterapkan ke teks dan menerima empat parameter yang sama :
- X offset
- y offset
- buram
- Warna bayangan
h
1
{
text-shadow
:
0
1px
0
white
;
color
:
#292929
;
}
Text Outlines
Sekali lagi, seperti box-shadow
saudara kandungnya, kita bisa menerapkan beberapa bayangan dengan menggunakan koma sebagai pemisah. Misalnya, kita ingin membuat efek garis besar untuk teks. Meskipun webkit
memberikan efek stroke
, kita dapat mengakses lebih banyak browser (meskipun tidak cukup bagus) dengan menggunakan metode berikut :
body {
background
:
white
; }
h
1
{
text-shadow
:
0
1px
0
black
,
0
-1px
0
black
,
1px
0
0
black
,
-1px
0
0
black
;
color
:
white
;
}
4. text-stroke
Harap gunakan metode ini dengan hati-hati. Ini adalah fitur non-standar. Atribut text-stroke
belum menjadi bagian dari spesifikasi CSS3. Namun, jika Anda menggunakan awalan -webkit-
, semua browser utama sekarang mendukung fitur ini.
Baca Juga : 3 Kerangka Javascript Digunakan Pada 2021
h
1
{
-webkit-text-stroke:
3px
black
;
color
:
white
;
}
Deteksi fitur
Bagaimana kami menyediakan satu set gaya untuk Firefox dan set gaya lainnya untuk Safari atau Chrome? Salah satu solusinya adalah dengan menggunakan deteksi fitur.
Melalui deteksi fitur, kita dapat menggunakan JavaScript untuk menguji apakah atribut tertentu tersedia. Jika tidak, kami siapkan cadangan.
Mari kita simak kembali masalah text-stroke
. Mari kita menyetel black
cadangan untuk browser yang tidak mendukung atribut ini (kecuali webkit
saat ini).
var
h1 = document.createElement(
'h1'
);
if
( !(
'webkitTextStroke'
in
h1.style ) ) {
var
heading = document.getElementsByTagName(
'h1'
)[0];
heading.style.color =
'black'
;
}
Pertama, kami membuat elemen h1
virtual. Kemudian, kami melakukan pencarian rongga penuh melalui atribut style
untuk menentukan apakah atribut -webkit-
text-stroke
dapat digunakan untuk elemen tersebut. Jika tidak, kita akan mengambil judul Hello
Readers
dan mengatur warnanya dari putih
menjadi hitam
.
Harap dicatat bahwa kami generik di sini. Jika Anda perlu mengganti beberapa tag h1
di halaman, Anda perlu menggunakan pernyataan vhile
untuk memfilter setiap judul dan memperbarui gaya atau nama kelas yang sesuai.
Saat browser lain pada akhirnya mendukung atribut text-stroke
, kami hanya akan menguji webkit
. Ingat ini.
Jika Anda membutuhkan solusi deteksi fungsional yang lebih komprehensif, silakan merujuk ke Modernizr.
5. Multiple Backgrounds
Properti background
telah dimodifikasi secara komprehensif untuk memungkinkan banyak latar belakang di CSS3.
Mari buat contoh konyol, hanya sebagai bukti konsep. Karena tidak ada gambar yang cocok di dekatnya, saya akan menggunakan dua gambar tutorial sebagai latar belakang. Tentu saja, dalam aplikasi nyata, Anda dapat menggunakan tekstur untuk latar belakang, dan mungkin gradien.
.box {
background
:
url
(image/path.jpg)
0
0
no-repeat
,
url
(image
2
/path.jpg)
100%
0
no-repeat
;
}
Di atas, dengan menggunakan koma sebagai pemisah, kami mereferensikan dua gambar latar belakang yang terpisah. Harap perhatikan bagaimana itu ditempatkan di posisi sudut kiri atas (0 0
) dalam kasus pertama, dan bagaimana itu ditempatkan di posisi sudut kanan atas (100% 0
) dalam kasus kedua.
Baca Juga : Cara Ubah Suara Menjadi Teks Dengan Javascript
Pastikan untuk menyediakan fitur cadangan untuk browser yang tidak mendukung banyak latar belakang. Mereka akan melewatkan atribut sama sekali, membiarkan latar belakang kosong.
Kompensasi Untuk Browser Lama
Untuk menambahkan gambar background
tunggal untuk browser lama (seperti IE7), harap nyatakan properti latar belakang dua kali: yang pertama untuk browser lama, dan yang kedua adalah pengganti. Selain itu, Anda dapat menggunakan Modernizr lagi.
.box {
/* fallback */
background
:
url
(image/path.jpg)
no-repeat
;
/* modern browsers */
background
:
url
(image/path.jpg)
0
0
no-repeat
,
url
(image
2
/path.jpg)
100%
0
no-repeat
;
}
6. background-size
Sebelum menggunakan CSS modern, kami terpaksa menggunakan teknik licik untuk menyesuaikan ukuran gambar latar belakang.
background
:
url
(path/to/image.jpg)
no-repeat
;
background-
size
:
100%
100%
;
Kode di atas akan mengarahkan gambar latar untuk menempati semua ruang yang tersedia. Misalnya, bagaimana jika kita ingin gambar tertentu menempati seluruh latar belakang elemen body
, terlepas dari lebar jendela browser?
body, html {
height
:
100%
; }
body {
background
:
url
(path/to/image.jpg)
no-repeat
;
background-
size
:
100%
100%
;
}
Semuanya di sini adalah miliknya. Atribut background-size
akan menerima dua parameter: masing-masing lebar x
dan y
.
Meskipun Chrome dan Safari versi terbaru mendukung background-size
secara native, untuk browser lama, kami masih perlu menggunakan awalan vendor.
body {
background
:
url
(path/to/image.jpg)
no-repeat
;
background-
size
:
100%
100%
;
}
7. text-overflow
Atribut text-overflow yang awalnya dikembangkan untuk Internet Explorer dapat menerima dua nilai:
- clip
- ellipsis
Atribut ini dapat digunakan untuk memotong teks di luar penampungnya, sambil tetap memberikan beberapa umpan balik kepada pengguna, seperti elipsis.
apa kamu tahu Sejak IE6, Internet Explorer telah memberikan dukungan untuk atribut ini. Mereka menciptakannya!
.box {
text-
overflow
:ellipsis;
overflow
:
hidden
;
white-space
:
nowrap
;
border
:
1px
solid
black
;
width
:
400px
;
padding
:
20px
;
cursor
:
pointer
;
}
Pada tahap ini, Anda dapat mempertimbangkan untuk menampilkan seluruh teks saat pengguna mengarahkan kursor ke kotak.
#box:hover {
white-space
:
normal
;
color
: rgba(
0
,
0
,
0
,
1
);
background
:
#e3e3e3
;
border
:
1px
solid
#666
;
}
Agak aneh (kecuali saya salah), sepertinya tidak ada cara untuk mereset properti text overflow atau “matikan”. Untuk mensimulasikan fungsi “off” ini, silakan aktifkan: hover, kita dapat menyetel properti kosong kembali ke normal. Ini dimungkinkan karena luapan teks bergantung pada fitur ini agar berfungsi dengan baik.
8. Flexible Box Model
Model kotak fleksibel pada akhirnya akan membebaskan kita dari floats
yang kikuk itu. Meskipun membutuhkan banyak upaya untuk fokus pada properti baru, setelah selesai, semua ini masuk akal.
Mari buat demo cepat dan buat tata letak dua kolom sederhana.
<
div
id
=
"container"
>
<
div
id
=
"main"
> Main content here </
div
>
<
aside
> Aside content here </
aside
>
</
div
>
Sekarang, untuk CSS: pertama-tama kita perlu menginstruksikan untuk memperlakukan container
sebagai box
fleksibel. Saya juga akan menerapkan lebar dan tinggi umum karena kami tidak memiliki konten aktual yang diputar.
#container {
width
:
600px
;
height
:
450px
;
/* just for demo */
background
:
#e3e3e3
;
margin
:
auto
;
display
: flex;
}
Selanjutnya, mari terapkan div
#main
dan warna latar belakang unik di aside
untuk demo.
#main {
background
: yellow;
}
aside {
background
:
red
;
}
Pada titik ini, tidak ada yang perlu diperhatikan.
Amati apa yang terjadi ketika kita secara eksplisit mendeklarasikan lebar di area konten #main
.
#main {
background
: yellow;
width
:
400px
;
}
Yah, itu akan lebih baik, tetapi kami masih memiliki masalah, yaitu tidak menjaga semua ruang yang tersisa. Kita dapat menggunakan properti box-flex
baru untuk menyelesaikan masalah ini.
Baca Juga : 11 Tools Prototipe Terbaik Untuk Desainer UI / UX
flex
menunjukkan bahwa elemen tersebut menggunakan semua ruang yang tersedia.
aside {
display
:
block
;
/* cause is HTML5 element */
background
:
red
;
/* take up all available space */
flex:
1
;
}
Setelah menggunakan atribut ini, terlepas dari lebar area konten #main
, ruang yang dicadangkan akan memenuhi semua spesifikasi dari ruang yang tersedia. Lebih baik lagi, Anda tidak perlu khawatir tentang masalah float
yang mengganggu, seperti elemen yang ditempatkan di bawah area konten utama.
Kami hanya menggores permukaan di sini. Untuk mempelajari lebih lanjut tentang Flexbox, lihat panduan lengkap kami! Sekarang, semua browser utama mendukung fitur ini, dan diharapkan dapat bekerja secara normal di lebih dari 99% perangkat.
9. resize
Atribut resize
(bagian dari modul CSS3 UI) memungkinkan Anda menentukan cara mengubah ukuran textarea
. Sekarang, kecuali IE dan iOS Safari, semua browser utama mendukung fitur ini.
Harap dicatat bahwa secara default, browser webkit
dan Firefox 4 memungkinkan pengubahan ukuran textareas
secara vertikal dan horizontal.
textarea {
resize: vertical;
}
Nilai yang memungkinkan
both
: pengubahan ukuran vertikal dan horizontal
horizontal
: Batasi ukuran menjadi horizontal
vertical
: Batasi ukuran menjadi vertikal
none
: Nonaktifkan pengubahan ukuran
10. Transitions
Mungkin fitur CSS3 yang paling menarik adalah kemampuannya untuk menerapkan animasi ke elemen tanpa menggunakan JavaScript.
Mari kita simulasikan efek umum, yaitu, setelah mengarahkan mouse ke link di sidebar, teks akan bergeser sedikit ke kanan.
The HTML
<
ul
>
<
li
>
<
a
href
=
"#"
> Hover Over Me </
a
>
</
li
>
<
li
>
<
a
href
=
"#"
> Hover Over Me </
a
>
</
li
>
<
li
>
<
a
href
=
"#"
> Hover Over Me </
a
>
</
li
>
<
li
>
<
a
href
=
"#"
> Hover Over Me </
a
>
</
li
>
</
ul
>
The CSS
ul a {
border-left
:
10px
orange
solid
;
transition: border-width
0.4
s;
}
a:hover {
border-width
:
20px
;
}
transition
akan menerima tiga parameter:
Atribut yang akan diubah. (Jika perlu, setel nilai ini ke all
)
durasi
Tindakan lambat
Alasan mengapa kami tidak secara langsung menerapkan transisi ke status hover dari tag anchor adalah karena jika kami melakukan ini, animasi hanya akan berlaku selama gerakan mouse. Saat mouse dipindahkan, elemen akan segera kembali ke keadaan awalnya.
MOST COMMENTED
Editor PHP
12 Alasan Laravel Adalah Framework PHP Terbaik
JavaScript
Mengenal Node.js Dan Tujuan Utama Menggunakannya
Ruby on Rails
Mengenal Framework Aplikasi Web Ruby On Rails
HTML
Definisi Progressive Web App Dan Cara Kerjanya
HTML
Cara Membuat Editor Pixel Art Menggunakan Kanvas HTML5
HTML
Pelajari Dasar HTML Untuk Pemula Dalam 15 Menit
CSS
10 Properti CSS3 Yang Perlu Anda Ketahui