Archive for April, 2012
CSS Text border
Here’s an example of how to implement a border around some text. In this example text-shadow CSS 3 property is used.
1. text-shadow property allows to set a shadow for a one side of text. For example, it’s posssible to set the shadow only for the right side of text. To gain that, the shadow should be with a zero blur size and 1px of horizontal offset.
2. Making a border for a text, we should set a 1px shadow offset for four sides of text leaving a blur size with a zero value.
CSS of the example:
1 2 3 4 5 6 7 8 9 10 |
.test { text-shadow: 1px 0px 0px red, -1px 0px 0px red, 0px 1px 0px red, 0px -1px 0px red; font-size: 400%; font-weight: bold; color: yellow; }? |
Here’s how it looks in your browser:
Text with border!
Try it here http://codepen.io/starikovs/pen/tzFxK.