Làm nổi bật văn bản CSS: 7 Hiệu ứng văn bản làm nổi bật CSS thú vị 😎 – làm thế nào để đánh dấu văn bản trong css

Bạn đang xem : cách tô sáng văn bản trong css

Vì vậy, bạn làm cách nào để tô sáng văn bản trong CSS và HTML?

Trong hướng dẫn ngắn này, tôi sẽ chỉ cho bạn một số cách thú vị mà bạn có thể sử dụng CSS để đánh dấu văn bản. Cũng giống như trên giấy, bạn đánh dấu văn bản trong trang HTML để thu hút sự chú ý đến các phần, đoạn hoặc nhóm hoặc từ quan trọng. Trên giấy, bạn có thể sử dụng bút dạ, bút đánh dấu hoặc thậm chí bút màu hoặc bút chì, nhưng làm cách nào để đánh dấu văn bản trong HTML bằng CSS?

Cách đánh dấu văn bản trong trang: Chuẩn & lt; mark / & gt; Đánh dấu thẻ trong HTML

Có, HTML cung cấp một cách tiêu chuẩn để đánh dấu văn bản trong các trang bằng cách sử dụng thẻ & lt; mark / & gt; xung quanh văn bản bạn muốn để đánh dấu.

Thẻ đánh dấu HTML (& lt; mark & ​​gt;) đại diện cho văn bản được đánh dấu hoặc đánh dấu cho mục đích tham khảo hoặc ký hiệu, do mức độ liên quan của đoạn văn được đánh dấu hoặc tầm quan trọng trong ngữ cảnh kèm theo.

Nguồn: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark

< / blockquote>

Hãy xem một ví dụ!

Mã HTML:

 & lt; p & gt; Thẻ HTML Mark chỉ ra một phần nội dung của tài liệu
 & lt; mark & ​​gt;  có khả năng liên quan đến hoạt động hiện tại của người dùng  & lt; / mark & ​​gt; .
Ví dụ, điều này có thể được sử dụng để chỉ ra các từ phù hợp với
thao tác tìm kiếm. & lt; / p & gt; 

Theo mặc định hiển thị như sau:

Thẻ Dấu HTML cho biết một phần nội dung của tài liệu có khả năng liên quan đến người dùng hoạt động hiện tại. Ví dụ: điều này có thể được sử dụng để chỉ ra các từ phù hợp với thao tác tìm kiếm.

Bạn có thể dễ dàng thay đổi màu đánh dấu văn bản bằng CSS như sau:

 mark {
 màu nền: # c0ffc8;
} 

sẽ thay đổi màu đánh dấu thành màu như thế này.

Hiệu ứng chữ tô sáng CSS đơn giản

Bên cạnh dấu & lt; & gt; thẻ HTML tiêu chuẩn hãy đánh dấu một số văn bản bằng cách gói nó trong thẻ & lt; span & gt; và áp dụng lớp đánh dấu CSS của riêng chúng tôi. Hãy gọi lớp đánh dấu CSS là .simple-highlight và chúng ta giữ cho nó đơn giản, về cơ bản thực hiện tương tự như thẻ HTML & lt; mark & ​​gt; .

Mã HTML:

 & lt; p & gt; & lt; span class = "simple-highlight" & gt; màu phổ biến nhất cho
bút đánh dấu màu vàng & lt; / span & gt ;, nhưng chúng cũng có màu cam,
các loại màu đỏ, hồng, tím, xanh lam và xanh lục. & lt; / p & gt; 

Mã CSS:

 .simple-highlight {
 background-color: màu vàng;
 đệm lót: 0,1em 0,2em;
} 

và kết quả trông giống như sau:

Màu phổ biến nhất cho bút đánh dấu là màu vàng, nhưng chúng cũng có ở các loại màu cam, đỏ, hồng, tím, xanh lam và xanh lục .

Tôi đã thêm một khoảng đệm nhỏ vì tôi muốn văn bản được tô sáng có thêm một chút “không khí để thở”.

Và bây giờ là phần thú vị:

< p> Hãy xem một số cách tạo một số hiệu ứng văn bản tô sáng CSS thú vị khác nhau!

Hiệu ứng văn bản tô sáng CSS trên ruy-băng

Hiệu ứng văn bản tô sáng ruy-băng làm nổi bật văn bản bằng cách sử dụng phần tử giả CSS : before được thêm vào bên dưới văn bản mà chúng ta muốn đánh dấu. Các đầu của hộp đánh dấu trông giống như kết thúc của dải băng, vì vậy tôi đặt tên hiệu ứng văn bản đánh dấu CSS này là Đánh dấu ruy-băng .

Hãy xem mã HTML: < / p>

 & lt; p & gt; Ribbon & lt; span class = "ribbon-highlight" & gt; Đánh dấu văn bản & lt; / span & gt; Hiệu ứng & lt; / p & gt; 

Mã CSS:

 .ribbon-highlight {
  chức vụ: thân nhân;
  lề: 0,1em;
}
.ribbon-highlight: trước {
  Nội dung:"";
  z-index: -1;
  trái: -0,5em;
  đầu: 0,1em;
  chiều rộng đường viền: 0,5em;
  border-style: chắc chắn;
  viền-màu: xanh nhạt;
  vị trí: tuyệt đối;
  chiều rộng: 100%;
  viền-trái-màu: trong suốt;
  viền-phải-màu: trong suốt;
} 

Không cần giải thích nhiều ở đây. Bạn có thể thay đổi màu đánh dấu văn bản bằng cách thay đổi thuộc tính border-color trong CSS.

Hiệu ứng dải băng đạt được bằng cách sử dụng thủ thuật CSS liên quan đến việc sử dụng đường viền để tạo hình tam giác. Nếu bạn muốn tìm hiểu thêm về điều đó, hãy xem hướng dẫn CSS Triangle tuyệt vời của tôi.

Hiệu ứng chữ nổi bật CSS mũi tên

Mã HTML:

 & lt; p & gt; Mũi tên & lt; span class = "arrow-highlight" & gt; Đánh dấu Văn bản & lt; / span & gt; Hiệu ứng & lt; / p & gt; 

Mã CSS:

 .arrow-highlight {
  chức vụ: thân nhân;
  lề: 0 0,5em;
  đệm lót: 0 0,2em;
}
.arrow-highlight: before {
  Nội dung:"";
  z-index: -1;
  trái: -0,5em;
  đầu: 0,1em;
  chiều rộng đường viền: 0,5em;
  border-style: chắc chắn;
  viền-màu: cam;
  vị trí: tuyệt đối;
  chiều rộng: calc (100% - 0,5em);
  viền-trái-màu: trong suốt;
}

.arrow-highlight: sau {
  Nội dung:"";
  z-index: -1;
  đúng: 0;
  đầu: 0,1em;
  chiều rộng đường viền: 0,5em;
  border-style: chắc chắn;
  viền-màu: cam;
  vị trí: tuyệt đối;
  border-top-color: trong suốt;
  viền-dưới-màu: trong suốt;
  viền-trái-màu: trong suốt;
  biến đổi: xoay (180deg);
  biến đổi-origin: center right;
} 

Hiệu ứng văn bản tô sáng CSS mũi tên là một biến thể của hiệu ứng tô sáng dải băng. Sử dụng thêm phần tử giả : after Tôi đang thêm đầu mũi tên cũng bằng thủ thuật CSS tam giác như trên. Một lần nữa, bạn có thể dễ dàng thay đổi màu của hiệu ứng tô sáng văn bản bằng cách thay đổi border-color .

Hiệu ứng văn bản tô sáng đường viền

Mã HTML:

 & lt; p & gt; Border & lt; span class = "border-highlight" & gt; Đánh dấu Văn bản & lt; / span & gt; Hiệu ứng & lt; / p & gt; 

Mã CSS:

 .border-highlight {
  border: 2px gạch ngang màu đỏ;
  đệm lót: 0,03em 0,25em;
} 

Hiệu ứng tô sáng đường viền đứt nét đơn giản này rất dễ thực hiện nhưng trông rất đẹp.

Sketch CSS Highlight Text Effect

< p> Mã HTML:

 & lt; p & gt; Sketch & lt; span class = "sketch-highlight" & gt; Highlight Text & lt; / span & gt; Hiệu ứng & lt; / p & gt; 

Mã CSS:

 .sketch-highlight {
  chức vụ: thân nhân;
}

.sketch-highlight: trước {
  Nội dung:"";
  z-index: -1;
  trái: 0em;
  đầu trang: 0em;
  chiều rộng đường viền: 2px;
  border-style: chắc chắn;
  màu viền: darkblue;
  vị trí: tuyệt đối;
  viền-phải-màu: trong suốt;
  chiều rộng: 100%;
  chiều cao: 1em;
  biến đổi: xoay (2deg);
  độ mờ: 0,5;
  bán kính biên giới: 0,25em;
}

.sketch-highlight: sau {
  Nội dung:"";
  z-index: -1;
  trái: 0em;
  đầu trang: 0em;
  chiều rộng đường viền: 2px;
  border-style: chắc chắn;
  màu viền: darkblue;
  viền-trái-màu: trong suốt;
  border-top-color: trong suốt;
  vị trí: tuyệt đối;
  chiều rộng: 100%;
  chiều cao: 1em;
  biến đổi: xoay (-1deg);
  độ mờ: 0,5;
  bán kính biên giới: 0,25em;
} 

Đối với hiệu ứng đánh dấu văn bản này, tôi đã cố gắng tạo kiểu đánh dấu trông giống như các bản phác thảo nguệch ngoạc được tạo xung quanh các từ được đánh dấu bằng bút bi màu xanh lam. Tôi nghĩ nó trông khá đẹp, giống như chữ viết tay.

Hiệu ứng được tạo thành từ hai phần tử giả : before : after , sử dụng border-radius để tạo đường viền tròn và biến đổi xoay với giá trị nhỏ để thêm hiệu ứng phác thảo doodle viết tay đó vào vùng đánh dấu văn bản CSS.

Phần đánh dấu văn bản màu là darkblue để bắt chước bút bi và tôi cũng giảm opacity một chút. Bạn có thể thử với các cài đặt và có được hiệu ứng văn bản tô sáng CSS phác thảo của riêng mình.

Hiệu ứng văn bản tô sáng CSS trong phác thảo vòng tròn

Mã HTML:

 & lt; p & gt; Phác thảo vòng tròn & lt; span class = "circle-sketch-highlight" & gt; Đánh dấu văn bản & lt; / span & gt; Hiệu ứng & lt; / p & gt; 

Mã CSS:

 .circle-sketch-highlight {
  chức vụ: thân nhân;
}

.circle-sketch-highlight: before {
  Nội dung:"";
  z-index: -1;
  trái: -0,5em;
  đầu trang: -0.1em;
  chiều rộng đường viền: 2px;
  border-style: chắc chắn;
  viền-màu: đỏ;
  vị trí: tuyệt đối;
  viền-phải-màu: trong suốt;
  chiều rộng: 100%;
  chiều cao: 1em;
  biến đổi: xoay (2deg);
  độ mờ: 0,7;
  bán kính biên giới: 50%;
  đệm lót: 0,1em 0,25em;
}

.circle-sketch-highlight: after {
  Nội dung:"";
  z-index: -1;
  trái: -0,5em;
  đầu: 0,1em;
  đệm lót: 0,1em 0,25em;
  chiều rộng đường viền: 2px;
  border-style: chắc chắn;
  viền-màu: đỏ;
  viền-trái-màu: trong suốt;
  border-top-color: trong suốt;
  vị trí: tuyệt đối;
  chiều rộng: 100%;
  chiều cao: 1em;
  biến đổi: xoay (-1deg);
  độ mờ: 0,7;
  bán kính biên giới: 50%;
} 

Hiệu ứng tô sáng này tương tự như hiệu ứng phác thảo với sự khác biệt là hiệu ứng này trông giống như các từ được tô sáng được khoanh tròn bằng bút bi màu đỏ. Bạn có thể thay đổi màu của hiệu ứng văn bản đánh dấu bằng cách thay đổi border-color .

Hiệu ứng văn bản đánh dấu CSS đánh dấu thực tế

Đối với hiệu ứng nổi bật này, tôi đang sử dụng một thủ thuật bổ sung: bộ lọc SVG. Tôi cần điều này để tạo các cạnh lượn sóng của hộp đánh dấu xung quanh văn bản.

Mã HTML:

 & lt; p & gt; Realistic Marker & lt; span class = "real-marker-highlight" & gt; Đánh dấu văn bản & lt; / span & gt; Hiệu ứng & lt; / p & gt; 

Mã CSS:

 .realistic-marker-highlight {
  chức vụ: thân nhân;
}

.realistic-marker-highlight: before {
  Nội dung:"";
  màu nền: # ff6db7;
  chiều rộng: 100%;
  chiều cao: 1em;
  vị trí: tuyệt đối;
  z-index: -1;
  filter: url (# marker-shape);
  trái: -0,25em;
  đầu: 0,1em;
  đệm lót: 0 0,25em;
} 

Và Mã bộ lọc SVG:

 & lt; svg xmlns = "// www.w3.org/2000/svg" version = "1.1" class = "svg-filter" style = "display: none;" & gt;
  & lt; defs & gt;
    & lt; filter id = "marker-shape" & gt;
      & lt; feTurbished type = "fractalNoise" baseFrequency = "0 0,15" numOctaves = "1" result = "warp" / & gt;
      & lt; feDisplacementMap xChannelSelector = "R" yChannelSelector = "G" scale = "30" in = "SourceGraphic" in2 = "warp" / & gt;
    & lt; / filter & gt;
  & lt; / defs & gt;
& lt; / svg & gt; 

Mã SVG có thể được thêm một cách an toàn ngay bên trong mã HTML của trang mà bạn muốn sử dụng hiệu ứng văn bản đánh dấu CSS đánh dấu thực tế này.

Lưu ý rằng Bộ lọc SVG có ID marker-shape và tôi đang tham chiếu bộ lọc này theo ID trong mã CSS filter: url (# marker-shape); . Không đi quá nhiều chi tiết, bộ lọc SVG hoạt động giống như một bản đồ dịch chuyển hoặc hiệu ứng biến dạng trên hộp đánh dấu. Tôi đã sử dụng hiệu ứng tương tự trên trình tạo văn bản lượn sóng trực tuyến của mình.

Tôi nghĩ rằng bộ lọc SVG là một công cụ rất mạnh, nhưng đôi khi sử dụng phức tạp. Nếu bạn muốn tìm hiểu thêm về những gì bạn có thể làm với chúng, hãy xem bộ lọc SVG của phông chữ thập niên 80 của tôi.

Cách làm nổi bật văn bản trong các công cụ khác

Bên cạnh việc đánh dấu văn bản trong HTML và CSS, còn có các công cụ hoặc phần mềm khác mà bạn có thể muốn đánh dấu các phần của văn bản.

Hãy nhanh chóng xem một vài ví dụ và giải pháp cho những trường hợp đó:

Làm thế nào để đánh dấu văn bản trong Photoshop?

Thành thật mà nói, việc tạo hiệu ứng văn bản nổi bật trong Photoshop không dễ như bạn nghĩ. Đi vào hướng dẫn về cách tô sáng văn bản trong Photoshop nằm ngoài phạm vi của bài viết này, nhưng tôi sẽ cho bạn biết cách tôi thực hiện.

Tôi sử dụng hành động Photoshop miễn phí này để Tô sáng Văn bản trong Photoshop . Bạn tải xuống, cài đặt và chỉ với một cú nhấp chuột, bạn có thể tô sáng văn bản trong Photoshop với một số hiệu ứng khác nhau. Hành động này được thực hiện bởi PhotoshopSupply.com, một trang web có rất nhiều Photoshop miễn phí .

Cách làm nổi bật văn bản trực tuyến ?

Có, bạn thậm chí có thể đánh dấu văn bản trực tuyến. Đối với điều này, tôi sử dụng MockoFun công cụ đánh dấu văn bản trực tuyến . Theo tôi, tùy chọn này tốt hơn nhiều so với việc sử dụng Photoshop hoặc bất kỳ công cụ thiết kế đồ họa nào khác.

Cách làm nổi bật văn bản trong Word, LibreOffice hoặc Open Office?

Chỉ cần chọn văn bản bạn muốn đánh dấu và sử dụng Công cụ đánh dấu . Chọn một màu và bạn XONG!

Kết luận

Nếu bạn muốn đánh dấu văn bản trong các trang HTML, bây giờ bạn có một số kiểu văn bản đánh dấu và mà bạn có thể sử dụng chỉ bằng cách sao chép / dán mã CSS vào trang của mình. Hãy cho tôi biết nếu bạn thích bất kỳ phương pháp đánh dấu văn bản nào bằng cách để lại bình luận bên dưới.

Google+

LinkedIn

Bạn cũng có thể quan tâm đến


Xem thêm những thông tin liên quan đến chủ đề làm thế nào để đánh dấu văn bản trong css

Những cách làm center phổ biến trong CSS mà bạn nên biết

  • Tác giả: evondev
  • Ngày đăng: 2022-01-25
  • Đánh giá: 4 ⭐ ( 4955 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 👉 Những cách làm center phổ biến trong CSS mà bạn nên biết

    ------ Tham khảo các khóa học của mình:
    🔥 Khoá học HTML CSS cơ bản: https://evondev.com/khoa-hoc-html-css
    🔥 Khóa học HTML CSS nâng cao: https://evondev.com/khoa-hoc-huong-dan-cat-psd
    🔥 Khóa học Javascript cơ bản đến nâng cao: https://evondev.com/khoa-hoc-javascript-co-ban

    ------ Kết nối với mình
    🤝 Fanpage: https://www.facebook.com/evondevblog/
    🤝 Facebook: https://www.facebook.com/tuan.trananh.0509
    🤝 Blog: https://evondev.com
    🤝 Group: https://www.facebook.com/groups/2565163230401512
    🤝 Tiktok: https://tiktok.com/@evon.dev

    ------ Source code
    💻 Github: https://github.com/evondev/youtube

    ------ Ủng hộ mình làm videos nha
    🙏 Donate: https://evondev.com/donate/

Làm cách nào để thêm điểm đánh dấu đằng sau văn bản thông qua CSS để nó trông giống như Instagram-một bên dưới?

  • Tác giả: isolution.pro
  • Đánh giá: 5 ⭐ ( 4799 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Làm cách nào để thay thế văn bản bằng CSS?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 1705 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Hoặc có lẽ bạn có thể bao bọc 'Sự kiện' như sau:
    Facts

    Sau đó…

Tổng hợp các thuộc tính của CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 8724 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp và phân loại tất cả các thuộc tính của CSS theo các nhóm Color, Background và Borders, Box, Text, Fonts, Table, Animation, Transform, Transition, v.v.

Lưu ý về background và định dạng văn bản trong CSS

  • Tác giả: expressmagazine.net
  • Đánh giá: 5 ⭐ ( 7218 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS sử dụng thì khá dễ nhưng để dùng như thế nào cho đúng chuẩn, đúng ý đồ, mục đích và sao cho tối ưu nhất thì quả thật là không dễ dàng chút nào. Bài hôm nay sẽ cho bạn một vài điều cần chú ý để giúp bạn định dạng CSS hiệu quả hơn áp dụng vào định dạng CSS trong văn bản.

Font trong CSS

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 8247 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong CSS, đặc tính font xác định font family, độ đậm nhạt, kích thước và kiểu cách cho văn bản.

Highlight text with HTML mark tag

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 5240 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu bạn cần đánh dấu text trong một đoạn văn bản, tôi khuyên bạn nên sử dụng . Đây là thẻ mới của HTML5 giúp xác định văn bản được đánh dấu, sử dụng khi muốn làm nổi bật văn bản của mình.. Tôi...

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  37 Loại cửa sổ bật lên để sử dụng trên trang web của bạn (Hướng dẫn cơ bản) - trang web có cửa sổ bật lên