12 CSS Trick để trở thành Layout Ninja

20 tháng 6, 2021 By DEVERA ACADEMY

Một vài thuộc tính và giá trị trong CSS hiếm khi được đề cập trong tài liệu kỹ thuật, nhưng lại có một vai trò không nhỏ trong việc cải thiện tốc độ và chất lượng phát triển giao diện web. Dưới đây là một vài thuộc tính và giá trị mà hầu hết đều được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Bạn đã sẵn sàng cho một cuộc hành trình nhỏ vào thế giới tuyệt vời và gần như không biên giới của CSS chưa? Let's go!

grid và place-items

Kỹ thuật giúp bạn căn chỉnh các mục theo chiều ngang và chiều dọc chỉ với hai dòng code.

.parent {

display: grid;

place-items: center;

}

place-items là một thuộc tính viết tắt cho justify-items và align-items.

Thuộc tính này có thể được áp dụng cho một hoặc nhiều ô (con) cùng một lúc.

.parent {

display: grid;

grid-template-columns: 1fr 1fr;

place-items: center

}

flex và margin

Một cách khác để căn chỉnh các mục theo chiều ngang và chiều dọc là sử dụng kết hợp giữa display: flex và margin: auto.

.parent {

display: flex;

}

.child {

margin: auto;

}

Có thể thực hiện việc tương tự bằng cách sử dụng đoạn code sau:

.parent {

display: flex;

justify-content: center;

align-items: center;

}

flex và gap

Chúng ta đã có khả năng đặt khoảng cách giữa các mục flex của Flexbox bằng thuộc tính gap:

.parent {

display: flex;

flex-wrap: wrap;

gap: 1em;

}

inline-flex

Thuộc tính này cho phép bạn tạo các phần tử inline (trên cùng 1 dòng) có các tính năng như Flexbox. Ví dụ:

body {

margin: 0;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

gap: 0.5em;

background: #fbfbfb;

}

span {

width: 2.5em;

height: 2.5em;

/* --- */

display: inline-flex;

justify-content: center;

align-items: center;

/* --- */

background: #1266f1;

border-radius: 30%;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

font-size: 1.1rem;

}

columns

Kỹ thuật này cho phép bạn chia văn bản thành các cột. Thuộc tính column-count chỉ định số cột, column-gap đặt kích thước của khoảng cách giữa các cột và column-rule đặt kiểu của đường thẳng đứng chia các cột.

columns là thuộc tính viết tắt cho column-count và columns-width.

<p>

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis reprehenderit inventore ad 
libero officia, necessitatibus laudantium corporis veniam quae, fugiat dolores quaerat corrupti 
tempore ipsa consequuntur similique explicabo ducimus commodi expedita. Dolore commodi nesciunt 
harum? Consequuntur, voluptatibus odio! Maiores non alias autem tempore corrupti, animi accusa
-mus pudiandae nam. Autem at explicabo molestias dignissimos repellendus, magnam laudantium ea 
quisquam, quam, tenetur adipisci facere quas. Accusantium architecto iste eius tempore conse
-quatur quidem officiis delectus eaque sequi rem! Nesciunt voluptatum tempora voluptatem a sit, 
minima excepturi quaerat quasi soluta aspernatur quia explicabo incidunt, fugiat animi. Dolor 
provident corporis magni voluptate vel non earum?

</p>

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

body {

margin: 0;

background: #262626;

font-family: "Montserrat", sans-serif;

color: #fbfbfb;

}

p {

margin: 1em;

/* --- */

column-count: 3;

column-gap: 2em;

column-rule: 1px dotted;

/* --- */

}

@media (max-width: 768px) {

p {

column-count: 2;

}

@media (max-width: 512px) {

p {

column-count: 1;

}

background-repeat

Thuộc tính background-repeat thiết lập thứ tự mà nền được lấp đầy bằng hình ảnh. Các giá trị của thuộc tính bao gồm:

round phân bố đồng đều hình ảnh trên toàn bộ chiều rộng của vùng chứa
space thêm một lượng nhỏ khoảng cách giữa các hình ảnh

Ví dụ:

body {

margin: 0;

height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

background: #fbfbfb;

}

div {

width: 300px;

height: 64px;

  background-image: url("https://pics.freeicons.io/uploads/icons/png/3733236321617275952-64.png");

}

.repeat {

background-repeat: repeat;

}

.round {

background-repeat: round;

}

.space {

background-repeat: space;

}

background-blend-mode

Thuộc tính background-blend-mode dùng hòa trộn một hoặc nhiều hình nền/màu sắc với nhau.

Những giá trị có thể có:

color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
saturation
screen
soft-light

Nếu bạn từng sử dụng Photoshop thì chắc chắn bạn sẽ hiểu những giá trị này.

<h1>
  look at <br />
  the sky
</h1>

view raw code.html hosted with ❤ by GitHub

@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");
@keyframes show {
  from {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
body {
  margin: 0;
  height: 100vh;
  /* --- */
  background: url("https://images.pexels.com/photos/414659/pexels-photo-414659.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"),
    linear-gradient(135deg, skyblue, steelblue 90%);
  background-blend-mode: overlay;
  /* --- */
  background-size: cover;
  display: grid;
  place-items: center;
}
h1 {
  font-family: "Audiowide", cursive;
  color: #00b74a;
  font-size: 4rem;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 2px #262626;
  animation: show 2s linear forwards;
}

view raw code.css hosted with ❤ by GitHub

background-clip

Thuộc tính background-clip xác định màu nền hoặc hình nền của phần tử đến phạm vi margin. Text là giá trị thú vị nhất của thuộc tính này, ví dụ:

<p>nature</p>

view raw code.html hosted with ❤ by GitHub

@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}
body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: #fbfbfb;
  overflow: hidden;
}
p {
  font-family: "Bungee", cursive;
  font-size: 8rem;
  color: transparent;
  /* --- */
  background-image: url("https://images.pexels.com/photos/1179229/pexels-photo-1179229.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");
  -webkit-background-clip: text;
  background-clip: text;
  /* --- */
  background-size: cover;
  background-position: center;
  animation: pulse 2s linear infinite alternate;
}

view raw code.css hosted with ❤ by GitHub

Kết quả:

filter

Thuộc tính filter giúp bạn áp dụng các hiệu ứng lên phần tử được chọn. Các giả trị mà thuộc tính này đang hỗ trợ bao gồm:

url()
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()

<input type="checkbox" class="theme" />
<p class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime. Adipisci quos quia veritatis nemo quaerat magnam dolorum tempora voluptatum deleniti consectetur enim ea facere nihil sed ut laborum hic, sapiente vel ratione harum, vero iusto laudantium. Porro accusantium a harum ipsam!
</p>

view raw code.html hosted with ❤ by GitHub

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.theme {
  cursor: pointer;
}
.theme:checked + .text {
  filter: invert();
}
.text {
  margin: 1em;
  padding: 1em;
  background: #262626;
  border-radius: 4px;
  font-family: "Montserrat", sans-serif;
  color: #fbfbfb;
  transition: 0.2s ease-in;
}

object-fit

Thuộc tính object-fit kiểm soát tỷ lệ khung hình của các phần tử, chẳng hạn như hình ảnh và video, nếu chúng có chiều rộng hoặc chiều cao, cũng như quá trình scale.

Ví dụ giá trị scale-down cho phép bạn duy trì tỷ lệ khung hình của hình ảnh bất kể kích thước box chứa:

<img src="https://pics.freeicons.io/uploads/icons/png/21088442871540553614-64.png" alt="js" />
<img src="https://pics.freeicons.io/uploads/icons/png/20167174151551942641-64.png" alt="react" />
<img src="https://pics.freeicons.io/uploads/icons/png/191213921552037062-64.png" alt="vue" />

view raw code.html hosted with ❤ by GitHub

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  background-color: #fbfbfb;
}
img {
  width: 100px;
  height: 100px;
  /*  ---  */
  object-fit: scale-down;
  /*  ---  */
  border: 1px dashed #262626;
  border-radius: 4px;
}

Thuộc tính object-position được sử dụng để căn chỉnh nội dung của phần tử đã chọn bên trong box.

cursor

Bạn có biết rằng ngoài các biểu tượng con trỏ do trình duyệt cung cấp, chúng ta cũng có thể sử dụng được hình ảnh và file SVG của riêng mình?

<div class="image">image</div>
<div class="svg">svg</div>

view raw code.html hosted with ❤ by GitHub

body {
  margin: 0;
  height: 100vh;
  background-color: #fbfbfb;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4em;
}
div {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  background-image: linear-gradient(yellow, orange);
  font-family: system-ui;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.image {
  cursor: url("https://pics.freeicons.io/uploads/icons/png/20278001131579606320-32.png"),
    auto;
}
.svg {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='40' viewport='0 0 100 100' style='fill:black;font-size:22px;'><text y='50%'>🐧</text></svg>"),
    auto;
}

view raw code.css hosted with ❤ by GitHub

::selection

Phần tử giả định ::selection cho phép bạn định dạng cho vùng văn bản được chọn.

p::selection {
  background-color: #e22d2d;
  color: #fbfbfb;
}

view raw code.css hosted with ❤ by GitHub

12 CSS Trick để trở thành Layout Ninja

grid và place-items

flex và margin

flex và gap

inline-flex

columns

background-repeat

background-blend-mode

background-clip

filter

object-fit

cursor

::selection

Tác giả: Alexey Shepelev

Dịch bởi Devera Academy

Đăng Ký Nhận Tin