Ever since mid december I’ve had a few reports of people seeing my blog here 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. Very strange, as I myself am also using Chrome for my main browsing. […]
Tag Archives: text
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 Perspective Text Hover
Nice 3D text effect: To make the hover effect work, each line also contains the contents of the next line. When hovering the original content slides out of view and the contents of the next line slides in, thus tricking the mind 🙂 CSS Perspective Text Hover →
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) […]
Rotating Words with CSS Animations
Cool effect. Lots of manual work though (per word you have to define a delay) — Now, where are those CSS functions and variables? Rotating Words with CSS Animations →
Scrollorama
The jQuery plugin for doing cool scrolly stuff Really cool scrolly stuff that is. Scrollorama →