Chrome vs. WordPress: All Text Showing as Glyphs / Symbols 🀯

Ever since mid december I’ve had a few reports from people that they were seeing my blog – the thing you’re reading now – rendered in unreadable text. Instead of seeing a nice serif font, they got presented with some wingdings-like symbols for all the text when visiting through Chrome on macOS. Hmm, unreadable on […]

Text Effect Generator

Nice tool to generate custom text effects such as underline, strikethrough, italic, small caps, circles, upside down, etc. The tool does not use custom fonts, but translates your entered text to other UTF-8 code points which have the effect built in β€” πŸ„»πŸ„ΈπŸ„ΊπŸ„΄ πŸ…ƒπŸ„·πŸ„ΈπŸ…‚, πŸ„΅πŸ„ΎπŸ… πŸ„΄πŸ…‡πŸ„°πŸ„ΌπŸ„ΏπŸ„»πŸ„΄ 🚨 Before you go wild with it though, don’t […]

Old Typewriter Text Effect

By randomly changing the opacity and adding a little text-shadow, one can create this old typewriter effect: Makes good use of currentColor for the shadow, so it can be applied on any coloured text. Old Typewriter Text Effect → πŸ’β€β™‚οΈ Don’t confuse this effect with a typing carousel which types the letters one-by-one.

Truncating Multi-line Text with CSS

To truncate multiline text in CSS, Safari introduced -webkit-line-clamp a long time ago (first mentions I found date back to 2010). .line-clamp-3 { /* Required declarations: */ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; /* Limit the text block to three lines */ -webkit-line-clamp: 3; } By now the property has been standardised as line-clamp. Firefox […]

CSS Transparent and Outlined Text

For a recent project we did at work I needed outlined text. Using text-shadow you can achieve the desired effect, but one must admit: it’s ugly. Some browsers however (Webkit) support the text-stroke property which gets a much nicer result. Here’s a demo pen: See the Pen CSS Transparent and Outlined Text by Bramus! (@bramus) […]