-----
5 Tạo hiệu ứng cho Header
5.1
Dùng phông của Google (online và offline)
Một số loại phông (font) nên dùng: Ubuntu, Open Sans, Bebas
Neue, Montserrat, Raleway, Cabin, Lato, PS Sans, Entypo Social. Lưu ý: nên chọn
những phông đã được Việt hóa, nếu không, sẽ có tình trạng những chữ có dấu bị
méo mó, xô lệch.
Phông Open Sans của Google, đã được Việt hóa, khuyến khích sử
dụng.
Có thể dùng Open Sans trực tiếp trên mạng, kèm theo một bản
dự phòng trong trường hợp không có mạng.
Dùng Open Sans trực tiếp trên mạng:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Dùng Open Sans trên máy:
(đọc thêm tại đây: https://google-webfonts-helper.herokuapp.com/fonts)
Open Sans cho tiếng Việt (làm theo 4 bước):
Ví dụ một đoạn mã dùng @font-face:
/* open-sans-300 - vietnamese_latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans
Light'), local('OpenSans-Light'),
url('../vendor/fonts/open-sans-v15-vietnamese_latin/open-sans-v15-vietnamese_latin-300.woff2')
format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../vendor/fonts/open-sans-v15-vietnamese_latin/open-sans-v15-vietnamese_latin-300.woff')
format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
5.2
Tạo hiệu ứng cho header
– Trong Sublime Text, bấm Ctrl + H để mở cửa sổ Find &
Replace (Tìm và Thay thế).
– Tạo hiệu ứng cho phần tử đi từ trên xuống:
@keyframes move_top_down {
from { transform:
translateY(-300px); opacity: 0; } /* cho phần tử đi lên trên 300px so với vị
trí gốc, và làm mờ hoàn toàn*/
to { transform:
translateY(0); opacity: 1; } /* cho phần tử trở về vị trí gốc và làm rõ lại */
}
.navbar-default .navbar-collapse {
opacity: 0;
animation:
move_top_down 1s forwards;
animation-delay: .3s;
}
– Tạo hiệu ứng cho phần tử đi từ trái qua:
@keyframes move_left_right {
from { transform:
translateX(-500px); opacity: 0; }
to { transform:
translateX(0); opacity: 1; }
}
.slide-text {
opacity: 0;
animation:
move_left_right 1s forwards;
animation-delay: .7s;
}
– Tạo hiệu ứng thu nhỏ:
@keyframes zoom_out {
from { transform:
scale(3); opacity: 0; }
to { transform:
scale(1); opacity: 1; }
}
.navbar-header {
animation: zoom_out 1s
forwards;
}
(Photoshop) để tắt và hiển thị lưới (12 cột) dùng tổ hợp
phím Ctrl + ;
(Photoshop) để bỏ các slice đã chọn, vào menu View\Clear
Slices
– Cách tạo một kẻ ngang phía trên một dòng văn bản (line
over): tạo một phần tử sau dòng văn bản bằng pseudo-element :after, thiết lập
position cha là relative, con là absolute, sau đó tùy chỉnh màu, vị trí, độ
dài, chiều cao cho phù hợp. Xem đoạn mã ví dụ,
.line-over {
color: #696868;
font-weight: 600;
text-transform:
uppercase;
font-size: 33px;
position: relative;
padding-top: 15px;
}
.line-over:after {
content: "";
width: 50px;
height: 6px;
background: #5bbfdd;
position: absolute;
top: 0px;
left: 0px;
}
[Hình minh họa]
– Định dạng cho một nút,
a.btn.btn-default.button-welcome {
border: 0;
background: #0e0e0e;
color: #5bbfdd;
padding: 18px 30px;
border-radius: 0;
border-bottom: 4px
solid #5bbfdd;
font-weight: 600;
font-size: 17px;
text-transform: uppercase;
}
a.btn.btn-default.button-welcome:hover {
color: #0e0e0e;
background: #5bbfdd;
border-color: black;
transition: 0.3s;
}
[Hình minh họa]
(bình thường)
(:hover)
– Sử dụng các hiệu ứng có sẵn của jQuery cho các nút:
+ Vào google, gõ từ
khóa animate, hoặc vào trực tiếp trang này: https://daneden.github.io/animate.css/
+ Bấm chuột vào mục Download
Animate.css, trình duyệt sẽ mở ra toàn bộ mã nguồn, bấm Ctrl+A để chọn hết mã
nguồn, lưu lại về máy với tên bất kì, ví dụ animate.css.
+ Link vào trang index.html
<link
rel="stylesheet" href="css/animate.css">
+ Vậy là có thể sử dụng
được, ví dụ,
a.btn.btn-default.button-welcome:hover {
color: #0e0e0e;
background: #5bbfdd;
border-color: black;
transition: 0.3s;
animation: bounce 1s;
}
[Hình minh họa cho phần header]
Cập nhật [22/9/2018]
-----------
Xem thêm: Làm web (03) - Photoshop và Bootstrap (03)