For more control over the direction of the gradient, define angle under the linear-gradient() method of the background-image property. This gives more control over the gradient direction − Value 0deg is the "to top" direction Value 90deg is the "to right" direction Value of 180deg is the "to bottom" direction The following is the syntax − background-image: linear-gradient(angle, color-stop1, color-stop2); Set the angle of the linear gradient The following is the code for setting the direction of linear gradients using angles in CSS. .linearGradient { background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow); } ... Read More

Gradients displays the combination of two or more colors. Linear gradients are used to arrange two or more colors in linear formats like top to bottom. Radial gradients appear at center. Linear-Gradient The linear gradient is set using the background-image property. The angle is set as the first parameter. Here is the example − body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div ... Read More

Apply styles to HTML elements with particular attributes using Attribute Selectors in CSS. Let us see which attribute selectors are available with the rules. The [attribute] Selector The [attribute] selector selects elements with a specified attribute. Here, the link with the attribute target is styled − a[target] { background-color: red; color: white; } Example Let us see the example − a[target] { background-color: red; ... Read More

The Fallback color is used to specify the color for a situation when the browser doesn’t support RGBA colors. Some browsers that don’t support fallback colors are Opera. Specify a solid color before a RGBA color so the solid color can still work if the browser doesn’t support the RGBA colors. Set the Fallback Color The following is the code for declaring a fallback color in CSS − background-color: purple; /*fallback color*/ Example Let us see an example − body{ ... Read More

Image sprite is used to reduce the number of http requests that makes our site’s load time faster.Following is the code for creating a navigation menu using CSS image sprite −Example Live Demo body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    margin: 0px; } span {    width: 200px;    height: 300px;    background-color: black; } nav {    background-color: black;    height: 50px;    padding-top: 15px;    padding-left: 10px; } nav a {    font-size: 20px;    color: white;    text-decoration: none;    margin-right: 10px; } .home {    width: 32px;    height: 32px; ... Read More

To change layouts based on screen size in CSS, we will create a parent div and wrap other children divs within it. Using Media Queries, the layout of the screen size will be changed. Media Queries is used when you need to set a style to different devices such as tablet, mobile, desktop etc. In this article, we are having four boxes of same width, our task is to change layouts based on screen size in CSS. Steps to Chnage Layouts Based on Screen Size We will be following below mentioned steps to change layouts based on screen size in ... Read More

Media Queries is a CSS technique for different style rules for different size devices such as mobiles, desktops, etc. To set the responsiveness, use the Media Queries concept. Let us see how to create responsive column cards on a web page. We will see various examples for responsive web design The screen sizes are mainly desktop, tablet, and mobile devices. Let us first set the different screen sizes i.e., where we will set the common device breakpoints. Different screen sizes responsiveness Let us see an example where we will set different styles for different devices and display responsiveness The common ... Read More

To enable wrapping of Flex Items using CSS3, the flex-wrap property is used. Set the value wrap to enable wrapping. Enable Wrapping of Flex Items In this example, we enable wrapping of flex items using the flex-wrap: wrap. The following is our flex container − First Div Second Div Third Div We have styled the flex container like the following. The flex-wrap is set to wrap the flex items − .container { height: 300px; display: flex; width: ... Read More

To reorder the individual Flex Items using CSS3, use the order property. Remember, this works only in case of flex items. Let’s say you want to set the 1st flex item as the last, then achieve this using the CSS order property. Set the parent container Set a div container with child divs − First Div Second Div Third Div The flex container Set the above container as a flex using the display property with the value flex − .container { height: 150px; ... Read More

We can easily align the flex items along cross axis, but first let us understand what cross axis is. The cross axis is perpendicular to the main axis. The main axis is like the flex direction − Create a Container div First, set the divs inside a container(flex container) − First Div Second Div Third Div Style the Container and Make it Flexible The flex container becomes flexible by setting the display property to flex. The flex items are aligned using the align-items property − ... Read More