Recently I wanted to create a container which only had a shadow on one edge – the top edge. Here’s a simple approach to achieve it with pure css syntax. Check out the jsfiddle...
Ever had to horizontally center a button only to find that unless you give it a fixed width, it wont center align. For example, it is not uncommon to find the below code being...
Specificity allows browsers to decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity only applies when the same element is targeted by multiple declarations. Inline...
If you have ever had to pull your hair out over why the max-width property is not having any effect on your markup in internet explorer, the solution is quite simple, yet baffling. It...
Have you ever wanted to align the text next to an image vertically? It can be done using vertical-align property as shown below. Here, we show how to align the text to top, middle,...
I use the following css reset in almost all my projects. It does the job for me. I hope it helps you, too. [codepen_embed height=”266″ theme_id=”0″ slug_hash=”YqvbwN” default_tab=”result” user=”kavitshah8″]See the Pen simple css reset...
CSS transform allows us to modify the coordinate space of any element. transform can have one of the following functions as its value : rotate skew scale matrix translate perspective Using the translate function...
Nowadays, circular profile pictures are very popular. It’s really simple to create the circular profile picture from a given square image using border-radius. Following example, renders an original square image as well as the...
Let’s see the example on horizontally aligning the text using text-align: center as shown in the below pen. [codepen_embed height=”345″ theme_id=”0″ slug_hash=”ONEPKQ” default_tab=”css,result” user=”kavitshah8″]See the Pen horizontally-aligned by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed] To...
pseudo elements They allow you to style certain parts of a document. For example, you can style the first letter of each paragraph. MDN list of pseudo elements The following video demonstrates the pseudo...
