Tạo Menu theo phong cách Google Play với CSS3 và jQuery
Nếu bạn từng vào trang cửa hàng của Google Play , chắc hẳn là sẽ ấn tượng với menu từ trang web này. Nếu các bạn muốn áp đặt kiểu menu như thế vào trong web hay blog của mình, thì trong bài viết này, mình sẽ chia sẻ cho các bạn từng bước làm menu theo phong cách của trang Google Play với sự hỗ trợ ...
Tạo Dropdown Menu với menu đa cấp bằng CSS3
Ngày nay việc sử dụng menu thuần CSS đã trở nên rất phổ biến, hầu hết là cá menu dạng UL – LI. Hôm nay mình tiếp tục giới thiệu cho các bạn một menu đẹp nữa, đây là menu dạng dropdown đa cấp, các submenu sẽ xuất hiện khi bạn click chuột (onclick) chứ không phải khi trỏ chuột tới (onhover). Đây ...
Tạo ảnh di chuyển với CSS3 và Javacript
Từ việc CSS3 cho phép bạn sử dụng nhiều background cho một đối tượng, hôm nay mình xin giới thiệu với các bạn một thủ thuật sẽ giúp bạn di chuyển nhiều hình nền với một phần góp sức nho nhỏ của javacript. Rất đơn giản và dễ làm, và đây là demo bài viết. Để thực hiện trước hết chúng ta lần lượt ...
Tạo hiệu ứng button chuyển màu cực cool bằng CSS3
Việc hiểu biết CSS3 sẽ giúp ích rất nhiều cho các bạn tìm được việc làm ưng ý sau này. Vì thế hôm nay mình xin chia sẻ với các bạn một hiệu ứng đơn giản mà CSS3 mang lại cho chúng ta, qua bài viết này, các bạn sẽ có thể hiểu rõ hơn về cách sử dụng animation và @keyframes rule có trong CSS3. ...
Cách hack css cho tất cả các trình duyệt
Trong quá trình thiết kế web, điều làm đau đầu nhất đó là làm sao để trang web mà mình thiết kế có thể chạy tốt trên các trình duyệt. Nhất là khi khách hàng sử dụng những trình duyệt đã cũ như IE6 chẳng hạn. Tuy nhiên , với bài viết này, các bạn sẽ dễ dàng chỉnh sửa giao diện chạy tốt trên các ...
Tạo menu đa cấp dropdown cực cool bằng CSS3
Trong những năm gần đây, các menu web được tạo từ css đã trở nên ngày một phổ biến. Hầu hết bất cứ website nào cũng đều có menu chuyển hướng riêng, và hôm nay mình sẽ giới thiệu thêm cho các bạn một menu đa cấp dưới dạng dropdown với hiệu ứng cực cool được làm từ CSS3 sẽ giúp bạn có thêm sự lựa ...
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ổ ...
