Sau css con cuối cùng

Sau phần 2 của series hướng dẫn cắt PSD sang HTML toàn tập mình đã drop một thời gian vì bận viết các bài khác nhau nên hôm nay quay lại để tiếp tục cho các bạn với mục tiêu trong tháng 12 là xong series hướng dẫn cắt PSD

hôm nay sẽ là phần 3 nối tiếp các phần trước thì chúng ta đã hoàn thành phần Header và Menu. Tiếp đến bây giờ là phần Tính năng với cấu trúc bố cục khá phức tạp hơn một chút. The you can see before

Ồ. Cái trên thì chắc dễ rồi còn ba phần bên dưới thì sao nhỉ, tạo cấu trúc HTML sao cho đúng, đặt tên lớp sao cho chuẩn BEM, dễ dàng tái sử dụng, mã tối ưu và quan trọng là hiển thị đúng như vậy với Design. Thôi thì không dài dòng nữa chúng ta cùng phân tích và làm nhé

Nếu bạn nào chưa đọc các bài trước thì nhớ nhấn vào đây để đọc lại nhé vì mình có link tới source code để các bạn có thể tải về làm theo đó. Nếu các bạn không đọc hai phần trước mà bay vô phần này thì luôn là tẩu hỏa nhập ma đấy

# Tiêu đề tính năng

Rồi nhìn vào phần Feature Header, ta thấy có ba phần chính đó là một tấm hình nhỏ, một tiêu đề và một đoạn văn bản đơn giản

Sau khi sử dụng các công cụ của Photoshop để lấy các thông số như kích thước chữ, khoảng cách… thì mình đã có các công cụ số có thể như kích thước của tiêu đề và chữ đều là 18px, màu nền của khối là màu xám mờ.

Lưu ý các thông số như khoảng cách, cỡ chữ, màu sắc các bạn nên tự làm bằng cách sử dụng công cụ có sẵn của Photoshop nhé. Trong vi bài này mình chỉ nói sơ thôi vì cụ thể từng bước rất là dài và tốn kém thời gian

Giờ mình tạo cấu trúc HTML đơn giản cho nó như sau

<div class="feature">
 <div class="feature__header">
  <img src="images/icon1.png" alt="" class="feature__img-top">
  <h2 class="feature__heading">A NEW GENERATION OF VINTAGE BIKE</h2>
  <p class="feature__header-desc">Lorem Ipsum simply dummy text.. </p>
 </div>
</div>

.feature__header {
 padding: 11rem 1.5rem 14rem;
 background-color: var(--bg-light);
}
.feature__img-top {
 margin: 0 auto 3rem;
}
.feature__heading {
 font-size: 1.8rem;
 line-height: 1.6;
 text-transform: uppercase;
 color: var(--heading);
 margin-bottom: 2rem;
 font-weight: bold;
 text-align: center;
}
.feature__header-desc {
 font-size: 1.8rem;
 line-height: 1.6;
 color: var(--text);
 max-width: 106rem;
 margin: 0 auto;
 text-align: center;
}

.feature__header {
 padding: 11rem 1.5rem 14rem;
 background-color: var(--bg-light);
}
.feature__img-top {
 margin: 0 auto 3rem;
}
.feature__heading {
 font-size: 1.8rem;
 line-height: 1.6;
 text-transform: uppercase;
 color: var(--heading);
 margin-bottom: 2rem;
 font-weight: bold;
 text-align: center;
}
.feature__header-desc {
 font-size: 1.8rem;
 line-height: 1.6;
 color: var(--text);
 max-width: 106rem;
 margin: 0 auto;
 text-align: center;
}

.feature__header {
 padding: 11rem 1.5rem 14rem;
 background-color: var(--bg-light);
}
.feature__img-top {
 margin: 0 auto 3rem;
}
.feature__heading {
 font-size: 1.8rem;
 line-height: 1.6;
 text-transform: uppercase;
 color: var(--heading);
 margin-bottom: 2rem;
 font-weight: bold;
 text-align: center;
}
.feature__header-desc {
 font-size: 1.8rem;
 line-height: 1.6;
 color: var(--text);
 max-width: 106rem;
 margin: 0 auto;
 text-align: center;
}

.feature__header {
 padding: 11rem 1.5rem 14rem;
 background-color: var(--bg-light);
}
.feature__img-top {
 margin: 0 auto 3rem;
}
.feature__heading {
 font-size: 1.8rem;
 line-height: 1.6;
 text-transform: uppercase;
 color: var(--heading);
 margin-bottom: 2rem;
 font-weight: bold;
 text-align: center;
}
.feature__header-desc {
 font-size: 1.8rem;
 line-height: 1.6;
 color: var(--text);
 max-width: 106rem;
 margin: 0 auto;
 text-align: center;
}

Là vì ​​tẹo nữa chúng ta sẽ sử dụng lại chúng trong phần Danh sách tính năng bên dưới cho nên mình đặt tên theo kiểu đó để có thể sử dụng lại sau này

Save the task set name. Các bạn có thể đặt tên theo kiểu của mình để học hỏi hoặc có thể đặt theo phong cách riêng của các bạn nhé. Miễn sao các bạn thấy ổn là được rồi nhé

Cuối cùng dựa vào các thông số mình đã lấy được từ Photoshop chúng ta có CSS ​​như sau

.feature__header {
 padding: 11rem 1.5rem 14rem;
 background-color: var(--bg-light);
}
.feature__img-top {
 margin: 0 auto 3rem;
}
.feature__heading {
 font-size: 1.8rem;
 line-height: 1.6;
 text-transform: uppercase;
 color: var(--heading);
 margin-bottom: 2rem;
 font-weight: bold;
 text-align: center;
}
.feature__header-desc {
 font-size: 1.8rem;
 line-height: 1.6;
 color: var(--text);
 max-width: 106rem;
 margin: 0 auto;
 text-align: center;
}

Chúng ta sẽ có kết quả như mong đợi. Như vậy là xong phần Feature Header nha các bạn. Tiếp theo sẽ là phần khó nắm bắt bên dưới

# Danh sách tính năng

Nhìn vào hình thì tổng thể ta có block1 và block2 giống nhau nhưng ngược hướng ta có thể dùng CSS flexbox kèm thuộc tính

.feature__header {
 padding: 11rem 1.5rem 14rem;
 background-color: var(--bg-light);
}
.feature__img-top {
 margin: 0 auto 3rem;
}
.feature__heading {
 font-size: 1.8rem;
 line-height: 1.6;
 text-transform: uppercase;
 color: var(--heading);
 margin-bottom: 2rem;
 font-weight: bold;
 text-align: center;
}
.feature__header-desc {
 font-size: 1.8rem;
 line-height: 1.6;
 color: var(--text);
 max-width: 106rem;
 margin: 0 auto;
 text-align: center;
}

Còn block3 thì cấu trúc của nó có tới ba cột. Nhìn có cảm giác bằng nhau nhưng sau khi đo thì mình thấy cột thứ hai to hơn hai cột còn lại một chút xíu thôi cho nên nếu chia %ra thì ta sẽ có ba cột tương ứng là cột1(33%) cột 2(34)

Bây giờ là đến phần code HTML cho chúng ta. Mình dùng lại HTML ở phần Feature Header ở trên luôn cho các bạn dễ hình dung và thêm thẻ

<div class="feature">
 <div class="feature__header">
  ...
 </div>
 <ul class="feature__list">
   ...
 </ul>
</div>

<div class="feature">
 <div class="feature__header">
  ...
 </div>
 <ul class="feature__list">
   ...
 </ul>
</div>

<div class="feature">
 <div class="feature__header">
  ...
 </div>
 <ul class="feature__list">
   ...
 </ul>
</div>

<div class="feature">
 <div class="feature__header">
  ...
 </div>
 <ul class="feature__list">
   ...
 </ul>
</div>

<div class="feature">
 <div class="feature__header">
  ...
 </div>
 <ul class="feature__list">
   ...
 </ul>
</div>

# Mục tính năng

Lưu ý những đoạn mã dưới đây nằm trong thẻ ul có lớp

<div class="feature">
 <div class="feature__header">
  ...
 </div>
 <ul class="feature__list">
   ...
 </ul>
</div>

4 ở đoạn mã trên nhé

Dựa vào hình ta thấy block1 có hai phần đó là phần hình ảnh bên trái và phần nội dung bên phải và chiều cao của block1 là 600px. Tỷ lệ đã nói ở trên là 67% và 33% và chúng tôi sẽ sử dụng CSS Flexbox để tạo bố cục từ đó chúng tôi có HTML CSS như thế này

<li class="feature__item">
 <div class="feature__item-img">
 </div>
 <div class="feature__item-content">
 </div>
</li>

.feature__item {
  display: flex;
  flex-flow: row wrap;
  height: 60rem;
  overflow: hidden;
}
.feature__item-img {
  width: 67%;
  position: relative;/*Note*/
}
.feature__item-content {
  width: 33%;
}

Ở cột bên trái ta có hai tấm hình, một hình để phủ hết cột và một hình nhỏ nằm giữa các cột. Ta sẽ có HTML như thế này

<div class="feature__item-img">
  <img src="images/img14.jpg" alt="" class="img__bg">
  <img src="images/img-bicycle-company.png" alt="" class="img__brand">
</div>

<div class="feature">
 <div class="feature__header">
  ...
 </div>
 <ul class="feature__list">
   ...
 </ul>
</div>

<div class="feature">
 <div class="feature__header">
  ...
 </div>
 <ul class="feature__list">
   ...
 </ul>
</div>

.feature__item .img__bg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.feature__item .img__brand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

<div class="feature">
 <div class="feature__header">
  ...
 </div>
 <ul class="feature__list">
   ...
 </ul>
</div>

<div class="feature">
 <div class="feature__header">
  ...
 </div>
 <ul class="feature__list">
   ...
 </ul>
</div>

<div class="feature">
 <div class="feature__header">
  ...
 </div>
 <ul class="feature__list">
   ...
 </ul>
</div>

<li class="feature__item">
 <div class="feature__item-img">
 </div>
 <div class="feature__item-content">
 </div>
</li>

Đến cột phải thì trong cột phải thì lại có hai nội dung khác theo chiều dọc. Một trên một dưới nên mình sẽ đặt là content-top và content-bottom

<div class="feature__item-content">
 <div class="feature__item-content-top">
  <img src="images/icon2.png" alt="" class="feature__img-top">
  <h3 class="feature__heading">Vintage Oliva</h3>
  <p class="feature__item-text">Lorem Ipsum simply...</p>
 </div>
 <div class="feature__item-content-bottom">
  <img src="images/img1.jpg" alt="" class="img__bg">
 </div>
</div>

Các bạn để ý sẽ thấy lại lớp

<li class="feature__item">
 <div class="feature__item-img">
 </div>
 <div class="feature__item-content">
 </div>
</li>

1 và

<li class="feature__item">
 <div class="feature__item-img">
 </div>
 <div class="feature__item-content">
 </div>
</li>

2 mình đã sử dụng trước đó vì như mình đã nói từ trước là các phần sau cũng sử dụng chúng nên phải đặt tên như thế để tái sử dụng

Nhìn vào cấu trúc cột bên phải mình thấy nội dung theo hướng chiều dọc cho nên mình sẽ sử dụng flexbox với thuộc tính

<li class="feature__item">
 <div class="feature__item-img">
 </div>
 <div class="feature__item-content">
 </div>
</li>

.feature__item-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.feature__item-content-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 7rem;
  position: relative;
  background-color: white;
  height: 67%;
}
.feature__item-text {
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--text);
  text-align: justify;
  position: relative;
  padding-bottom: 3rem;
}
.feature__item-content-bottom {
  height: 33%;
}

Đến block2 thì cấu trúc HTML y chang block1 luôn chỉ thay đổi đường dẫn hình ảnh và nội dung chữ đồ thôi, sau đó ta dùng thuộc tính

.feature__header {
 padding: 11rem 1.5rem 14rem;
 background-color: var(--bg-light);
}
.feature__img-top {
 margin: 0 auto 3rem;
}
.feature__heading {
 font-size: 1.8rem;
 line-height: 1.6;
 text-transform: uppercase;
 color: var(--heading);
 margin-bottom: 2rem;
 font-weight: bold;
 text-align: center;
}
.feature__header-desc {
 font-size: 1.8rem;
 line-height: 1.6;
 color: var(--text);
 max-width: 106rem;
 margin: 0 auto;
 text-align: center;
}

<li class="feature__item">
 <div class="feature__item-img">
 </div>
 <div class="feature__item-content">
 </div>
</li>

<li class="feature__item">
 <div class="feature__item-img">
 </div>
 <div class="feature__item-content">
 </div>
</li>

.feature__header {
 padding: 11rem 1.5rem 14rem;
 background-color: var(--bg-light);
}
.feature__img-top {
 margin: 0 auto 3rem;
}
.feature__heading {
 font-size: 1.8rem;
 line-height: 1.6;
 text-transform: uppercase;
 color: var(--heading);
 margin-bottom: 2rem;
 font-weight: bold;
 text-align: center;
}
.feature__header-desc {
 font-size: 1.8rem;
 line-height: 1.6;
 color: var(--text);
 max-width: 106rem;
 margin: 0 auto;
 text-align: center;
}

Cuối cùng là block3 với cấu trúc HTML cũng trang trí block1 nhưng thêm một cột hình ảnh mà thôi(

<div class="feature">
 <div class="feature__header">
  ...
 </div>
 <ul class="feature__list">
   ...
 </ul>
</div>

.feature__header {
 padding: 11rem 1.5rem 14rem;
 background-color: var(--bg-light);
}
.feature__img-top {
 margin: 0 auto 3rem;
}
.feature__heading {
 font-size: 1.8rem;
 line-height: 1.6;
 text-transform: uppercase;
 color: var(--heading);
 margin-bottom: 2rem;
 font-weight: bold;
 text-align: center;
}
.feature__header-desc {
 font-size: 1.8rem;
 line-height: 1.6;
 color: var(--text);
 max-width: 106rem;
 margin: 0 auto;
 text-align: center;
}

Để chọn

<li class="feature__item">
 <div class="feature__item-img">
 </div>
 <div class="feature__item-content">
 </div>
</li>

<div class="feature">
 <div class="feature__header">
  ...
 </div>
 <ul class="feature__list">
   ...
 </ul>
</div>

.feature__header {
 padding: 11rem 1.5rem 14rem;
 background-color: var(--bg-light);
}
.feature__img-top {
 margin: 0 auto 3rem;
}
.feature__heading {
 font-size: 1.8rem;
 line-height: 1.6;
 text-transform: uppercase;
 color: var(--heading);
 margin-bottom: 2rem;
 font-weight: bold;
 text-align: center;
}
.feature__header-desc {
 font-size: 1.8rem;
 line-height: 1.6;
 color: var(--text);
 max-width: 106rem;
 margin: 0 auto;
 text-align: center;
}

Còn hai điểm nữa mà mình quên làm một là ở đầu cột nội dung ở phía dưới có cái hình tam giác như mình đã note mũi tên ở trên hình

Chúng ta đã tìm hiểu và sử dụng nó ở bài trước và sau đấy. Các bạn có thể quay lại xem để tham khảo nha. Ở đây mình sẽ sử dụng

.feature__item {
  display: flex;
  flex-flow: row wrap;
  height: 60rem;
  overflow: hidden;
}
.feature__item-img {
  width: 67%;
  position: relative;/*Note*/
}
.feature__item-content {
  width: 33%;
}

.feature__header {
 padding: 11rem 1.5rem 14rem;
 background-color: var(--bg-light);
}
.feature__img-top {
 margin: 0 auto 3rem;
}
.feature__heading {
 font-size: 1.8rem;
 line-height: 1.6;
 text-transform: uppercase;
 color: var(--heading);
 margin-bottom: 2rem;
 font-weight: bold;
 text-align: center;
}
.feature__header-desc {
 font-size: 1.8rem;
 line-height: 1.6;
 color: var(--text);
 max-width: 106rem;
 margin: 0 auto;
 text-align: center;
}

.feature__item {
  display: flex;
  flex-flow: row wrap;
  height: 60rem;
  overflow: hidden;
}
.feature__item-img {
  width: 67%;
  position: relative;/*Note*/
}
.feature__item-content {
  width: 33%;
}

.feature__header {
 padding: 11rem 1.5rem 14rem;
 background-color: var(--bg-light);
}
.feature__img-top {
 margin: 0 auto 3rem;
}
.feature__heading {
 font-size: 1.8rem;
 line-height: 1.6;
 text-transform: uppercase;
 color: var(--heading);
 margin-bottom: 2rem;
 font-weight: bold;
 text-align: center;
}
.feature__header-desc {
 font-size: 1.8rem;
 line-height: 1.6;
 color: var(--text);
 max-width: 106rem;
 margin: 0 auto;
 text-align: center;
}

# Lời kết

Phù. The end of the end. Cám ơn các bạn đã đọc một bài viết dài và chi tiết như thế này. Các bạn có thể nhấn vào đây để xem kết quả trực tuyến hoặc nhấn vào đây để tải mã nguồn về tham khảo đối chiếu xem có giống mã của các bạn làm không nhé cũng như để tiếp tục theo dõi phần 4 sắp tới

Nếu có gì không hiểu hoặc đóng góp ý kiến ​​thì đừng ngại mà bình luận nha. Mình luôn sẵn sàng trả lời. Chúc các bạn một ngày tốt lành