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ụ:

      <span>👋</span>
      <span>👌</span>
      <span>👍</span>
      <span>👐</span>


      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ụ:

      <div class="repeat"></div>
      <div class="round"></div>
      <div class="space"></div>


      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 rawcode.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 rawcode.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 rawcode.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 rawcode.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 rawcode.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 rawcode.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 rawcode.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 rawcode.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 rawcode.css hosted with ❤ by GitHub



      Tác giả: Alexey Shepelev

      Dịch bởi Devera Academy