Vertical Scrolling: Slice & Code
Trong bài trước, chúng ta đã tao ra được giao diện website mang tên “Izwebz survey” bằng photoshop. Và bài tiếp theo ngày hôm nay thì chúng ta sẽ chuyển từ PSD>HTML với định dạng HTML5 & CSS3.
Basic HTML 5 với media element
Khi xưa, khi muốn play một video clip hoặc một bài nhạc các bạn cần phải có một file Flash làm player. Code thì dài dòng rắc rối. Nhưng với sự ra đời của HTML 5 thì chuyện đó không còn khó nữa. Và mình xin được giới thiệu với các bạn một trong những tính năng mới của HTML 5 đó chính là media element.
CSS Image Switcher
Hôm nọ đi dạo dạo trên mạng và thấy được ở một trang web khác nó có cái hiệu ứng khi hover chuột qua một đường link thì hình ảnh ở trên thay đổi. Mà nó làm bằng Javascript. Tuy làm bằng Javascript thì hiệu ứng nó mượt mà hơn CSS, nhưng chỉ bằng CSS chúng ta cũng có thể tạo được hiệu ứng tương tự với Z-index và Absolute Position.
Căn giữa Tabbed Navigation
Kỹ thuật tạo Tabbed Navigation sử dụng Sliding Door đã trở nên rất phổ biến trên nhiều trang web. Tabbed Navigation có thể tiết kiệm diện tích và Sliding Door Button cho phép nút di chuyển của bạn giãn nở theo nội dung của nó. Nhưng có một điều là loại Sliding Door phụ thuộc hoàn toàn vào Float cho nên Tab của bạn chỉ có thể ở bên trái hoặc ở bên phải. Nếu như vì một lý do nào đó, bạn lại muốn nó được căn chỉnh ở giữa thì sao?
CSS3 – Animation
Với CSS3 chúng ta có thể làm được rất nhiều thứ mà bây giờ muốn làm được phải sử dụng jQuery hoặc Flash. Vừa rắc rối mà lại ít tương thích các trình duyệt. Sẽ còn có nhiều tranh luận về các đặc tính mới của CSS3, nhưng thế nào đi nữa, cá nhân tôi vẫn thấy CSS3 quá “cool” và nhiều tính năng rất đáng mong đợi. Trong bài này chúng ta tiếp tục tìm hiểu về CSS3 – animation
Dropdown Menu II – Vnexpress Style
Có lẽ Dropdown menu là loại menu phổ biến nhất hiện nay, trước đây tôi đã có một vài video nói về Dropdown menu và Flyout menu với CSS và cả jQuery. Nhưng có nhiều người email hỏi tôi cách làm menu giống với trang Vnexpress.net. Tôi có trả lời nhiều lần là về nguyên lý nó giống y như phần Dropdown menu chỉ cần chỉnh sửa một chút. Nhưng đến hôm nay tôi quyết định làm hẳn một video để giải thích cho rõ hơn.
Độ cao của Div
Thiết kế giao diện hoàn toàn bằng CSS là cách hay nhất mà các designer có được cho đến lúc này. Nhưng đôi khi một số tính năng của CSS chưa đủ toàn diện để bao quát hết mọi mong muốn của người dùng. Chính vì vậy đôi khi chúng ta phải cậy nhờ đến jQuery để bù đắp vào những chỗ thiếu sót này.
Cách sử dụng Sprite Image
Trong bài nút ba trạng thái tôi đã giới thiệu đến các bạn về Sprite Image và nó có thể tiết kiệm được tài nguyên máy chủ như thế nào. Trong bài này chúng ta sẽ tìm hiểu sâu hơn về Sprite Image và áp dụng nó ở phạm vi lớn hơn và không chỉ ở mức dạng nút. Về mặt lý thuyết, một trang web có thể chỉ cần duy nhất một tấm hình làm hình nền.
Những cách trình bày CSS
Trong bài này chúng ta sẽ không bàn đến những tính năng thông thường của CSS mà trong bài này chúng ta sẽ xem xét đến những cách trình bày code CSS. Có rất nhiều cách bạn có thể chọn để trình bày trong CSS, nhưng chọn ra cách nào phù hợp với mình và luôn sử dụng nó là tốt nhất.










