Tag: css layout

Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not. Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next… Continue reading CSS Layout – display: inline-block

Image overlay is the technique of adding text or images over another base image. Background-image and background CSS properties to add image and linear-gradient overlay effect. Example: { background-image: linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),url(‘images/windmill.jpg’); } position:absolute, top, bottom, right, left CSS properties to control the position of overlay image or text. Example: { position: absolute;} There are two types of overlay: Image overlay – Adding image over… Continue reading CSS image overlay

step-1 First we have to download the required SVG file and save in your folder. Step-2 Then we have to open that file in browser then inspect it to get the svg file like below Step-3 Then, we have to copy that above mentioned svg code which is in red colour to you html code… Continue reading How to change SVG image colour in CSS

The z-index property specifies the stack order of an element. When elements are positioned, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order: Note: z-index only works on positioned elements (position: absolute, position: relative, position:… Continue reading CSS Layout – The z-index Property