Hướng dẫn cắt PSD toàn tập với Leospa design phần 2

Nội dung bài viết

# HTML
# CSS
# Responsive
# Tạm kết

Xin chào các bạn đã đến với phần 2 của series hướng dẫn cắt PSD toàn tập với Leospa design. Ở bài trước chúng ta đã phân tích tổng quan của thiết kế, cũng như lấy các tài nguyên như hình ảnh, font chữ và các thiết lập cơ bản để có thể bắt đầu code từ bài này. Đừng quên tải source code cơ bản mà mình đã chia sẻ ở bài trước nhé. Nếu bạn chưa tải thì nhấn vào đây nha.

Chúng ta bắt đầu vào block Header thôi nào. Mình có kèm hình dưới đây cho các bạn dễ hình dung.

# HTML

Nhìn vào hình trên thì mình thấy rằng có 3 phần chính đó là phần trên cùng của Header gồm Logo và Menu, tiếp đến là Content gồm các chữ và liên kết, ngoài cùng bên phải là một tấm hình mình sẽ dùng CSS đưa nó ra nằm ngoài đó và ngoài cùng bên trái là hình nền của Header.

Header thì chiếm 100% của thiết kế rồi tuy nhiên nội dung ở giữa thì là 1140px như mình đã phân tích ở bài trước, các bạn có thể kiểm tra ở file setting.css với class .container nha. Từ phân tích ở trên mình có cấu trúc HTML tạm thời như sau:

<div class="wrapper">
    <header class="header">
      <div class="container">
        <div class="header__top"></div>
        <div class="header__content"></div>
        <img src="./images/spa.png" alt="" class="header__image" />
      </div>
    </header>
</div>

Ở phần header__top ta có một Logo bên trái có độ rộng 100px, nó được bao bọc bởi một thẻ a để khi nhấn vào đó sẽ ra trang chủ. Bên phải là một Navigation với các liên kết như Home, About…. Từ đây ta lại có code HTML bên trong header__top như sau

<div class="header__top">
  <a href="index.html" class="header__logo">
    <img src="./images/logo.png" alt="" />
  </a>
  <nav class="menu">
    <ul class="menu__list">
      <li class="menu__item">
        <a href="#" class="menu__link">Home</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">About</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Feature</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Images</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Contact</a>
      </li>
    </ul>
  </nav>
</div>

Tiếp đến là phần header__content ở trong này ta dễ dàng nhìn thấy có 3 đoạn text và 2 thẻ a. Đoạn ngắn đầu tiên mình đặt tên là slogan, đoạn thứ 2 là tiêu đề và đoạn thứ 3 là giới thiệu hay mô tả. Còn ở dưới là 2 thẻ a với action tương tự là Reverse now ( đặt chỗ ) và Watch our story như là xem video. Ta có HTML trong header__content

<div class="header__content">
  <span class="header__content-slogan">Spa & Beauty Center</span>
  <h1 class="header__content-title">
    Beauty and success starts here.
  </h1>
  <p class="header__content-desc">
    Together creeping heaven upon third dominion be upon won't
    darkness rule behold it created good saw after she'd Our set
    living.
  </p>
  <div class="header__content-cta">
    <a href="#" class="btn btn--primary btn--icon"
      >Reverse now <i class="fa fa-arrow-right"></i
    ></a>
    <a href="#" class="btn__play-video">
      <i class="fa fa-play"></i>
      <span>Watch our story</span>
    </a>
  </div>
</div>

Vì style button trong thiết kế này dùng đi dùng lại nhiều nên mình đặt chung là btn và style button có màu chủ đạo là button chính nên mình đặt theo chuẩn BEM là btn--primary, và có loại button chứa icon nên mình tuỳ biến thêm một kiểu nữa là btn--icon, cũng như bo tròn góc thì là btn--rounded.

Còn chỗ Watch our story nó riêng biệt và không có dùng lại nhiều nên mình đơn giản là đặt class btn__play-video.

Như vậy là mình đã phân tích xong HTML cơ bản cho các bạn, tiếp theo chúng ta sẽ vào phần CSS thần thánh để làm giao diện đẹp hơn nhen. Giao diện tạm thời lúc này chúng ta có như thế này đây

# CSS

Block Header: Thường thì mình thấy cho nó cao 100% của màn hình luôn sẽ đẹp, nghĩa là theo viewport, cho nên chúng ta sẽ dùng đơn vị vh (viewport height). Như đã phân tích ở trên Header có hình nền bên trái, hình này mình đo độ rộng trong Photoshop ra được (240px / 1920px ) * 100% ta được 12.5%, hình nằm bên trái trung tâm, không có lặp lại.

Từ đây chúng ta có CSS như thế này, mình dùng thêm thuộc tính position: relative để tí nữa canh chỉnh cho tấm hình bên phải dùng position: absolute.

.header {
  min-height: 100vh;
  position: relative;
  background-image: url("../images/leaf.png");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 12.5%;
}

Right image: Tiếp đến là tấm hình ở bên phải to to ý, do trong file PSD khi tải về không có hình, nhưng may mà có tấm hình jpg full thiết kế để chúng ta có thể thấy nó trông như thế nào. Áp dụng tương tự mình đo chiều rộng của nó là (840px / 1920px) * 100% ta được 43.5%, vị trí của nó nằm trên cùng bên phải. Từ phân tích rõ ràng như thế ta có code như sau

.header__image {
  position: absolute;
  right: 0;
  top: 0;
  max-width: 43.5%;
}

UI tạm thời lúc này ta được:

Header Top: Cũng đã phân tích ở trên khi làm HTML thì phần này có 2 phần đó là Logo và Navigation. Code cũng không có gì phức tạp ngoài sử dụng Flexbox, nếu bạn nào chưa biết về Flexbox thì đừng quên nhấn vào đây để học nhen.

Khoảng cách giữa các Item trong Menu là 50px từ đó ta có thể chia cho 2 tức là 25px mỗi bên nên chỗ menu__item là margin: 0 2.5rem.

Menu có khoảng cách bên trái so với Logo là (185px - 25px / 1140px) * 100% ta được 14%. Mình dùng position: relative kèm z-index để lỡ màn hình nhỏ hơn thì tấm ảnh bên phải co lại nó sẽ nằm dưới menu chứ không có đè lên menu làm hư UI. Mình giải thích vài chỗ cho các bạn dễ hiểu chút chứ mình không giải thích toàn bộ từng dòng được.

Lưu ý: Chỗ menu mình chia cho 1140 thay vì 1920 bởi vì menu nó nằm bên trong container nhé. Tại sao lại là 185px – 25px bởi vì khoảng cách từ menu tới chạm logo là 185px nhưng do mình CSS cho menu__item margin mỗi bên 2.5rem = 25px nên 185px đã có dính cái margin đó rồi nên mình phải trừ ra tính mới chính xác. Kỳ công hen

.header__top {
  padding-top: 2rem;
  display: flex;
  align-items: baseline;
}
.header__logo {
  max-width: 10rem;
}
/*Menu*/
.menu {
  margin-left: 14%;
  position: relative;
  z-index: 2;
}
.menu__list {
  display: flex;
  align-items: center;
}
.menu__item {
  margin: 0 2.5rem;
}
.menu__link {
  color: var(--gray-dark);
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: uppercase;
  transition: color 0.2s linear;
}
.menu__link:hover {
  color: var(--primary-color);
}

Header Content: Phần này khá đơn giản chỗ các đoạn chữ vì CSS không có gì ngoài chỉnh cỡ chữ, màu sắc và kiểu chữ cũng như khoảng cách giữa các đoạn chữ đó. Mình dùng biến trong CSS nên việc dùng màu sắc hay font chữ chỉ cần gọi ra là xong, rất đơn giản phải không nào ?

.header__content {
  padding-top: 19rem;
  position: relative;
  max-width: 55.5rem;
  z-index: 2;
}
.header__content-slogan {
  font-family: var(--secondary-font);
  color: var(--primary-color);
  margin-bottom: 3rem;
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 400;
  text-transform: uppercase;
}
.header__content-title {
  font-size: 6rem;
  color: var(--gray-dark);
  font-family: var(--secondary-font);
  font-weight: bold;
  margin-bottom: 3rem;
  line-height: 1.2;
}
.header__content-desc {
  font-size: 1.5rem;
  color: var(--gray-dark);
  margin-bottom: 5rem;
}
.header__content-cta {
  display: flex;
  align-items: center;
}
.header__content-cta > a:first-child {
  margin-right: 5rem;
}
.btn__play-video {
  display: flex;
  align-items: center;
}
.btn__play-video > i {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5rem;
  background-color: var(--bg-block);
  color: var(--primary-color);
  margin-right: 10px;
}
.btn__play-video > span {
  color: var(--gray-dark);
  font-size: 1.4rem;
}

Giao diện lúc này ta được khá ổn

Buttons: Về button thì mình cũng đã nói ở phần phân tích HTML ở trên, mình sẽ code dùng một class chung là btn và các tuỳ biến của nó như là btn--primary là button chủ đạo, btn--icon là button có icon, btn--rounded là button bo tròn góc.

.btn {
  display: inline-block;
  vertical-align: middle;
  border: 0;
  outline: none;
  padding: 1.5rem 3rem;
  text-align: center;
  color: white;
  text-transform: uppercase;
  font-family: var(--primary-font);
  font-size: 1.4rem;
  cursor: pointer;
}
.btn--primary {
  background-color: var(--primary-color);
}
.btn--rounded {
  border-radius: 5rem;
}
.btn--icon i {
  margin-left: 1rem;
  color: inherit;
}

Tada!!! Chúng ta sẽ có kết quả như sau

# Responsive

Responsive thì khi xuống mobile mình thấy tấm hình bên phải khá to và chiếm diện tích thì để đẹp UI chúng ta sẽ ẩn nó cũng như là Menu khi xuống mobile chúng ta sẽ làm menu dạng chạy ra. Cho nên với Menu thì mình sẽ hướng dẫn ở một bài riêng luôn, ở bài này mình ẩn nó đi trước nhé.

@media screen and (max-width: 767px) {
  .header__image,
  .menu {
    display: none;
  }
}

Ngoài ra để chuẩn bị để làm một cái nút để khi nhấn vào thì cho Menu chạy ra thì các bạn mở file index.html lên sau đó tìm đoạn header__top để chèn phía sau nó như sau

<div class="header__top">
...code
<i class="fas fa-bars menu__collapse"></i> // đoạn này chèn mới nè
</div>

<div class="header__content">
...code
</div>

Nó sẽ được ẩn đi ở tất cả các màn hình và chỉ hiển thị ở mobile mà thôi cho nên code của nó trông như thế này

.menu__collapse {
  display: none;
  position: relative;
  top: -5px;
  font-size: 2rem;
  color: var(--primary-color);
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .menu__collapse {
    display: block;
  }
}

Chỗ header__content thì vẫn ổn tuy nhiên cái tiêu đề khá là to, cho nên chúng ta sẽ giảm nó từ 6rem xuống tầm 4rem là đẹp. Khoảng cách của Content so với Menu khá xa nên mình cũng giảm xuống còn 12rem ở màn hình laptop thông thường ( < 1440px) và màn hình Retina (Resolution: 192dpi). Và giảm xuống còn 7rem ở màn hình mobile.

Chỗ các buttons thì không đủ chỗ cho nên chúng ta sẽ chuyển flex-direction sang column cho nó rớt xuống, cũng như cho 2 phần tử này cách nhau ra một chút cho đẹp như sau:

@media screen and (max-width: 1439px), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .header__content {
    padding-top: 12rem;
  }
}

@media screen and (max-width: 767px) {
  .header__top {
    justify-content: space-between;
  }
  .header__content {
    padding-top: 7rem;
  }
  .header__content-title {
    font-size: 4rem;
  }
  .header__content-cta {
    align-items: flex-start;
    flex-direction: column;
  }
  .header__content-cta > a:first-child {
    margin-right: 0;
    margin-bottom: 2.5rem;
  }
}

Cuối cùng ta có kết quả như sau:

# Tạm kết

Phù!!! Cả ngày Chủ Nhật. Như vậy là tạm xong block Header. Hi vọng với bài chia sẻ của mình sẽ giúp ích được cho các bạn phần nào trong việc học tập và rèn luyện nhé. Ngoài ra trong quá trình chia sẻ sẽ không tránh khỏi sai sót và lỗi. Các bạn cứ đóng góp ý kiến giúp mình để mình cải thiện nhé. Xin cám ơn

Và đừng quên tải source code mới nhất tại đây về tham khảo nhé. Chúc các bạn học tập thật tốt và một ngày tốt lành. Đừng quên theo dõi blog mình để đón đọc những siêu phẩm sẽ ra trong năm 2020 sắp tới nhen..