Belajar Koding HTML & CSS Bagian 8: Membuat Ukuran Background Shorthand
.png)
Dalam HTML
dan CSS, shorthand adalah cara penulisan singkat untuk beberapa properti
CSS sekaligus. Ini membuat kode lebih ringkas dan mudah dibaca.
Berikut
beberapa contoh shorthand
1. Margin dan Padding
/* Panjang */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/* Shorthand */
margin: 10px 20px;
Penjelasan
urutan:
- margin: atas kanan bawah kiri;
- Jika hanya 2 nilai → atas & bawah | kanan &
kiri
2. Font
/* Panjang */
font-style: italic;
font-weight: bold;
font-size: 16px;
line-height: 1.5;
font-family: Arial, sans-serif;
/* Shorthand */
font: italic bold 16px/1.5 Arial, sans-serif;
3. Background
/* Panjang */
background-color: #f00;
background-image: url('bg.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
/* Shorthand */
background: #f00 url('bg.png') no-repeat center / cover;
4. Border
/* Panjang */
border-width: 2px;
border-style: solid;
border-color: black;
/* Shorthand */
border: 2px solid black;
5. List Shorthand (Misal: List Style)
list-style: square inside url('icon.png');
Kalau kamu
mau contoh penggunaan langsung dalam HTML dan CSS, tinggal bilang ya! Bisa aku buatkan.
6. Transition
/* Panjang */
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0.1s;
/* Shorthand */
transition: all 0.3s ease-in-out 0.1s;
7. Animation
/* Panjang */
animation-name: slidein;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
/* Shorthand */
animation: slidein 3s ease-in-out 1s infinite alternate;
8. Flex (Flex Item)
/* Panjang */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
/* Shorthand */
flex: 1 1 0%;
9. Outline
/* Panjang */
outline-width: 2px;
outline-style: dashed;
outline-color: red;
/* Shorthand */
outline: 2px dashed red;
Berikut Adalah Panduan Lengkap Untuk Membuat HTML Dan CSS Menggunakan Teknik Shorthand, Yang Memungkinkan Anda Menulis Kode Lebih Ringkas Dan Efisien.
📄
Contoh HTML & CSS Dengan Shorthand
<!DOCTYPE
Html>
<Html
Lang="Id">
<Head>
<Meta Charset="UTF-8">
<Title>Contoh CSS Shorthand</Title>
<Style>
.Kotak {
Width: 200px;
Height: 200px;
Background: Linear-Gradient(To Right,
#4facfe, #00f2fe);
Margin: 20px Auto;
Padding: 15px 25px;
Border: 3px Dashed #333;
Border-Radius: 10px 20px 30px 40px;
Font: Italic Small-Caps Bold 16px/1.5 'Arial',
Sans-Serif;
Color: White;
Text-Align: Center;
Transition: All 0.3s Ease-In-Out;
}
.Kotak:Hover {
Background: #00f2fe;
Color: #333;
}
</Style>
</Head>
<Body>
<Div Class="Kotak">
Ini Adalah Kotak Dengan CSS Shorthand
</Div>
</Body>
</Html>
 |
| Tampilan Hasil (Output) Background Shorhand |
🧾
Penjelasan CSS Shorthand Yang Digunakan
- Margin:
20px Auto;
Menetapkan Margin Atas Dan Bawah Sebesar 20px, Serta Margin Kiri Dan Kanan Otomatis Untuk Memusatkan Elemen Secara Horizontal. - Padding:
15px 25px;
Menetapkan Padding Atas Dan Bawah Sebesar 15px, Serta Kiri Dan Kanan Sebesar 25px. - Border:
3px Dashed #333;
Menggabungkan Lebar Border (3px), Gaya Garis (Dashed), Dan Warna (#333) Dalam Satu Deklarasi. - Border-Radius:
10px 20px 30px 40px;
Menetapkan Radius Sudut Secara Berurutan: Kiri Atas, Kanan Atas, Kanan Bawah, Kiri Bawah. - Font:
Italic Small-Caps Bold 16px/1.5 'Arial', Sans-Serif;
Menggabungkan Gaya Font (Italic), Varian (Small-Caps), Ketebalan (Bold), Ukuran Dan Tinggi Baris (16px/1.5), Serta Keluarga Font ('Arial', Sans-Serif). - Background:
Linear-Gradient(To Right, #4facfe, #00f2fe);
Mengatur Latar Belakang Dengan Gradasi Warna Dari Kiri Ke Kanan. - Transition:
All 0.3s Ease-In-Out;
Menetapkan Transisi Untuk Semua Properti Dengan Durasi 0.3 Detik Dan Efek Ease-In-Out.
0 Response to "Belajar Koding HTML & CSS Bagian 8: Membuat Ukuran Background Shorthand"
Post a Comment