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
Articles by Lakshmi Srinivas
Page 10 of 24
Achieve X-Ray effect with CSS
The X-Ray effect in CSS is an Internet Explorer specific filter that converts colors to grayscale and flattens the color depth, creating a distinctive visual appearance similar to an X-ray image. Syntax selector { filter: Xray; } Parameters Parameter Description Xray Grayscales and flattens the color depth of the element Example The following example demonstrates how to apply the X-Ray filter effect to both images and text − .xray-image { ...
Read MoreAchieve Glow Effect with CSS Filters
The CSS glow effect is a visual technique used to create a luminous halo around elements. This effect makes objects appear to emit light and can be achieved using the drop-shadow filter or box-shadow properties. Syntax /* Using drop-shadow filter */ selector { filter: drop-shadow(0 0 blur-radius color); } /* Using box-shadow */ selector { box-shadow: 0 0 blur-radius color; } Parameters ParameterDescription blur-radiusThe amount of blur for the glow effect (in px) colorThe color of the glow (hex, rgb, or named colors) spread-radiusOptional: ...
Read MoreFade Out Down Animation Effect with CSS
The fade out down animation effect makes an element gradually disappear while moving downward. This creates a smooth exit animation that combines opacity reduction with downward translation. Syntax @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(distance); } } .element { ...
Read MoreFade Out Left Animation Effect with CSS
The fade out left animation effect smoothly moves an element to the left while reducing its opacity to zero, creating a disappearing effect that slides leftward. This animation combines translation and opacity changes for a smooth exit transition. Syntax @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; ...
Read MoreWhat are CSS pseudo-classes
CSS pseudo-classes are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects. They allow you to style elements based on their state, position, or user interaction. Syntax selector:pseudo-class { property: value; } Common Pseudo-classes The most commonly used pseudo-classes are − ValueDescription :linkUse this class to add special style to an unvisited link. :visitedUse this class to add special style to a visited link. :hoverUse this class to add special style to an element ...
Read MoreCSS positioning related properties
The positioning related properties in CSS allow you to control where elements appear on a webpage. CSS offers several positioning methods to place elements precisely where you want them. Syntax selector { position: value; top: value; right: value; bottom: value; left: value; } Position Property Values ValueDescription relativeElement is positioned relative to its normal position absoluteElement is positioned relative to its nearest positioned ancestor fixedElement is positioned relative to the viewport (browser window) ...
Read MoreValues of CSS overflow property
CSS provides a property called overflow that tells the browser what to do if the box's contents are larger than the box itself. Syntax selector { overflow: value; } Possible Values ValueDescription visibleAllows the content to overflow the borders of its containing element hiddenThe content is cut off at the border and no scrollbars are visible scrollScrollbars are added to allow scrolling through the content autoScrollbars appear only if the content overflows Example: Visible Overflow The following example demonstrates the visible value where content overflows outside ...
Read MoreUsage of margin-right property with CSS
The CSS margin-right property specifies the right margin of an element. It controls the space between the element and adjacent elements or the container's edge on the right side. Syntax selector { margin-right: value; } Possible Values ValueDescription lengthDefines margin in px, em, rem, etc. %Defines margin as a percentage of parent element's width autoBrowser calculates the margin automatically Example 1: Using Length Values The following example demonstrates margin-right using pixel values − .container { ...
Read MoreCSS max-height property
The CSS max-height property sets the maximum height that an element can reach. When content exceeds this maximum height, it will overflow or be clipped depending on the overflow property. Syntax selector { max-height: value; } Possible Values ValueDescription lengthA fixed height in px, em, rem, etc. percentageA percentage of the containing block's height noneNo maximum height limit (default) initialSets to default value inheritInherits from parent element Example: Text Content with Max Height The following example shows how max-height affects text content that exceeds the specified ...
Read MoreCSS height property
The CSS height property is used to set the height of an element. It determines how tall an element will be, and can accept various types of values including lengths, percentages, or keywords. Syntax selector { height: value; } Possible Values ValueDescription autoBrowser calculates the height automatically (default) lengthDefines height in px, em, rem, cm, etc. %Defines height as a percentage of the parent element initialSets the property to its default value inheritInherits the value from parent element Example: Setting Fixed Height The following example demonstrates ...
Read More