bài tập tiểu luận CSS3 (Cascading Style Sheet)

L/O/G/O
CSS3
CSS3
GVHD: Phạm Công Thành
Outline
Outline
Tổng quan về CSS
Tổng quan về CSS
CSS3
CSS3
1
CÁC MODULE CỦA CSS3
CÁC MODULE CỦA CSS3

CSS3 Borders

CSS3 Background

CSS3 2D Transforms

CSS3 3D Transforms

CSS3 Transitions

CSS3 Animations

CSS3 Multiple Columns

CSS3 User Interface

CSS3 Gradient


CSS3 Text Effects

CSS3 Fonts
Borders:
Borders:
Tạo ra 4 góc bo tròn
cho đường viền
Border Radius
Border-image
Dùng để định dạng các dạng border
bằng hình ảnh.
Có 3 loại chính:
Có 3 loại chính:
Tạo bóng đổ (bóng nền)
cho đường viền.
Box Shadow
Box Shadow
tag {
border: bề-dày kiểu mã-màu;
border-radius: giá trị;
}
div{ border:2px solid #999;
border-radius:30px; background:#CCC;
width:300px; padding:10px;
text-align:center;
}
tag {
border-image: giá trị;
}

div { border:15px;
width:170px;
padding:10px;
border-image:url("blueborder.gif") 30 30 round; }
Tag {
box-shadow: x y;
}
div{
background:#0000FF;
height: 100px;
width: 150px;
box-shadow: 10px 10px #999999;
}
Tex div
{ width:200px;
height:100px;
background-color:yellow;
transform:rotate(30deg);
}
t in here
Cho phép xoay, kéo dãn, kéo nghiêng thành phần trên trang
Text in here
Transform
Animations
Animations
Thuộc tính animation: xác định một chuyển động của một tag hay một hình ảnh, là sự
tổng hợp của các thuộc tính:
•
animation-name
•

animation-duration
•
animation-timing-function
•
animation-delay
•
animation-iteration-count
•
animation-direction
tag {
animation: giá trị;
}
Animations
Animations
Ví dụ:
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
Chuyển từ đỏ sang vàng trong vòng 5s
Multiple Columns
Multiple Columns


Được sử dụng để chia đoạn văn bản thành nhiều cột
div
{
column-count:3;
} /* chia thành 3 cột */
div
{
column-gap:40px;
}/* chia thành các cột có chiều rộng 40px*/
Gradient
Gradient
Text in
here
Text in
here
Text in
here

Tạo hiệu ứng trộn màu
Div
{
height:200px;
width:400px;
background: linear-gradient(blue, red);
}
L/O/G/O
Thank You!
Thank You!