style css3

1. Tìm hiểu các thuộc tính mới trong CSS 3
I/Các Thuộc tính mới trong CSS3
1/Bộ chọn lọc:
Có chức năng hiển thị chia theo dòng chẳn dòng lẻ.
Code:
.row:nth-child(even)
{ background: #dde;}
.row:nth-child(odd)
{ background: white;}
2/Hỗ trợ font:
Một trong những thao tác phổ biến nhất với CSS là định dạng font chữ. CSS cung cấp thuộc tính font-
family để xác định kiểu font hiển thị:
font-family: Times New Roman
Thật không may là việc lựa chọn font chữ gặp rất nhiều hạn chế do bị phụ thuộc vào số font được cài
đặt trên máy người dùng. Điều này có nghĩa là chúng ta phải hạn chế sử dụng các loại font “hiếm” vì
nhiều khả năng chúng sẽ không hiển thị đúng trên các máy tính không có font đó. Tuy nhiên, ngay cả
các font phổ biến đôi khi cũng gặp rắc rối, vì chúng có những tên khác nhau trên khác hệ điều hành khác
nhau. Chẳng hạn như font Arial còn được gọi là Helvetica hay Sans Serif. Kết quả là chúng ta thường
thấy các khai báo kiểu như sau:
font-family: Arial, Helvetica, sans serif
Cách viết này sẽ đảm bảo rằng font được hiển thị đúng: hệ thống chỉ việc lựa chọn loại font phù hợp
nhất. Nhưng còn có một cách giải quyết tốt hơn: nhúng trực tiếp kiểu font vào file CSS. Với CSS3, việc
này trở nên rất đơn giản, đoạn code sau minh họa cách nhúng một font TrueType vào CSS:
@font-face{
font-family: ‘<tên font>’;
src: url(‘<đường dẫn tới file font>’) format(‘truetype’);
}
3. Hiệu ứng cho văn bản-hình ảnh:
a/ Viền chữ:
Thuộc tính này giúp bạn tao đường viền bên ngoài chữ :
Code:
div{
-webkit-text-fill-color:black;
-webkit-text-stroke-color:red;
-webkit-text-stroke-width: 3px;
}

2. b/Độ trong suốt của nền và chữ :
Code:
color: rgba(255,0,0,0.5);
blackground:rgba(0,0,255,0.5);
c/ Đường viền có góc tròn (Rounded Borders)
Khó vận dụng CSS để làm được rounded border – Đã có nhiều cách nhưng nó chưa phải là tốt nhất. Rất
dễ khi làm việc này với CSS3. Nó có thể được áp dụng cho từng góc, và dễ dàng thay đổi thông số về
chiều rộng và màu sắc.
Ví dụ:
.roundedCorner {
-webkit-border-radius: 10px;
border: 4px solid #FF0000;
}
Khai báo này sẽ tạo một đường viền với bốn góc được bo tròn. Tuy nhiên, có những trường hợp mà ta
chỉ muốn áp dụng hiệu ứng này cho một góc cụ thể nào đó, may mắn là CSS3 cũng cho ta khả năng này
với các thuộc tính:
-webkit-border-radius-topleft
-webkit-border-radius-topright
-webkit-border-radius-bottomleft
-webkit-border-radius-bottomright

3. Trên mạng các bạn thấy trước thuộc tính này có thêm thuộc tính khác (-moz, -webkit) là để thông báo
cho trình duyệt tương ứng với nó hiểu được. Vì các thuộc tính CSS 3 hiện nay còn rất ít trình duyệt hỗ
trợ, nên hầu hết các thuộc tính CSS 3 đểu phải thêm vào các thuộc tính trình duyệt vào trước nó.
d/Kích thước hình nền:
Ta có thể thay đổi kích thước hình nền để phù hợp với giao diện web của mình.
Ví dụ 1: Khi ta để auto
#logo{background: url(logo.gif) center center no-repeat;
Background-size:auto;
}
Ví dụ 2: khi ta chỉnh về 100% thì hình ảnh sẽ được chỉnh sửa phù hợp với khung.
#logo{background: url(logo.gif) center center no-repeat;
Background-size:100%;
}
e/Transitions
Thuộc tính này giúp ta di chuyển box về bên trái,bên phải hoặc giữa giao diện web của mình.
Code:
#box.left{margin-left:0;}
#box.right{margin-right:0;}
Document.getElementById(“box”).classname=’left’;
Document.getElementById(“box”).classname=’right’;
f/Transforms:
Tạo hiệu ứng cân băng cho 1 box.
Code:
-webkit-transform:rotateY(45deg);
-webkit-transform:scalex(25deg);
-webkit-transform:translate3d(0,0,90deg);
-webkit-transform:perspective(500px);
#threed-example {
-webkit-transform: rotateZ(5deg);
-webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
-webkit-transform: rotateZ(-5deg);
}

4. g/Animations:
Thuộc tính này giúp tạo hiệu ứng phóng to thu nhỏ chữ.
Code:
@-webkit-keyframes pulse
{
from {opacity: 0.0; font-size: 100%; }
to { opacity: 1.0; font-size: 200%; }
}
div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}
h/ Box Shadows
Thuộc tính mới "box-shadow" của CSS3 là một trong những thuộc tính khá hữu dụng và được sử dụng
nhiều trong quá trình viết CSS. Với thuộc tính này bạn có thể tạo cho các thành phần trong website của
mình hiệu ứng bóng đổ đẹp mắt. Tuy nhiên thuộc tính này không được hỗ trợ trên toàn bộ các trình
duyệt hiện tại, thuộc tính này chỉ được hỗ trợ từ Safari 3+, Firefox 3.1 (Alpha), Chrome, Opera và IE
9+.
Ví dụ:
.border_shadow{
-webkit-box-shadow:10px10px5px#888;
padding:5px5px5px15px;
width:300px;
}

5. i/ Border Images
Border images là một trong những hiệu ứng hay nhất. CSS có thể lặp hoặc kéo dãn hình ảnh bạn chọn
làm đường viền.
Ví dụ CSS:
.border_image{
-webkit-border-image:url(border.png)27272727 round round;
}
j/ Text Shadow
Bóng dành cho văn bản nghe như một hiệu ứng rườm rà, nhưng tất cả phụ thuộc vào cách chúng được
sử dụng. Đổ bóng chắc chắn có thể được đưa vào sử dụng tốt trong đầu đề và tiêu đề.
Ví dụ:
.shadowedText {
font-family: Arial, Helvetica, sans serif;
font-size: medium;
color: #FF0000;
text-shadow: 0.25em 0.25em 2px #999;
}
Thuộc tính text-shadow trong khai báo trên cho phép kiểm soát hiệu ứng đổ bóng.Ngoài ra,thuộc tính
này có bốn tham số:
horizontal-offset: tọa độ X tương đối của bóng (so với text)
vertical-offset: tọa độ Y tương đối của bóng (so với text)
blur-radius: bán kính mờ của bóng. Tắt hiệu ứng mờ bằng cách truyền giá trị 0
shadow-color: màu sắc của bóng
k/Word Wrapping
Khi trình bày, nếu một từ quá dài so với vùng trình bày, nó sẽ bị tràn ra bên ngoài. Tính năng mới sẽ
giúp bạn khắc phục được điều này.
.text_wrap {
word-wrap: break-word;

6. }
l/Chia nội dung thành nhiều cột :
Chia cột là một công việc khó khăn. Trước đây, các lập trình viên thường sử dụng bảng hoặc các tag
<div> phức tạp để đạt được mục tiêu này. Nhưng nay thì CSS3 cũng đã hỗ trợ sẵn. Sau đây là cách chia
nội dung thành hai cột trong CSS3:
.columns {
font-family: Arial, Helvetica, sans serif;
font-size: 10px;
color: #444;
text-align: justify;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
}
Một lưu ý nhỏ là hai thuộc tính column-count và column-gap có thêm tiền tố -webkit-. Các thuộc tính
thử nghiệm của CSS3 được đặt tên theo kiểu này nhằm tránh xung đột trong trường hợp đặc tả thay đổi.
Do đó hiện nay, cần sử dụng các tiền tố -moz- (cho Mozilla), -0- (cho Opera) và -webkit- (cho Safari và
Chrome).
m/Xoay hình ảnh:
Để xoay một đối tượng nào đó chúng ta sẽ dùng 2 thuộc tính -moz-transform: rotate(góc xoay); và -
webkit-transform: rotate(góc xoay);. Ban đầu chúng ta có một đối tượng ảnh như sau:
Sau khi thêm style vào cho đối tượng:
<img src="http://www.cssyeah.com/images/stories/contents/rotate.jpg" alt="Rotate"

7. style="-moz-transform: rotate(7deg); -webkit-transform: rotate(7deg);" />
n/Co Giãn hình ảnh:
Để co giãn đối tượng CSS3 có hỗ trợ 2 thuộc tính để thao tác trên đối tượng -moz-transform: scale(xx
%); -webkit-transform: scale(xx%). Thuộc tính này sẽ có hoặc giãn đỗi tượng tùy theo tỉ lệ %.
Ví dụ: +Khi chưa co giãn:
+Phóng to 1.5 lần:
<img src="http://www.cssyeah.com/images/stories/contents/rotate.jpg" alt="Rotate"
style="-moz-transform: scale(1.5); -webkit-transform: scale(1.5);" />

8. o/Bóp méo hình ảnh:
VÍ DỤ 1: Bóp méo đối tượng với hệ số góc âm.
1.<img src="http://www.cssyeah.com/images/stories/contents/rotate.jpg" alt="Rotate"
style="-moz-transform: skew(-45deg); -webkit-transform: skew(-45deg);" />
VÍ DỤ 2: Bóp méo đối tượng với hệ số góc dương.
<img src="http://www.cssyeah.com/images/stories/contents/rotate.jpg" alt="Rotate"
style="-moz-transform: skew(45deg); -webkit-transform: skew(45deg);" />

9. 5. Tạo hiệu ứng chuyển động:
Đây có lẽ là một trong những bổ sung hấp dẫn nhất của CSS3, cho phép áp dụng các hiệu ứng
chuyển động để làm tăng tính bắt mắt cho trang web. Sau đây là một ví dụ căn bản về tạo chuyển động:
@-webkit-keyframes topdown {
from {
top: 0px;
}
to {
top: 300px;
}
}
.animation {
-webkit-animation-name: topdown;
-webkit-animation-direction: alternate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 5;
position: relative;
left: 0px;
}
Có thể thấy rằng đoạn CSS trên chia làm hai phần: phần đầu định nghĩa hiệu ứng chuyển động theo nhu
cầu sử dụng (ví dụ trên định nghĩa một chuyển động theo phương thẳng đứng đi từ tọa độ 0 tới tọa độ
300px). Phần tiếp theo gán chuyển động này cho class .animation, trong đó có các thuộc tính quan trọng
như: thời lượng (duration), số lần thực hiện chuyển động (count), chiều của chuyển động (direction – ví
dụ trên sử dụng giá trị alternate để chuyển động tự động đổi chiều sau mỗi lần thực hiện)
Trên đây chỉ là vài nét mới nổi bật của CSS3, nhưng bấy nhiêu cũng đủ để chứng minh rằng đây là một
công nghệ đầy tiềm năng. Không chỉ góp phần hoàn thiện HTML5, CSS3 còn đơn giản hóa đáng kể
công việc của các nhà phát triển web. Đây thực sự là sự kế thừa xứng đáng của CSS. Và với sự hỗ trợ
ngày càng mạnh của các trình duyệt, có thể tin rằng CSS3 sẽ nhanh chóng trở nên phổ biến vào một
ngày không xa.
http://www.w3schools.com/cssref/default.asp
http://www.w3schools.com/css3/default.asp