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

CSS3 GVHD: Phạm Công Thành... CÁC MODULE CỦA CSS3 CSS3 Transitions  CSS3 Multiple Columns  CSS3 User Interface  CSS3 Text Effects... Tạo ra 4 góc bo tròn cho đường viền Dùng để định

CSS3

GVHD: Phạm Công Thành

Outline

Tổng quan về CSS

1

CÁC MODULE CỦA CSS3

 CSS3 Transitions

 CSS3 Multiple Columns

 CSS3 User Interface

 CSS3 Text Effects

Tạo ra 4 góc bo tròn cho đường viền

Dùng để định dạng các dạng border

bằng hình ảnh.

Có 3 loại chính:

Tạo bóng đổ (bóng nền) cho đường viền.

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

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ị;

}

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

 Đượ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*/

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);

}

Thank You!