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 Arjun Thakur
Page 25 of 75
Overlap Elements with CSS
To overlap elements in CSS, you need to control their stacking order using positioning and the z-index property. Elements with higher z-index values appear in front of elements with lower values. Syntax selector { position: relative | absolute | fixed; z-index: integer; } Key Properties for Overlapping PropertyDescription positionMust be relative, absolute, or fixed for z-index to work z-indexControls stacking order (higher values appear on top) top, left, right, bottomControls precise positioning of overlapping elements Example: Image Behind Text The following example ...
Read MoreCreate a bordered list without bullets using CSS
To create a bordered list without bullets, you can use the list-style-type property set to none to remove bullets and add a border property to create the border around the list. Syntax ul { list-style-type: none; border: width style color; padding: value; } Example The following example creates a bordered list without bullets − ul { background-color: orange; ...
Read MoreRole of margin property with value auto using CSS
The CSS margin property with value auto is used to horizontally center block-level elements within their container. When you set left and right margins to auto, the browser distributes the available space equally on both sides, creating a centered effect. Syntax selector { margin: auto; } /* Or specifically for horizontal centering */ selector { margin-left: auto; margin-right: auto; } How It Works For margin: auto to work effectively for centering, the element must have a defined width and be a ...
Read MoreMoving left animation with keyframes using CSS3
CSS keyframes allow you to create smooth animations by defining specific styles at different points during the animation sequence. The following example demonstrates how to create a moving left animation where text slides in from the right side of the screen. Syntax @keyframes animation-name { from { /* starting styles */ } to { /* ending styles */ } } /* Or with percentages */ @keyframes animation-name { 0% { /* starting styles */ } 50% { /* middle styles ...
Read More2D transforms in CSS3
CSS 2D transforms allow you to modify the appearance of elements by translating, rotating, scaling, and skewing them in 2D space without affecting document flow. Syntax selector { transform: function(value); } Transform Functions FunctionDescription translate(x, y)Moves element along x and y axes translateX(n)Moves element along x-axis only translateY(n)Moves element along y-axis only scale(x, y)Changes element size (width and height) scaleX(n)Changes element width only scaleY(n)Changes element height only rotate(angle)Rotates element by specified angle skewX(angle)Skews element along x-axis skewY(angle)Skews element along y-axis matrix(a, b, c, d, e, f)Combines all transforms using ...
Read MoreCSS :before pseudo-element
The CSS :before pseudo-element is used to insert content before an element's actual content. It creates a virtual element that appears as the first child of the selected element, allowing you to add decorative or informational content without modifying the HTML structure. Syntax selector:before { content: value; /* other properties */ } Example 1: Adding Text Content The following example demonstrates how to add text content before paragraph elements − p:before { ...
Read MorePulse Animation Effect with CSS
The CSS pulse animation effect creates a rhythmic scaling animation that makes elements appear to "pulse" or "breathe" by smoothly growing and shrinking in size. This effect is commonly used to draw attention to buttons, notifications, or important content. Syntax @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .pulse { animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; } Example: Basic ...
Read MoreFlip In X Animation Effect with CSS
The CSS Flip In X animation effect creates a 3D flipping motion where an element rotates along the X-axis while appearing on the page. This animation starts with the element rotated 90 degrees and invisible, then flips into view with a bouncing effect. Syntax @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { ...
Read MoreBounce Out Right Animation Effect with CSS
The CSS Bounce Out Right animation effect creates a bouncing motion where an element slides to the right while fading out. The animation starts with a slight leftward movement before bouncing out to the right side of the screen. Syntax @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .element { animation: bounceOutRight duration timing-function; } Example The following example demonstrates the bounce ...
Read MoreFade In Down Animation Effect with CSS
The CSS Fade In Down animation effect creates a smooth transition where an element gradually appears while moving downward from its starting position. This animation combines opacity changes with vertical translation to create an elegant entrance effect. Syntax @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-distance); } 100% { opacity: 1; transform: ...
Read More