Bài giảng Thiết kế Web - Chương 5: Tùy biến giao diện với CSS3

12/11/2019 
Chương 5 
THIẾT KẾ WEB 
12/11/2019 
Lý thuyết 
• Liệt kê được một số hiệu ứng mới chỉ có từ phiên bản 
CSS3 
• Phân biệt được các thuộc tính và phương thức mới 
trong CSS3: border-shadow, border-image, border-
radius, text-shadow, box-shadow, transition-property, 
transition-duration, transition-timing-function, 
transition-delay, radial-gradient, linear-gradient, 
box-sizing,rotateX(), scaleY(y),translateZ(z)  
• Nhận diện và giải thích được cú pháp sử dụng của các 
thuộc tính, phương thức cơ bản trong CSS3 
12/11/2019 
Thực hành 
• Sử dụng được các thuộc tính, phương thức 
mới trong CSS3 để tạo ra các hiệu ứng cơ 
bản và ứng dụng thực tế nhằm tạo ra những 
hiệu ứng làm nổi bật trang web cụ thể. 
12/11/2019 
1. Giới thiệu về CSS3 
2. Một số thuộc tính mới trong CSS3 
12/11/2019 
1. Giới thiệu về CSS3 
• Là tiêu chuẩn mới nhất của CSS 
• Hoàn toàn phù hợp với các phiên bản trước đây của 
CSS 
• Hỗ trợ hiệu quả những tag mới của HTML5 
• Tạo ra nhiều hiệu ứng khác nhau trong thiết kế 
web: Bo tròn góc cạnh, tạo bóng đổ, tô màu chuyển 
sắc, hiệu ứng ảnh động, làm biến dạng chữ, hình 
ảnh, chia cột, thay đổi màu sắc, kích cỡ. Vd: 
https://www.sanwebe.com/2014/02/css3-buttons-examples-with-effects-
animations 
menu/demo.html# 
12/11/2019 
2. Một số thuộc tính mới trong CSS3 
12/11/2019 
1. Rounded Corners 
12/11/2019 
1. Rounded Corners 
Cú pháp: 
border-radius: 
Ví dụ: 
border-radius: 5px 10px 10px 10px ; 
border-radius: 5px 10px ; 
border radius: 10px; 
12/11/2019 
1. Rounded Corners 
Cú pháp: 
Ví dụ: 
border-top-left-radius: 5px 10px; 
border-top-left-radius: 5px 5%; 
12/11/2019 
2. Gradients 
 Linear Gradients Radial Gradients 
Cú pháp: 
Tô theo hướng: background: linear-gradient(Hướng, màu 1, màu 2, ...); 
Tô theo góc : background: linear-gradient(Góc, màu 1, màu 2); 
Tô nhiều màu: background: linear-gradient(Màu 1, màu 2, màu 3,); 
Tô đồng tâm: background: radial-gradient(dạng hình, , màu 1, màu 2,); 
Tô lặp lại: background: repeating-radial-gradient(dạng hình, màu 1, màu 
2,); 
12/11/2019 
2. Gradients 
 Linear Gradients Radial Gradients 
Ví dụ: 
Tô theo hướng: background: linear-gradient(Hướng, màu 1, màu 2, ...); 
 => Mặc định là tô từ trên xuống dưới 
#tohuongchinh { 
 background: -webkit-linear-gradient(left, red , yellow); 
 background: linear-gradient(to right, red , yellow); 
} 
#tohuonggoc{ 
 background: -webkit-linear-gradient(left top, red, yellow); 
 background: linear-gradient(to bottom right, red, yellow); 
} 
12/11/2019 
2. Gradients 
 Linear Gradients Radial Gradients 
Ví dụ: 
Tô theo góc : background: linear-gradient(Góc, màu 1, màu 2); 
#totheogoc { 
 background: -webkit-linear-gradient(45deg, red, yellow); 
 background: linear-gradient(45deg, red, yellow); } 
12/11/2019 
2. Gradients 
 1 2 3 
 Linear Gradients Radial Gradients 
Ví dụ: 
Tô đồng tâm: background: radial-gradient(dạng hình, , màu 1, màu 
2,); 
; 
 => Mặc định là tô theo dạng hình elip 
#todongtam{ 
 background: -webkit-radial-gradient(circle, red, yellow, green); 
 background: radial-gradient(circle, red, yellow, green); } 
 Ảnh nào minh họa? 
? 
12/11/2019 
3. Shadow Effects 
12/11/2019 
3. Shadow Effects 
3.1. Cú pháp tạo bóng cho chữ: 
text-shadow: x y b color 
• x = đặt chiều ngang của bóng đổ 
 x < 0: bóng đổ bên trái chữ 
 x > 0: bóng đổ bên phải chữ 
• y = đặt chiều dọc của bóng đổ 
 y < 0: bóng đổ bên trên chữ 
 y > 0: bóng đổ bên dưới chữ 
• b = tỉ lệ mờ của bóng 
Ví dụ 1: 
 h1 { 
 color: white; 
 text-shadow: 2px 2px 4px #000000; 
} 
 Bóng đổ hướng nào? 
? 
12/11/2019 
3. Shadow Effects 
3.1. Cú pháp tạo bóng cho chữ: 
text-shadow: x y b color 
• x = đặt chiều ngang của bóng đổ 
 x < 0: bóng đổ bên trái chữ 
 x > 0: bóng đổ bên phải chữ 
• y = đặt chiều dọc của bóng đổ 
 y < 0: bóng đổ bên trên chữ 
 y > 0: bóng đổ bên dưới chữ 
• b = tỉ lệ mờ của bóng 
Ví dụ 2: 
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 
5px darkblue; 
12/11/2019 
3. Shadow Effects 
3.2. Cú pháp tạo bóng cho khung hộp: 
box-shadow: x y b color 
• x = đặt chiều ngang của bóng đổ 
 x < 0: bóng đổ bên trái khung 
 x > 0: bóng đổ bên phải khung 
• y = đặt chiều dọc của bóng đổ 
 y < 0: bóng đổ bên trên khung 
 y > 0: bóng đổ bên dưới khung 
• b = tỉ lệ mờ của bóng 
Ví dụ : 
 div { 
 width: 300px; 
 height: 100px; 
 padding: 15px; 
 background-color: yellow; 
 box-shadow: 10px 10px 5px grey; 
} 
 Bóng đổ hướng nào? 
? 
12/11/2019 
BÀI TẬP 
Định dạng nào có thể tạo bóng cho khung như 
mẫu? 
? 
12/11/2019 
BÀI TẬP 
Định dạng nào có thể cho bóng hồng cho chữ 
như mẫu? 
? 
12/11/2019 
BÀI TẬP 
Định dạng nào có thể tạo bo tròn nút như 
mẫu? 
? 
12/11/2019 
BÀI TẬP 
Chọn cặp định dạng - kết quả phù hợp? 
1 2 3 
 1 2 3 4 
? 
12/11/2019