50 thủ thuật CSS không thể bỏ qua – part III

50 thủ thuật CSS không thể bỏ qua – part III

(tiếp theo các phần trước)
50 thủ thuật CSS không thể bỏ qua – part II
50 thủ thuật CSS không thể bỏ qua – part I

21. Cross-browser Gradient

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(left,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to right, #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */

Ngoài ra bạn có thể tùy biến hơn bằng công cụ CSS Gradient Generator.

22. nth-child

nth-child pseudo class cho phép bạn chọn các thành phần có thự tự bất kỳ trong một list. Ví dụ:

ul li:nth-child(3) {
	background: blue
}

Đoạn CSS trên sẽ đặt background là blue cho thành phần thứ 3 của list.

ul li:nth-child(3n+3) {
	background: blue
}

Đoạn CSS trên sẽ đặt background là blue cho các thành phần thứ 3, 6, 9, 12,… của list.

nth-child hay được dùng để style cho các dòng chẵn, dòng lẻ của một table. nth-child được hỗ trợ bởi hầu hết các trình duyệt trừ IE8 trở xuống. Bạn có thể dùng nth-child selector của jQuery để thay thế.

23. CSS shorthand

Sử dụng cách viết tắt này làm cho đoạn code của bạn ngắn gọn và sáng sủa hơn:

margin: margin-top margin-right margin-bottom margin-left;
       /* margin: 1px 2px 3px 4px; */
       /* padding, border-width, outline-width tương tự */

border: width style color;
       /* border: 1px solid red; */
       /* border-top, border-bottom, border-right, border-left tương tự */

background: color image repeat position scroll;
       /* background: red url('bg.png') repeat bottom right fixed; */

font: style variant weigth size/line-height family;
       /* font: italic small-caps bold 1em/1.2em segoe ui, arial, tahoma; */

list-style: type position image;
       /* list-style: square outside url('start.png'); */

24. Vẽ hình tròn với border-radius

Đặt giá trị cho width và height gấp đôi border-radius để tạo ra hình tròn:

.cirlce {
	width: 300px;
	height: 300px;
	background-color: red;
	border-radius: 150px;
	-moz-border-radius: 150px;
	-webkit-border-radius: 150px;
}

25. Vẽ hình tam giác với CSS

.triangle {
	border-color: transparent transparent green transparent;
	border-style: solid;
	border-width: 0px 300px 300px 300px;
	height: 0px;
	width: 0px;
}
<div class='triangle'></div>

Ngoài ra bạn cũng có thể tạo ra nhiều hình khác bằng cách kết hợp khéo léo các thuộc tính trên.

26. Thay thế chữ bằng ảnh

Trong một số trường hợp, bạn muốn sử dụng ảnh để làm cho đoạn chữ trở nên đẹp hơn, nhưng vẫn muốn giữ text để làm SEO, thì có thể sử dụng text-indent:

h1 {
	text-indent:-9999px;
	background:url("h1-image.jpg") no-repeat;
	width:200px;
	height:50px;
}

27. Giao diện hai cột đơn giản

<body>
	<div id="wrapper">
		<div id="header"></div>	
		<div id="content"></div>
		<div id="sidebar"></div>
		<div id="footer"></div>
	</div>
</body>
#wrapper {width:960px; margin:0 auto}
#header { background: blue; height: 40px; }
#content {float:left; width:600px; background: aqua; height: 300px; }
#sidebar {float:left; width:360px; background: red; height: 300px; }
#footer {clear: both; height: 40px; background: gray; }

28. Giao diện ba cột đơn giản

<body>
	<div id="wrapper">
		<div id="header"></div>
		<div id="primary"></div>
		<div id="content"></div>
		<div id="sidebar"></div>
		<div id="footer"></div>
	</div>
</body>
#wrapper {width:960px; margin:0 auto}
#header { background: blue; height: 40px; }
#primary {float:left; width:300px; background: green; height: 300px; }
#content {float:left; width:600px; background: aqua; height: 300px; }
#sidebar {float:left; width:360px; background: red; height: 300px; }
#footer {clear: both; height: 40px; background: gray; }

29. Xóa thanh cuộn dọc của textarea trong IE

textarea{
	overflow:auto;
}

30. Cắt ngắn text cho vừa với chiều rộng

<p class='ellipsis'>Nội dung này quá dài nên sẽ bị cắt ngắn ^^<p>
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
}

Kết quả:

Nội dung này quá dài nên sẽ bị cắt ngắn đi không thương tiếc ^^

Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!