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 George John
Page 24 of 79
Disable text wrapping inside an element using CSS
To disable text wrapping inside an element, use the CSS white-space property with the nowrap value. This forces all text content to remain on a single line, preventing it from wrapping to the next line even if it overflows the container. Syntax selector { white-space: nowrap; } Example: Preventing Text Wrapping The following example demonstrates how to disable text wrapping using the white-space: nowrap property − .normal-text { width: 200px; ...
Read MoreCSS3 Multi-Column column-gap Property
The CSS column-gap property is used to specify the gap (spacing) between columns in a multi-column layout. This property helps control the visual separation between columns, making text more readable and organized. Syntax selector { column-gap: value; } Possible Values ValueDescription normalDefault value (usually 1em) lengthDefines the gap using px, em, rem, etc. %Percentage of the container width Example The following example demonstrates how to use the column-gap property to create a 40px gap between columns − ...
Read MoreRotate the element based on an angle using CSS
The CSS transform: rotate() property is used to rotate an element by a specified angle. The rotation is applied around the element's center point by default. Syntax selector { transform: rotate(angle); } Possible Values ValueDescription degDegrees (0deg to 360deg) radRadians (0rad to 6.28rad) turnTurns (0.5turn = 180deg) Example: Basic Element Rotation The following example demonstrates how to rotate an element by 20 degrees − .box { width: 300px; ...
Read MoreAlign the last line of the text with CSS
The text-align-last property in CSS is used to align the last line of a text block. This property is particularly useful when you want the final line of a paragraph to have different alignment than the rest of the text. Syntax selector { text-align-last: value; } Possible Values ValueDescription leftAligns the last line to the left rightAligns the last line to the right centerCenters the last line justifyJustifies the last line autoDefault value, follows text-align property Example: Aligning Last Line to Right The following example demonstrates ...
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 MoreCSS cue-before Property
The CSS cue-before property specifies a sound to be played before speaking an element's content in speech synthesis applications. This property is primarily used for audio cues in screen readers and voice browsers. Syntax selector { cue-before: value; } Possible Values ValueDescription url()Specifies the URL of a sound file to be played noneNo sound is played (default value) Example The following example demonstrates how to use the cue-before property to add audio cues − h1 { ...
Read MoreFade Out Up Animation Effect with CSS
The CSS fade out up animation effect creates a smooth transition where an element gradually fades out while moving upward. This effect is commonly used for removing elements from view with a subtle upward motion. Syntax @keyframes fadeOutUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-distance); ...
Read MoreBounce Out Left Animation Effect with CSS
The CSS bounce out left animation effect makes an element bounce slightly to the right before sliding out to the left and fading away. This animation creates a dynamic exit effect that's commonly used for removing items or transitioning elements off-screen. Syntax selector { animation-name: bounceOutLeft; animation-duration: duration; animation-fill-mode: both; } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); ...
Read MoreCSS pause-before property
The CSS pause-before property specifies a pause to be observed before speaking an element's content in speech synthesis. This property is part of the CSS Speech Module and is used to control timing in text-to-speech applications. Syntax selector { pause-before: 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 before the element (default) inheritInherits the value from the parent element Example 1: Using Time Values The following ...
Read MoreCSS border-top-right-radius property
The CSS border-top-right-radius property is used to set the radius of the top-right corner of an element. This property allows you to create rounded corners specifically for the top-right corner, giving you precise control over individual corner styling. Syntax selector { border-top-right-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 Top-Right Corner Radius The following ...
Read More