Hoàn thiện composition component và button-text cho About Section

Dẫn nhập

Ở bài hoc trước, chúng ta đã cùng nhau code một phần của about section và biết thêm cách làm TEXT GRADIENT VÀ HIỆU ỨNG HOVER CỦA HEADING.

Trong bài này chúng ta sẽ kết thúc quá trình code about section bằng việc hoàn thiện composition component và button-text.

Nội dung

Để tiếp thu tốt bài học này các bạn cần

• Có kiến thức cơ bản về CSS và SASS.
• Đã xem qua các bài trước trong khóa LẬP TRÌNH CSS & SASS NÂNG CAO VỚI DỰ ÁN WEBSITE LANDING PAGE

Trong bài học này chúng ta sẽ lần lượt đi qua từng phần:

• Code btn-text
• Composition component

Code btn-text

Trước hết ta lại quan sát sản phẩm cuối cùng sau khi hoàn thiện btn-text

Ta sẽ chia làm 3 phần: btn-text:link và btn-text:visited, btn-text:hover, và cuối cùng là btn-text:active

btn-text:link và btn-text:visited

Quan sát ta có thể thấy việc đầu tiên sẽ là xóa các text decoration default của link và dùng color: $color-primary. Tiếp đến là set border-bottom như bạn đã thấy, padding, font-size sẽ sử dụng là $default-font-size (1.6rem)

Đầu tiên là set variable $default-font-size

// abstracts/_variables.scss
$default-font-size: 1.6rem;
1
2
3

Và giờ thì quay lại với btn-text sẽ được khai báo ở component _buttons.scss

.btn-text{
    &:link,
    &:visited{
       color: $color-primary;
       display: inline-block;
       text-decoration: none;
       border-bottom: 1px solid $color-primary;
       padding: .3rem;
       font-size: $default-font-size;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

btn-text:hover:

khi hover thì text sẽ chuyển màu sang màu trắng còn background-color của button chuyển thành primary color cùng shadow (ta sử dụng box-shadow thay vì text-shadow). Đồng thời button cũng dịch lên trên khoảng 2, 3px. Vậy thì ta bắt tay luôn vào code.

&:hover{
       background-color: $color-primary;
       color: $color-white;
       box-shadow: 0 1rem 2rem rgba($color-black, .15);
       transform: translateY(-.2rem);
    }
1
2
3
4
5
6
7

btn-text:active:

Là khi click button ta sẽ thấy dịch xuống về vị trí cũ và shadow cũng nhỏ đi 1 chút xíu tạo cảm giác button bị nhấn.

&:active{
       box-shadow: 0 .5rem 1rem rgba($color-black, .15);
       transform: translateY(0);
    }
1
2
3
4
5

Và ta cũng set transition cho btn-text hiệu ứng hover và active mượt mà hơn

transition: all .2s;
1

code btn:text

// components/_buttons.scss
.btn-text{
    &:link,
    &:visited{
       color: $color-primary;
       display: inline-block;
       text-decoration: none;
       border-bottom: 1px solid $color-primary;
       padding: .3rem;
       font-size: $default-font-size;
       transition: all .2s;
    }

    &:hover{
       background-color: $color-primary;
       color: $color-white;
       box-shadow: 0 1rem 2rem rgba($color-black, .15);
       transform: translateY(-.2rem);
    }

    &:active{
        box-shadow: 0 .5rem 1rem rgba($color-black, .15);
        transform: translateY(0);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Composition component

Đây sẽ là phần kết thúc quá trình code about-section. Tiếp tục quan sát sản phẩm cuối sau khi hoàn thiện

Ta tiếp tục chia làm 3 phần: set thuộc tính chung của cả 3 bức ảnh, set vị trí của từng bức, và cuối cùng là set hiệu ứng khi hover.

Set thuộc tính chung của cả 3 bức ảnh

Trước hết ta sẽ tạo file _composition.scss trong folder components và sẽ dùng nó để khai báo, và đừng quên import lại file main.scss

// main.scss
@import './components/composition';
1
2
3

Tiếp đến là sẽ phải thu nhỏ kích cỡ của bức ảnh (xuống còn 50%), sử dụng box-shadow, border-radius từ 2-3px, set z-index để chắc là những tấm ảnh không bị chèn lên, và quan trọng hơn cả là để ta có thể tùy chỉnh vị trí của các bức ảnh. Vậy trước đó ta sẽ để element cha composition là relative để có thể chỉnh vị trí các images xung quanh element cha này.

.composition{
    
}
1
2
3
4

&__photo{
        width: 50%;
        box-shadow: 0 1.5rem 4rem rgba($color-black, .4);
        border-radius: .2rem;
        
        
    }
1
2
3
4
5
6
7
8

Trên đây là khi 3 tầm ảnh đều nằm chung 1 chỗ, việc tiếp theo sẽ là set vị trí của từng bức ảnh

Set vị trí của từng image

Set vị trí của từng image lần lượt sẽ là như sau:

.composition{
    
    &__photo{

        &--p1{
            left: 0;
            top: -2rem;
        }

        &--p2{
            right: 2rem;
            top: 2rem;
        }

        &--p3{
            left: 10%;
            top: 10rem;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Việc sắp xếp vị trí này hoàn toàn do các bạn chọn lựa, mình đã làm sắp xếp vị trí như trên để trùng với sản phẩm cuối cùng.

Set hiệu ứng cho các image.

Ở đây ta sẽ thây mỗi khi ta hover vào 1 bức ảnh thì nó sẽ đứng lên vị trí đầu tiên, to lên và xuất hiện 1 viền với color primary giống như border nhưng lại cách image 1 khoảng nhỏ (đó chính là outline của element), đồng thời các bức ảnh còn lại cũng thu nhỏ đi 1 chút.

Ta sẽ code việc các photo (image) không được hover sẽ thu nhỏ lại như sau:

&__photo{
        &:hover &__photo:not(:hover){
            transform: scale(.9)
        }
    }
1
2
3
4
5
6

Tiếp theo là khi hover các bức ảnh sẽ xuất hiện outline, phình to (transform: scale()), shadow lớn hơn và trồi lên trên đầu (sử dụng z-index)

&__photo{
        &:hover {
            outline: 1.5rem solid $color-primary;
            transform: scale(1.05);
            box-shadow: 0 2.5rem 4rem rgba($color-black, .5);
                  
        }
    }
1
2
3
4
5
6
7
8
9

Ta thấy outline vẫn sát photo, khoảng trống mà chúng ta nhìn thấy chính là outline-offset

&__photo{
        outline-offset: 1rem;
    }
1
2
3
4

Và ta chỉ còn cần thêm transition cho hiệu ứng thêm mượt mà là xong.

&__photo{
        transition: all .2s;
    }
1
2
3
4

Code composition

// components/_composition.scss
.composition{
    
    
    &__photo{
        width: 50%;
        box-shadow: 0 1.5rem 4rem rgba($color-black, .4);
        border-radius: .2rem;
        
        
        outline-offset: 1rem;
        transition: all .2s;

        &--p1{
            left: 0;
            top: -2rem;
        }

        &--p2{
            right: 2rem;
            top: 2rem;
        }

        &--p3{
            left: 10%;
            top: 10rem;
        }

        &:hover {
            outline: 1.5rem solid $color-primary;
            transform: scale(1.05);
            box-shadow: 0 2.5rem 4rem rgba($color-black, .5);
                  
        }

        &:hover &__photo:not(:hover){
            transform: scale(.9)
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

Kết luận

Ở bài học này chúng ta đã kết thúc quá trình code about section cho website Landing page Selftaught.

Trong bài sau chúng ta sẽ đi sang SKILLS SECTION.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: "Luyện tập – Thử thách – Không ngại khó".

---

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Hoàn thiện composition component và button-text cho About Section dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Project

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK