Logo

Thủ Thuật CSS Giúp Tối Ưu Giao Diện Website Chuẩn SEO

Kiến thức Frontend

Thủ Thuật CSS Giúp Tối Ưu Giao Diện Website Chuẩn SEO

Khám phá thủ thuật CSS giúp cải thiện giao diện website, từ đổ bóng, gradient, hiệu ứng hình ảnh đến bố cục chuẩn SEO, thân thiện người dùng.

1. Thêm đổ bóng cho viền hoặc hình ảnh

.shadow {
  box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
  -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
}

2. Thêm đổ bóng cho chữ

.text-with-shadow { text-shadow: 4px 4px 8px #000; }

3. Tạo gradient tuyến tính

.gradient {
  background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff));
  background: -moz-linear-gradient(top, #000000, #ffffff);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');
}

4. Sử dụng hình ảnh làm viền

bordered-image { 
  border-width: 20px;
  -moz-border-image: url(border.png) 30 30 stretch;
  -webkit-border-image: url(border.png) 30 30 stretch;
}

5. Thêm hình ảnh loading cho ảnh

img { background: url(loader.gif) no-repeat 50% 50%; }

6. Tạo nút rollover với sprite

a.button { 
  display: block; 
  background: url(button.png) no-repeat;
  height: 50px; width: 150px;
}
a.button:hover { background-position: 0 -50px; }

7. Lật hình ảnh

img.flipped {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

8. Xoay hình ảnh

img { 
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -o-transform: rotate(90deg);
}

9. Tạo nền toàn màn hình

html {
  background: url("background-image.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

10. Tạo chữ cái đầu lớn (Drop Cap)

p:first-letter {
  display:block;
  margin:5px 0 0 5px;
  float:left; 
  color:#000;
  font-size:60px; 
}

h1 { 
  text-indent:-9999px;
  margin:0 auto; 
  width:300px; height:200px; 
  background:transparent url("logo.jpg") no-repeat scroll;
}

12. Thay đổi kích thước background

resize-image { 
  background:url(image_1.png) top left no-repeat; 
  -moz-background-size: 200px 300px; 
  -o-background-size: 200px 300px; 
  -webkit-background-size: 200px 300px;
}

13. Sử dụng font-face tùy chỉnh

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff");
}

15. Thêm màu nền cho text khi chọn

p::selection {
  background: #0000ff;
}

p::-moz-selection {
  background: #0000ff;
}

p::-webkit-selection {
  background: #0000ff;
}

16. Reset nền

body, html {
  color: black !important; 
  background-color: white !important; 
  background-image: none !important;
}

17. Reset liên kết

a:link { font-weight: bold; text-decoration: underline; color: #06c; }

18. Bo tròn mọi góc

.round { 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  border-radius: 5px; 
  -khtml-border-radius: 5px; 
}

19. Bo tròn một số góc

.top-right { border-top-right-radius: 10px; }
.top-left { border-top-left-radius: 10px; }
.bottom-right { border-bottom-right-radius: 10px; }
.bottom-left { border-bottom-left-radius: 10px; }

20. Tạo trích dẫn nổi bật (Pull Quote)

.quote {
  width: 300px;
  float: right;
  margin: 10px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font: italic bold #777;
}

21. Căn giữa trang ngang

.wrapper { width: 1024px; margin: auto; }

22. Thêm ngắt trang khi in

.new-page { page-break-before: always; }

23. Căn nội dung dọc

.content {
  min-height: 10px;
  display: table-cell;
  vertical-align: middle;
}

24. Tạo hiệu ứng trong suốt

.transparent {
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

.footer { position: fixed; left: 0; bottom: 0; height: 32px; width: 100%; }

26. Tạo cột tự động cho nội dung

.columns-three {
  text-align: justify;
  -moz-column-count: 3;
  -moz-column-gap: 15px;
  -moz-column-rule: 1px solid #ffffff;
  -webkit-column-count: 3;
  -webkit-column-gap: 15px;
  -webkit-column-rule: 1px solid #ffffff;
}

27. Buộc thanh cuộn dọc

html { height: 101%; }

28. Thêm sọc vằn cho bảng

body tr:nth-child(odd) { background-color: #d3d3d3; }

29. Thêm dấu đầu dòng hình tam giác

ul { list-style: none; margin: 0.75em 0; padding: 0 1em; }
li:before { content: ""; border-color: transparent #111; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; top: 0.9em; position: relative; }

30. Buộc con trỏ pointer cho phần tử tương tác

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer; }

Tham khảo:

Kết luận:

Áp dụng các thủ thuật CSS này giúp website của bạn vừa đẹp mắt vừa tối ưu trải nghiệm người dùng. Đồng thời, những kỹ thuật như đổ bóng, gradient, bo tròn góc và layout chuẩn cũng hỗ trợ SEO on-page hiệu quả.

Phản hồi (0)
0