Làm web (02) - Photoshop và Bootstrap (02)

Tiếp theo của: Làm web (01) - Photoshop và Bootstrap (01)
-----

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:


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: Tổng hợp các bài viết về Làm web
Xem thêm: Làm web (03) - Photoshop và Bootstrap (03)