Tạo Responsive Videos cho trang web của bạn bằng CSS
Với việc người dùng hiện nay có nhiều cơ hội lướt web trên các thiết bị di động khác nhau, vì thế trang web có thiết kế tương thích với độ phân giải màn hình của các thiết bị đó là điều cần thiết. Mình đã giới thiệu với các bạn nhiều bài viết để làm điều này như : Từng bước tạo Responsive Form với ...
Tạo icon từ bộ Font Awesome bằng CSS
Font Awesome là một web font chứa tất cả các icon từ Twitter Bootstrap framework , bằng cách ấn định giá trị content trong css, các bạn có thể tạo ra các icon theo ý muốn. Giả sử các bạn muốn tạo icon từ phần tử nào, thì chỉ việc khai báo như sau : .element { position: ...
Hướng dẫn từng bước sử dụng css sprite
Css Sprites là một kỹ thuật mà các bạn thiết kế và phát triển web đều nên biết, hôm nay mình sẽ hướng dẫn các bạn cách làm CSS Sprites từng bước một : Trong baì này mình sẽ giúp các bạn tạo 1 button sử dụng kỹ thuật css sprite này.các bạn có thể save hình sau về để test thử : Bước 1 ...
Từng bước tạo hiệu ứng Tabs với CSS3
Content tabs rất đỗi quen thuộc và chúng ta sẽ dễ dàng bắt gặp nó mỗi khi duyệt web trên internet. Có rất nhiều cách để tạo ra dạng tab cho nội dung web. Trong bài viết trước mình đã giới thiệu cho các bạn Tạo tab content với plugin jQuery Tabulous . Hôm nay chúng ta sẽ không sử dụng bất kì đoạn ...
Từng bước tạo banner động bằng CSS3 và jQuery
Nếu các bạn đã từng xem qua bài viết Tạo web banner động với CSS3 , trong bài viết đó , chúng ta đã làm quen với tính năng animation có trong CSS3. Hôm nay mình sẽ giới thiệu thêm cho các bạn cách tạo banner động với thuộc tính transform và transition có trong CSS3, cùng với sự giúp đỡ nho ...
Từng bước tạo Responsive Menu với CSS và jQuery
Một trong những phần cần phải làm cho một trang web có khả năng Responsive chính là phần Menu. Với một menu có khả năng hiển thị tốt trên nhiều kích thước màn hình khác nhau, sẽ giúp người dùng dễ dàng lựa chọn đến những trang mà họ muốn khi dùng các thiết bị duyệt web khác nhau. Hiện nay có rất ...
Tạo button đầy màu sắc bằng CSS3 và RGBA
Một trong những điều mà mình thích thú nhất về CSS3 là việc bổ sung cho phép sử dụng các màu RGBA . Hôm nay chúng ta sẽ tạo ra các button đầy màu sắc mà không cần phải dùng bất kỳ hình ảnh hay kỹ thuật photoshop nào. Các bạn có thể xem demo tại đây. Đầu tiên chúng ta cần tạo ra khung sườn các ...
Tạo hiệu ứng động 3D với CSS3
Tạo hiệu ứng động đối với CSS3, có lẽ đối với nhiều người đã không còn quá xa lạ từ khi nó ra đời. Nhưng CSS3 không chỉ dừng lại ở có thế mà nó còn tạo hiệu ứng 3D cực kỳ đẹp mắt không khác gì mấy so với các phần mềm tạo ảnh động chuyên nghiệp. Nếu bạn nào vẫn chưa tin thì có thể xem demo bên dưới ...
Kỹ thuật làm chữ hoa đầu dòng (Drop cap)
Drop cap là một trong những typography hay được dùng trong các tạp chí trên giấy cũng như các tạp chí điện tử. Nó thường được dùng ở đầu mỗi bài báo với font chữ lớn và màu sắc nổi trội. Theo quy luật nhìn của mắt nếu một đối tượng nổi bật hơn các đối tượng xung quanh, nhì nó sẽ có tác độ ng ...
CSS Transparency trên toàn bộ các trình duyệt
Chúng ta sẽ áp dụng các thuộc tính sau cho một đối tượng HTML nào đó muốn transparent. đoạn code như sau: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } opacity: 0.5; Đây là một thuộc tính rất quan trọng bởi ...
Nắm vững CSS Box Shadow
Hiệu ứng bóng đổ đã được mình giới thiệu trong các bài viết trước, tuy nhiên, trong bài viết này, mình sẽ hướng dẫn cụ thể hơn về thuộc tính bóng đổ, các bạn thử xem sao nhá. Đầu tiên chúng ta thử tìm hiểu đoạn css sau : .shadow { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: ...
Cách viết giản lược trong CSS
Nếu bạn là người thực sự muốn tìm hiểu về CSS, thì bạn không thể không tìm hiểu cách viết giản lược(shorthand) trong CSS. Cách viết này thực sự mang lại những lợi ích và tiện lợi khi bạn sử dụng CSS. Trước khi đi vào phân tích những tiện lợi mà nó mang lại, tôi xin lấy một ví dụ đơn giản như sau. ...
Từng bước tạo nút bấm mạng xã hội bằng CSS3
CSS3 giúp các nhà thiết kế web có khả năng tạo ra các nút bấm (buttons) vô cùng đẹp mắt, hôm nay mình sẽ chia sẻ với các bạn 2 thủ thuật trang trí cho các button trong web của bạn trở nên đẹp rạng ngời mà không cần phải dùng đến photoshop. 1 Inset Buttons | xem demo Trước tiên chúng ...
Tạo form tìm kiếm đẹp mắt bằng CSS3
Thanh tìm kiếm là một phần không thể thiếu cho các website hay blog, nó giúp người đọc dễ dàng tìm kiếm những thông tin cần đọc nhanh nhất, vì thế tạo một website với thanh tìm kiếm đẹp mắt cũng là một phần giúp bạn tạo được thiện cảm nơi người dùng và giữ được lượng khách viếng thăm trang của bạn. ...
14 cách giúp bạn tối ưu và giảm dung lượng file css
Tối ưu hóa và giảm dung lượng file css là một kỹ thuật mà các bạn chuyên nghành thiết kế và phát triển web cần nên biết , vì nó làm website của bạn chạy nhanh hơn, và đó là điều kiện cần để giữ 1 lượng độc giả đến với bạn, vì sẽ không ai muốn đọc nội dung ở một trang mà khi load nội dung lại ...
Thiết kế table đẹp mắt bằng CSS3
Bài viết này sẽ giúp bạn thiết kế table đẹp mắt mà không dùng bất kỳ một file hình và cũng không cần phải có kiến thức về photoshop, chỉ với vài đoạn css3 đơn giản. Bạn có thể xem kết quả sau khi thực hiện xong như bên dưới: Đầu tiên chúng ta tạo HTML để làm ví dụ minh họa : ...
14 website tự động sản sinh css hữu ích nhất
Nếu bạn muốn tự tay thiết kế cho mình một trang web nhưng lại không có kiến thức gì về css . Thì bài viết sau sẽ là cực kỳ hữu ích dành cho bạn, vì đây là những trang web tự động sản sinh ra css khi bạn thao tác trên các công cụ, rất phù hợp cho những ai mới bắt đầu làm quen với css và cả ...
Tạo hiệu ứng Image Hover cực đỉnh bằng CSS3
Hiệu ứng hover là hiệu ứng mà khi ta trỏ chuột tới đối tượng thì đối tượng đó sẽ thay đổi, hôm nay chúng ta sẽ tạo ra một hiệu ứng như thế cho những tấm ảnh trong website của mình với hiệu ứng hover hết sức đỉnh. Các bạn có thể xem demo tại đây. Những bước cần làm : – Tạo file index.html ...
Làm đồ trang trí cây giáng sinh bằng CSS3
Trong bài viết này chúng ta sẽ thấy rõ được sức mạnh của CSS3 trong việc vẽ các hình phức tạp. Chỉ việc sử dụng HTML và CSS3 mà không cần dùng bất kì hình ảnh nào. Và chúng ta tạo ra các đồ vật trang trí như sau : Đầu tiên chúng ta sẽ tạo các phần tử HTML, các bạn copy đoạn html sau : ...
7 thuộc tính cơ bản trong CSS3 mà bạn cần phải biết
Sau 13 năm là một phần không thể thiếu trong việc thiết kế web, Cascading Style Sheets (CSS) đã được phát triển thành một công cụ vô cùng mạnh mẽ, cho phép bạn phát triển những trang web với nhiều hiệu ứng và trông đẹp mắt hơn rất nhiều. Bài viết này sẽ chia sẻ với các bạn những kỹ thuật cơ bản ...
