The new CSS3 properties give developers a wonderful chance to enhance their designs in a way that’s quick and easy, yet visually impressive. To give a website a visually impressive look, designers put emphasis on neat and stylish typography. For years designers have depended on Photoshop, but CSS3 is a revolution with easy-to-create text effects. Almost all of the major browsers now support most of the CSS3 features so that’s another reason for mastering the new techniques.
Other useful CSS articles:
- CSS3 Quick Tip: Rounded Corners
- 5 Useful CSS3 Properties You Need to Know
- CSS Frameworks: Easy Ways To Keep Your Website in Style
CSS3 Text Shadow
Text shadows sound a little tacky, but it all depends how they are executed. Shadows could definitely be put to good use in headings and titles.
Text Shadows Syntax:
text-shadow: horizontal-offset vertical-offset blur color;
<!DOCTYPE html> <html> <head> <style type="text/css"> h1 { text-shadow: 8px 8px 8px #0000FF; } </style> </head> <body> <h1>CSS3 Text Shadow Effect</h1> </body> </html>
Letterpress Text Shadow
The great thing about text-shadows is that you can actually do a lot more with them than your average drop shadow. For instance, here’s a quick trick for creating the illusion of inset text.
body { background: #222; } h1 { color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); }
CSS3 Word Wrapping
The new word wrapping ability allows you to force the text to wrap – even if it means splitting it mid-word. The code is incredibly straight forward:
.textWrap { word-wrap: break-word; }
Web Fonts
An example of how this could be achieved would be:
@font-face { font-family: 'Name of the new font'; src: url('https://www.tutorialchip.com/fonts/font.ttf'); }
Important Text Effect Properties
text-shadow – Adds shadow to text
text-wrap – Specifies line breaking rules for text
word-break – Specifies line breaking rules
text-outline – Specifies a text outline
word-wrap – Allows long, unbreakable words to be broken and wrap to the next line
text-justify – Specifies the justification method used when text-align is ‘justify’
text-overflow – Specifies what should happen when text overflows the containing element
text-emphasis – Applies emphasis marks, and the foreground color of the emphasis marks, to the element’s text
text-align-last – Describes how the last line of a block or a line right before a forced line break is aligned when text-align is ‘justify’
In Closing
All these CSS3 text effects are great when used in a subtle way, enhancing the typographic layout of the page. Now every browser supports CSS3 properties, so designers can now create smart web designs in a few minutes with CSS3. Leave a comment below and let us know what you think of the text effects above. Which one is your favorite?