Màu sắc và nền trong CSS
CSS cung cấp nhiều cách biểu diễn màu và tạo nền phong phú, từ màu đơn giản đến gradient và ảnh nền.
Các định dạng màu
| Định dạng | Ví dụ | Ghi chú |
|---|---|---|
| Tên màu | red, cornflowerblue |
~150 tên có sẵn |
| Hex 6 chữ số | #4472c4 |
#RRGGBB |
| Hex 3 chữ số | #48f |
Rút gọn từ #4488ff |
rgb() |
rgb(68, 114, 196) |
Giá trị 0–255 |
rgba() |
rgba(68, 114, 196, 0.5) |
Thêm kênh alpha 0–1 |
hsl() |
hsl(216, 52%, 52%) |
Hue 0–360, Saturation %, Lightness % |
hsla() |
hsla(216, 52%, 52%, 0.8) |
Có kênh alpha |
.box { color: #333; } /* Chữ */
.box { background-color: rgba(0,0,0,0.1); } /* Nền bán trong suốt */
color-mix() (CSS hiện đại)
/* Trộn 2 màu theo tỉ lệ */
.blend { background: color-mix(in srgb, #4472c4 60%, white); }
Background image và gradient
Ảnh nền
.hero {
background-image: url('/assets/hero.jpg');
background-size: cover; /* Phủ toàn bộ, có thể crop */
background-size: contain; /* Hiện toàn bộ ảnh, có thể có khoảng trắng */
background-position: center;
background-repeat: no-repeat;
}
Linear gradient
background: linear-gradient(to right, #4472c4, #ed7d31);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5));
Radial gradient
background: radial-gradient(circle, #fff 0%, #4472c4 100%);
background: radial-gradient(ellipse at top left, #f0f 0%, #00f 100%);
opacity
.overlay { opacity: 0.5; } /* Ảnh hưởng cả phần tử và con — dùng rgba() cho nền trong suốt thuần túy */
Demo: Các định dạng màu
<h3>Cùng một màu xanh — viết theo nhiều cách</h3>
<div class="swatches">
<div class="sw sw-name">cornflowerblue<br><code>cornflowerblue</code></div>
<div class="sw sw-hex6">#6495ED<br><code>#6495ED</code></div>
<div class="sw sw-rgb">rgb<br><code>rgb(100,149,237)</code></div>
<div class="sw sw-rgba">rgba 0.8<br><code>rgba(100,149,237,.8)</code></div>
<div class="sw sw-hsl">hsl<br><code>hsl(219,79%,66%)</code></div>
</div>
<h3>color-mix()</h3>
<div class="swatches">
<div class="sw sw-mix0">0% white<br><code>gốc</code></div>
<div class="sw sw-mix30">30% white</div>
<div class="sw sw-mix60">60% white</div>
<div class="sw sw-mix90">90% white</div>
</div>
<h3>Opacity vs rgba</h3>
<div class="opacity-demo">
<div class="op-parent">
<div class="op-opacity">opacity: 0.4<br>(nền + chữ đều mờ)</div>
</div>
<div class="op-parent">
<div class="op-rgba">rgba background<br>(chỉ nền mờ)</div>
</div>
</div>
body { font-family: sans-serif; padding: 1rem; }
h3 { font-size: 1rem; color: #555; margin: 1rem 0 .4rem; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw {
width: 120px; height: 80px; display: flex;
flex-direction: column; align-items: center; justify-content: center;
border-radius: 6px; font-size: .75rem; color: white; text-shadow: 0 1px 2px rgba(0,0,0,.4);
border: 1px solid rgba(0,0,0,.1);
}
.sw code { font-size: .65rem; color: rgba(255,255,255,.85); }
.sw-name { background-color: cornflowerblue; }
.sw-hex6 { background-color: #6495ED; }
.sw-rgb { background-color: rgb(100,149,237); }
.sw-rgba { background-color: rgba(100,149,237,.8); }
.sw-hsl { background-color: hsl(219,79%,66%); }
.sw-mix0 { background: color-mix(in srgb, cornflowerblue 100%, white); }
.sw-mix30 { background: color-mix(in srgb, cornflowerblue 70%, white); }
.sw-mix60 { background: color-mix(in srgb, cornflowerblue 40%, white); color: #333; text-shadow: none; }
.sw-mix90 { background: color-mix(in srgb, cornflowerblue 10%, white); color: #333; text-shadow: none; }
.opacity-demo { display: flex; gap: 16px; margin-top: .5rem; }
.op-parent {
width: 160px; height: 80px; display: flex; align-items: center; justify-content: center;
background: repeating-linear-gradient(45deg,#f0f0f0,#f0f0f0 10px,#fff 10px,#fff 20px);
border: 1px solid #ccc; border-radius: 4px;
}
.op-opacity { opacity: .4; background: #4472c4; color: white; padding: 8px 12px; border-radius: 4px; text-align: center; font-size: .85rem; }
.op-rgba { background: rgba(68,114,196,.4); color: #333; padding: 8px 12px; border-radius: 4px; text-align: center; font-size: .85rem; }
Demo: Gradient
<h3>Linear Gradient</h3>
<div class="grad-boxes">
<div class="g lg-lr">to right</div>
<div class="g lg-tb">to bottom</div>
<div class="g lg-diag">135deg</div>
<div class="g lg-multi">Nhiều điểm dừng</div>
</div>
<h3>Radial Gradient</h3>
<div class="grad-boxes">
<div class="g rg-circle">circle</div>
<div class="g rg-ellipse">ellipse</div>
<div class="g rg-corner">at top left</div>
</div>
<h3>Gradient làm text (clip)</h3>
<p class="gradient-text">Văn bản gradient đẹp mắt</p>
body { font-family: sans-serif; padding: 1rem; }
h3 { font-size: 1rem; color: #555; margin: 1rem 0 .4rem; }
.grad-boxes { display: flex; flex-wrap: wrap; gap: 10px; }
.g {
width: 140px; height: 90px; display: flex;
align-items: center; justify-content: center;
border-radius: 6px; color: white; font-size: .85rem;
text-shadow: 0 1px 2px rgba(0,0,0,.4); border: 1px solid rgba(0,0,0,.08);
}
/* Linear */
.lg-lr { background: linear-gradient(to right, #4472c4, #ed7d31); }
.lg-tb { background: linear-gradient(to bottom, #36d1dc, #5b86e5); }
.lg-diag { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.lg-multi { background: linear-gradient(to right, #f093fb 0%, #f5576c 30%, #fda085 70%, #f6d365 100%); }
/* Radial */
.rg-circle { background: radial-gradient(circle, #a1c4fd 0%, #c2e9fb 100%); color: #333; text-shadow: none; }
.rg-ellipse { background: radial-gradient(ellipse, #fbc2eb 0%, #a6c1ee 100%); color: #333; text-shadow: none; }
.rg-corner { background: radial-gradient(circle at top left, #fddb92 0%, #d1fdff 100%); color: #333; text-shadow: none; }
/* Gradient text */
.gradient-text {
font-size: 2rem; font-weight: 900; margin: .5rem 0;
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
Bình luận