4 CSS properties every smart developer should know
There are CSS properties that are not commonly used and I am going to cover 4 of them in this post. If this post gets your love and appreciation I will be covering other CSS properties too.
Ellipsis
Consider a situation where we have a paragraph with a heading and you do not want that heading to exceed 1 line and your data is dynamic so you don’t know how much characters will be in that heading. If heading is exceeding one line it shall have a ellipse (…) 3 dots at the end of line and it shall ignore all text on next lines saying that its longer than one line and it wont actually wrap like this. In CSS we have a property text-overflow which allows us to do exactly this by default text-overflow is set to clip.
In above example you can clearly see that we have alot more text in our header section but with help of our CSS we are just showing the part that can be contained in first line and all other lines are being ignored. But in our browser elements it can clearly be seen that it has not modified the text itself but just changed how it shall display. We cannot achieve this state without white-space and overflow properties.
If we didn’t know about this property maybe we were programmatically handling things like with adding a javascript function to to save a string of specific length and showing it in a variable.
I bet this CSS property will next time save you alot of hardwork.
Text Shadow & Text Glow
I believe you might have used box-shadow property like box-shadow property we also have text-shadow property for our inline text.
text-shadow: x-offset y-offset blur color;
i.e. text-shadow: 0px 0px 5px blue;
If you want to just give glow to your text you can use above example. Attaching screenshot below
If you want to drop a shadow you can just play around with this property. Attaching a screenshot below.
Background Clip
With this property of clipping an image to text you can also clip videos behind your text and it will give a very nice look.
If you want to do it without css you may have to use graphic designing tool like adobe photoshop or adobe illustrator, but with using achieving this goal is just a 10 seconds job.
All property
If you want to reset an element you can just use all property of CSS and give it value “initial” it will reset all the properties on that element you may also use it on class or id.
As shown in example below all has reset all the CSS properties that we assigned to h1 in lines 7–13
all: initial is useful for overriding bootstrap
This post is inspired by Web Dev Simplified.
