Tạo symbols từ ký tự UTF-8 hữu ích.
Trong web design, có một số ký tự UTF-8 giúp thể hiện những symbols(biểu tượng) khá thú vị. Vậy những symbols ở đây là gì? Và chúng giúp ích gì chúng ta trong design web.
Tôi lấy một số ví dụ minh họa để bạn dễ hiểu :
Ví dụ nút Readmore : Readmore »
Ví dụ nút Open down : Opendown ▾
Những biểu tượng thể hiện đằng sau chữ Readmore và Opendown đều được tạo ra từ những HTML entity hoặc tạo từ CSS Escape(những ký tự đại diện giúp thể hiện biểu tượng)
Tạo từ HTML Entity :
- Để thể hiện được chữ Readmore như vậy thì trong HTML code sẽ như sau :
<a href="http://www.blogger.com/blogger.g?blogID=2675988509605318637#" style="background: #f1f1f1; border-radius: 3px; border: 1px solid #eee; padding: 3px 5px;">Readmore »</a>
- Để thể hiện được chữ Opendown như vậy thì trong HTML code sẽ như sau :
<a href="http://www.blogger.com/blogger.g?blogID=2675988509605318637#" style="background: #f1f1f1; border-radius: 3px; border: 1px solid #eee; padding: 3px 5px;">Opendown ▾</a>
Những ký tự màu đỏ trong mã HTML trên giúp ta thể hiện những biểu tượng đó.
Tạo từ CSS Escape :
- Để thể hiện được chữ Readmore như vậy thì ta có thể sử dụng với CSS như sau :
<a class="btn-readmore">Readmore</a>
<style type="text/css">
a.btn-readmore {background: #f1f1f1; border-radius: 3px; border: 1px solid #eee; padding: 3px 5px;}
a.btn-readmore:after {content:" \bb"}</style>
Bạn để ý vào dòng CSS màu đỏ trên : a.btn-readmore:after {content:" \bb"} : Đây là CSS giúp thêm nội dung (dạng text) đằng sau chữ Readmore. Ký tự đại diện \bb chính là CSS Escape giúp bạn tạo ra biểu tượng đằng sau chữ Readmore.
- Tương tự, ta cũng thể hiện chữ Opendown với CSS như sau :
<a class="btn-opendown">Readmore</a>
<style type="text/css">
a.btn-opendown{background: #f1f1f1; border-radius: 3px; border: 1px solid #eee; padding: 3px 5px;}
a.btn-opendown:after {content:" \25be"}</style>
Mã \25be chính là CSS Escape.
Ngoài ra chúng ta còn có rất nhiều ký tự HTML khác khá hữu ích. Tùy vào mục đích mà bạn có thể sử dụng những ký tự này cho phù hợp.
Xem thêm mã HTML Entities khác :
- Character Name
- HTML Entity
- CSS Escape
- Neutral double quote – use only for source code display "
- "
- \22
- Ampersand &
- &
- \26
- Neutral single quote – use only for source code display '
- '
- \27
- Lesser than <
- <
- \3c
- Greater than >
- >
- \3e
- No-break space
-  
- \a0
- Copyright ©
- ©
- \a9
- Opening double angle quote «
- «
- \ab
- Interpunct – interword separation ·
- ·
- \b7
- Closing double angle quote »
- »
- \bb
- Multiplication sign – close ×
- ×
- \d7
- Division sign ÷
- ÷
- \f7
- Greek small letter pi – Archimedes’ constant π
- π
- \3c0
- Greek small letter phi – golden ratio φ
- φ
- \3c6
- Cyrillic capital letter i – NIИ И
- И
- \418
- Kannada letter ttha – look of disapproval ಠ
- ಠ
- \ca0
- En dash – range, connection, compound words –
- –
- \2013
- Em dash – break in narrative, missing info —
- —
- \2014
- Opening single quote ‘
- ‘
- \2018
- Closing single quote, apostrophe ’
- ’
- \2019
- Opening double quote “
- “
- \201c
- Closing double quote ”
- ”
- \201d
- Ellipsis …
- …
- \2026
- Single prime – minutes or feet ′
- ′
- \2032
- Double prime – seconds or inches ″
- ″
- \2033
- Trademark ™
- ™
- \2122
- Leftwards arrow ←
- ←
- \2190
- Upwards arrow ↑
- ↑
- \2191
- Rightwards arrow →
- →
- \2192
- Downwards arrow ↓
- ↓
- \2193
- North west arrow ↖
- ↖
- \2196
- North east arrow ↗
- ↗
- \2197
- South east arrow ↘
- ↘
- \2198
- South west arrow ↙
- ↙
- \2199
- Minus sign −
- −
- \2212
- Infinity ∞
- ∞
- \2227
- Full block – censorship █
- █
- \2588
- Smile ⌣
- ⌣
- \2323
- Up-pointing triangle ▲
- ▲
- \25b2
- Up-pointing small triangle ▴
- ▴
- \25b4
- Right-pointing triangle ▶
- ▶
- \25b6
- Right-pointing small triangle ▸
- ▸
- \25b8
- Down-pointing triangle ▼
- ▼
- \25bc
- Down-pointing small triangle ▾
- ▾
- \25be
- Left-pointing triangle ◀
- ◀
- \25c0
- Left-pointing small triangle ◂
- ◂
- \25c2
- Smiling face ☺
- ☺
- \263a
- Heart ♥
- ♥
- \2665
- Medium left-pointing angle bracket ornament ❬
- ❬
- \276c
- Medium right-pointing angle bracket ornament ❭
- ❭
- \276d
- Heavy left-pointing angle quotation mark ornament ❮
- ❮
- \276e
- Heavy right-pointing angle quotation mark ornament ❯
- ❯
- \276f
- Heavy left-pointing angle bracket ornament ❰
- ❰
- \2770
- Heavy right-pointing angle bracket ornament ❱
- ❱
- \2771
- Apple logo – depends on OS
- 
- \f8ff
- Zero width no-break space
- 
- \feff
Minh Anh - Erhay. Vui lòng ghi rõ nguồn Erhay khi bạn phát hành thông tin từ trang này.
- Rất vui khi được mọi người nhận xét, đóng góp ý kiến để bài viết chất lượng hơn.
- Các ý kiến mang nội dung xấu, tính chất spam, chia rẽ, vi phạm sẽ bị xóa mà không nhắc nhở.
- Comment và share bài viết nếu bạn cảm thấy hay và thú vị.
- Không quên ghi lại nguồn erhay khi bạn phát hành lại thông tin từ trang này.