Background 2 màu CSS

Đây là bài viết tổng hợp các mẫu Gradient background CSS template mình đã sưu tầm cũng như tự nghịch nên :v để dành cho trang điểm webisite. Anh em tham khảo và dùng thử xem sao nhé !

Bây giờ chúng ta có một mẫu mặc định như sau, và những mẫu sau sẽ sử dụng khung sườn của nó.

Gradient background CSS

Code để anh em tham khảo:

NỘI DUNG VĂN BẢN

Mục lục bài viết

#01 Gradient background 2 màu đơn giản xanh chuối

Giá trị background của nó như bên dưới:

.ten-class {
background: linear-gradient(40deg,#009688,#4CAF50);
}

Demo:

NỘI DUNG VĂN BẢN

#02 Gradient background 2 màu đơn giản tía tía một chút

Giá trị background của nó như bên dưới:

.ten-class {
background: linear-gradient(40deg,#77008cb8,#041158d1);
}

Demo:

NỘI DUNG VĂN BẢN

#03 Gradient background 2 màu vàng chóe kiểu Google

Giá trị background của nó như bên dưới:

.ten-class {
background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
height: 100px;
}

Demo:

NỘI DUNG VĂN BẢN

#04 Gradient background hướng tâm

Demo:

NỘI DUNG VĂN BẢN

Giá trị background của nó như bên dưới:

.ten-class {

background: linear-gradient(164deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%,rgba(222, 222, 222, 0.08) 50%, rgba(222, 222, 222, 0.08) 100%),linear-gradient(73deg, rgba(182, 182, 182, 0.02) 0%, rgba(182, 182, 182, 0.02) 50%,rgba(216, 216, 216, 0.02) 50%, rgba(216, 216, 216, 0.02) 100%),linear-gradient(215deg, rgba(27, 27, 27, 0.09) 0%, rgba(27, 27, 27, 0.09) 50%,rgba(243, 243, 243, 0.09) 50%, rgba(243, 243, 243, 0.09) 100%),linear-gradient(236deg, rgba(242, 242, 242, 0.05) 0%, rgba(242, 242, 242, 0.05) 50%,rgba(16, 16, 16, 0.05) 50%, rgba(16, 16, 16, 0.05) 100%),linear-gradient(256deg, rgba(170, 170, 170, 0.07) 0%, rgba(170, 170, 170, 0.07) 50%,rgba(209, 209, 209, 0.07) 50%, rgba(209, 209, 209, 0.07) 100%),linear-gradient(126deg, rgba(204, 204, 204, 0.1) 0%, rgba(204, 204, 204, 0.1) 50%,rgba(26, 26, 26, 0.1) 50%, rgba(26, 26, 26, 0.1) 100%),linear-gradient(61deg, rgba(250, 250, 250, 0.01) 0%, rgba(250, 250, 250, 0.01) 50%,rgba(13, 13, 13, 0.01) 50%, rgba(13, 13, 13, 0.01) 100%),linear-gradient(56deg, rgba(210, 210, 210, 0.05) 0%, rgba(210, 210, 210, 0.05) 50%,rgba(79, 79, 79, 0.05) 50%, rgba(79, 79, 79, 0.05) 100%),linear-gradient(226deg, rgba(62, 62, 62, 0.08) 0%, rgba(62, 62, 62, 0.08) 50%,rgba(73, 73, 73, 0.08) 50%, rgba(73, 73, 73, 0.08) 100%),linear-gradient(90deg, rgb(236, 2, 158),rgb(161, 2, 79));

 height: 100px; }

Hôm sau lại sưu tầm tiếp nhé, các bác có thể chia sẻ với Hocban.vn mẫu Gradient background nào hay hay, đẹp đẹp bên dưới comment với ạ !

Hôm nay mình xin hướng dẫn CSS cho một text có màu chữ gradient hoặc màu chữ có nền là một tấm ảnh. Dưới đây là CSS text 2 màu chữ:

Hướng dẫn CSS text 2 màu chữ

Đoạn code mẫu

[css]background-image: -webkit-linear-gradient(#de0e18, #a60108);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;[/css]

 Trên là đoạn code dùng để cho text có hai màu chữ là #de0e18 và #a60108 Để cho text có màu chữ là ảnh thì chỉ cần thay đổi background-image:url(ten-duong-dan-anh); trong đó ten-duong-dan-anh là tên đường dẫn của bức ảnh đó trong css. Kết quả: 
 

Link tham khảo:

http://garage68cantho.com/

Trên là hướng dẫn CSS text 2 màu chữ

Xem thêm:

Một công ty đòi hỏi tính chuyên nghiệp, dịch vụ tốt, có lòng tin với khách hàng vậy cần phải làm gì?

Phải khẳng định được vị trí của công ty trên thị trường hiện nay trong thời đại công nghệ.

Xây dưng riêng cho công ty một website vì đây là nơi thể hiện hồ sơ năng lực, tính chuyên nghiêp, và cung cấp các dịch vụ hỗ trợ khách hàng một cách nhanh chóng và hiệu quả.

Vậy thì làm sao để biết đâu là nơi uy tính để xây dựng website?

Hiện nay có rất nhiều công ty thiết kế website , mỗi công ty sẽ có các mức giá dịch vụ khác nhau vì thế rất khó để lụa chọn

Nhưng đừng vì giá cả mà đánh mất nơi làm uy tín. Đôi khi giá trị đi đôi với chất lượng. Cũng đừng so sánh tại sao công ty kìa làm như vậy mà giá lại khác công ty này.

Vậy thì tại sao hàng hóa cũng y chang mà lại có giá này giá khác. Website cũng vậy các công ty muốn đưa ra giá cũng phải cân nhắc nhìu thứ để đưa ra mức giá tốt nhất cho khách hàng. Để biết có tốt hay không hãy tìm hiểu quan trọng là sự tin tưởng lẫn nhau.Hiệu quả đem lại như thế nào khi sử dụng

Công ty em luôn lấy chất lượng tạo niềm tin cho khách hàng. Nếu quý anh chị và các quý công ty tin tưởng thì rất mong được sự hợp tác từ quý anh chị và công ty