Some Lesser-Known CSS Properties for Form Input Fields

AmitDiwan
Updated on 27-Dec-2023 16:32:36

112 Views

CSS caret-color, pointer-events and tab-size are some of the lesser-known properties for form input fields. caret-color property allows us specify color of blinking caret while pointer-events can help prevent the users to find an element. Finally, tab-size sets the amount of white space used by tab. The following examples illustrate some of these properties. The tab-size property CSS tab-size property allows us to set the amount of whitespace used in tabs. The width of the tab character can be customized easily. The value set for the tab size is in spaces. Let us see the syntax. tab-size: value; ... Read More

Smooth Scrolling with Pure CSS

AmitDiwan
Updated on 27-Dec-2023 16:31:01

312 Views

The CSS scroll-behavior property allows us to change the behavior of scroll. The following are the values are set within the scrolling box − auto − A scroll effect is set between the elements within the scrolling box. Smooth − A smooth animated scroll effect is set between the elements The following examples illustrate CSS scroll-behavior property. Scroll Behavior Smooth The scroll behavior is set to smooth for the div container − #parent { scroll-behavior: smooth; width: 250px; height: 200px; overflow-y: scroll } The ... Read More

Setting the size of the radial gradients using CSS

AmitDiwan
Updated on 27-Dec-2023 16:29:59

939 Views

To set the size of the radial gradient, use the radial-gradient() function. This function sets a radial gradient as the background image. The second parameter in the function is to be set as the size you want as in the below example − background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32)); Possible values are farthest-corner (default), closest-side, closest-corner, and farthest-side. Following is the code for setting the size of the radial gradients using CSS. Let us first see the complete syntax of the radial gradient. Syntax The following is the syntax of ... Read More

Setting the Location Color Stops using CSS

AmitDiwan
Updated on 27-Dec-2023 16:27:33

119 Views

To create linear gradient, use the linear-gradient() method of the background-image property. Syntax The following is the syntax − background-image: linear-gradient(angle, color-stop1, color-stop2); The location at color stops can be set as a percentage or absolute length. For example, for linear gradient. The color stops are the colors you want to set for the smooth transitions − background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% ); The gradient can also be set on an image using the url() with linear-gradient() − ... Read More

Setting the Image Brightness using CSS3

AmitDiwan
Updated on 27-Dec-2023 16:24:14

15K+ Views

To set image brightness in CSS, use filter brightness (%). Remember, the value 0 makes the image black, 100% is for original image and default. Rest, you can set any value of your choice, but values above 100% would make the image brighter. The filter property is used to set visual effects, such as drop shadow, contrast, brightness, saturation, shadow to images in CSS. The following is the syntax − Syntax filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); As you ... Read More

Setting Text Alignment using CSS

AmitDiwan
Updated on 27-Dec-2023 16:22:31

224 Views

We can align the text in html documents using CSS text-align property for horizontal alignment and CSS padding-top with CSS padding-bottom, or CSS line-height for vertical alignment. The writing-mode can also be used for this property. Syntax The following is the syntax for above mentioned CSS properties − Selector { text-align: center | left | right | justify | inherit | initial; } Selector { padding: /*value*/; } Selector { line-height: /*value*/; } Align text horizontal Let’s see an example to align text horizontally − Example ... Read More

Setting Tab Sizes in HTML with CSS tab-size Property

AmitDiwan
Updated on 27-Dec-2023 16:19:55

462 Views

CSS tab-size property allows us to set the amount of whitespace used in tabs. The width of the tab character can be customized easily. The value set for the tab size is in spaces. Let us see the syntax. Syntax tab-size: value; The value above is the number value set for tab space. The following examples illustrate the CSS tab-size property. Example Here, we have set the tab size to 32 using the tab-size property − tab-size: 32; The tab size for the firefox is also set − -moz-tab-size: 32; Let us see ... Read More

Setting Spaces between Letters with CSS letter-spacing Property

AmitDiwan
Updated on 27-Dec-2023 16:17:32

183 Views

Using the CSS letter-spacing property, we can specify the amount of space between letters of text. The letter spacing can be set in px, em, etc. length units. Let us see the syntax. Syntax The following is the syntax of the letter-spacing property − letter-spacing: value; The value can be − Normal − Normal space between characters. Length − A length for the space between the characters The following examples illustrate CSS letter-spacing property − Set letter spacing in em In this example, we have set the spacing between letters using the . An em is ... Read More

Setting Margins for Individual Sides using CSS

AmitDiwan
Updated on 27-Dec-2023 16:16:19

207 Views

CSS allows us to control the space around individual sides of an element. The CSS margin property is a shorthand for the following properties: margin-top, margin-right, margin-bottom and margin-left. Syntax The syntax of CSS margin property is as follows − Selector { margin-top: /*value*/ margin-right: /*value*/ margin-bottom: /*value*/ margin-left: /*value*/ } The value can be the following − length − Set a a margin in px, pt, etc. The default is 0 % − Set a margin in percent auto − The web browser ... Read More

Setting Margin Space around elements using CSS

AmitDiwan
Updated on 27-Dec-2023 16:15:12

74 Views

The CSS margin property is used to set the margin area around the selected element around its borders. The margin property is a shorthand for margin-top, margin-right, margin-bottom, and margin-left. Let’s say we have set the following margins using the shorthand property − margin: 10px 45px 35px 70px; The above means − 10 pixels for the top margin 45 pixels for the right margin 35 pixels for the bottom margin 70 pixels for the left margin Syntax The syntax of CSS margin property is as follows − Selector { margin: ... Read More

Advertisements