BACKGROUND ĐƠN GIẢN VÀ ĐẸP BẰNG CSS3

Hình ảnh là một trong những thứ khá bậc nhất làm chậm đi tốc độ tải trang trên website của chúng ta. Chính vì thế mà mình nghĩ ngày nay thì đại đa số những website bỏ đi ảnh background là vậy. Nhưng nếu bạn vẫn muốn có gì đó cho thêm màu sắc vào ảnh nền thì minh đã có cách để giúp các bạn.

Cùng với sức mạnh của CSS3 ngày nay thì bây giờ bạn có thể "vẽ hình" trực tiếp tại trình duyệt. Thì lợi dụng nó mình xin chia sẻ với các bạn một số ảnh nền đơn giản được vẻ bằng CSS3, cho những bạn nào đang có nhu cầu sử dụng chúng.

Background đơn giản và đẹp bằng CSS3

Sau đây mình sẽ tạo ra một đối tượng và sử dụng css3 để đặt background vào đó cho các bạn dễ dàng lựa chọn.

Mẫu 1

background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

Mẫu 2

background-color: #f90;
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

Mẫu 3

background-color: #ac0;
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);

Mẫu 4

background-color: #c16;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);

Mẫu 5

background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image: -webkit-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-webkit-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-webkit-linear-gradient(45deg, transparent 75%, #555 75%),
-webkit-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);

Mẫu 6

background: #fdc;
background: -moz-linear-gradient(0deg, #fed 50%, #fdc 50%);
background: -o-linear-gradient(0deg, #fed 50%, #fdc 50%);
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #fed), color-stop(50%, #fdc));
-webkit-background-size: 100px;
-moz-background-size: 100px;

Mẫu 7

background:
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
-webkit-linear-gradient(135deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background:
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
-webkit-linear-gradient(135deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background-color:#e1ebbd;
background-size: 128px 128px;
background:
linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);

Mẫu 8

background-color: hsl(34, 53%, 82%);
background-image: -webkit-repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, 
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px 
),
-webkit-repeating-linear-gradient(-45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, 
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px 
);
background-image: -webkit-repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, 
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px 
),
-webkit-repeating-linear-gradient(-45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, 
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px 
);
background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, 
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px 
),
repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, 
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px 
);
background-size: 100%;

Mẫu 9

background-color: #fff; 
background-image: 
-webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-webkit-linear-gradient(#eee .1em, transparent .1em);
background-image: 
-webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-webkit-linear-gradient(#eee .1em, transparent .1em);
background-color: #fff; 
background-image: 
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;

Mẫu 10

background-color:#269;
background-image: -webkit-linear-gradient(white 2px, transparent 2px),
-webkit-linear-gradient(0deg, white 2px, transparent 2px),
-webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
-webkit-linear-gradient(0deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-image: -webkit-linear-gradient(white 2px, transparent 2px),
-webkit-linear-gradient(0deg, white 2px, transparent 2px),
-webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
-webkit-linear-gradient(0deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;

Tạm thời sẽ là 10 mẫu, bao giờ mình tìm được thêm mình sẽ chia sẻ với các bạn.

Lời kết

Đây là những ảnh nền hoàn toàn được dựng nên bằng CSS3, do đó tốc độ sử lý của nó hầu như là rất nhanh, và mong rằng những background mà mình chia sẻ ở trên đây là những thứ mà các bạn đang tìm kiếm.

P/S: Trước đây được học trên trường thì để làm mấy cái menu nhìn bầu bầu, hoặc màu sắc cho một đối tượng nào đó thì thường sử dụng một hình có chiều rộng khoảng 1px và sử dụng css để đặt vào backround. Nhưng mà bây giờ thì những thứ đó chắc bây giờ gọi là lỗi thời, giờ chỉ với CSS3 thì bạn muốn làm ra màu sắc cũng như đủ mọi hiệu ứng khác mà không cần rờ tới hình ảnh.

"nguồn bài viết từ KslZone.NET".

Đọc Bài

HIỆN ĐỊA CHỈ LIÊN KẾT KHI RÊ CHUỘT VÀO LINK BẰNG CSS

Như hầu hết mọi người cũng biết, hiện tại thì thẻ đối với những link mà chúng ta sử dụng cho website thường thì trông khá là vô vị. Hầu hết thì chỉ có màu sắc khác với màu chữ bình thường, và nhiều lắm khi rê chuột vào chúng đổi màu. Cũng mới gần đây đảo lục lọi lại mấy bài viết cũ trên blog thì mình biết được bắt gặp một thứ khá hay ho từ CSS3 đó là thuộc tính content.

Thuộc tính này có thể giúp cho bạn thay đổi hoặc thêm vào nội dung cho một thuộc tính bất kì tại phần thẻ HTML, ví dụ như bài viết "Thay đổi avatar mặc định của phần nhận xét Blogger", mình sử dụng CSS3 như một thẻ điều kiện thay thé đi hình ảnh avatar mặc định của khu vực nhận xét. Bạn nào có quan tâm về css thì mình sẽ có bài viết hướng dẫn sau.

Từ 2 điều này mình nảy ra ý tưởng làm một thứ gì đó cho bớt nhàm chán và có phần khá hữu dụng cho nhưng link mà chúng ta chèn vào bài viết. Đó chính là khi người dùng rê chuột vài link mà chúng ta chèn vào bài viết thí nó sẽ hiển thị địa chỉ liên kết đó đi đâu. Mặc dù hầu hết mọi trình duyệt cũng sẵn đã hiện địa chỉ tại một góc nhỏ của nó, nhưng việc thêm vào như thế này sẽ làm cho người dùng dễ dàng nhìn thấy hơn và có phần đẹp hơn nữa.

Bạn có thể trỏ chuột vào link ở trên để xem demo, link hơi dài nên tương đối xấu nên bạn có thể rê chuột vào thử demo khác ở đây kslzone.

Hiện địa chỉ liên kết khi rê chuột vào link

Để thêm hiệu ứng nhỏ này vào Blogger / Blogspot thì khá đơn giản bạn chỉ cần chèn đoạn mã này lên trên thẻ ]]></b:skin> là xong

.post-body a { position:relative; }
.post-body a::before {
content:attr(href);
font-size:11px;
line-height:11px;
font-family:Arial,sans-serif;
text-transform:none;
padding:8px 12px;
top:-34px;
right:0px;
transition:.3s ease-out;
background:#222;
color:#fff;
border-radius:5px;
position:absolute;
opacity:0;
visibility:hidden;
}
.post-body a::after {
content:" ";
width:0;
height:0;
right:10px;
top:-7px;
transition:.3s ease-out;
border-color:#222 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
position:absolute;
opacity:0;
visibility:hidden;
}
.post-body a:hover::before, .post-body a:hover::after {
opacity:1.5;
visibility:visible;
}

Bạn nào biết css thì có thể tự chỉnh lại cho đẹp hơn nhé tại mình thấy nó vẫn chưa được đẹp lắm ^^. Sau khi hoàn tất thì lưu lại. Nếu bạn nào có ý kiến hay hơn về giao diện hãy đóng góp với mình hoặc nếu bất chợt mình có ý tưởng mình sẽ cập nhật đoạn mã này cho nó đẹp hơn. Chú bạn thành công!

Đọc Bài

FACEBOOK LIKE BOX ẨN HIỆN BẰNG CSS3

Thời buổi hiện nay thì mạng xã hội xuất hiện ở khắp nơi rồi, đặc biệt là facebook. Dù đi đến website nào bạn cũng thấy nút like, rồi thì nhận xét của facebook, và cả facebook like box nữa. Qua việc này bạn thấy gì? Các mạng xã hội hiện nay đặc biệt là facebook đang có vai trò khá quan trọng trong lĩnh vực thu hút lượng truy cập cho website của chúng ta. Chính vì thế chúng ta không nên bỏ lỡ chúng, phải thêm ngay vài cái vào website để bắt kịp với đồng bào.

Đối với các thứ như nút like và nhận xét của facebook thì trong blog này mình đã chia sẻ cả rồi. Bây giờ chỉ còn một thứ nữa đó là Facebook Like Box thôi. Thì hôm nay mình sẽ chia sẻ với các bạn một Facebook Like Box khá là tiết kiệm diện tích trượt theo sidebar và ẩn hiện khi rê chuột vào. Link demo cho các bạn: http://jsfiddle.net/kieusonlam/fAuL6/show/

Facebook Like Box ẩn hiện bằng CSS3

Công việc đầu tiên thì chúng ta sẽ thêm css tùy chỉnh giao diện vào Blogger. Bạn tìm đến thẻ ]]></b:skin> và thêm vào bên trên đoạn mã sau đây

.fb-box{
    position:fixed;
    top:10%;
    right:-286px;
    height:250px;
    width:285px;
    background:#efefef;
    border:1px solid #bbb;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
}
.fbicon-box{
    width:30px;
    height:35px;
    position:absolute;
    top:-1px;
    left:-30px;
    background:#405D9B;
    border-radius:3px 0 0 3px;
    color:#fff;
    font-family:Arial;
    font-size:30px;
    font-weight:700;
    text-align:center;
    padding-top:2px;
}
.fb-box:hover{
    right:0;
}

Bây giờ tiếp tục để có thể tạo ra facebook like box tối ưu nhất thì chúng ta sẽ thêm Facebook SDK vào blog. Tìm đến thẻ <body> chèn vào phía sau (nếu có rồi thì thôi nhé)

<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Cuối cùng đây, chèn đoạn mã này lên trên thẻ </body> để nó xuất hiện trên blog của chúng ta

<div class="fb-box">
    <div class="fbicon-box">f</div>
    <div class="fb-like-box" data-href="https://www.facebook.com/KslZone" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false">
</div>

nhớ thay KslZone bằng địa chỉ fanpage của bạn và lưu lại.

Lời kết

Nếu website của bạn có một fanpage lớn, và bạn thường xuyên cập nhật trên đó thì khả năng cao bạn sẽ giữ được và kiếm thêm được khá nhiều lưu lượng truy cập.

Đọc Bài