css3

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

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

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

Với CSS3, có một loạt các hiệu ứng đổ bóng văn bản để các bạn có thể sử dụng vào các hiệu ứng trên giao diện website của các bạn. Bài viết này tôi sẽ hướng dẫn các bạn một số hiệu ứng đổ bóng văn bản bằng thuộc tính Text Shadow có trong CSS3. Các ví dụ mà tôi trình bày trong bài viết này chỉ là...

Tiếp tục với các hình học tôi sẽ hướng dẫn các bạn vẽ hình thoi chỉ với vài dòng lệnh CSS3. Vẽ hình thoi thực chất đó là một hình vuông được quay 45 độ chứ không có gì phức tạp. Đôi lúc các bạn cũng nên nhìn nhận ở một khía cạnh khác để đơn giản hoá vấn đề chứ không nhất thiết phải bám sát vào...

Có bao giờ các bạn thử vẽ hình trái tim bằng CSS chưa? Tôi nghĩ là chưa bởi vì trên giao diện website thì vẽ hình trái tim để làm gì. Nhưng đôi lúc cũng cần tới một chút giải trí sau thời gian làm việc căng thẳng phải không? Thực ra, bài viết này của tôi ngoài giúp các bạn có một chút thư giản...

Những điều mà CSS3 có thể làm sẽ khiến các bạn phải ngạc nhiên vì vậy việc các bạn có thể nắm vững các kiến thức về CSS3 là điều cần thiết nhất là đối với các bạn lập trình giao diện. Để có thể tận dụng tối đa tất cả những gì mà CSS3 có thể đáp ứng thì đòi hỏi các bạn phải mất một thời gian dài...

Một trong những tính năng tuyệt vời nhất của CSS đó chính là tạo các hiệu ứng chuyển động với CSS3 Animation. Trước đây, mỗi khi tạo hiệu ứng cho website các bạn phải nhờ đến sự giúp sức của JavaScript. Giờ đây, công việc này đã phần nào được đơn giản hóa bởi CSS cụ thể là CSS3 Animation. Mặc dù...

Để tạo các tiêu đề nằm ngang trong website là việc đơn giản và hiển nhiên là các bạn không cần phải làm gì khác ngoài định dạng tiêu đề cho phù hợp với giao diện tổng thể của website. Bài viết này tôi hướng dẫn các bạn tạo tiêu đề nằm dọc khá độc đáo nhưng cũng vô cùng đơn giản với vài dòng lệnh...

Chức năng phóng to hình ảnh khi các bạn rê chuột lên hình ảnh là một trong những hiệu ứng thường thấy hiện nay trên các website, nhất là các website dạng tin tức hoặc blog. Đây là một hiệu ứng chuyển động đẹp, bắt mắt giúp người dùng cảm thấy thú vị khi xem website. Chức năng này sử dụng các...

Bài viết này tôi sẽ hướng dẫn các bạn vẽ các hình học cơ bản như hình vuông, hình tròn và hình tam giác chỉ bằng CSS đơn thuần. Về hình vuông thì có lẽ chỉ là việc rất đơn giản nhưng tôi cũng muốn hướng dẫn để các bạn có thể thấy những khác biệt về mã lệnh CSS giữa các hình học này. Và trong 3...