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 656 of 801
Tada Animation Effect with CSS
The CSS tada animation effect creates a playful shaking motion that combines scaling and rotation transforms. This effect is perfect for drawing attention to elements like buttons, notifications, or call-to-action items. Syntax @keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } .element { ...
Read MoreCSS :first-letter pseudo-element
The CSS ::first-letter pseudo-element is used to apply special styling to the first letter of the first line in a block-level element. It's commonly used to create elegant drop caps and eye-catching text effects that draw attention to the beginning of a paragraph or section. Syntax ::first-letter { property: value; } Properties That Can Be Applied The ::first-letter pseudo-element supports the following CSS properties − Property TypeProperties Font Propertiesfont-family, font-size, font-style, font-weight Color & Backgroundcolor, background-color, background-image Border & Marginborder, margin, padding, float Text Decorationtext-decoration, vertical-align, line-height ...
Read MoreSwing Animation Effect with CSS
The swing animation effect creates a pendulum-like motion that moves an element back and forth or from side to side while rotating around a fixed pivot point. This animation simulates the natural swinging motion of an object suspended from above. Syntax @keyframes swing { keyframe% { transform: rotate(angle); } } .element { animation: swing duration timing-function iteration-count; transform-origin: top center; } Example The following example demonstrates a swing animation applied to a colored box that rotates back and forth like a ...
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 MoreRotate Out Down Left Animation Effect with CSS
The CSS rotate out down left animation effect creates a rotating exit animation where an element rotates 90 degrees clockwise around its bottom-left corner while fading out. This animation is commonly used for dramatic exit effects in web interfaces. Syntax @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; transform: rotate(0deg); opacity: 1; } 100% { ...
Read MoreRotate In Up Right Animation Effect with CSS
The CSS rotateInUpRight animation creates a rotation effect where an element rotates in from an upward-right position. The element starts at -90 degrees rotation and gradually rotates to 0 degrees while fading in from transparent to fully visible. Syntax @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { ...
Read MoreRotate In Up Left Animation Effect with CSS
The CSS rotate in up left animation effect creates a smooth rotational transition where an element rotates from its normal position to -90 degrees around the left bottom corner while fading out. This animation is commonly used for exit effects and interactive elements. Syntax @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(0deg); opacity: 1; } 100% { ...
Read MoreWobble Animation Effect with CSS
The CSS wobble animation effect creates a shaking or oscillating motion by combining horizontal translation and rotation transforms. This effect is commonly used to draw attention to elements or create playful interactions. Syntax @keyframes wobble { /* Define keyframe percentages with transform values */ } .element { animation: wobble duration timing-function; } Example: Simple Wobble Animation The following example creates a wobble effect on a box element − .wobble-box { ...
Read MoreFlatten the color depth with CSS
The CSS Xray filter is an Internet Explorer-specific filter that flattens the color depth by creating a grayscale, inverted effect similar to an X-ray image. This filter removes color saturation and inverts the brightness values. Syntax selector { filter: Xray; } Parameter ParameterDescription XrayGrayscales and flattens the color depth, creating an inverted monochrome effect Note: The Xray filter is a legacy Internet Explorer filter and is not supported in modern browsers. Consider using CSS filters like grayscale() and invert() for cross-browser compatibility. Example: Applying ...
Read MoreRotate In Down Right Animation Effect with CSS
The CSS rotate in down right animation effect creates an element that rotates from a 90-degree angle to its normal position while fading in, with the rotation origin set to the bottom right corner of the element. Syntax @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { ...
Read More