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 Abhishek
68 articles
How to use text as background using CSS?
Text as background creates interesting visual effects where text appears behind other content. This technique uses CSS positioning and z-index to layer text elements, making them appear as decorative background elements rather than primary content. Syntax /* Method 1: Absolute positioning */ .background-text { position: absolute; z-index: -1; } /* Method 2: Pseudo elements */ .element::before { content: "Background Text"; position: absolute; z-index: -1; } Method 1: Using Absolute Positioned Elements This method ...
Read MoreHow to use font-feature-settings property in CSS?
The font-feature-settings property is used to control advanced typographic features in OpenType fonts. Advanced typographic features like swashes, small caps, and ligatures can be controlled using this CSS property. Syntax selector { font-feature-settings: "feature-tag" value; } Possible Values ValueDescription normalDefault value, uses the font's default settings "feature-tag"Four-character OpenType feature tag in quotes 1 or onEnables the specified feature 0 or offDisables the specified feature Common Feature Tags "smcp" − Small capitals "swsh" − Swashes "liga" − Common ligatures "dlig" − Discretionary ligatures "kern" − Kerning ...
Read MoreHow to use font-variant-settings property in CSS?
The CSS font-variant-settings property provides low-level control over OpenType font features, allowing you to enable or disable specific typographic features like ligatures, small capitals, and number styles. This property gives you fine-grained control over font rendering. Syntax selector { font-variant-settings: "feature" value; } Possible Values ValueDescription normalDefault value, equivalent to no feature settings "feature" valueOpenType feature tag with on (1) or off (0) value inheritInherits from parent element initialSets to default value Example 1: Enabling Small Capitals The following example demonstrates using the "smcp" feature to ...
Read MoreHow to set the size of specific flex-item using CSS?
In CSS, we can control the size of specific flex items using various flex properties. The CSS flexbox is used to create responsive layouts that adapt to different screen sizes by adjusting item dimensions and positioning. Syntax selector { flex-grow: number; flex-shrink: number; flex-basis: length | percentage | auto; flex: flex-grow flex-shrink flex-basis; } Key Flex Properties PropertyDescription flex-growControls how much a flex item should grow relative to other items flex-shrinkControls how much a flex item should ...
Read MoreHow to set the order of flexible items using CSS?
The CSS order property allows you to change the visual order of flex items without altering their position in the HTML source. This property only works on elements that are children of a flex container (an element with display: flex or display: inline-flex). NOTE − The order property only works with flex items inside a flex container. Syntax selector { order: integer; } Possible Values ValueDescription integerAny integer value (positive, negative, or zero). Default is 0. Items are arranged in ascending order of their order values. ...
Read MoreHow to set the inset shadow using CSS?
The CSS box-shadow property creates shadows around elements, and by default applies shadows outside the element. However, by adding the inset keyword, you can create shadows that appear inside the element, giving it a recessed or indented appearance. Syntax selector { box-shadow: inset x-offset y-offset blur spread color; } Parameters ParameterDescription insetMakes the shadow appear inside the element x-offsetHorizontal shadow offset (required) y-offsetVertical shadow offset (required) blurBlur radius (optional, default is 0) spreadSpread distance (optional, default is 0) colorShadow color (optional, default is current text color) Example ...
Read MoreHow to set the content as a counter?
CSS counters allow you to automatically number elements on a web page without JavaScript. They work by creating variables that can be incremented and displayed as content using pseudo-elements like ::before and ::after. Syntax /* Reset/create counter */ parent-element { counter-reset: counter-name; } /* Increment and display counter */ element::before { counter-increment: counter-name; content: counter(counter-name); } CSS Counter Properties counter-reset − Creates or resets a counter to zero (or specified value) counter-increment ...
Read MoreHow to set position of an image in CSS?
In general, the default position of an image is left aligned on the web page. But you can change the position of an image according to your needs and set the position of an image manually on the web page where you have to show that particular image. Let us now discuss about the ways of positioning an image on the webpage using CSS. There are two methods or approaches in general to position an image on the web page using CSS that are listed below − Using the float property of CSS ...
Read MoreHow to set padding inside an element using CSS?
Padding in CSS creates space between an element's content and its border. This inner spacing helps improve readability and visual appeal by preventing content from touching the element's edges directly. Syntax /* Shorthand property */ padding: value; padding: top-bottom left-right; padding: top left-right bottom; padding: top right bottom left; /* Individual properties */ padding-top: value; padding-right: value; padding-bottom: value; padding-left: value; Possible Values Value TypeDescriptionExample LengthFixed units like px, em, rem10px, 1.5em PercentageRelative to parent element's width5%, 10% autoBrowser calculates paddingauto Method 1: Using Shorthand Padding Property The shorthand ...
Read MoreHow to set padding around an element using CSS?
The CSS padding property is used to create space between an element's content and its border. This inner spacing appears inside the element, making the content appear further from the edges. Syntax /* Individual properties */ padding-top: value; padding-right: value; padding-bottom: value; padding-left: value; /* Shorthand property */ padding: value; /* all sides */ padding: vertical horizontal; /* top/bottom left/right */ padding: top horizontal bottom; /* top left/right bottom ...
Read More