5. Tạo multiplecolumns với CSS
6.2 Sử dụng nhiều hình nền (Multiple Backgrounds)
Tính năng mới cho phép sử dụng nhiều hình nền khác nhau, điều này sẽ giúp bạn tiết kiệm rất nhiều thời gian. Nó cho phép bạn tạo nhiều hơn một hiệu ứng. Nó có thể kết hợp với background-size để tạo nên những hiệu ứng đặc biệt.
1 2 3 4 5 6 7 8 .multiplebackgrounds { height: 150px; width: 270px; padding: 40px 20px 20px 20px;
background: url(top.gif) top left no-repeat, url(bottom.gif) bottom left no-repeat, url(middle.gif) left repeat-y;
}
Với CSS3, thiết kế web có thể sử dụng phông chữ bất cứ điều gì anh / chị thích.
Khi bạn đã tìm thấy / mua các phông chữ mà bạn muốn sử dụng, bao gồm các tập tin font chữ trên máy chủ web của bạn, và nó sẽ được tự động tải về cho người sử dụng khi cần thiết. Phông chữ "riêng" của bạn được định nghĩa trong các quy tắc CSS3 font-face.
Sử dụng font bạn muốn
Trong các quy tắc mới font-face trước tiên bạn phải xác định một tên cho phông chữ (ví dụ myFirstFont), và sau đó trỏ đến file font.
Để sử dụng phông chữ cho một phần tử HTML, tham khảo tên của phông chữ (myFirstFont) thông qua thuộc tính font-family:
Ví dụ: <style type="text/css"> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; } </style> CSS3 Font Descriptors Bảng sau mô tả Bộ phông chữ Giá trị Mô tả font- family tên
Yêu cầu. Định nghĩa một tên cho phông chữ
url URL Yêu cầu. Xác định URL tập tin font chữ font- stretch Normal condensed ultra-condensed extra-condensed
Tùy chọn. Xác định phông chữ nên được kéo dài. Mặc định là
semi-condensed expanded semi-expanded extra-expanded ultra-expanded font-style normal italic oblique
Tùy chọn. Xác định phông chữ nên được theo kiểu. Mặc định là
"normal" font- weight normal bold 100 200 300 400 500 600 700 800 900
Tùy chọn. Xác định sự táo bạo của phông chữ. Mặc định là "normal" unicode- range unicode-range Tùy chọn. Xác định phạm vi của các ký tự UNICODE font chữ hỗ trợ. Mặc định là "U 0-10 FFFF"
CSS3 2D transform: Với CSS3 transform, chúng ta có
thể di chuyển, quy mô, rẽ, quay, và các yếu tố căng.
Trong chương này bạn sẽ tìm hiểu về các phương pháp transform 2d: translate() rotate() scale() skew() matrix() div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */ }
The translate() method: di chuyển phần tử từ vị trí hiện
tại của nó, tùy thuộc vào các thông số được đưa ra cho phía bên trái (X-axis) và vị trí hàng đầu (Y-axis):
div {
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */ }
có giá trị biên dịch (50px, 100px) di chuyển các phần tử 50 pixel từ bên trái, và 100pixels từ trên.
The rotate() method: yếu
tố quay theo chiều kim đồng hồ tại một mức độ nhất định.Giá trị âm được cho phép
và quay các yếu tố ngược chiều kim đồng hồ. div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */ }
Xoay giá trị (30deg) quay các yếu tố theo chiều kim đồng hồ 30 độ. The scale() method: yếu tố tăng hoặc giảm kích thước, tùy
thuộc vào các thông số được đưa ra cho chiều rộng (X- axis) và chiều cao (trục Y):
div {
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */ -o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */ }
Quy mô giá trị (2,4) biến đổi chiều rộng là hai lần kích thước ban đầu của nó, và chiều cao là 4 lần kích thước ban đầu của nó.
The skew() method: yếu tố biến trong một góc
độ nhất định, tùy thuộc vào các thông
số được đưa ra cho cácngang (X-axis) và đường dọc (Y- axis):
div {
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */ }
Giá trị nghiêng (30deg, 20deg) biến các yếu tố 30 độ xung quanh trục X, và 20 độ xung quanh trục Y.
Matrix() method: kết hợp tất cả các
phươngpháp transform 2D thành một. The matrix method có sáu tham
số, có chứa các chức năng toán học, cho phép bạnxoay, quy mô, di chuyển (biên dịch), và các yếu tố nghiêng.
div {
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ }
8. Các tính năng mới khác
CSS3 cũng bao gồm nhiều tính năng mới khác, gồm sự hỗ trợ cho các giá trị màu mới, đặc biệt là HSL (Hue, Saturation, Lightness) và hai giá trị màu có các đặc tính alpha — RGBA (Red, Green, Blue, Alpha) và HSLA (Hue, Saturation, Lightness, Alpha). Các truy vấn phương tiện sẽ cho phép bạn định nghĩa kiểu dáng khác nhau cho các
thiết bị khác nhau dựa vào kích thước khung nhìn của chúng. Ví dụ, bạn có thể cung cấp kiểu dáng cụ thể cho các thiết bị có khung nhìn thấp hơn 500 điểm ảnh (chẳng hạn như điện thoại thông minh, PDA hoặc các thiết bị di động khác). Mô đun tiếng nói của CSS3 cho phép bạn điều khiển các đặc tính tiếng nói cho một trình đọc màn hình, bao gồm cả âm lượng, sự cân bằng, tốc độ, nén, và nhiều hơn nữa.