I came across a great CodePen demo with a mixin that made my life much easier when producing the raised lettering effect. Recreating the outline and shadow effects were relatively simple. I focussed on using :hover, but there’s no reason that the CSS couldn’t later be modified slightly to work better on touch devices. Seeing a bit of a challenge, I decided to try and recreate a similar looking effect using just CSS, animating it on hover. While trawling Dribbble for some design inspiration, I came across this shot by Kickass Factory. Using it in this way can create some beautiful effects. Taking things furtherĪn alternative use of text-shadow that I’ve seen a number of times is to give text the illusion of being raised up in 3d or to create an embossed look to the text. Comparing text-shadow and text-stroke when adding an outline or stroke to some text. See the Pen Comparing text-shadow to text-stroke by Ashley Watson-Nolan ( on CodePen. Being able to control the positioning of the stroke would make the property much more useful.īelow is an example showing how text-shadow and text-stroke compare in practice when attempting to create a stroke effect on some text. If you want a stroke that extends from the outer edge of your text, text-stroke leaves you flat out of luck – it will instead always intrude on the inner edge of the font as it is applied as a centered stroke. More frustrating than it’s support is the way in which text-stroke is implemented currently you cannot control where in relation to the edge of the text the stroke is applied. If you haven’t come across it, the CSS text-stroke property isn’t currently part of any W3C spec and so support for it is still very limited – it’s only currently available when prefixed in webkit. You may be thinking, as I did, that CSS text-stroke may be better suited for this. The following CSS shows how to achieve such an effect: A popular use is to layer text-shadows on top of one another to create an outline – or stroke – around the text. In most circumstances, the only way to create stunning text effects with text-shadow is to apply more than one to the text. A word with a simple text-shadow effect applied. See the Pen gbRZpo by Ashley Watson-Nolan ( on CodePen. Unlike box-shadow, you cannot specify the spread of the shadow, making applying just a single text-shadow to a piece of text fairly limited in what you can actually achieve. When applying text-shadow to your text, you can specify a color for your shadow, a shadow offset (x and y positions) and a blur radius. Exploring the propertyīrowser support for CSS text-shadow is excellent, but the way in which it’s defined makes it a little bit of a strange property. Last week, I decided I’d take a look at the humble text-shadow. Whenever I get some downtime in work, I try to play around with a front-end technology that I may not have used too much in the past and see what potential it might have for creating some cool effects. Front-end development Blog and Portfolio for Ashley Watson-Nolan – Senior UI Engineer at Just
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |