Một số màu Gradient đang "hot" hiện nay

Are you sure?

You want to turn off ads.

Trong thiết kế website thì việc chọn tone màu cho website đó cũng rất quan trọng. Và nếu như bạn chán ngắt với những tone màu đơn sắc đơn giản thì tại sao không phối màu cho nó?! Thực ra, nhiều blog đã áp dụng rồi đó nhưng có thể bạn vẫn chưa ưng ý. Chính vì thế mà hôm nay mình đem đến cho các bạn một số màu gradient đang hot hiện nay từ UVDesk, nhìn cũng đẹp lắm.

Cách dùng:
B1: Xác định phần tử (tức class hoặc id của nó) cần dùng màu. Ví dụ như body (nền toàn bộ blog), khung subscriber (đăng kí nhận bài mới), contact box (khung liên hệ tác giả), sidebar hoặc bất kì phần nào bạn muốn.
B2: Khi xác định được rồi thì thêm CSS theo cú pháp:
.tên_class hoặc #tên_id{background-image: linear-gradient( 135deg, mã_màu_1 10%, mã_màu_2 100%);}

Trong đó, mã_màu_1 là màu bên trên còn mã_màu_2 là màu bên dưới như các hình dưới nhé.

#FDEB71#F8D800
#ABDCFF#0396FF
#FEB692#EA5455
#CE9FFC#7367F0
#90F7EC#32CCBC
#FFF6B7#F6416C
#81FBB8#28C76F
#E2B0FF#9F44D3
#F97794#623AA2
#FCCF31#F55555
#F761A1#8C1BAB
#43CBFF#9708CC
#5EFCE8#736EFE
#FAD7A1#E96D71
#FFD26F#3677FF
#A0FE65#FA016D
#FFDB01#0E197D
#FEC163#DE4313
#92FFC0#002661
#EEAD92#6018DC
#F6CEEC#D939CD
#52E5E7#130CB7
#F1CA74#A64DB6
#E8D07A#5312D6
#EECE13#B210FF
#79F1A4#0E5CAD
#FDD819#E80505
#FFF3B0#CA26FF
#FFF5C3#9452A5
#F05F57#360940
#2AFADF#4C83FF
#FFF886#F072B6
#97ABFF#123597
#F5CBFF#C346C2
#FFF720#3CD500
#FF6FD8#3813C2
#EE9AE5#5961F9
#FFD3A5#FD6585
#C2FFD8#465EFB
#FD6585#0D25B9
#FD6E6A#FFC600
#65FDF0#1D6FA3
#6B73FF#000DFF
#FF7AF5#513162
#F0FF00#58CFFB
#FFE985#FA742B
#FFA6B7#1E2AD2
#FFAA85#B3315F
#72EDF2#5151E5
#FF9D6C#BB4E75
#F6D242#FF52E5
#69FF97#00E4FF
#3B2667#BC78EC
#70F570#49C628
#3C8CE7#00EAFF
#FAB2FF#1904E5
#81FFEF#F067B4
#FFA8A8#FCFF00
#FFCF71#2376DD
#FF96F9#C32BAC
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Không được backlink và nói tục. Hãy là một độc giả có ý thức.

    43 nhận xét:

    1. Vote màu hồng, vừa nam tính mà còn rất đẹp

      Trả lờiXóa
      Trả lời
      1. Trường t học giờ nhiều hồng lắm :D Ctrai đeo cặp sách hồng, quần hồng, áo hồng nhiều vô kể.

        Xóa
      2. Ông hiền đấy, gặp tôi thì vừa vừa thôi chứ làm quá như kiểu hiếp dâm con mắt là tôi cho nó ăn đấm liền

        Xóa
      3. vl :)) Nó mặc thế thôi chứ chắc k gay hay gì đâu :D Có thể do ny nó muốn nó mặc thế thì sao

        Xóa
      4. Con ny đó muốn bồ mình bị gay ^^^

        Xóa
      5. Kế sách của nó đấy, để con khác k thích thằng đó nữa thì con kia mới có cảm giác an toàn đc :D

        Xóa
    2. Trả lời
      1. E cmt bằng đt hay gì mà bên trên nó có 1 khoảng trắng nhỉ :))

        Xóa


      2. e bấm xuống dòng r e mới viết ^^

        Xóa



      3. e muốn cho nó có ấn tượng :))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))

        Xóa
      4. Thôi k cần ấn tượng đâu e :3 Nó chiếm nhiều diện tích lắm :(

        Xóa
    3. Hội viên, quản trị viên, giờ cứ như là forum :v

      Trả lờiXóa
      Trả lời
      1. Sắp đổi nữa rồi :D Định để là bang chủ cho giống kiểu kiếm hiệp :v

        Xóa
      2. Cái phân cấp comment thì em nghĩ chỉ cần phân 2 hay 3 cấp là được rồi, một dãy rep comment mà nó phân kia thì 2 chữ nó xuống dòng, chưa kể dùng đt mà xem thì chắc 1 chữ 1 dòng quá =))

        Xóa
      3. Chính xác phải là cái Js phân cấp ở temp gốc này nó bị lỗi rồi bác ạ :D Nên e mới k sửa đc đấy, chứ e nhìn cũng kinh khủng lắm :v

        Xóa
    4. Trả lời
      1. Màu đẹp thôi e, viết k hay lắm :))

        Xóa
    5. Nhiều mã màu nhìn rất ấn tượng, cũng là nguồn tài nguyên làm nổi trội các bài viết

      Trả lờiXóa
    6. Em nghĩ là phần Bạn bè anh nên thêm logo của các Blog vào (kiểu như là ảnh đại diện ý) sẽ giống Facebook hơn anh ạ :)

      Trả lờiXóa
      Trả lời
      1. Ừ. A đang thêm đó e. Nãy ngồi chỉnh temp nên k để ý có tin nhắn. Xong a sẽ viết 1 bài bảo mọi người ai đặt liên kết thì cho 1 logo hình vuông để a chèn vào.

        Xóa
      2. Thêm logo ---> load thêm hình ---> nhiều liên kết (cỡ 50 cái) ----> blog chạy chậm ---> trên mobile tốn thêm cước 3G ----> Cáu ----> tìm ông Cường b-(

        Xóa
      3. K lag đến thế đâu ông :D T load trên mạng 3G đt t cũng k lag mà. Mà k nhiều liên kết đâu, t phải lọc chứ. Sau k ai tương tác mấy thì t gỡ để lại <10 cái là cùng.

        Xóa
    7. Hay đó bác đó làm thử =(

      Trả lờiXóa
      Trả lời
      1. Ừ. Nó chỉ để trang trí thôi ấy mà.

        Xóa
    8. Lấy ID với class làm sao admin

      Trả lờiXóa
      Trả lời
      1. Cái này bạn phải biết chút ít về HTML nha tức là biết các thẻ class, id đó.
        Ví dụ muốn làm cho nền toàn bộ blog thì thẻ là body{}, cho phần trên thì là #header{} chẳng hạn thế. Nó phụ thuộc vào template của bạn bạn đặt thẻ như nào nữa, click chuột phải vào phần tử rồi chọn Kiểm tra (hoặc Ctrl+Shift+I) để xem class, id nhé

        Xóa
    9. Tìm đc id rồi anh nhúng cú pháp đó thì đặt ngay đâu ạ chưa hiểu lắm

      Trả lờiXóa
      Trả lời
      1. Ví dụ e có id là #header, giờ e muốn đổi màu thanh header thì e thêm css có dạng sau trước ]]></b:skin>
        #header{background-image: linear-gradient( 135deg, mã_màu_1 10%, mã_màu_2 100%);}
        Trong đó mã màu 1 của e ví dụ là #fff, mã màu 2 là #000 thì code sẽ là:
        #header{background-image: linear-gradient( 135deg, #fff 10%, #000 100%);}

        Xóa
    10. còn với 1 widget thì sao anh ??

      Trả lờiXóa
      Trả lời
      1. Widget thì e cũng view tìm class, id của nó thôi. Trong web bất kì phần tử nào cũng đều đc gán bằng 1 class hoặc 1 id riêng biệt tùy theo mỗi template mà e.

        Xóa
      2. Tìm id class widget r nhưng đặt css đó ở đâu ạ

        Xóa
      3. :3 Tất cả css k kèm thẻ điều kiện thì đều đặt trước ]]></b:skin> e ơi.

        Xóa
      4. Ngay từ đầu anh nói v là em hiểu r hì hì hơi gà blog cảm ơn nha nha :) cường dz

        Xóa

    Nhận bài viết mới