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 121 of 130
Fade Out Left Big Animation Effect with CSS
The CSS Fade Out Left Big animation effect creates a dramatic exit animation where an element gradually fades out while sliding far to the left (-2000px). This effect combines opacity and transform properties to create a smooth disappearing animation. Syntax @keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; ...
Read MoreCSS border-radius property
The CSS border-radius property is used to create rounded corners on elements. This property allows you to specify the radius of the corners, making elements appear with smooth, curved edges instead of sharp rectangular corners. Syntax selector { border-radius: value; } Possible Values ValueDescription lengthDefines the radius in px, em, rem, etc. %Defines the radius as a percentage of the element's dimensions initialSets the property to its default value (0) inheritInherits the value from the parent element Example: Basic Rounded Corners The following example demonstrates how ...
Read MoreAdd special colored corner to body or text in CSS
CSS rounded corners are used to add special colored corners to body or text by using the border-radius property. This property allows you to create smooth, curved corners instead of the default sharp rectangular edges. Syntax selector { border-radius: value; } Possible Values ValueDescription lengthDefines the radius in px, em, rem, etc. %Defines the radius as a percentage of the element's dimensions initialSets the property to its default value inheritInherits the property from its parent element Example: Basic Rounded Corners The following example creates a colored ...
Read MoreHow to check the validity of your CSS
Validation is the process of checking something against a rule. When you are a beginner, it is very common that you will commit many mistakes in writing your CSS rules. How will you make sure whatever you have written is 100% accurate and up to the W3C quality standards? If you use CSS, your code needs to be correct. The improper code may cause unexpected results in how your page looks or functions. A CSS validator checks your Cascading Style Sheets to make sure that they comply with the CSS standards set by the W3C Consortium. Why Validate ...
Read MoreCreate a Column Layout using CSS
Web developers can organize and structure content in a visually appealing way by utilizing CSS to create a column layout. Developers can define the number of columns by using the column-count property, while the column-gap property regulates the distance between them. This technique maximizes available space and improves readability, especially for webpages with a lot of text. Syntax selector { column-count: number; column-width: length; column-gap: length; column-rule: width style color; } Key Properties for Column Layout PropertyDescription ...
Read MoreSet different font families for screen and print with CSS
The CSS @media rule allows you to specify different styles for different output devices. You can use it to set different font families for screen display and print output, ensuring optimal readability for each medium. Syntax @media screen { selector { font-family: font-for-screen; } } @media print { selector { font-family: font-for-print; } } Example: Different Font Families for Screen and Print ...
Read MoreCSS stress property
The CSS stress property is part of CSS Speech Module and controls the stress level in speech synthesis. It specifies the height of "local peaks" in the intonation contour of a voice, affecting how emphasized certain words or syllables sound when content is read aloud by screen readers or speech synthesis engines. Syntax selector { stress: value; } Possible Values ValueDescription numberA value between 0 and 100. Higher values create more stress/emphasis in speech inheritInherits the stress value from parent element Example: Different Stress Levels The ...
Read MoreCreate an attenuated shadow with CSS
CSS shadows can be created using the box-shadow and text-shadow properties to add depth and visual appeal to elements. These properties allow you to create attenuated (softened) shadows with customizable direction, color, and blur effects. Syntax /* Box shadow syntax */ box-shadow: h-offset v-offset blur spread color; /* Text shadow syntax */ text-shadow: h-offset v-offset blur color; Parameters ParameterDescription h-offsetHorizontal offset of the shadow (positive = right, negative = left) v-offsetVertical offset of the shadow (positive = down, negative = up) blurBlur radius - higher values create more attenuated shadows spreadShadow spread ...
Read MoreWiggle Animation Effect with CSS
The wiggle animation effect creates small rapid movements that make an element appear to shake or vibrate from side to side. This effect is commonly used to draw attention to buttons, icons, or other interactive elements. Syntax @keyframes wiggle { 0%, 100% { transform: skewX(0deg); } 10% { transform: skewX(-8deg); } 20% { transform: skewX(7deg); } /* ... additional keyframe steps ... */ } .element { animation: wiggle duration timing-function; } Example: Basic Wiggle ...
Read MoreCSS pause-after property
The CSS pause-after property specifies a pause to be observed after speaking an element's content in speech synthesis. This property is part of CSS Speech Module and is used by screen readers and other speech synthesis applications. Syntax selector { pause-after: value; } Possible Values ValueDescription timeExpresses the pause in absolute time units (seconds and milliseconds) percentageRefers to the inverse of the value of the speech-rate property noneNo pause after the element x-weakVery short pause weakShort pause mediumMedium pause (default) strongLong pause x-strongVery long pause Example: Using ...
Read More