CSS: Block vs Inline vs Inline-Block

Here are the major differences without any fancy words or pictures: 

Inline: Cannot have a height, width or a vertical margin but can have horizontal margin. Behaves much like floating left.

Block: Can have a height, width and margin. Takes up the entire width and pushes the successive content to next line.

How about Inline-Block? For that, let's understand why the above two display modes are used:

Inline is a display mode that is to be used in a sentence. For instance, if you have a paragraph and want to highlight a single word, you would wrap the particular word with an em or a span tag. It makes sure that the word stays in the same line, as span and em tags are set to display: inline by default. But if you want to use properties like height for the em or span tag, you need to make it display: inline-block to use the properties, and yet keep them on the same line.

Container-type elements (like <div>, <article>, <p>, etc.) are set as block-level elements by default, so the computed value of the display property for these is “block”. All headers (<h1>, <h2>, etc.), even though they generally only contain text content, are likewise block elements by default.

On the other hand, elements that are used to append with content are inline elements. That is, their computed display value is “inline”. These are elements like <span>, <em> and <cite>.

Multiple CSS Transforms on single element

I wanted to rotate an element in CSS and also wanted to mirror it. I thought of flipping the element, wrapping it with another div and then rotating the div. I found that I could do this in a single step by applying multiple transforms on a single element. Here's the syntax (vendor prefixed):

transform:rotate(-45deg) scale(-1, 1);
-ms-transform:rotate(-45deg) scale(-1, 1);
-webkit-transform:rotate(-45deg) scale(-1, 1);

Similarly, you can combine multiple css transformations. Got suggestions/improvements? Do comment below.

One sided Box-Shadow in CSS

The biggest problem that I used to encounter with respect to shadows while coding in CSS after designing in photoshop is that I add shadows towards one side in PS and I found it hard to replicate the same in CSS. There's a very simple solution to that.

There's a fourth property for box-shadow, which is the shadow spread property. I didn't know that something like this existed for quite a long time. An example for its usage is as below:

    -webkit-box-shadow: 10px 0px 5px -2px #888 ;

Set the fourth property negative, as required till you achieve the required one sided effect.

Note: The above example sets a 10px box shadow towards the right and sets the vertical box shadow to 0.

Invert and Mirror X and Y axis using CSS Transforms

To invert or mirror an element (text, image, etc.) you need to use the transform: scale property in CSS. You can choose to laterally (sideways) invert or vertically invert an element.

To invert laterally, use the following code:

transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);

To invert vertically:

transform: scale(1, -1);
-ms-transform: scale(1, -1);
-webkit-transform: scale(1, -1);

To invert both ways:

transform: scale(-1, -1);
-ms-transform: scale(-1, -1);
-webkit-transform: scale(-1, -1);

How to add Custom Fonts in CSS

Today, I was searching the internet to use custom fonts on my website. I got a few links here and there that spoke about how to add fonts that are not supported by default in any browser, but I didn't find the articles convincing. So I planned to write my own article elaborating the use of such fonts on websites.

Basically, we will make use of the @font-face property to load a custom font from the local folder in order to use it. The syntax is as follows:

@font-face { 
font-family: font-name; 
src: url('font-name.ttf'); 
}

Where font-name is the name of the font in your local folder. You need to ensure whether the path of the font is correct (In this example, the font file(s) is assumed to reside in the same folder as that of the CSS file). This causes the CSS to load the font in your browser so that you can use the font just using the font-family property anywhere throughout the page.

As there has been constant wars among browsers with respect to CSS, we need to use more types of the same font to ensure cross-browser compatibility. The following formats will be required for the same:

EOT – Embedded Open Type
OTF – Open Type Format
WOFF – Web Open Font Format
SVG – Scalable Vector Graphics

Once you have obtained the .EOT, .OTF, .WOFF and .SVG formats of the same font, you can modify the @font-family property as follows:

@font-face { 
font-family: 'font-name'; 
src: url('font-name.eot'); 
src: ('font-name.woff') format('woff'), url('font-name.ttf') format('truetype'), url('font-name.svg') format('svg'); 
font-weight: normal; 
font-style: normal; 
}

We add the extra properties font-weight and font-style to ensure that the font is shown in the same manner in all the browsers.

You may now be thinking of how to obtain various formats of the same font. There are some free online generators that can help generate the other formats once toy provide the .TTF or the .OTF file. There are two free online services that generate the necessary formats of the same font: FontSquirrel and Font2Web.