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
Front End Technology Articles
Page 511 of 652
Setting the Image Brightness using CSS3
To set image brightness in CSS, use the filter property with the brightness() function. The value 0% makes the image completely black, 100% displays the original image (default), and values above 100% make the image brighter. Syntax selector { filter: brightness(value); } Possible Values ValueDescription 0%Completely black image 100%Original image (default) > 100%Brighter than original < 100%Darker than original Example: Brightening an Image (120%) The following example makes an image 20% brighter than the original − ...
Read MoreSetting Column Count or Width using CSS3
Use the columns property in CSS3 to set the column count and width. It is a shorthand property for column-width and column-count properties. With that, you can set both the properties separately as well. Syntax selector { columns: auto | column-width column-count | initial | inherit; } The columns Property The columns property works as a shorthand property for the column-width and column-count properties. You can specify both width and count in a single declaration. Example 1: Auto Values The following example sets both the column width and ...
Read MoreWorking with CSS Display Property
The CSS display property is used to set how an element is displayed on a web page. With this property, you can create grid layouts, flex containers, inline elements, and more. It controls the layout behavior of elements and how they interact with other elements. Syntax selector { display: value; } Possible Values Property Value Description inline Displays an element as an inline element. block Displays an element as a block element. contents Makes the container disappear, making the child elements children ...
Read MoreText Transformation using CSS
The CSS text-transform property is used to control the capitalization of text content. You can transform text to uppercase, lowercase, capitalize the first letter of each word, or leave it unchanged. Syntax selector { text-transform: value; } Possible Values ValueDescription noneNo transformation (default) capitalizeCapitalizes the first letter of each word uppercaseTransforms all text to uppercase lowercaseTransforms all text to lowercase initialSets to default value inheritInherits from parent element Example 1: Uppercase Transformation The following example transforms all text to uppercase − ...
Read MoreThe CSS3 scale3d() Function
The CSS3 scale3d() function is used to scale an element in 3D space along the X, Y, and Z axes. This transform function allows you to resize elements while maintaining their proportions or creating unique scaling effects. Syntax transform: scale3d(x, y, z); Parameters ParameterDescription xScaling factor for the X-axis (horizontal) yScaling factor for the Y-axis (vertical) zScaling factor for the Z-axis (depth) Note: Values greater than 1 increase size, values less than 1 decrease size, and negative values flip the element. Example: Basic 3D Scaling The following example demonstrates ...
Read Moretext-justify Property in CSS
The CSS text-justify property controls how justified text is aligned when text-align is set to justify. It determines the method used to distribute space between words or characters to achieve full justification. Syntax selector { text-justify: value; } Possible Values ValueDescription autoBrowser determines the best justification method inter-wordAdjusts spacing between words inter-characterAdjusts spacing between characters noneDisables justification Example 1: Inter-word Justification The following example uses inter-word to justify text by adjusting space between words − .inter-word-example ...
Read MoreAdjusting the Image Contrast using CSS3
The CSS filter property allows you to apply visual effects to HTML elements, including adjusting image contrast. The contrast() function specifically controls the contrast level of images, making them appear more or less vibrant. Syntax selector { filter: contrast(value); } Possible Values ValueDescription 0%Completely gray image (no contrast) 100%Original image contrast (default) >100%Increased contrast
Read MoreThe CSS scale() Function
The CSS scale() function is used to define a transformation that resizes an element on the 2D plane. You can specify the amount of scaling in the X and Y directions as parameters to create larger or smaller versions of elements. Syntax transform: scale(x-scale, y-scale); transform: scale(uniform-scale); Possible Values ValueDescription x-scaleHorizontal scaling factor (1 = original size) y-scaleVertical scaling factor (optional) uniform-scaleSingle value for both X and Y scaling Example: Increasing Image Size The following example uses scale(1.2, 1.3) to increase the image width by 20% and height by 30% ...
Read MoreFormatting Text Using CSS
To format text in CSS, you can change the text color, text decoration, line height, text direction, text alignment, etc. CSS provides numerous properties to control the visual appearance of text content. Syntax selector { text-align: value; line-height: value; text-decoration: value; } Text Alignment To set text alignment using CSS, use the text-align property. Following are the possible property values − ValueDescription leftAligns text to the left (default) rightAligns text to the right centerCenters the text justifyStretches lines to have ...
Read MoreThe CSS rotate() Function
The CSS rotate() function is used to rotate an element around a fixed point. It is applied through the transform property and accepts angle values in degrees, radians, or other angle units. Syntax transform: rotate(angle); Possible Values ValueDescription degDegrees (360deg = full rotation) radRadians (2π rad = full rotation) gradGradians (400grad = full rotation) turnTurns (1turn = full rotation) Example: Rotate an Element by 45 Degrees The following example rotates a text element by 45 degrees − .box { ...
Read More