11 WEBSITE GIÚP PHỐI MÀU THIẾT KẾ TỐT HƠN.

Ảnh minh họa.

Xin chào, mình Đức đây, hôm nay mình xin phép được chia sẻ cho các bạn 11 website giúp phối màu tốt hơn. Thôi, cùng mình tham khảo các website này nhé.

11 Website

1/ Adobe Color CC

Link truy cập: click tại đây.

2/ Color Trends.

Link truy cập: click tại đây.

Cái này dành cho các bạn thích sáng tạo phối màu, và chơi màu sắc trên cả địa cầu.

3/ Flatui Color Picker

Link truy cập: Click tại đây.

Bạn nào thích Flat Design thì vào Website này.

4/ Multicolr.

Link truy cập: Click tại đây.

Cái này mà các bạn biết tận dụng thì khá là hay đấy.

5/ Color Dot

Link truy cập: Click tại đây.

Cho mấy bạn thích ngẫu hứng di chuột khắp nơi thích màu nào thì pick màu đó EZ chưa. Đôi khi phút ngẫu hứng tạo nên siêu phẩm.

6/ Metarial Design Color.Link truy cập: Click tại đây.

7/ Color Hunter.

Link truy cập: Click tại đây.

Các bạn chỉ cần Upload 1 tấm ảnh của các bạn lên đây, nó sẽ cho các bạn 1 bảng màu riêng.

8/ Brand Colors.
Link truy cập: Click tại đây.

9/ Color Kit.
Link truy cập: Click tại đây.

Khác với những trang Web khác, các bạn vào trang này thì các bạn phải chịu bỏ ra 20$ nhé.

10/ Discover.
Link truy cập: Click tại đây.

Cái này là 1 nguồn kiểu Pinteres.

11/ Coolors.

Link truy cập: click tại đây.

Tổng kết

Bài viết đến đây là hết, những gì cần chia sẻ, mình đã chia sẻ cho các bạn rồi, mình chúc các bạn 1 ngày vui vẻ và thành công.

Read More

CÁCH LÀM NÚT SHARE VỚI HIỆU ỨNG VÒNG TRÒN BẰNG CSS.

Ảnh minh họa.

Xin chào tất cả các bro :)), mình là Nguyễn Chánh Đức đây. Sau 1 thời gian bị em Duy Phương hối đăng bài mới nên hôm nay mình sẽ làm theo yêu cầu em đấy. Và mình xin chia sẻ cho các bạn cách làm nút share bằng css và html. Cái này nó chỉ phụ thuộc là vào Font Awesome thôi. Các bạn nhìn mình hướng dẫn và làm theo nhé!

Các bước tiến hành

Các bạn muốn làm được nút share này thì các bạn phải cài Font Awesome nhé! Các bạn chỉ cần thêm dòng CODE này trong thẻ head.

<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

Bước tiếp theo các bạn tạo các biểu tượng mạng xã hội theo cấu trúc như sau: 

<div id="circle"> <i class="icon1 fa fa-share-alt fa-lg"></i> <i class="icon2 fa fa-share-alt fa-lg"></i> </div> <div id="sub"> <div id="circle"> <i class="icon1 fa fa-facebook fa-lg"></i> <i class="icon2 fa fa-plus fa-lg"></i> <span><a href="#">Facebook</a></span> </div> <div id="circle"> <i class="icon1 fa fa-twitter fa-lg"></i> <i class="icon2 fa fa-plus fa-lg"></i> <span><a href="#">Twitter</a></span> </div> <div id="circle"> <i class="icon1 fa fa-google-plus fa-lg"></i> <i class="icon2 fa fa-plus fa-lg"></i> <span><a href="#">Google +</a></span> </div> </div>

Bước cuối cùng là các bạn cho biểu tượng thêm 1 chút hiệu ứng, muốn cho hiệu ứng thì các bạn thêm CSS sau:

/* ///// MAIN CIRCLE ///// */ #circle { width: 80px; height: 80px; border-radius: 50%; background: #747392; position: absolute; z-index:2; top: 25px; left: 25px; box-shadow: 0 0 4px rgba(0, 0, 0, .11), 0 4px 8px rgba(0, 0, 0, .22); cursor: pointer; } #circle:after { content:''; width: 10px; height: 10px; position: absolute; border-radius: 50%; background: rgba(81, 80, 122, 0.6); left: 35px; top: 35px; } #circle i { font-size: 40px; color: #fff; position: absolute; top: 24px; left: 24px; z-index: 1; } #circle i.icon1 { opacity: 1; } #circle i.icon2 { opacity: 0; top: 25px; left: 22px; } /* ANIMATION */ #circle, #circle i, #circle:after { -webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1); transition: all .2s cubic-bezier(.4, 0, .2, 1); } /* HOVER */ #circle:hover { background: #626186; box-shadow: 0 0 4px rgba(0, 0, 0, .15), 0 4px 8px rgba(0, 0, 0, .30); } #circle:hover:after { width: 80px; height: 80px; left: 0; top: 0; } #circle:hover > i { -webkit-transform: rotate(720deg); transform: rotate(720deg); } #circle:hover > i.icon1 { opacity: 0; } #circle:hover > i.icon2 { opacity: 1; } /* ///// SUB CIRCLES ///// */ #sub { width: 150px; height: 50%; z-index: 1; position: absolute; visibility:hidden; } #sub #circle { width: 50px; height: 50px; top: 0; left: 40px; opacity: 0; transition: 0.2s opacity; } #sub #circle:nth-child(1) { top: 120px; background: #95507f; } #sub #circle:nth-child(2) { top: 180px; background: #4e935c; } #sub #circle:nth-child(3) { top: 240px; background: #9f4b49; } #sub #circle:nth-child(1):after { background: rgba(126, 53, 108, 0.6); } #sub #circle:nth-child(2):after { background: rgba(49, 124, 61, 0.6); } #sub #circle:nth-child(3):after { background: rgba(135, 43, 45, 0.6); } #sub #circle:after { left: 20px; top: 20px; } #sub #circle i { font-size: 20px; top: 18px; left: 16px; } #sub #circle i.icon1 { opacity: 1; } #sub #circle i.icon2 { opacity: 0; } /* HOVER */ #sub #circle:hover:after { width: 50px; height: 50px; left: 0; top: 0; } #circle:hover + #sub #circle:nth-child(1) { opacity:1; transition-delay:0.05s; } #circle:hover + #sub #circle:nth-child(2) { opacity:1; transition-delay:0.1s; } #circle:hover + #sub #circle:nth-child(3) { opacity:1; transition-delay:0.15s; } #sub #circle:hover > i { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #sub #circle:hover > i.icon1 { opacity: 0; } #sub #circle:hover > i.icon2 { opacity: 1; } #circle:hover + #sub { visibility:visible; } #sub:hover { visibility:visible; } #sub:hover > #circle { opacity:1; } /* ///// SUB TITLES ///// */ #circle span a{ display: block; margin-right: -150px; margin-top: 16px; color: rgba(0, 0, 0,0.7); font-family: 'Comfortaa', sans-serif; text-transform: uppercase; font-weight: 400; text-align: left; padding-left: 60px; font-size: 1.1em; letter-spacing: 0.25em; opacity: 0; -webkit-transition: all .4s cubic-bezier(.4, 0, .2, 2); transition: all .4s cubic-bezier(.4, 0, .2, 2); text-decoration-line: none; } /* HOVER */ #sub #circle:hover > span a{ opacity: 1; padding-left: 65px; } 

Kết bài

Bài viết tới đây là kết thúc rồi, mình xin chúc các bạn có 1 kì nghỉ hè và đi du lịch vui vẻ! Cảm ơn các bạn đã theo dõi, xin chào các bạn hẹn gặp lại các bạn trong các bài viết sau.

Liên hệ tại đây.

Read More