Articles by

Sunkanmi Fafowora

Direct link to the article border-image-source

border-image-source

The border-image-source CSS property creates borders around elements using an image file or CSS gradient as the source.

.container {
  border-width: 2rem;
  border-style: dotted;
  border-color: grey;
  border-image-source: url('path/to/image.jpg');
  border-image-repeat: repeat;
  border-image-slice: 100;
}
(Updated on )
Direct link to the article :autofill

:autofill

The :auto-fill pseudo-class in CSS allows us to style <input> elements that contain content auto-filled by the browser.

Take a new user registration form as an example. Have you ever clicked or tapped into a field and seen a dropdown …

(Updated on )
Direct link to the article ::file-selector-button

::file-selector-button

The ::file-selector-button in CSS is a pseudo-element that selects <input type="file"> in HTML.

input::file-selector-button {
  background-color: #f8a100;
}

You’ve undoubtedly come across file upload inputs — they’re very common, especially for including file attachments in a form, like a PDF …

(Updated on )
Direct link to the article :right

:right

The :right pseudo-class in CSS is used with the @page at-rule to select all right-hand pages in a print document that contains multiple pages. That’s handy for setting margins on double-sided pages so that the pages on the “right” side …

(Updated on )
Direct link to the article :left

:left

The :left pseudo-class in CSS is used with the @page at-rule to select all left-hand pages in a print document that contains multiple pages. That’s handy for setting margins on double-sided pages so that the pages on the “left” side …

(Updated on )
Direct link to the article :first

:first

The :first CSS pseudo-class is used with the @page at-rule to select the first page in a printed document. It’s very similar to the way :first-child selector works to target the first child element in a parent container, but instead …

(Updated on )
Direct link to the article break-before

break-before

The CSS break-before property is neat in that it allows, forces, or prevents breaks in paged media, multi-column layouts, and regions. When applying the property to an element, what we’re doing is providing an instruction for whether to break or …

(Updated on )
Direct link to the article break-after

break-after

The CSS break-after property is neat in that it allows, forces, or prevents breaks in paged media, multi-column layouts, and regions. When applying the property to an element, what we’re doing is providing an instruction for whether to break or …

(Updated on )