In this article I will go over some simple CSS techniques that add that ‘extra touch’ to virtually any website. These CSS properties are compatible with most modern browsers and are easy to implement. There are many ways you can style these, so please don't be limited by some of the examples that I provide. Comment and let me know if these are helpful to you and show off your work where you have used these!
text-shadow:(the drop shadow example)
text-shadow property is fairly self-explanatory. It creates a shadow under your specified text. Example here shows this element creating a small shadow with a 1px offset on both x and y axis and another one with a 2px offset on both axis as well as 5px shadow "blur".
text-shadow: #000 1px 1px 0;
rgba (0,0,0,0.15)– this means you are using black color @ 15% opacity.
text-shadow property can be used to create a pretty neat "deboss" effect. Instead of using a darker value for your shadow, use a brighter one. It should be brighter than your background color in this case, otherwise the effect won't be visible.
text-shadow: #B1B1B1 1px 1px 0;
In case your design has room for things like rounded corners on pretty much any CSS element that supports borders, then this is for you. Add the following code to get a 2px radius on all four cornersof text fields and button.
Another great trick that can be achieved by using only CSS. You may apply transparency to any HTML element. The code below will apply 50% opacity to whatever element you specify.
Enjoyed what you saw? Stay updated by following me.