css

Với sự hỗ trợ mạnh mẽ CSS3 của các trình duyệt web hiện nay, các bạn hoàn toàn có thể tạo ra nhiều hiệu ứng hoạt hình đẹp mắt. Một trong số các hiệu ứng hoạt hình thường được sử dụng trên website đó chính là loading. Hiệu ứng loading được tạo ra với mục đích báo hiệu cho người dùng biết tiến...

Propeller là một thư viện CSS được phát triển dựa trên Bootstrap và theo phong cách material. Vì vậy, thư viện Propeller được kế thừa những thành phần, tính năng mà Bootstrap có cũng như khoắc lên mình giao diện đẹp mắt, hiện đại của material. Nếu như các bạn muốn sử dụng Bootstrap để thiết kế...

Thư viện unsemantic là một CSS framework dùng để thiết kế bố cục website. Với sự hỗ trợ của thư viện unsemantic, các bạn sẽ dễ dàng xây dựng bố cục website tương thích với hầu hết các thiết bị mà không gặp khó khăn nào. Việc sử dụng thư viện unsemantic cũng vô cùng đơn giản, chỉ cần các bạn đã...

Trong chuyên mục HTML & CSS tôi đã giới thiệu với các bạn nhiều thư viện dùng để thiết kế giao diện website như UIkit, Flexgrid, Ratchet và gần đây nhất là Bulma. Tất cả các thư viện này đều cùng một mục đích là cung cấp cho các bạn thiết kế giao diện nhiều thành phần xây dựng sẵn để các bạn có...

Bulma là một CSS framework mã nguồn mở miễn phí rất tốt để thiết kế giao diện website, giúp các bạn tiết kiệm thời gian, công sức. Với lợi thế đó, Bulma ngày càng trở nên phổ biến và được sử dụng rộng rãi hơn. Bulma chứa các thành phần tuyệt vời như tab, navigation bar, box, panel... Framework...

Hiện nay việc thế kế giao diện website tương thích với các thiết bị di động gần như là yêu cầu bắt buộc và tất nhiên có nhiều thư viện hỗ trợ rất tốt việc này như Bootstrap, UIkit... Tuy nhiên, các thư viện này hỗ trợ chung cho thiết kế giao diện web chứ không phải là chuyên biệt cho di động...

Thông thường để tạo bố cục giao diện website các bạn thường sử dụng CSS để bố trí với các thuộc tính canh chỉnh phù hợp. Hiện nay với sự phát triển của các trình duyệt web, việc tạo bố cục website trở nên đơn giản, linh động và tương thích tốt hơn rất nhiều, một trong số đó phải kể đến khả năng...

Hiện nay có khá nhiều thư viện giúp các bạn tạo tooltip dễ dàng và chuyên nghiệp, ví dụ như jQuery UI Tooltip mà tôi đã giới thiệu với các bạn ở bài viết "Tạo tooltip chuyên nghiệp với thư viện jQuery UI Tooltip". Bài viết này tôi tiếp tục giới thiệu với các bạn một thư viện khác, chỉ bằng CSS...

Trước đây các bạn thường sử dụng các hình ảnh chuyển sắc để làm nền cho website hay một thành phần nào đó trên website, nhưng như thế sẽ làm website trở nên nặng nề khi phải tải các ảnh nền này, sự nặng nề này các bạn sẽ thấy rất rõ khi số lượng ảnh nền trên website tương đối nhiều, điều này...

Đối với các bạn lập trình giao diện web thì khái niệm material design và thư viện Bootstrap có thể đã quá quen thuộc. Bài viết này tôi sẽ giới thiệu với các bạn một thư viện để tạo ra giao diện web theo phong cách material design dựa trên Bootstrap đó là thư viện Propeller. Các bạn lưu ý, để sử...

Hiện nay các thư viện như Bootstrap hay UIkit đều có tích hợp thành phần accordion giúp các bạn tạo accordion một cách nhanh chóng. Tuy nhiên, đôi lúc các bạn chỉ muốn sử dụng riêng thành phần accordion thì các bạn có thể sử dụng thư viện Experiment Accordion thay vì tích hợp cả gói thư viện với...

Magic Animations là một bộ thư viện với các hiệu ứng chuyển động được thiết kế bằng CSS3. Một điều thú vị là Magic Animations được tạo ra bởi Daniel Eden's vốn làm việc trên thư viện Animate.css mà tôi đã từng giới thiệu với các bạn ở bài viết "Tạo hiệu ứng đẹp mắt với thư viện Animate.css". Thư...

Khi các bạn vào một website nào đó sẽ thường bắt gặp hiệu ứng khá phổ biến đó là các biểu tượng hiệu ứng preloader. Đây là thành phần thường được sử dụng trong các trường hợp website phải đợi tải hoặc xử lý yêu cầu nào đó, khi đó thành phần preloader sẽ giúp cho người dùng biết được yêu cầu của...

Bài viết này tôi sẽ giới thiệu với các bạn một thư viện để thiết kế giao diện website có tên là UIkit. Mặc dù UIkit không phổ bến bằng Bootstrap nhưng thư viện UIkit cũng cung cấp đầy đủ các tính năng để thiết kế giao diện website một cách nhanh chóng, hiệu quả và chuyên nghiệp với nhiều hiệu...

Tôi có viết một bài về sử dụng thư viện iHover để tạo các hiệu ứng hover đẹp mắt trên website, các bạn có thể xem tại bài viết "Tạo hiệu ứng hover với thư viện iHover". Ngoài thư viện iHover thì các bạn cũng có thể sử dụng thêm thư viện Hover.css để bổ sung thêm các hiệu ứng hover khác. Thư...

iHover là một bộ sưu tập các hiệu ứng hover sử dụng CSS3. Thư viện iHover có 20 kiểu hover hình tròn và 15 kiểu hover hình vuông. Thư viện iHover là hoàn toàn miễn phí nên các bạn có thể sử dụng để tạo ra các hiệu ứng đẹp mắt trên website của các bạn. Để sử dụng thư viện iHover, các bạn cần...

Ngày nay khi thiết kế website, các nhà thiết kế web thường quan tâm đến những hiệu ứng độc đáo, ấn tượng để có thể thu hút được người dùng truy cập và nhấp vào website của các bạn. Với CSS và CSS3 hiện nay, có rất nhiều cách khác nhau để cung cấp hiệu ứng chuyển động, đặc biệt là cho hình ảnh...

Trước đây để tạo ra các cột nội dung thì các bạn phải sử dụng thuộc tính float của CSS để vẽ, nhưng hiện nay với CSS3, cụ thể là với thuộc tính column-count thì việc tạo các cột nội dung trở nên dễ dàng hơn rất nhiều. Bài viết này tôi sẽ hướng dẫn các bạn sử dụng thuộc tính column-count để tạo...

Trước đây có lẽ mọi thứ liên quan đến background các bạn đều phải nhờ tới sự trợ giúp của Photoshop, nhưng trong thiết kế web hiện đại ngày nay thì việc tối ưu thiết kế là quan trọng nên những gì có thể không cần dùng tới hình ảnh thì các bạn nên làm, điều này không những làm website của các bạn...

Hiệu ứng Letterpress là hiệu ứng mà văn bản nằm chìm trong nền được tạo ra với một màu nền, một màu nhạt hơn của màu nền và bóng tối hơn của màu nền. Kết hợp với thuộc tính Text Shadow có trong CSS3 để làm cho văn bản có thêm hiệu ứng đẹp mắt hơn. Các bạn tham khảo nội dung mã lệnh CSS như sau...