Tạo Caption Image Cực Cool với CSS3
Caption Image là hiệu ứng mà khi chúng ta rê chuột vào hình, sẽ xuất hiện một đoạn chữ mô tả (do ta đặt từ trước) về tấm hình đó, đồng thời hình ảnh sẽ bị che mờ bởi một lớp bacground mỏng. Hôm nay mình sẽ cùng các bạn tạo ra các hiệu ứng này bằng CSS3 mà không cần phải dùng thêm JavaScript hay ...
Tạo web banner động với CSS3
Bằng cách cắt nhỏ riêng lẻ từng hình trong banner và sử dụng hiệu ứng animation có trong CSS3, các bạn có thể tạo ra các banner động mà không cần phải dùng đến Flash. Với cách làm này , các bạn có thể tạo ra các banner động chạy tốt trên các thiết bị không hỗ trợ Flash (như iphone, ipad chẳng ...
Tạo menu với hiệu ứng Dropdown bằng CSS3
Như các bài về tạo dropdown mà mấy lần trước mình đã post, hôm nay chúng ta sẽ tiếp tục làm menu dạng dropdown bằng CSS3 với hiệu ứng mới, rất đáng để bạn tham khảo, các bạn có thể xem demo tại đây . Nào chúng ta cùng bắt đầu tạo menu nào: Bước 1: HTML Với đoạn html sau các bạn chỉ cần ...
Tạo Accordion với CSS3
Accordion là một kỹ thuật giúp bạn rút gọn nội dung mà bạn muốn hiển thị trên website. Nó thường được dùng cho việc hiển thị các menu con. Ngoài ra bạn cũng có thể dùng nó cho nội dung, hình ảnh. Trước đây khi áp dụng thủ thuật này, bạn phải dùng đến JavaScript hoặc JQuery. Nhưng trong bài viết ...
Tạo nút công tắc đẹp mắt với Checkboxes và CSS3
CSS3 đang ngày trở nên thú vị hơn bao giờ hết, nếu bạn chịu khó tìm hiểu sâu về nó , các bạn sẽ thấy nó thật kì diệu vì những gì mà nó mang lại. Để minh chứng cho việc này, hôm nay mình sẽ giới thiệu với các bạn từng bước tạo các nút công tắc đẹp mắt mà không cần phải dùng Photoshop để thiết kế hay ...
Top 10 thủ thuật css cho dân thiết kế web
Nắm vững css là điều bắt buộc đối với dân thiết kế web, vì thế mình xin chia sẻ với các bạn 10 thủ thuật css hay cho người mới bắt đầu và cả những ai quan tâm đến lĩnh vực thiết kế web nói chung và css nói riêng. Nào chúng ta cùng khám phá từng thủ thuật nào: Thủ thuật CSS 1 : Tạo chữ đảo ...
Tạo Multi Step Form với Progress Bar sử dụng jQuery và CSS3
Trong thiết kế cũng như lập trình, Form thường được mọi người sử dụng nhiều nhất vì những tính năng mà nó mang lại cho website. Hôm nay mình sẽ chia sẻ với các bạn một cách sắp xếp Form gọn gàng với hiệu ứng đẹp mắt nhờ 2 công cụ hot nhất hiện nay là jQuery và CSS3 . Trước khi bắt đầu các bạn ...
LESS CSS – Hướng dẫn cơ bản cho người bắt đầu
Css thì rất đơn giản và dễ dàng để học, tuy nhiên nó lại có một giới hạn nhất định. Đặc biệt là khi bạn phải điều chỉnh lại nó. Bạn hãy tưởng tượng xem , khi bạn có hàng ngàn dòng css mà cần phải thay đổi một cái gì đó thì thật là mệt mỏi phải không ? Tuy nhiện một công nghệ mới đã ra đời ...
Từng bước tạo Responsive Form với CSS3 và HTML5
Việc thiết kế web phù hợp với nhiều thiết bị khác nhau, đặc biệt là trên các thiết bị di động như ipad, iphone là xu hướng mà bất kì một font end developer nào cũng phải nắm vững. Để các bạn có thêm kinh nghiệm trong lĩnh vực này, mình xin chia sẻ với các bạn một ví dụ đơn giản là tạo form người ...
Tự động đánh số thứ tự với CSS Counter
Chúng ta đã nói rất nhiều và tìm hiểu cũng khá kỹ về CSS3, tuy nhiên có một số thuộc tính mà CSS2 mang lại ắt hẳn cũng rất ít người biết. Hôm nay mình sẽ giới thiệu một thuộc tính rất hay mà CSS2 có, đó là CSS Counter . Như các bạn đã biết, khi chúng ta chèn danh sách với các phần tử <ol> ...
CSS Border : Những điều không nên bỏ qua
Chúng ta đã quá quen thuộc với thuộc tính border có trong CSS, tuy nhiên còn có những điều thú vị khác về nó sẽ khiến bạn thật sự ngạc nhiên. Nào chúng ta cùng tìm hiểu nhé : Thông thường chúng ta sẽ viết như thế này khi cần tạo đường viền cho đối tượng: border: 1px solid black; Đoạn ...
Tạo Vertical Navigation Menu với CSS3 và jQuery
Menu là một thành phần không thể thiếu trong các website, để giúp các bạn có thêm một sự lựa chọn cho menu trong các website của các bạn. Hôm nay mình xin chia sẻ một mẫu menu đẹp được xây dựng chủ yếu từ CSS3 và jQuery. Các bạn có thể xem demo bài viết hoặc download trực tiếp về máy của mình trước ...
Hiệu ứng tooltips cực đỉnh với CSS3
Nhằm giới thiệu tới các bạn series bài viết về CSS3 , hôm nay mình sẽ chia sẻ với các bạn cách tạo hiệu ứng tooltips đẹp mắt mà không cần phải dùng đến bất kì đoạn javascript hay jQuery nào. Trong bài viết này chúng ta sẽ sử dụng css transitions và pseudo-classes :before và :after . ...
Hiển thị ảnh PNG trên IE
Hiện định dạng ảnh PNG chỉ được hỗ trợ bởi một số trình duyệt mới như Firefox, Opera, IE7. Còn một số trình duyệt cũ như từ IE6 trở xuống đều không hỗ trợ định dạng ảnh này. Trong bài viết này chúng ta sẽ dùng một số thủ thuật để định dạng ảnh PNG có thể hiển thị tốt trong IE. Trong khuôn khổ ...
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 ...
