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

Lập trình CSS và SASS nâng cao với dự án website Landing Page

0.0 (0 đánh giá)
Tạo bởi Nguyễn Minh Chí Cập nhật lần cuối 16:10 12-08-2019 975 lượt xem 0 bình luận
Học nhanh

Danh sách bài học

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

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 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;

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;
    }
}

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);
    }

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);
    }

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

transition: all .2s;

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);
    }
}

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';

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à position:absolute để 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 relative để có thể chỉnh vị trí các images xung quanh element cha này.

.composition{
    position: relative;
}
&__photo{
        width: 50%;
        box-shadow: 0 1.5rem 4rem rgba($color-black, .4);
        border-radius: .2rem;
        position: absolute;
        z-index: 10;
    }

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;
        }
    }
}

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)
        }
    }

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);
            z-index: 20;      
        }
    }

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;
    }

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;
    }

Code composition

// components/_composition.scss
.composition{
    position: relative;
    
    &__photo{
        width: 50%;
        box-shadow: 0 1.5rem 4rem rgba($color-black, .4);
        border-radius: .2rem;
        position: absolute;
        z-index: 10;
        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);
            z-index: 20;      
        }

        &:hover &__photo:not(:hover){
            transform: scale(.9)
        }
    }
}

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

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.

Nội dung bài viết

Khóa học

Lập trình CSS và SASS nâng cao với dự án website Landing Page

Qua khóa FRONT END CƠ BẢN , Kteam đã hướng dẫn các bạn đã có được những kiến thức cơ bản về  HTML và CSS.

Trong combo Front End 2019, chúng ta sẽ cùng nhau tìm hiểu và áp dụng những kiến thức chuyên sâu về CSS. Do kiến thức về CSS trong khóa học khá lớn và chi tiết nên Kteam đã chia làm 2 phần.

  • Phần 1: CSS và SASS Nâng Cao
  • Phần 2: Flexbox và CSS grid layouts

Ở khóa học này chúng ta sẽ cũng nhau tìm hiểu tổng quát về phần 1: CSS và SASS Nâng Cao với dự án Website Landing Page.

Bạn cũng có thể truy cập vào đường link bên dưới để xem bản PRIEVIEW của website landing page Selftaught 2019 mà chúng ta sẽ cùng thực hiện nhé! 

LANDING PAGE WEBSITE SELFTAUGHT 2019

Đánh giá

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
Không có video.