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
CSS Articles
Page 117 of 130
Pulse 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 MoreHow to define the location of a font for download in CSS
The @font-face rule is used to define custom fonts for web pages by specifying the location of font files for download. This allows you to use fonts that are not installed on the user's system. Syntax @font-face { font-family: "font-name"; src: url("path/to/font.woff2") format("woff2"), url("path/to/font.woff") format("woff"); } Key Properties PropertyDescription font-familyDefines the name you'll use to reference this font srcSpecifies the location and format of the font file font-weightDefines which font weight this declaration applies to font-styleDefines ...
Read MoreLight Speed In Animation Effect with CSS
The CSS light speed in animation effect creates a dramatic entrance where an element appears to speed in from the right side of the screen with a skewing motion that simulates high-speed movement. Syntax @keyframes lightSpeedIn { 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; ...
Read MoreHinge Animation Effect with CSS
The CSS hinge animation effect simulates a door-like swinging motion that ends with the element falling off the screen. This animation is commonly used for exit effects or removing elements with a realistic physics-based movement. Syntax .element { animation-name: hinge; animation-duration: 2s; animation-fill-mode: both; } @keyframes hinge { /* Animation keyframes */ } How Hinge Animation Works The hinge animation consists of three main phases − Swing phase: Element rotates back and forth around its ...
Read MoreCreate blurred picture or text with CSS Filters
Users find websites with blurred backgrounds or text visually appealing. CSS filters provide a simple way to create blurred effects on images or text, enhancing visual appeal and achieving specific design aesthetics. The filter property allows you to apply various visual effects including blur, brightness, and contrast adjustments. Syntax /* Basic blur syntax */ filter: blur(radius); /* Text shadow blur syntax */ text-shadow: h-offset v-offset blur-radius color; Method 1: Using CSS Filter Property The filter: blur() function applies a Gaussian blur to any element. The blur radius determines how many pixels blend into ...
Read MoreCSS Chroma Filter
The CSS chroma filter is a legacy Internet Explorer-specific filter that was used to make a particular color transparent. This filter is not supported in modern browsers and has been replaced by CSS3 properties like background-color: transparent and opacity. Syntax filter: chroma(color=colorvalue); Legacy Browser Support Note: The chroma filter only worked in Internet Explorer and is now obsolete. Modern browsers do not support this property. Important: This filter is deprecated and should not be used in modern web development. Use CSS3 alternatives instead. Example: Legacy Chroma Filter (IE Only) ...
Read MoreCSS play-during property
The CSS play-during property specifies a sound to be played as a background while an element's content is spoken. This property is part of the CSS Speech Module and is primarily used for screen readers and other assistive technologies. Syntax selector { play-during: value; } Possible Values ValueDescription URIThe sound designated by this is played as a background while the element's content is spoken mixWhen present, this keyword means that the sound inherited from the parent element's play-during property continues to play and the sound designated by the ...
Read MoreWave effect with CSS?
The CSS wave effect is a legacy filter that was used to create sine wave distortions on elements, giving them a wavy appearance. This filter was primarily supported in Internet Explorer and is now obsolete. Modern CSS uses alternative techniques like transforms and animations to achieve wave effects. Syntax selector { filter: Wave(Add=value, Freq=value, LightStrength=value, Phase=value, Strength=value); } Parameters ParameterDescription AddA value of 1 adds the original image to the waved image, 0 does not FreqThe number of waves LightStrengthThe strength of the light on the wave (from 0 ...
Read MoreSet Invert Effect with CSS
The CSS filter: invert() property is used to map the colors of an element to their opposite values in the color spectrum, creating a negative image effect similar to film negatives. Syntax selector { filter: invert(percentage); } Possible Values Value Description 0% No inversion (default) 100% Complete color inversion 50% Gray appearance Example: Image Invert Effect The following example applies an invert filter to an image − .original ...
Read MoreFlip Out X Animation Effect with CSS
The CSS Flip Out X animation effect creates a 3D flipping motion where an element rotates around its horizontal (X) axis and fades out simultaneously. This animation is commonly used for exit transitions and interactive UI elements. Syntax @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); ...
Read More