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 615 of 801
Styling Lists with CSS
Lists are ordered as well unordered. With CSS, you can set the list item markers or an image for the markers. You can also control the position of list-item markers to customize the appearance of your lists. Syntax selector { list-style-type: value; list-style-image: url('path'); list-style-position: value; list-style: shorthand-value; } list-style-type Property The list-style-type property is used to set the type of list-item marker. Example Let us now see an example wherein we are formatting unordered lists ...
Read MoreSet Text Alignment using CSS
To set text alignment using CSS, use the text-align property. This property controls how text content is aligned within its container element. Syntax selector { text-align: value; } Possible Values ValueDescription leftAligns text to the left (default for most languages) rightAligns text to the right centerCenters the text justifyStretches text to align with both left and right margins initialSets to the default value inheritInherits from the parent element Example 1: Text Justify Alignment The following example demonstrates text justification with multiple columns − ...
Read MoreApplying Sepia Effect to Images using CSS3
The CSS filter property allows you to apply visual effects to images, including the sepia effect which gives images a warm, vintage appearance reminiscent of old photographs. Syntax selector { filter: sepia(percentage); } Possible Values ValueDescription 0%No sepia effect (original image) 50%Moderate sepia effect 100%Complete sepia effect Example: Complete Sepia Effect (100%) Here, we apply a full sepia effect to create a vintage look − .container { display: ...
Read MoreConverting an Image to Grayscale using CSS3
The CSS filter property with the grayscale() function is used to convert an image from color to grayscale. The grayscale filter removes all color information, leaving only the luminance values to create a black and white effect. Syntax selector { filter: grayscale(percentage); } Possible Values ValueDescription 0%Original image (no grayscale effect) 50%Partially grayscale (semi-desaturated) 100%Completely grayscale (black and white) >100%Over-grayscale (same as 100%) Example: Converting Image to Grayscale The following example shows how to apply a grayscale filter to an image − ...
Read MoreRGBA Color Values in CSS3
The RGBA color value stands for Red, Green, Blue, and Alpha. The alpha parameter controls the color opacity with a number between 0.0 (fully transparent) and 1.0 (fully opaque). This allows you to create transparent and semi-transparent colors in CSS. Syntax rgba(red, green, blue, alpha) Possible Values ParameterValue RangeDescription Red0-255 or 0%-100%Red color intensity Green0-255 or 0%-100%Green color intensity Blue0-255 or 0%-100%Blue color intensity Alpha0.0-1.0Opacity level (0.0 = transparent, 1.0 = opaque) Example: Background Colors with Different Opacity The following example demonstrates how alpha values affect transparency − ...
Read MoreSetting 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 More