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 Samual Sam
Page 48 of 151
CSS speak property
The CSS speak property controls how text content is rendered by screen readers and other assistive technologies. It determines whether text should be spoken aloud and how it should be pronounced when read by speech synthesis software. Syntax selector { speak: value; } Possible Values ValueDescription noneSuppresses aural rendering so that the element requires no time to render normalUses language-dependent pronunciation rules for rendering an element and its children spell-outSpells the text one letter at a time Example: Different Speak Values The following example demonstrates different ...
Read MoreBounce In Right Animation Effect with CSS
The CSS Bounce In Right animation effect creates an element that slides in from the right side of the screen with a bouncing motion. This animation starts with the element positioned far to the right and invisible, then bounces it into its final position. Syntax .element { animation-name: bounceInRight; animation-duration: duration; animation-fill-mode: both; } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); ...
Read MoreSet all the background image properties in one section with CSS
The CSS background property is used to set all the background image properties in one section. This shorthand property allows you to define multiple background-related properties simultaneously, including image, position, repeat, and attachment. Syntax selector { background: color image repeat attachment position; } Possible Values PropertyDescription colorBackground color (optional) imageBackground image URL repeatHow the image repeats (repeat, no-repeat, repeat-x, repeat-y) attachmentImage attachment (scroll, fixed) positionImage position (top, center, bottom, left, right) Example The following example demonstrates setting multiple background properties using the shorthand − ...
Read MoreFade Out Right Animation Effect with CSS
The CSS Fade Out Right Animation Effect creates a smooth transition where an element gradually becomes transparent while moving to the right until it completely disappears. This effect combines opacity changes with horizontal translation using CSS keyframes. Syntax @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: ...
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 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 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 MoreUsage of page-break-before, page-break-after, and page-break-inside properties in CSS
CSS provides three properties to control page breaks when printing documents: page-break-before, page-break-after, and page-break-inside. These properties help you manage how content flows across printed pages, ensuring proper layout and avoiding unwanted breaks. Syntax selector { page-break-before: value; page-break-after: value; page-break-inside: value; } Possible Values PropertyValuesDescription page-break-beforeauto | always | avoid | left | rightControls page break before element page-break-afterauto | always | avoid | left | rightControls page break after element page-break-insideauto | avoidControls page break inside element ...
Read MoreFade In Left Animation Effect with CSS
The CSS Fade In Left animation effect creates a smooth transition where an element slides in from the left while gradually becoming visible. This animation combines opacity changes with horizontal movement to create an elegant entrance effect. Syntax @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: ...
Read MoreCSS media types
CSS media types allow you to specify how a document should be formatted for different output devices. They enable you to apply different styles for screen displays, printers, handheld devices, and other media types. Syntax @media media-type { /* CSS rules */ } /* Or in link element */ CSS Media Types Media TypeDescription allSuitable for all devices (default) printIntended for printed pages and print preview mode screenIntended primarily for computer screens speechIntended for speech synthesizers (replaces aural) Note: Most media types from CSS2 like ...
Read More