Tạo Tabs chuyên nghiệp với hiệu 4 ứng CSS3

CSS3ContentTabs

Để tạo ra một tabs content chuyên nghiệp sẽ có rất nhiều cách. Tuy nhiên trong bài viết nay Tm Việt giới thiệu với các bạn một cách tạo Tabs cao cấp, với 4 hiệu ứng đẹp mắt thông qua CSS3 kết hợp với HTML mà không cần phải sử dụng thêm bất kỳ ngôn ngữ lập trình nào khác. Các Tabs sẽ được hiển thị lần lượt, theo dạng ẩn/hiện thay thế nhau.

 

Live Demo Tabs Css3 Download Tabs Css3

 

Bây giờ chúng ta cùng nhau thực hành, mổ xẻ các giá trị cho từng  đoạn mã CSS bên trong file demo bên trên.

Bước 1 : Markup HTML
Chúng ta sẽ sử dụng phần tử input để kết nối với phần nội dung của từng tab.

 

Bước 2 : Phần CSS

Điều đầu tiên chúng ta cần làm là chỉ định một vài kích thước và cho ẩn các thẻ input bằng cách ấn định opacity0

Các thẻ input sẽ nằm bên trên các labels, và điều này giúp chúng ta mỗi khi click vào label thì cũng như click vào phần input. Kế tiếp chúng ta sẽ định dạng các labels sẽ trông giống như các thẻ tabs

 

Chúng ta sẽ bỏ hiệu ứng bóng đổ ở phần cuối của box-shadow bằng cách đè lên nó với thuộc tính :after pseudo-element

 

Khi chúng ta click vào tab (label) thì tab này sẽ chuyển sang màu khác so với các tab còn lại

 

Chúng ta đã làm xong ở phần tab, bây giờ chúng ta sẽ làm ơ phần nội dung cho từng tab.

 

Khi chúng ta muốn nội dung từng tab được hiển thị, chúng ta sẽ ấn định giá trị opacity là 1 , và tăng z-index lên.

 

Vậy là xong rồi đó các bạn, để có thêm nhiều hiệu ứng khác nhau, các bạn có thể tham khảo thêm ở phần demo hoặc download về máy của mình để tìm hiểu thêm.

Chúc các bạn thành công !



Shortlink:

Tags

Có Thể Bạn Quan Tâm...

Hà Nội

Light Rain
Humidity: 68
Wind: 16.09 km/h
17 °C
16 17
24 Mar 2016
14 22
25 Mar 2016
ADS2

Đánh giá

Cảm nhận về website?

View Results

Loading ... Loading ...

Tìm chúng tôi trên Facebook