TÌM HIỂU THUỘC TÍNH BORDER TRONG CSS

Thuộc tính này thì đảm bảo là có trên mọi website và hầu như ai ai cũng biết. Thế đem vào đây viết bài chi vậy? Lý do rất đơn giản mình viết bài này ở đây là để giới thiệu cho những ai chưa biết, hoặc đơn thuần là biết nhưng nhiều khi chưa biết hết. Không lằng nhằng nữa bắt đầu vào việc thôi.

Tìm hiểu thuộc tính border trong CSS

Thuộc tính border là thuộc tính giúp chúng ta thêm đường viền vào đối tượng, không giống như nhiều thuộc tính cơ bản khác, khi sử dụng để trông được một cách đầy đủ và hoàn thiện nhất nó yêu cầu chúng ta cung cấp 3 điều sau:

Độ dày đường viên

Kiểu đường viền

Màu đường viền

Về độ dày và màu đường viền thì không phải nói gì rồi, còn kiểu đường viền, chúng ta có các lựa chọn như sau: none, dotted, dashed, solid, groove, ridge, inset, và outset.

Sau đây mình xin được tạo ra một đối tượng và tạo đường viền cho nó:

border: 1px none #DDD

border: 2px dotted #DDD

border: 3px dashed #DDD

border: 4px solid #DDD

border: 5px groove #DDD

border: 6px ridge #DDD

border: 7px inset #DDD

border: 8px outset #DDD

Theo mình nghĩ với những ví dụ trực tiếp như trên mình bạn đã đủ để bạn hiểu thuộc tính boder là như thế nào rồi, có lẽ là bài viết này không nói đến gì mới lạ cho lắm, nhưng rất mong rằng nó hữu ích cho một số người đang tìm và học CSS.

P/S: Sau này sau khi hướng dẫn những điều cơ bản về CSS2 xong mình sẽ chuyển sang hướng dẫn lấn sang những thủ thật cực ngầu sử dụng CSS3 đến các bạn.

http://www.kslzone.net/2014/06/tim-hieu-thuoc-tinh-border-trong-css.html

Đọc Bài

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

THẺ PRE VỚI MÀU XEN KẼ GIỮA CÁC DÒNG

Gần đây thì mình đã có một bài viết hướng dẫn "đánh thứ tự các dòng trong thẻ code" giúp cho việc khách truy cập dễ nhìn hơn những đoạn mã mà chúng ta chia sẻ. Thì bài viết đó mình cũng đã nói ra mình sẽ chia sẻ thêm nhiều cách thức mà bạn có thể làm để đoạn mã dễ nhìn hơn mà không cần đụng tới Syntax Highlighter nặng nề. Và bài viết này lại tiếp tục mình sẽ hướng dẫn các bạn tạo thẻ pre với màu nên xen kẽ như blog của mình hiện tại.

Thẻ PRE với màu xen kẽ giữa các dòng

Thủ thuật này mình chỉ sử dụng CSS để làm thôi, cách thức mình làm là chèn một ảnh background hai màu xen kẽ với kích thước định sẵn, sau đó quy định lại chiều cao của các dòng chữ có bên trong nó cho đúng kích thước với các dòng màu có trên background đó. Thì mọi thứ mình đã làm sẵn rồi, các bạn chỉ việc tìm đến thẻ ]]></b:skin> và chèn đoạn css này lên trên để sử dụng.

pre {
border: 1px solid #636363;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7plwmE9HfI8BS817GeMYiDg8TTFnuGMWTtAKEUs5yLAhyphenhyphenjjC0nR7UiujfJ17pFler9mYthwh4UWst8umBVzOOZZj-KraScRXaqNTqmuULxZU6uPIYV9tOqLQGPwyuOTHOejG4aZlH36U/s1600/pre.png") repeat top;
color: #888888;
display: block;
font: 12px/19px Consolas,'Andale Mono',Courier,'Courier New',monospace;
margin: 10px 0;
overflow: auto;
padding: 19px 19px 17px;
}

ở đoạn mã trên thì bạn sẽ có màu trắng xen kẽ với bạc, và font chữ màu bạc nếu bạn không thích màu chữ nhạt thì bạn có thể thay đổi lại ở thuộc tính color bằng màu mà bạn yêu thích. Còn nếu không thích màu nền thì bạn có thể mở các phần mềm chỉnh sửa ảnh để đổ lại màu cho background đó.

Lời kết

Đây là một trong những thủ thuật chỉ sử dụng css nhưng khá là hiệu quả trong việc làm cho khách truy cập dễ dàng đọc hiểu đoạn mã đó hơn. Nếu bạn nào cần hỗ trợ cho việc chỉnh sửa cứ để lại nhận xét phía dưới cho mình.

Đọc Bài

THAY ĐỔI MÀU CỦA TÔ CHỌN CHỮ BẰNG CSS

Trước đây thì mình đã có một bài viết hướng dẫn cách thức bỏ chọn chữ tại website của bạn. Hôm nay thì mình xin chia sẻ với các bạn cách để thay đổi màu phần tô chữ mà chúng ta chọn. Như ai cũng biết thì khi bạn tô chọn chữ tại bất kì một trang web nào, hầu hết tất cả chúng đều sử dụng một màu duy nhất đó là xanh biển. Điều này có bao giờ làm cho bạn cảm thấy nó nhàm chán quá và muốn phá cách một tý không? Nếu có bạn hãy sử dụng đoạn CSS sau đây.

Thay đổi màu của tô chọn chữ bằng CSS

::selection {
    background: #FA4B2A;
    color: #FFF;
    }
::-moz-selection {
    background: #FA4B2A;
    color: #FFF;
}

đối với đoạn css này, bạn có thể thay đổi màu phần đã tô và cả màu của chữ đã được tô nữa, như đoạn code ở trên thì phần tô là màu đỏ và chữ sẽ là màu trắng.

Ngoài ra nếu bạn muốn áp dụng nó cho một thẻ hoặc một thuộc tính bất kì, bạn có thể sử dụng như sau:

p::selection {
    background: #FA4B2A;
    color: #FFF;
}
div.tochu::selection {
    background: #FA4B2A;
    color: #FFF;
}

chỉ đơn giản như vậy là đã có thể thay đổi thành công màu chữ chọn trên website của chúng ta rồi.

Lời kết

Thực chất thì thủ thuật này không mang lại nhiều ích lợi nào gọi là lớn cho website của chúng ta, nhưng hi vọng rằng nó làm cho website của chúng ta trong khác lạ và ngầu hơn trong mắt người dùng.

Trước đây mình có giới thiệu một hiệu ứng cũng khá hay cho Blogger, nhưng nói chung làm với website nào thì cũng tương tự thôi, kết hợp cả css và javascript:

• Hiệu ứng tải trang cho Blogger

bạn có thể tham khảo qua để làm đẹp cho website của mình.

Đọc Bài

SỰ KHÁC BIỆT GIỮ DISPLAY:NONE VÀ VISIBILITY:HIDDEN

Sự khác biệt giữ display:none và visibility:hidden

Thông thường, để ẩn hiện những thứ không mong muốn trong một website đối với CSS thì thông thường chúng ta sẽ sử dụng hai thuộc tính đó là display: none, và visibility: hidden. Khá chắc rằng nhiều người khi mới bước vào học thiết kế website, thì mười người có tới bảy đến tám người chẳng ai biết cái hai thuộc tính này khác nhau ở chỗ nào. Do đó tiện đây mình lập ra bài viết ngắn này, giúp các bạn hiểu được nó khác biết nhau ở chỗ nào.

Sự khác biệt giữ display:none và visibility:hidden

Để hiểu rõ được sử khác biệt của chúng đầu tiên xin mình giới thiệu sơ qua về cách làm ẩn hiện đối tượng sử dụng hai thuộc tính này.

Đối với display: none, thông thường nhất chúng ta sử dụng hai thuộc tính cơ bản sau:

• display: block (Hiện)
• display: none (Ẩn)

Đối với visibility: hidden, thông thường cũng sử dụng hai thuộc tính:

• visibility: visible (Hiện)
• visibility: hidden (Ân)

Bây giờ để nhìn vào là biết ngay thì mình sẽ tạo ra ba đối tượng, mình sẽ sử dụng hai thuộc tính này cho vào đối tượng ở giữa và bạn sẽ nhận ra được ngay nó khác biệt nhau ở chỗ nào. Mỗi đối tượng dưới đây mà mình tạo chúng sẽ có màu sắc theo thứ tự đỏ, xanh lá, xanh biển.

ĐỐI TƯỢNG 1 ĐỐI TƯỢNG 2 ĐỐI TƯỢNG 3

Đối với display: none

ĐỐI TƯỢNG 1 ĐỐI TƯỢNG 2 ĐỐI TƯỢNG 3

đối tượng thứ hai (xanh lá) đã bị ẩn đi còn một thứ gì hết, ý mình là không gian mà nó chiếm dụng của đối tượng thứ hai như bạn thấy nó đã mất đi chứ không chỉ là phần chữ viết trong nó.

Đối với visibility: hidden

ĐỐI TƯỢNG 1 ĐỐI TƯỢNG 2 ĐỐI TƯỢNG 3

khác với display: none thuộc tính này làm cho đối tượng thứ hai (xanh lá) chỉ ẩn đi phần chữ viết, nhưng không gian mà đối tượng chiếm dụng vẫn sẽ còn đó, không hề bị mất đi.

Lời kết

Qua các ví dụ trên thì mình đã giải thích xong sử khác biệt giữa hai thuộc tính này, mong rằng sau khi mọi người hiểu được sự khác biệt nho nhỏ này, các bạn sẽ biết phải sử dụng nó cho các trường hợp nào trên các website của riêng mỗi người.

Đọc Bài

MẸO THAY THẾ FONT DỄ DÀNG NHẤT

Như chúng ta đã biết thì hiện nay có rất rất nhiều Blogger Template khá đẹp và nhiều tính năng không thua gì các nền tảng khác. Bây giờ chúng không chỉ có mỗi giao diện blog không thôi, mà còn cả giao diện báo chí, phim ảnh,... đủ mọi thứ để tùy chọn. Nhưng có một điều mà mình chắc chắn mọi người đều sẽ gặp trong quá trình sử dụng những template đó chỉnh là lỗi font chữ.

Hiện tại thì có rất nhiều font chữ đẹp ở để phục vụ cho việc thiết kế website, nhưng đa phần lại không hỗ trợ Tiếng Việt, và việc thay thế toàn bộ phần css để đổi font thì khá là vất vả, đôi khi tác giả chèn đủ mọi loại chỗ, sidebar, tiêu đều, footer... Bạn vẫn có thể sử dụng Notepad hoặc những trình soạn thảo để thay thế cho lẹ, nhưng mình có cách này cũng khá là đơn giản để chia sẻ cho các bạn.

Mẹo thay thế Font dễ dàng nhất
Chúng ta cũng biết là hiện tại thì hầu hết mọi người đều lấy font chữ trên Google Fonts để mang về sử dụng, mình sẽ hướng dẫn các bạn mẹo thay thế font qua việc sử dụng font khác hỗ trợ tiếng việt trên đó.

Đầu tiên bạn tìm đến mã nhúng link của font mà bạn muốn thay thế. Ví dụ như font Oswad, bạn tìm với từ khóa Oswald trong phần code của template bạn, bạn sẽ tìm được một đoạn thế này

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

bây giờ bạn truy cập vào đường link nằm trong mã nhúng đó và copy toàn bộ mã có trong đó và chèn vào dưới thẻ <b:skin><![CDATA[ nó sẽ thành ra thế này

<b:skin><![CDATA[/*
-----------------------------------------------
KslZone Blogger Template
Name    : ABC
Author  : KSL
Url     : XXX
----------------------------------------------- *
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
..................
..................
..................
]]></b:skin>

sau khi chèn xong bạn xóa đoạn mã nhúng link lúc đầu thì vì bây giờ ta chã cần xài nó nữa.
Bây giờ bạn vào Google Fonts phần hỗ trợ tiếng việt, chọn một font cho bạn để thay thế, rồi tìm đến mã nhúng để sử dụng cho font đó. Ví dụ mình có mã nhúng font Open Sans

<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,vietnamese' rel='stylesheet' type='text/css'>

Tương tự như phía trên kia bạn truy cập vào đường link có trong mã nhúng bạn sẽ thấy đoạn mã như thế này

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/59ZRklaO5bWGqF5A9baEET8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Bây giờ là mẹo của mình đây, bạn copy đường link dài trong đoạn mã trên và thay thế với cái đường link dài có trong phần mà mình bảo bạn chèn dưới thẻ <b:skin><![CDATA[ đó. Sau khi làm xong thì nó thành ra thế này

-----------------------------------------------
KslZone Blogger Template
Name    : ABC
Author  : KSL
Url     : XXX
----------------------------------------------- */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/59ZRklaO5bWGqF5A9baEET8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
..................
..................
..................
]]></b:skin>

lưu lại template và xem thành quả.

Đọ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

CÁCH ĐƠN GIẢN ĐỂ CHÈN CSS VÀO BLOGGER

Nay lại nhắc lại việc mà mình đã nói rất nhiều ở những bài trước, Blogger là mã nguồn được Google thêm vào rất nhiều tùy chỉnh vào nó giúp những người dùng sử dụng nó một cách dễ dàng hơn. Điều này thì liên quan gì nhỉ? Hiện tại thì mọi hướng dẫn ở hầu hết các website về thủ thuật Blogger / Blogspot đều bảo người dùng vào phần chỉnh sửa HTML để chèn css vào trên thẻ ]]></b:skin>.

Điều này khá là phiền hà vì phải vào đợi load ra một đống code, rồi nếu mà template có quá nhiều css trong đó thì tìm cái thẻ ]]></b:skin> quá chi là rắc rối. Do đó hôm nay, bài viết này mình muốn giới thiệu cho những người chưa biết hoặc chưa rành Blogger, cách đơn giản để thêm CSS thay cho cái điều mà mình vừa nói.

Cách đơn giản chèn thêm CSS tùy chỉnh vào Blogger

Bước 1: Đăng nhập vào Blogger >> Mẫu >> Tùy chỉnh

Bước 2: Chọn qua thẻ Nâng cao >> Thêm css >> Áp dụng cho Blog

Đơn giản chỉ như vậy bạn đã có thể chèn xong đoạn css tùy chỉnh vào blog mà không phải mệt mỏi tìm chỗ chèn. Google đã thêm rất khá nhiều chức năng cho một mã nguồn Blog miễn phí này, để cho cả người dùng bình thường lẫn các lập trình viên sử dụng một cách dễ dàng, chỉ đơn giản và chúng ta chưa tìm hiểu hết về nó. Vậy là đã hoàn thành thêm một thủ thuật nhỏ khác mong giúp ích được những bạn mới bắt đầu làm quen với Blogger / Blogspot.

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

Đọc Bài