# Center 2 chiều với absolute
Đoạn code này khi bạn muốn một phần tử canh giữa theo chiều ngang và chiều dọc luôn cũng với thuộc tính position: absolute.
/* Center top left with position */
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}# Rút gọn code CSS cho thuộc tính về font
/* Before */
.box {
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1.5rem;
line-height: 200%;
font-family: "Courier New", Courier, monospace;
}
/* After */
.box {
font: italic small-caps 1.5rem/200%
"Courier New", Courier, monospace;
}# Rút gọn code CSS cho giá trị về màu sắc
Nếu mã màu trùng nhau 6 ký tự thì chỉ cần điền vào 3 là đủ hoặc theo cấu trúc aabbcc thì có thể viết thành abc là được.
/* Before */
.box {
color: #000000;
color: #77cc88;
}
/* After */
.box {
color: #000;
color: #7c8;
}# Center dọc với absolute
Đoạn code này khi các bạn muốn một phần tử canh giữa theo chiều dọc với thuộc tính position: absolute nhé.
/* Center top with position */
.center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}# Rút gọn code CSS cho thuộc tính background
/* Before */
.box {
background-color: blue;
background-image: url();
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
/* After */
.box {
background: blue url() no-repeat center center
fixed;
}# Center với Flexbox
Đoạn code này khi các bạn muốn làm các phần tử hiển thị chính giữa khi sử dụng với CSS Flexbox nhé.
/* Center with flexbox */
.center {
display: flex;
align-items: center;
justify-content: center;
}# Center ngang với absolute
Đoạn code này khi các bạn muốn một phần tử canh giữa theo chiều ngang với thuộc tính position: absolute nhé. Rất hay dùng khi làm việc với thuộc tính position khi căn chỉnh phần tử á.
/* Center left with position */
.center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}# Rút gọn code CSS cho thuộc tính border
/* Before */
.box {
border-width: 1px;
border-style: solid;
border-color: red;
}
/* After */
.box {
border: 1px solid red;
}# Center với CSS Grid
Đoạn này chức năng tương tự đoạn trên nhưng mà sử dụng CSS Grid nhé các bạn. Place-items tương ứng là align-items và justify-content áp dụng với CSS Grid.
/* Center with grid */
.center {
display: grid;
place-items: center;
}# Gradient cho chữ
/* Gradient text */
.text {
background-image: linear-gradient(to right,
#ffa440, #00aefc);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}# Box-sizing
Đoạn code này sẽ được toàn bộ selectors về box-sizing: border-box để hiển thị kích thước cho đúng nhé. Quan trọng lắm nha các bạn.
/* All selectors using box-sizing */
*,
*:before,
*:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}# Background gradient
Đây là background gradient sử dụng 2 lớp nền, lớp ở trên là gradient mờ, còn ở dưới là một hình nền thì các bạn có thể sử dụng đoạn code dưới đây nha. Các bạn sẽ thay mã màu tương ứng cho phù hợp với thiết kế của các bạn và hình nền nhé.
/* Gradient background image */
.background {
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url("url of image");
}# Sử dụng đơn vị rem
Nếu các bạn không thích code với đơn vị px cố định thì các bạn có thể sử dụng đơn vị rem nhé, đoạn code này giúp đưa font-size về cơ số 10 cho dễ tính toán. Lúc này 1rem = 10px.
/* Using Rem unit with 1rem = 10px */
html {
font-size: 62.5%;
}# CSS cho placeholder của input, textarea
/* CSS for placeholder input */
.input::--webkit-input-placeholder {
color: red;
}
.input::-moz-placeholder {
color: red;
}# Ẩn icon mũi tên ở input có type là number
/* CSS hide input type Number spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}# CSS cho selection
Khi các bạn vào một trang web các bạn muốn copy nội dung nào đó thì các bạn sẽ bôi đen nó, đoạn code này giúp CSS cho đoạn bôi đen đó nhé. Khá là hay ho.
/* CSS for selection */
::selection {
color: white;
background-color: orange;
}# Tùy chỉnh thanh scroll
Mặc định thanh scrollbar không được đẹp cho lắm thì có thể dùng đoạn code dưới đây để làm cho nó hiển thị theo ý các bạn nhé. Tuy nhiên việc custom này không hỗ trợ trên Firefox nhé.
/* Custom scroll bar */
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}Chúc bạn đăng bài thành công!