Vài ngày trước, jsB@nk đã giới thiệu với bạn danh sách các trải nghiệm web hoàn chỉnh với CSS3 rất độc đáo thông qua bài viết Chiêm ngưỡng các ứng dụng CSS3 tuyệt đẹp, hôm nay jsB@nk xin giới thiệu tiếp với các bạn một danh sách cũng là các ứng dụng CSS3 nữa, nhưng điểm đặt biệt là có hướng dẫn chi tiết và đầy đủ để giúp bạn xây dựng các ứng dụng này cho riêng mình.

Vui lòng vào trang chi tiết để xem đầy đủ danh sách trên 50 ứng dụng web với CSS3 cực độc này. Hoặc xem thêm các bài viết liên quan bên dưới:
- Các website tuyệt đẹp dùng JavaScript đầy sáng tạo
- 50+ trải nghiệm tuyệt đẹp với các ứng dụng web

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

Create YouTube-like adaptable view using CSS and jQuery

Other than the �Turn off the lights� feature, YouTube has great stuff, such as the �change view� feature, which allows you to switch between normal and wide mode, thus expanding or shrinking the video area. Creating this is very simple.

Purely CSS � Faking Minimum Margins

min-margin is non-existent in the CSS world. After you�ve pondered and Googled it, check out the solution here.

Perfect Full Page Background Image

This technique allows an image to fill the page, with no white space. The image scales as needed and retains its proportions, without triggering scroll bars.

Apple-like Retina Effect With jQuery

his tutorial explain how you can recreate the effect displayed on the image below, using jQuery and CSS.

How to create a kick-ass CSS3 progress bar

New features introduced in CSS3 allows developers to create stunning visual effects: this post exaplains how you can create a fancy progress bar using CSS3 and jQuery, without Flash or images.

Europe, CSS & jQuery clickable map

CSS converts a simple list of countries into the fully clickable map. Works with disabled style sheets and JavaScript, as well as on mobile devices. A simple code does not require Flash Player or other plug-ins!

Super Cool CSS Flip Effect with Webkit Animation

Webkit support some fancy transform and animation effects that can really spice up the web experiences for users with Safari or Chrome browsers. Here�s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a Transformers themed top trumps design.

Footnotes With CSS

In their simplest implementation � using sup tags and linking within the page � footnotes aren�t very user-friendly. They interrupt the experience, requiring the user to click the link, read the information and then return to the page with the browser�s �Back� button.� Lukas Mathis has come up with an elegant solution to improve this user experience: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it � i.e. when they move the cursor over the footnote symbol.

How to create Microsoft Office Minibar with jQuery and CSS3

Although many will argue that Microsoft products are an example of a good design, Minibar was one of design refreshments that came out with the Office 2007. It is a variation of a toolbar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

Diagonal CSS Sprites � Aaron Barker

So you�ve got your sprite created, and it�s working great. 30+ icons in one image, and major HTTP connections saved. You have made your little corner of the interwebs a little happier and faster. Steve Souders would be proud.

• Mã nguồn
• In

• Lời bình (0)
• Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới