CSS Articles - Page 47 of 130

We can create a customized checkmark using CSS. The following examples illustrate this effect −Example Live Demo div {    margin: 2%;    position: relative;    width: 40px;    height: 40px;    box-shadow: inset 0 0 12px lightblue; } div::before {    content: "";    position: absolute;    width: 8px;    top: 50%;    height: 50%;    border-radius: 2px;    background-color: rgb(123, 45, 20);    transform: translateX(12px) rotate(-45deg);    transform-origin: left bottom;    z-index: +1; } div::after {    content: "";    position: absolute;    bottom: 0;    height: 8px;    width: 100%;    border-radius: 2px;    background-color: rgb(200, ... Read More

Pseudo-Class A pseudo-class represents a state of a selector like :hover, :active, :last-child, etc. These start with a single colon(:). Syntax The syntax of CSS pseudo-class is as follows − :pseudo-class{ attribute: /*value*/ } Pseudo-Element Similarly, a pseudo-element is used to select virtual elements like ::after, ::before, ::first-line, etc. These start with a double colon(::). Syntax The syntax of CSS pseudo-element is as follows − ::pseudo-element{ attribute: /*value*/ } Change the Link on Hover The following example illustrate changing the link on hover using the CSS pseudo class − Example ... Read More

We can create HTML tables with fixed header on scroll using CSS. It helps to increase readability as user doesn't have to scroll everytime to check the table header. In this article, we will learn and understand two different approaches for HTML tables with fixed header on scroll in CSS. We have a table inside a div element with class name as container. Our task is to fix HTML table header on scroll using CSS. Approaches for HTML Tables with Fixed Header on Scroll Here is a list of approaches for HTML tables with fixed header on scroll in CSS ... Read More

Using the CSS :not() pseudo-class, we can refine our styling by selecting those elements which do not have a specific value or does not match a selector. Select Elements not Having a Child Selector To select elements not having a child selector, use the :not pseudo-class in CSS. Here, we have a child selector. The CSS child selector is used to select all the child elements with a particular parent element. It selects all the elements that are children of i.e. div>p But we have selected elements not having this div>p − p:not(div>p) { ... Read More

To help developers customize their websites with a mix of JavaScript and CSS, new CSS properties have been developed and now support popular browsers. Some of these are listed below −focus-withinIt aims to solve focus-accessibility within elementsscroll-snapThis enables native scroll and deceleration@media(prefers-*)Helps set both UI and UX of page according to device preferences of the user, thereby, allowing higher level of personalization.* can denote light-level, forced-colors, color-scheme, contrast, reduced-motion and reduced-transparencyposition: stickyTo keep UI within the viewport.logical properties for having a standard layoutAllows us to have dynamic directional spacing within and around the elements.gap propertyThis property is now available for ... Read More

We can change the output of scrolling a webpage’s boundary area using the CSS overscroll-behavior property. Through this, we can disable Pull-to-Refresh on browsers. Syntax The syntax of CSS overscroll-behavior property is as follows − Selector { overscroll-behavior: /*value*/ } The Overscroll-behavior The following example illustrate CSS overscroll-behavior property. It sets what a web browser does after reaching the boundary of a scrolling area. Here, we have set the overflow-behavior-y for the div to set the web browser's behavior when the vertical boundary of a scrolling area is reached. The value contain is set for ... Read More

With the introduction of the following text-decoration properties, we can now style text in more ways than before. The text-decoration is the shorthand for text-decoration-thickness, text-decoration-color, text-decoration-line and text-decoration-style. text-decoration-skip, text-decoration-skip-ink, text-decoration, text-underline-offset and text-underline-position need to be specified explicitly. Syntax The syntax of CSS text-decoration is as follows − Selector { text-decoration: /*value*/ } The text-decoration Shorthand Property The text-decoration is the shorthand for text-decoration-thickness, text-decoration-color, text-decoration-line and text-decoration-style. text-decoration-skip, text-decoration-skip-ink, text-decoration, etc. Example Let us see an example to use the shorthand property to decorate text − ... Read More

The CSS text-decoration-color is used to change the link color. The underline is set using the text-decoration property. To change the link underline color, the same text-decoration-color property is used. Syntax The syntax of CSS text-decoration-color property is as follows − Selector { text-decoration-color: /*value*/ } Set the Links To set a link on a web page, we use the element with the href attribute. Add the link in the href attribute − Access our Java Tutorial for free Access our Python Tutorial for free ... Read More

We will now be able to explicitly set display type of elements by two valued syntax of CSS display. This will allow us to change the flow layout of element. Display an Inline Element The following examples illustrate CSS display property with multi-keyword − display: inline flow-root; The inline displays an element as an inline element whereas with the flow-root, the element generates a block box that establishes a new block formatting context. Example Let us see the example − body, div, span { ... Read More

By specifying grayscale value to the filter property of CSS we can create a black and white image. filter property can be used to apply special effects like blur, drop-shadow to images.SyntaxThe syntax of CSS filter property is as follows −Selector {    filter: grayscale(100%);    -webkit-filter: grayscale(100%); }ExampleThe following examples illustrate CSS filter property. Live Demo                    img {             margin: 2%;             border-radius: 25%;          }          img:nth-of-type(even) {             filter: grayscale(100%);             -webkit-filter: grayscale(100%);          }                               This gives the following outputExample Live Demo                    img {             margin: 2%;          }          img:nth-of-type(odd) {             filter: grayscale(100%);             -webkit-filter: grayscale(100%);          }                               This gives the following output