![]() ![]() It has the same multi-value syntax of the margin shorthand. Although text-shadow does not give good results if the shadow length is greater than 1px, you can always use a combination of text-shadow and text-stroke. The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. Moreover, you can give blur effect with shadows which can add depth to your layout. The latter is not intended for adding outlines, but is a very good CSS hack that gives you the effect you are looking for. The outline-width property is used to set the width of the outline. ![]() Although text-strokeserves the purpose by uniformly adding a smooth outline, I prefer using text-shadow due to its good browser support. You can set the following outline properties using CSS. Add in some semi-transparency with the color and we have our overlay The rest is what happens on :hover. ConclusionĪ slight touch of stroke can give a vibrant look to your text. The trick is to create an outline that’s as thick as half the image size, then offset it by half the image size with a negative value. The effect depends on the border-color value. The following values are allowed: dotted - Defines a dotted border. There is also a third property text-outline for adding outline to text, but currently it is not supported by any browser. The border-style property specifies what kind of border to display. On the other hand, text-shadow is supported by almost all the browsers. This is supported by Chrome, Safari, Opera and Android. Browser SupportĪs discussed earlier, the text-stroke property is supported with the -webkit-prefix by the WebKit-based browsers. In this case the specified width has no matter, even if you specify 10 px width, anyway it will be thin line. If you specify outline: 1px auto certaincolor, youll get thin outer line around div of certain color. ![]() You can come up with more beautiful text stroke effects by combining and altering the values of different properties like color, blur radius, stroke width and so on. A shorthand property for setting outline-width, outline-style, and outline-color in one declaration. There is the solution if you need only outline without border. These were some cool effects which you can add to your text using the above properties. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |