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 Chandu yadav
Page 25 of 81
Break the line and wrap onto next line with CSS
The CSS word-wrap property allows you to break long words and wrap them onto the next line when they exceed their container's width. This is particularly useful for preventing text overflow in fixed-width containers. Syntax selector { word-wrap: value; } Possible Values ValueDescription normalDefault. Break words only at normal word break points break-wordAllows unbreakable words to be broken at arbitrary points Example: Breaking Long Words The following example demonstrates how to break long words that exceed the container width − ...
Read MoreCSS3 Left to right Gradient
CSS3 left to right gradient creates a smooth color transition that flows horizontally from the left edge to the right edge of an element. This is achieved using the linear-gradient() function with the to right direction. Syntax selector { background: linear-gradient(to right, color1, color2, ...); } Example: Basic Left to Right Gradient The following example creates a red to blue gradient flowing from left to right − .gradient-box { height: 100px; ...
Read MoreRotate In Down Right Animation Effect with CSS
The CSS rotate in down right animation effect creates an element that rotates from a 90-degree angle to its normal position while fading in, with the rotation origin set to the bottom right corner of the element. Syntax @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { ...
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 MoreCSS background-origin property
The CSS background-origin property specifies the positioning area of background images. It determines whether the background image starts from the border box, padding box, or content box of an element. Syntax selector { background-origin: value; } Possible Values ValueDescription padding-boxBackground starts from the padding edge (default) border-boxBackground starts from the border edge content-boxBackground starts from the content edge Example: Content Box Origin The following example demonstrates the background-origin: content-box property − .demo { ...
Read MoreGive the object a sine wave distortion to make it look wave with CSS
The CSS wave effect uses Internet Explorer's proprietary filter to give objects a sine wave distortion, making them appear wavy. This filter was specific to older IE browsers and is not supported in modern web standards. 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 to 100) PhaseAt what degree the sine wave should start (from 0 ...
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 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 MoreRole of media attribute on the LINK element
The media attribute on the LINK element specifies the target media or device type for which an external style sheet is intended. This allows you to apply different styles for different output devices like screens, printers, or mobile devices. Syntax Possible Values Media TypeDescription allSuitable for all devices (default) printIntended for printed material screenIntended for computer screens handheldIntended for handheld devices Example: Print-Specific Styles The following example links a CSS file specifically for print media − Media Attribute Example ...
Read MoreWhich element is used to add special style to the first letter of the text in a selector with CSS
The CSS :first-letter pseudo-element is used to apply special styling to the first letter of the first line in a block-level element. This is commonly used to create drop caps or emphasize the beginning of paragraphs. Syntax selector:first-letter { property: value; } Example The following example demonstrates how to style the first letter of paragraphs with different effects − p:first-letter { font-size: 3em; color: ...
Read More