Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Web Development Articles
Page 593 of 801
How to create CSS3 Box and Text Shadow Effects?
CSS3 provides powerful shadow effects through the text-shadow and box-shadow properties. These allow you to add depth and visual appeal to text and elements on your web page. Text Shadow The text-shadow property adds shadow effects to text elements. Let us see the syntax − text-shadow: h-shadow v-shadow blur-radius color; The parameters are − h-shadow − Set the horizontal offset of the shadow v-shadow − Set the vertical offset of the shadow blur-radius − Set the blur radius (optional) color − Set the shadow color (optional) Basic Text Shadow ...
Read MoreCSS3 Transparency and Gradients
Linear gradients are used to arrange two or more colors in linear formats like top to bottom, left to right, or diagonally. To add transparency, use the rgba() function and define the color stops. At least two color stops should be mentioned. Syntax selector { background-image: linear-gradient(direction, color-stop1, color-stop2, ...); } The direction can be: to left − Right to Left to right − Left to Right to bottom right − Diagonal (top-left to bottom-right) to bottom − Top to Bottom (default) Example 1: Transparent Gradient (Right to ...
Read MoreSetting Direction of Linear Gradients using Angles in CSS
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 180deg is the "to bottom" direction Value 270deg is the "to left" direction Syntax background-image: linear-gradient(angle, color-stop1, color-stop2); Example: Basic Linear Gradient with Angles The following example demonstrates how to set the direction of linear gradients using angles − ...
Read MoreUsing the CSS3 Linear and Radial Gradients
CSS gradients display smooth transitions between two or more colors. Linear gradients create color transitions along a straight line, while radial gradients radiate outward from a central point in circular or elliptical patterns. Syntax /* Linear Gradient */ background-image: linear-gradient(direction, color1, color2, ...); /* Radial Gradient */ background-image: radial-gradient(shape size at position, color1, color2, ...); Linear Gradients Linear gradients are created using the background-image property with linear-gradient(). You can control the direction using angles or keywords like to right, to bottom. Example: Linear Gradient with Angles The following example demonstrates linear ...
Read MoreStyling Forms with CSS Attribute Selectors
CSS attribute selectors allow you to apply styles to HTML elements based on the presence or value of their attributes. This is particularly useful for styling forms, where you can target specific input types, required fields, or elements with particular attributes. Syntax /* Basic attribute selector */ element[attribute] { property: value; } /* Attribute with specific value */ element[attribute="value"] { property: value; } /* Attribute containing value */ element[attribute*="value"] { property: value; } The [attribute] Selector The [attribute] selector selects elements with a specified attribute, regardless of its value. Here, links with ...
Read MoreDeclaring a Fallback Color in CSS
CSS fallback colors provide a safety net when browsers don't support modern color formats like RGBA or newer color functions. By declaring a solid color first, followed by the preferred color with transparency or advanced features, you ensure your design works across all browsers. Syntax selector { background-color: fallback-color; background-color: preferred-color; } How Fallback Colors Work Browsers read CSS properties from top to bottom. If a browser doesn't understand the second declaration, it uses the first one. Modern browsers that support the advanced color format will ...
Read MoreCreating a Navigation Menu using CSS Image Sprite
CSS image sprite is a technique that combines multiple images into a single image file to reduce HTTP requests, making your website load faster. By using CSS background positioning, you can display specific parts of the sprite image for different navigation elements. Syntax .element { background: url("sprite-image.png") x-position y-position; width: element-width; height: element-height; } Example The following example demonstrates how to create a navigation menu using CSS image sprite − body { ...
Read MoreChanging Layouts Based on Screen Size using CSS
To change layouts based on screen size in CSS, we use Media Queries to create responsive designs that adapt to different devices such as tablets, mobiles, and desktops. This technique allows us to modify element dimensions and positioning based on screen breakpoints. Syntax @media screen and (max-width: breakpoint) { selector { property: value; } } Steps to Change Layouts Based on Screen Size We will follow these steps to create a responsive layout − ...
Read MoreReordering Individual Flex Items using CSS3
The CSS order property allows you to reorder individual flex items without changing their HTML structure. This property only works on flex items and accepts integer values to determine the visual order. Syntax .flex-item { order: integer; } Possible Values ValueDescription integerAny positive or negative integer. Default is 0. 0Default value (normal document order) Example: Reordering Flex Items The following example demonstrates how to reorder flex items using the order property. The third div will appear first, followed by the first div, then the second div ...
Read MoreAlign Flex Items along Cross Axis using CSS3
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 − Main Axis (flex-direction: row) Cross Axis ...
Read More