Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Hướng dẫn tạo Gradient Patterns bằng CSS
Hướng dẫn tạo Gradient Patterns bằng CSS
Nguyễn Trung Hiếu
Share Code Web Company 2012

Hướng dẫn tạo Gradient Patterns bằng CSS

Gradient Patterns là hiệu ứng có trong Photoshop, giúp chúng ta tạo ra những kiều nền độc đáo. Trước khi ra đời CSS3 thì việc dùng các kiểu nền này bắt buộc các bạn phải vào trong Photoshop, tạo ra một file ảnh, sau đó chọn Gradient Patterns mong muốn rồi thực hiện cắt lấy ảnh, rồi dùng css nhúng vào website ở dạng background của thẻ div nào đó. Nhưng giờ công nghệ CSS3 đã ra đời, thì việc đó đã đơn giản hơn rất nhiều. Và bài viết sau sẽ hướng dẫn các bạn thao tác với Gradient Patterns để tạo ra được 2 kiểu background rất đẹp.

Nói về Gradient Patterns bằng CSS3 thì có rất nhiều trang web cung cấp cho bạn công cụ tạo ra ngay lập tức, hoặc có thể chọn theo ý thích rồi họ tự sinh mã cho bạn, bạn chỉ việc copy và paste vào file css của bạn thôi. Nhưng thường như thế thì sẽ không thể thỏa mãn theo ý thích của mình được. Ở đây tôi giới thiệu tới 2 kiểu Gradient Pattern là dạng Doted và dạng Stripped.
css3 gradient patterns
OKie, trước tiên chúng ta tạo 2 thẻ div có class tương ứng như sau

Với 2 thẻ div trên, thì trước khi thực hiện CSS thì nó vẫn chưa có gì cả, đầu tiên ta thực hiện css cho phần chữ trước nhé. Demo tí ấy mà ^^

Ở đây ta nhúng thư viện Google font vào, và chọn font là Oswald để tạo kiểu cho chữ của chúng ta.
Tiếp theo ta dùng repeating-linear-gradient để thực hiện việc cho phép Gradient của chúng ta lặp đi lặp lại. Trước khi đi vào viết style cho các class này, chúng ta cùng đi qua một ví dụ cụ thể để hiểu rõ hơn về repeating-linear-gradient nhé.
example about gradient pattern

  • 1. Bắt đầu bằng màu đỏ
  • 2. Color-stop. Màu green ở vị trí tính theo % trong hệ tọa độ gradient
  • 3. Color-stop. Màu blue ở vị trí tính theo % trong hệ tọa độ gradient. Cái hệ tọa độ này tương ứng với cái thanh chọn gradient trong photoshop. Nó có giá trị 100%, tùy mình chọn

OKie, ứng dụng vào bài này chúng ta thực hiện như sau.

Các bạn chú ý ở đây chúng ta phải tạo ra 4 thuộc tính background-image để giúp cho css của chúng ta có thể phù hợp được với tất cả các loại trình duyệt. Nhìn thì rối mắt đấy nhưng các bạn chỉ cần chú ý cho mình như sau
gradient patterns support browser
Đối với mỗi màu sẽ hỗ trợ một loại trình duyệt khác nhau, cho nên để tất cả các trình duyệt đều hoạt động thì bạn phải thực hiện việc style cho các loại trình duyệt này.

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.777 hits
%d bloggers like this: