![]() The outline-width property is used to set the width of the outline. 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. You can set the following outline properties using CSS. 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. Although text-strokeserves the purpose by uniformly adding a smooth outline, I prefer using text-shadow due to its good browser support. Import name, Prop, CSS property, Theme key. It creates an outline around the selected object, rendering each side the same as the others. ConclusionĪ slight touch of stroke can give a vibrant look to your text. Use border utilities to quickly style the border and border-radius of an element. The outline property is used in CSS and certain HTML elements. The outline-style property specifies the style of the outline, and can have one of the following values: dotted - Defines a dotted outline dashed - Defines a dashed outline solid - Defines a solid outline double - Defines a double outline groove - Defines a 3D grooved outline ridge - Defines a 3D ridged outline inset. There is also a third property text-outline for adding outline to text, but currently it is not supported by any browser. This may seem similar to borders, but there are some things that need to be. Set the text color of different elements Align the text Remove the line under links Decorate the text Control the letters in a text Indent text Specify the space between characters Specify the space between lines Set the text direction of an element Increase the white space between words Specify a. On the other hand, text-shadow is supported by almost all the browsers. Lets now study another interesting topic in CSS, which is outline. 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. ![]() ![]() 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. This way, the border width is not added to the width of an element. As follows from the example, you can use css outline property, to set the border that does not affect the width and height of the element. These were some cool effects which you can add to your text using the above properties. Here is another approach, but this way the border would be outside of the box. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |