CSS Pseudo-Elements

Pseudo-elements can control the styling of specific parts of the elements. The pseudo-elements have a double colon before them and can be used by being added after the selectors like selector::pseudo-element{…} The pseudo-elements supported by CSS are: ::first-line ::first-letter ::after ::before ::selection ::first-line This is to stylize the first line of the text content. You … Read more

CSS Box Sizing

The actual rendered width and height of any element is calculated by including the width and height set along with that of its padding and borders. However, CSS has a way to include these two within the total height and width of the element. This is where Box Sizing comes in picture. Here’s the default … Read more

CSS Media Query

Media query was introduced in CSS3. The feature uses the @media rule which helps us to include certain CSS properties only if some conditions are met. Breakpoint Firstly, we can start with the breakpoints. Even if they’re responsive, the web-pages may, sometimes, not look very good on small screens. To solve this issue, Media Query … Read more

CSS Flexbox Layout Module

CSS had four known layout modes before the Flexbox Layout module was introduced. We had: Block Inline Table Positioned With the help of flexbox or the Flexible Box Layout Module we can easily design a flexible responsive layout structure that does not need float or positioning. Elements To start with, we need to define what … Read more

CSS Multiple Columns

CSS can help you put the text content in multiple columns just like the newspapers do. This makes a large amount of text more presentable and also optimizes the space usage. The multi-column layout is used for this purpose. To achieve the multi-column layout on the web-pages, we need to know about these following properties: … Read more

CSS Styling Images

CSS helps us to style the image elements using various styling properties. We can crop them, add hover effects add animations and transitions etc. Here are some of the popular styling effects we can put on images using CSS Image Borders Changing the border properties of the image can help us crop or display it … Read more

CSS Animations

CSS enables you to apply animated effects to the HTML elements without using any JavaScript or Flash. Basically, the element will change from one state to other gradually giving an effect of aliveness. There are 3 main components to provide the desired animation effect on an element: @keyframes: This rule defines the desired animation effect … Read more

CSS Transitions

Transition is the change from one point to other over a duration of time. CSS uses the transition property to change the values of other property smoothly over a specified time period. There are two things that you need to specify for the transition property: The property that you need to add the transition effect … Read more

CSS Shadows and Text Effects

CSS provide properties namely text-shadow and box-shadow to add shadow to text and to elements respectively. Both have been introduced in CSS3. The default value of the properties is none that means no shadow. CSS Text Shadow As the name suggests, the text-shadow CSS property adds shadows to text. This property is animatable and inherited. … Read more

CSS Gradients

CSS gradients are a special type of images made of a smooth transition between two or more colors progressively. These are generated dynamically and hence replacing the need for traditional raster image files. There are two types of gradients: Linear Gradients The linear-gradient() CSS function creates a transition along a straight line. The repeating-linear-gradient() function … Read more