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 662 of 801
Create 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 MoreCSS azimuth Property
The CSS azimuth property is part of the CSS Aural style sheets specification that defines where sound should come from horizontally when content is being read aloud by screen readers or speech synthesizers. Syntax selector { azimuth: value; } Possible Values ValueDescriptionEquivalent Angle anglePosition described in terms of an angle (-360deg to 360deg)Specified angle left-sideSound from left side270deg far-leftSound from far left300deg leftSound from left320deg center-leftSound from center-left340deg centerSound from center (default)0deg center-rightSound from center-right20deg rightSound from right40deg far-rightSound from far right60deg right-sideSound from right side90deg leftwardsMoves sound 20deg ...
Read MoreSet printing double-sided documents with CSS
When printing double-sided documents, the page boxes on the left and right pages should be different. CSS provides pseudo-classes to define different styles for left and right pages, allowing you to set appropriate margins for binding. Syntax @page :left { /* Styles for left pages */ } @page :right { /* Styles for right pages */ } Example The following example sets different margins for left and right pages to accommodate book binding − @page ...
Read MoreOrphans CSS Property
In typographic terminology, orphans are lines of a paragraph stranded at the bottom of a page due to a page break, while widows are lines remaining at the top of a page following a page break. Generally, printed pages do not look attractive with single lines of text stranded at the top or bottom. Most printers try to leave at least two or more lines of text at the top or bottom of each page. The orphans property specifies the minimum number of lines of a paragraph that must be left at the bottom of a page. The ...
Read MoreControlling Pagination with CSS
The CSS pagination properties allow you to control how content breaks across pages when printing or creating PDFs. These properties help ensure your content flows logically and looks professional in print format. Syntax selector { page-break-before: value; page-break-after: value; page-break-inside: value; } Possible Values ValueDescription autoDefault. Browser generates page breaks as needed alwaysForces a page break before or after the element avoidAvoids page breaks before, after, or inside the element leftForces page breaks to render element on a left-hand page rightForces ...
Read More