Tạo Drop Down Menu với Form tìm kiếm bằng CSS3 và HTML
Nhằm mang lại nhiều bài viết hơn cho các bạn mới bước vào việc học web, mình xin chia sẻ cho các bạn một bài viết tạo menu đơn giản với HTML và CSS3, qua bài viết này, các bạn sẽ biết phải làm gì để có một menu xổ xuống ( Drop down menu ) cũng như định dạng css cho thanh tìm kiếm. HTML ...
CSS3 @font-face và phương án dự phòng
Mặc dầu CSS3 @font-face được hỗ trợ trên nhiều trình duyệt chính, nhưng không phải là tất cả, những trình duyệt IE cũ luôn luôn là nỗi đau đầu của những người thiết kế web. Khi trình duyệt không nhận dạng được font được sử dụng trên web, nó sẽ lấy các font khác thay thế và điều này có thể dẫn đến ...
Chunky 3D Web Buttons Với CSS3
Hôm nay mình sẽ tiếp tục chia sẻ các đoạn css giúp các bạn tạo ra các nút bấm (button) dưới định dạng 3D đầy màu sắc và đẹp mắt. Qua bài viết này, các bạn sẽ có thêm nhiều lựa chọn hơn cho việc thiết kế các nút bấm cho web hay blog của mình. Xem Demo | Download Bước 1 : HTML Markup ...
5 bước tạo miếng dán màn hình với HTML5 và CSS3
Chắc hẳn là các bạn đã quá quen thuộc với những miếng dán ghi chú được gắn trên các tường , hộc tủ, tủ lạnh nhà bạn , khi bạn cần phải nhắn nhủ điều gì đó cho bản thân hay người thân trong nhà. Hôm nay , chúng ta sẽ tạo ra những miếng dán này ngay trên website của mình, với những hiệu ứng đẹp mắt ...
Tạo Form đẹp mắt với HTML5 và CSS3 Transitions
Với sự có mặt của CSS3 transition thì giao diện web đã được cải tiến đáng kể với những hiệu ứng động mà không cần phải dùng đến JavaScript. Hôm nay mình sẽ tiếp tục chia sẻ cho các bạn một cách làm form đẹp mắt bằng các thẻ input của HTML5 và sử dụng CSS3 :valid pseudo class để làm hiệu ứng đẹp ...
CSS3 Linear Gradients và những điều cần biết
Gradient là một tính năng pha trộn màu sắc mà chúng ta rất đỗi quen thuộc khi làm việc với Photoshop hay các phần mềm tạo ảnh khác.Với màu gradient, chúng ta có thể tạo ra nhiều ảnh nền đẹp mắt từ những màu sắc khác nhau. Và giờ đây , với CSS3 , các bạn đã có thể tạo ảnh nền màu gradient cho bất ...
Tạo cây thông noel với tuyết rơi bằng CSS3
Nhằm tăng thêm không khí cho ngày lễ Giáng Sinh sắp tới, hôm nay mình xin tiếp tục chia sẻ cho các bạn cách tạo cây thông giáng sinh đầy màu sắc với hiệu ứng tuyết rơi cực đẹp, và đặc biệt hợn nữa là chỉ với CSS3 mà không cần phải dùng bất kì đoạn script nào cả. Xem Demo | Download ...
Ấn tượng với CSS3 animated loading bar
Đôi lúc khi chúng ta xem các trang web có dung lượng lớn, đặc biệt là những trang chứa nhiều hình ảnh, chúng ta thường bắt gặp hiệu ứng tải trang trước khi các nội dung này được tải xuống. Điều này sẽ giúp cho khách viếng thăm web nhận biết là trang đang được load vào máy. Để hiểu rõ hơn về hiệu ...
Hướng dẫn tạo Photo Gallery cực pro bằng CSS3
Bạn cần quản lý hình ảnh trong website của bạn ? Bạn bối rối khi chưa rành về Flash hay javacript ? Đừng quá lo lắng về điều đó, vì hôm nay mình sẽ giúp các bạn tạo ứng dụng Photo Gallery cho web của bạn chỉ với CSS. Các bạn có thể xem demo bài viết tại đây. Bước 1 : HTML Đây là code ...
Tạo hiệu ứng Flip 3D với CSS3
Để có thể hiểu và sử dụng thành thạo CSS3 không phải là có thể trong ngày một ngày hai, ngoài việc chịu khó tìm hiểu những thuộc tính mà nó mang lại, chúng ta cần phải làm đi làm lại thật nhiều các ví dụ về các hiệu ứng mà CSS3 hỗ trợ cho chúng ta. Nhằm mang lại cho các bạn có thêm nhiều ví dụ để ...
Từng bước tạo Hiệu Ứng Bóng Nẩy Với CSS3
Chào các bạn, hôm nay chúng ta sẽ cùng nhau tìm hiểu thêm về CSS3 Gradient và Animation nhé. Trong bài viết này, mình sẽ chia sẻ cho các bạn từng bước tạo hiệu ứng bóng nẩy , đây chỉ là hiệu ứng đơn giản, tuy nhiên nó sẽ giúp các bạn có thêm kinh nghiệm sử dụng cũng như khả năng nắm vững CSS3. ...
Tạo hiệu ứng chữ 3D, chữ tỏa sáng bằng CSS3
Trước đây khi cần phải tạo hiệu ứng 3D cũng như tỏa sáng thì chúng ta cần phải dùng các phần mềm tạo ảnh chuyên nghiệp như Photoshop. Nhưng giờ đây với sự hỗ trợ của CSS3 , chúng ta đã có thể tạo ra các hiệu ứng chữ tuyệt đẹp mà không cần phải dùng đến bất kì phần mềm nào. Để minh chứng cho việc ...
Tạo menu slideout bằng CSS3
Đây là menu rất hay mà mình muốn chia sẻ với các bạn, menu này chạy tốt trên các trình duyệt như Firefox, Chrome, Safary, và Opera, Nhưng với trình duyệt IE thì không hoạt động (thuộc tính transitions không được hỗ trợ) . Tuy nhiên mình có hack một chút để có thể chạy được trên IE nhưng có điều ...
Cách thay đổi màu mặc định khi bôi đen chữ bằng CSS3
Mặc định khi chúng ta tiến hành bôi đen một đoạn chữ, thường thì nó có màu nền xanh và chữ màu trắng. Tuy nhiên rất ai ít biết được rằng, chúng ta hoàn toàn có thể thay đổi những màu mặc định này với chỉ vài đoạn css. Xem Demo Và đây là đoạn css giúp chúng ta làm được điều này : ...
Cách làm button chuyển động bằng CSS3
Trước đây để tạo ra các hiệu ứng button chuyển động , bạn phải vẽ các button trong photoshop, rồi sau đó chuyển sang flash để làm nó có thể chuyển động. Nhưng giờ đây bạn không cần phải tốn quá nhiều thời gian để làm việc đó, tất cả chỉ vì sự xuất hiện của CSS3. Các bạn có thể xem demo bài ...
Cách tạo hình 6 góc cho ảnh với CSS3
Trước đây, để tạo các góc cạnh cho hình ảnh, chúng ta thường phải dùng đến những phần mềm tạo ảnh chuyên nghiệp như Photoshop ,để có thể cắt các góc của hình. Nhưng giờ thì mọi chuyện đã khắc hẳn, với sự hỗ trợ của CSS3 Transform và kỹ thuật Masking, chúng ta có thể tạo ngay những hình ảnh góc cạnh ...
Tạo Fisheye Menu bằng CSS3
Chắc hẳn là bạn đã không còn quá xa lạ với các menu dạng Fisheye, nhưng mình cá là bạn không biết là bạn có thể làm các menu như thế mà chỉ bằng CSS3 mà không cần bất cứ đoạn javacript hay jquery nào cả. Các bạn có thể xem demo Fisheye Menu tại đây. Để tạo ra menu này thì chúng ta có thể làm ...
Cách chèn biểu tượng (icons) tương ứng với từng link bằng CSS
Có rất nhiều người sử dụng Javascript để tự động chèn những biểu tượng (icon ) đến những link tương ứng của nó. Ví dụ như bạn tạo một link download đến một file PDF , Word, Excel.. thì những biểu tượng tương ứng với file đó sẽ nằm kế bên những đường link này. Để dễ hiểu các bạn có thể tham khảo ví ...
Tạo dropdown menu với hiệu ứng transtions bằng CSS3
Lại thêm một dropdown menu mà mình muốn giới thiệu với các bạn, menu này sẽ có hiệu ứng transitions (chuyển đổi background nền của menu từ nhạt sang đậm). Menu này hoạt động tốt trên các trình duyệt như FF, Chrome, Safary, nhưng rất tiếc là không hoạt động tốt trên IE. Các bạn có thể xem demo ...
Tạo hiệu ứng Hover tuyệt vời cho ảnh với Webkit và CSS3
WebKit là một khung ứng dụng nguồn mở cung cấp các thành phần cần thiết để xây dựng một trình duyệt web. Cùng với CSS3, cả hai đã góp phần tạo ra những hiệu ứng rất đẹp mắt mà trước đây chỉ có thể thực hiện bằng JavaScript hay JQuery. Trong bài viết này mình sẽ giới thiệu tới các bạn một ...
