WP Island

Nói độc nhiều người bảo ngoa vì có nhiều cái còn độc hơn. Nhưng mà đa phần mấy cái độc kia nó viết bằng js, flash còn cái thuần CSS như thế này thì mới đúng là hàng hiếm nà.



Mà chắc chắn sẽ có người bảo chẳng dùng được. Nên bạn xin nói trước là mấy cái hàng độc nó kị IE hoặc người làm hàng độc cũng thù IE nên không thèm chấp vá, fix lỗi. Nhiều người bảo cái hiệu ứng cũng phình phường. Ừ thì cái hiệu ứng mouse over này cũng xưa như WPB rồi. Đó là trường hợp bạn dùng Opera. Và rất may là khoảng 40% người sử dụng nền tảng FF và Safari sẽ rất hí hửng với những công nghệ CSS chỉ được hỗ trợ bởi trình duyệt của họ.

Vì đây là một entry dạng khoe hàng, tự sướng nên bạn sẽ không viết kiểu cầm tay gõ phím. Những phần nào đã quá quen thuộc bạn cũng chỉ nói sơ qua thôi. Ai muốn tìm hiểu HTML thì vô W3Schools, ai muốn tham khảo CSS 3- thì có thể xem qua Simple CSS. Còn ai đã biết hết rồi thì cũng chịu khó im lặng cho em nó mần ăn.

Vô đề nà. Nãy giờ chắc mọi người cũng đã nhìn rõ rồi hen. Nhìn kỹ thì nó cũng hem có gì bí ẩn. Đầu tiên là cái xác HTML. Cho thêm tí CSS định dạng sơ bộ rồi position mấy cái photo nằm ngổn ngang (dùng position:absolute rồi canh mấy giá trị top, botom, left, right gì đó) nữa là được cái sườn. Thêm mấy cái pseudo-class như :hover, :focus cũng hem thành vấn đề. Magic ở đây là mấy cái photo nó nghiêng tá lả, rồi cái bóng mờ mờ mà nhiều người tưởng là làm bằng png. Và còn một điều nữa mà chỉ những người sử dụng cả FF và Safari hay Chrome có thể nhận ra chính là hiệu ứng trên Safari hay Chrome mượt hơn FF. Trong entry này P sẽ tập trung vào những hiệu ứng magic kể trên.

Đầu tiên là hiệu ứng xoay ảnh. Safari và FF hỗ trợ một hiệu ứng CSS gọi là CSS transform. Ai dùng PTS thì cũng biết chức năng transform gồm xoay, lật, kéo co, giãn, kéo biến dạng, di chuyển đối tượng. CSS transform cũng tương tự. Tuy nhiên như đã nói ở trên đây không phải là một entry mang tính giáo khoa nên P sẽ hẹn lại trong một entry khác sẽ viết đầy đủ hơn về CSS transform (nói nhỏ hiện tại P cũng chưa biết hết). Còn trong khuôn khổ entry này P chỉ xin trình bày chức năng xoay và kéo giãn đối tượng.

CSS transform tương ứng cho Safari và FF là -webkit-transform và -moz-transform. Và hai chức năng xoay và kéo giãn ảnh là rotate và scale.

.photo {
-webkit-transform: rotate(xdeg) scale(y);
-moz-transform: rotate(xdeg) scale(y);
transform: rotate(xdeg) scale(y)
}

Đoạn CSS trên sẽ xoay đối tượng .photo một góc x và kéo giãn đối tượng .photo y lần. CSS transform hỗ trợ xoay đối tượng bằng các đơn vị độ và radian. Theo đó góc giá trị dương sẽ xoay đối tượng theo chiều kim đồng hồ và ngược lại.

Chức năng kéo giãn tương đối phức tạp hơn. CSS transform hỗ trợ kéo giãn theo hệ thập phân. Scale(1) là kích thước gốc, scale(2) giãn đối tượng gấp đôi, scale(0.5) co đối tượng bằng 1/2 kích thước gốc. Ngoài khả năng giãn giữ nguyên tỉ lệ thì bạn có thể chỉ định 2 giá trị cho chức năng scale ví dụ như scale(1,2) sẽ giữ nguyên chiều dài và giãn chiều cao đối tượng gấp đôi. Đặc biệt scale(-1,1) sẽ lật đối tượng theo chiều ngang (flip horizontal) và ngược lại scale(1,-2) sẽ lật đối tượng theo chiều dọc đồng thời giãn chiều cao gấp đôi (flip vertical).



Tiếp theo sẽ là hiệu ứng tạo bóng mờ cho đối tượng. Đây chính là một chức năng mới trong CSS3. Mà hình như cái gì hay cái gì mới đều thuộc về Safari và FF. Thử một tí nhé

.photo {
-webkit-box-shadow: a b c d;
-moz-box-shadow: a b c d;
box-shadow: a b c d
}

Đoạn CSS trên sẽ tạo bóng cho đối tượng .photo với các thông số a là độ đổ bóng theo trục ngang nếu a có giá trị dương bóng sẽ đổ về bên phải ngược lại bóng sẽ đổ về bên trái. B là thông số đổ bóng theo trục dọc, b dương bóng sẽ đổ xuống và ngược lại. Thông số c chính là độ mờ (blur) của bóng đổ giúp cho bóng trong thực hơn. Cả 3 thông số a, b, c đều sử dụng các đơn vị đo kích thước như mm, cm, px,... Riêng thông số thứ 4 d chúng là thông số về màu sắc của bóng. Chúng ta có thể sử dụng mọi hệ thống màu sắc mà CSS hỗ trợ. Tuy nhiên để bóng trong thực hơn chúng ta có thể sử dụng các hệ màu mới của CSS như RGBA hay HSLA (các hệ màu này có thêm thông số A tức là alpha chỉ độ mờ đục). Trong bài này P sẽ sử dụng hệ màu RGBA chính là rgba(r,g,b,o). Trong đó r là đỏ, g là xanh lá, b là xanh dương còn o là độ mờ đục. 3 thông số rgb có giá trị từ 0 - 255 còn o có giá trị từ 0 - 1.

Tới đây có lẽ đã tạm ổn rồi nhưng mà các bạn có để ý là hiệu ứng xảy ra quá đột ngột và thiếu điểm nhấn không? Có vẻ như Apple rất tinh tế trong những trường hợp như thế này và CSS transition đã được tạo ra để tạo điểm nhấn giữa những lần chuyển tiếp hiệu ứng.

.photo {
-webkit-transition: a b c
}

Đoạn CSS có nghĩa là khi có sự chuyển tiếp trạng thái đối tượng .photo liên quan đến thông số a thì nó sẽ áp dụng hiệu ứng chuyển tiếp c trong một khoảng thời gian là b. a là tên thông số sẽ thay đổi khi hiệu ứng xảy ra như opacity, width, height, background,... b là thời gian hiệu ứng chuyển tiếp tính bằng s và c chính là hiệu ứng chuyển tiếp. Các giá trị c có thể là ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2).

Ví dụ nhá

.photo:hover {
opacity:0.5
}

Khi bạn mouse over đối tượng .photo độ mờ đục của .photo sẽ hạ xuống ngay lập tức. Nhưng bạn thử thêm CSS transition vào xem sao

.photo {
-webkit-transition: opacity 1s ease-in
}

Có phải là hiệu ứng giảm độ mờ đục trong mượt hơn không? CSS transition là một CSS thuộc dạng khứ - hồi có nghĩa là khi bạn mouse out hiệu ứng ngược lại sẽ xảy ra.

Haizzz đến đây thì coi như chúng ta đã có đầy đủ phương tiện để tự thực hiện một photo album rồi nhá. Thực ra với những CSS đặc biệt này chúng ta còn có thể làm nhiều hơn thế nữa như 3D chẳng hạn. Nói tới đây mà bạn đã cảm thấy rạo rực lắm rồi. Chắc MYO sắp bị bão rồi :>D Ứng dụng nhá, P đã nhanh tay magic cái photo album blog rồi. Trong cũng hem tệ nhưng mà blog thập cẩm quá.


=====================================================

Tình hình là mấy hôm trước lục lội mailbox kiếm cái invite Google Wave thấy một cái mail của độc giả Simple CSS. Đọc thấy vui vui. Nhưng mà mỗi lần đọc được mail về Simple CSS thì bên cạnh vui, P cũng cảm thấy mình có lỗi sao đó.... Bắt đầu lục lội 1 hồi mới biết các trình CSS của mình h lùn quá xá. Lật đật học lỏm vài chiêu. Hi vọng là bài viết này có ích . Thanks Natalie Downe cho bài viết!

Các Bài Viết Liên Quan

• Nhận Diện Ngôn Ngữ Bằng CSS


• Hiển Thị Ảnh Trong Suốt Cho IE 5.5+


• Hiển Thị Ảnh Trong Suốt Cho IE 5.5+ Tập 2


• Fix Min/Max CSS Attribute Cho IE


• What Is CSS Sprites