Hướng dẫn tạo Slideshow với HTML, CSS và Javascript - How t
Slideshow hay slider là một phần rất quan trọng trong website hiện nay, thực chất thì chúng là một bộ chứa những hình ảnh có kích thước khá lớn có thể trượt qua lại giữa các ảnh, chúng thường được đặt ở đầu trang để mô tả những nội dung đáng chú ý của trang vào thời điểm đó. Trong bài này mình sẽ ...
Hướng dẫn tạo Image Hover Overlay Slide với CSS - How t
Image Hover Overlay có thể hiểu sang tiếng việt là hình ảnh được che phủ khi hover, đúng với các tên của nó, Image Hover Overlay là các hình ảnh mà khi hover chuột lên nó, hình ảnh sẽ được che phủ bởi một đoạn text, một button hay một liên kết nào đó. Trong bài viết này, chúng ta sẽ cùng ...
Hướng dẫn thêm Image Effects với CSS - How t
Image Effectsr là các hiệu ứng xử lý đối với hình ảnh, chúng ta có thể sử dụng Image Effects để khiến các hình ảnh trên website trở nên đẹp hơn hoặc đơn giản là để phù hợp với hơn với giao diện website. Trong bài viết này mình sẽ hướng dẫn các bạn thêm hiệu ứng cho hình ảnh, hãy bạn xem ví dụ ...
Hướng dẫn tạo Hero Image với CSS - How t
Hero Image là một hình ảnh cỡ lớn bao gồm cả các đoạn văn bản, Hero Image thường được đặt ở phần đầu trang để giới thiệu về nội dung website, thông tin tác giả hoặc có thể là sản phẩm nổi bật. Trong bài này mình sẽ hướng dẫn các bạn tạo một phần Hero Image đơn giản cho blog cá nhân của ...
Hướng dẫn tạo Vertical Tabs với HTML, CSS và Javascript - How t
Vertical Tabs lag một tab dạng thẳng dọc, hay nói cách khác là các tab sẽ được hiển thị theo chiều thẳng đứng và nội dung sẽ hiển thị ngay bên cạnh các tabs. Trong bài viết này mình sẽ cùng các bạn xây dựng một Vertical Tabs đơn giản, hãy xem ví dụ dưới đây: Cùng mình xây dựng nó ...
Hướng dẫn tạo Fixed Menu - How t
Fixed menu có thể hiểu là một menu cố định tại một vị trí của trang, các fixed chúng ta thường gặp là fixed top menu, fixed bottom menu, fixed right menu, fixed left menu thể hiện vị trí mà các menu được cố định. Trong bài này mình sẽ hướng dẫn các bạn tạo ra một menu cố định. ...
Hướng dẫn tạo tabs bằng HTML, CSS và Javascript - How t
HIển thị nội dung theo các tabs là một trong những kỹ thuật rất hiệu quả khi trang web của bạn có chứa nhiều nội dung ở các thể loại khác nhau, nó cũng rất hữu dụng ngay cả trang của bạn là một trang bán hàng. Việc sử dụng các tabs nội dung sẽ khiến trang web của bạn chuyên nghiệp và thân thiện hơn ...
Hướng dẫn tạo Modal Box với HTML, CSS và Javascript - How t
Modal Box có thể xem như một phần nội dung của trang nhưng được ẩn đi khi không cần thiết, một số ứng dụng của Modal Box trong thực tế có thể kể đến như form đăng kí, hình ảnh với kích cỡ đầy đủ hay một thông tin liên hệ của chủ trang web. Trong bài viết này mình sẽ cùng các bạn xây dựng ...
Hướng dẫn tạo accordion với HTML, CSS và Javascript - How t
Accordion hay collapsible content là một thuật ngữ trong lập trình có thể hiểu sang tiếng việt là nội dung có thể thu gọn được, Accordion rất hay được ứng dụng khi trang của bạn có nhiều nội dung về nhiều mảng khác nhau, việc sử dụng Accordion sẽ khiến cho website trở nên gọn gàng và ...
Hướng dẫn tạo Click Dropdown với HTML, CSS và JAVASCRIP - How t
Menu dropdown có lẽ đã quá phổ biến với mọi người rồi, nó được sử dụng rất nhiều ở các website tin tức hay bán hàng. Việc sử dụng menu dropdown thay vì các menu tĩnh sẽ khiến cho website của bạn chuyên nghiệp hơn, thân thiện hơn với người dùng và cũng khiến việc tìm kiếm thông tin cần thiết của ...
Hướng dẫn tạo Icon Bar với HTML, CSS và Javascript - How t
Icon Bar là một dạng menu hoặc button nhưng chúng được thêm các icon để hiển thị một cách sinh động và tường minh, Những Icon mà chúng ta hay gặp nhất có thể kể đến như Menu Home có icon hình ngôi nhà, button Search có icon hình chiếc kính lúp.vv.. Việc thêm icon vào các button, menu không chỉ khiến ...
Hướng dẫn tạo Responsive navbar - How t
Navbar là một thành phần rất phổ biến trong website hiện nay, Navbar xuất hiện ở gần như tất cả các website theo nhiều kiểu khác nhau để chứa các phần menu chính. Vậy Responsive navbar là gì ? Responsive navbar là một dạng Navbar có thể hiển thị trên ...
Hướng dẫn tạo Animated Side Navigation - How t
Navbar là một thành phần rất phổ biến trong website hiện nay, Navbar xuất hiện ở gần như tất cả các website theo nhiều kiểu khác nhau để chứa các phần menu chính. 1 Vậy Animated Side Navigation là gì ? Animated Side Navigation là một dạng Navbar có thể ẩn/hiện thông qua các ...
Hướng dẫn tạo Hoverable Sidenav - How t
Hoverable Sidenav có thể hiểu như là một dạng menu động, mặc định nó sẽ không hiển thị nội dung, khi người dùng có tương tác với menu như hover hoặc click thì menu sẽ show ra nội dung của nó. Trong bài này mình sẽ hướng dẫn các bạn tạo một Hoverable Sidenav đơn giản. Cùng tiến hành nhé! ...
Hướng dẫn tạo Pagination với CSS - How t
Pagination chính là phần phân trang, một thành phần rất quen thuộc đối với các lập trình viên. Việc nội dung của trang web được hiển thị quá nhiều sẽ khiến người dùng cảm thấy lộn xộn, thiếu chuyên nghiệp, chính vì vậy các phần phân trang ra đời, nó sẽ giúp lập trình viên xác định ...
Hướng dẫn tạo Thumbnail Image - How t
Thumbnail Image là một hình ảnh nhỏ sử dụng để đại diện cho hình ảnh, khi người dùng click vào Thumbnail Image, hình ảnh với kích thước đầy đủ sẽ được hiển thị. Thumbnail Image được sử dụng ở mọi loại website, từ website tin tức, bán hàng đến blog cá nhân. ...
Hướng dẫn tạo right aligned menu và centered menu bằng CSS - How t
Trong một trang web đơn giản, chúng ta thường để các tab link hiển thị mặc định ở bên trái của thanh navigation trên màn hình trình duyệt. Nhưng để không bị nhàm chán cho người xem khi mà bố cục các trang web quá giống nhau, chúng ta cũng nên thay đổi để tạo sự khác biệt và điểm nhấn ...
Hướng tạo thanh search bar bằng CSS - How t
Search Bar (thanh tìm kiếm) là chức năng không thể thiếu trong mọi trang web. Search bar giúp người dùng dễ dàng tìm kiếm thông tin họ cần mà không phải tìm trong tất cả các danh mục của trang web. Có một thanh search bar sẽ giúp cho trang web của bạn thân thiện với người dùng hơn, giảm thời gian ...
Hướng dẫn tạo thanh top navigation bằng HTML và CSS - How t
Các bạn làm web hẳn đều biết đến thanh navigation (thanh điều hướng), thanh được dùng để điều hướng các phần chính của một website như "Trang chủ", "Tin tức", "Liên Hệ", "Về chúng tôi", ... Thanh này thường được đặt ở đầu trang web hoặc đặt sau header, tùy theo thiết kế và yêu cầu của từng bài. ...
Hướng dẫn tạo Tab Header bằng CSS và Javascript - How t
Trong bài này chúng ta cùng tìm hiểu cách tạo tab header bằng HTML, CSS và Javascript. Tab Headers Tab headers thực chất cũng là một dạng tab mà thôi, đặc điểm của nó là các thanh controls nằm phía dưới cùng và nội dung sẽ nằm phía trên. Đây là ví dụ cho ...
