css

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

Thật sự thì việc vẽ các hình học bằng CSS là khá đơn giản, chỉ với vài dòng lệnh CSS là các bạn hoàn toàn có thể vẽ các dạng hình học mà các bạn muốn. Với bài viết này thì tôi sẽ hướng dẫn các bạn vẽ hình bát giác. Đối với hình bát giác thì các bạn không có nhiều kinh nghiệm về CSS sẽ cảm thấy...

Tiếp tục với việc vẽ các biểu tượng tưởng chừng như phức tạp nhưng thực tế lại đơn giản, bài viết này tôi sẽ hướng dẫn các bạn vẽ biểu tượng hình bát quái bằng cách sử dụng các thuộc tính CSS cơ bản. Khi nhìn vào biểu tượng hình bát quái, các bạn sẽ thấy các đường cong uốn lượn thật khó để vẽ...

Bài viết này tôi sẽ hướng dẫn các bạn vẽ biểu tượng Biohazard chỉ bằng vài dòng lệnh CSS đơn giản. Khi nhìn biểu tượng Biohazard thì các bạn sẽ thấy việc vẽ biểu tượng này sẽ khá phức tạp và cần nhiều thành phần HTML lồng nhau nhưng đối với các bạn có kinh nghiệm về CSS thì việc vẽ biểu tượng...

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

Tiếp tục với việc hướng dẫn các bạn thực hiện các thành phần nhỏ đơn giản với CSS thì lần này tôi sẽ tạo ra quả trứng chỉ với vài dòng mã lệnh CSS. Không cầu kỳ, phức tạp khi sử dụng CSS nhưng những gì mà CSS có thể làm được có thể khiến cho các bạn phải ngạc nhiên. Và lần này thì tôi lại tạo ra...

Có thể nói CSS là một trong những ngôn ngữ không thể thiếu khi thiết kế web, đây là một trong những ngôn ngữ mà các bạn phải học đầu tiên nếu muốn đi theo con đường thiết kế và phát triển web. Ngày nay CSS đã trở thành một chuẩn công nghiệp cho xây dựng các website. Dù các bạn là một nhà thiết...

Bài viết này tôi tiếp tục hướng dẫn nhanh các bạn vẽ ngôi sao 12 cánh bằng CSS. Các bạn tham khảo nội dung mã lệnh như sau: .twelve-point-star { width: 100px; height: 100px; position: absolute; background: #0062af; } .twelve-point-star::before { width: 100px; height...

Bài viết này tôi hướng dẫn nhanh các bạn vẽ ngôi sao 6 cánh bằng CSS. Các bạn tham khảo nội dung mã lệnh như sau: .six-point-star { width: 0; height: 0; position: absolute; border-bottom: 80px solid #0062af; border-left: 50px solid transparent; border-right: 50px solid...

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

Assetic là thư viện PHP dùng để quản lý tài nguyên CSS và JavaScript được sử dụng khá phổ biến, nhất là khi các bạn muốn phát triển các dự án web có thiết kế nhiều thành phần ghép nối lại với nhau thì thư viện Assetic sẽ giúp các bạn quản lý rất tốt các tập tin CSS (Kể cả biên dịch less, sass và...

Tôi sử dụng CSS3 để hướng dẫn các bạn tạo vòng hiệu ứng Circular Preloader đơn giản. Các bạn thực hiện các bước như sau: 1. Tạo cấu trúc thư mục chứa mã nguồn như sau: css -----style.css index.html 2. Mở tập tin css/style.css và nhập vào nội dung mã lệnh như sau: .circular-preloader-outer {...

Bằng cách sử dụng CSS3 tôi sẽ hướng dẫn các bạn tạo thanh hiệu ứng Indeterminate Preloader một cách đơn giản. Các bạn thực hiện các bước như sau: 1. Tạo cấu trúc thư mục chứa mã nguồn như sau: css -----style.css index.html 2. Mở tập tin css/style.css và nhập vào nội dung mã lệnh như sau...