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 510 of 652
Setting Column Rules in CSS3
The CSS column-rule property is used to create visual separators between columns in a multi-column layout. It allows you to set the width, style, and color of the rule that appears between columns. Syntax /* Shorthand property */ column-rule: width style color; /* Individual properties */ column-rule-width: value; column-rule-style: value; column-rule-color: value; Possible Values PropertyValuesDescription column-rule-widththin | medium | thick | lengthSets the width of the column rule column-rule-stylenone | solid | dotted | dashed | doubleSets the style of the column rule column-rule-colorcolor valuesSets the color of the column rule ...
Read MoreStatic Positioning in CSS
With static positioning, the elements are not affected by the top, bottom, left, and right properties. Static positioning is the default positioning value for all HTML elements. For this, use position: static. Syntax selector { position: static; } Key Characteristics Elements with static positioning follow the normal document flow and ignore positioning properties like top, left, right, and bottom. They appear exactly where they would naturally be placed in the HTML structure. Example Let us see an example demonstrating static positioning − ...
Read MoreUnderstanding CSS Absolute and Relative Units
CSS length units are essential for styling web pages, allowing you to set dimensions for fonts, height, width, margins, padding, and more. These units are categorized into two main types: Absolute Units and Relative Units. CSS Absolute Units Absolute length units have fixed sizes that don't change based on other elements or the viewport. They are ideal when you know the exact output format and need precise control. Unit Description px Pixels (1px = 1/96th of 1 inch) pt Points (1pt = 1/72 of 1 inch) pc Picas (1pc ...
Read MoreThe CSS translate() Function
The CSS translate() function is used to reposition an element in horizontal and vertical directions. If you want to move an element from its current position along the X-axis and Y-axis, use the translate() function with the transform property. Syntax transform: translate(x, y); Where x is the horizontal displacement and y is the vertical displacement. Both values can be in pixels, percentages, or other CSS length units. Possible Values ParameterDescription xHorizontal displacement (required). Can be positive (right) or negative (left) yVertical displacement (optional). Can be positive (down) or negative (up) ...
Read MoreStyling 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 More