Will Boyd digs into the user-select CSS property: CSS lets you control how text selection behaves and appears on your pages. This can help you improve usability in certain situations and add a little bit of visual flair. Let’s dive in! His posts includes a very nice hack to make user-select: all; work only at […]
Tag Archives: text
Multi-line Highlights in CSS
The key CSS property you’re looking for is display: inline;, as set on the p elements, along with some box-decoration-break clone; where needed 😉
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 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 →