Articles by

Joel Olawanle

Frontend Developer and Technical writer.

Direct link to the article scale

scale

The scale property in CSS resizes an element’s width and height in proportion. So, if we have an element that’s 100 pixels square, scaling it up by a value of 2 doubles the dimensions to 200 pixels square. Similarly, a …

Direct link to the article translate

translate

The translate CSS property allows you to transfer an element from one place to another along the X (horizontal) axis, the Y (vertical) axis, and the Z (depth) axis, similar to how you might think of moving an element using …

Direct link to the article rotate

rotate

The rotate property in CSS turns an element around one or more axes. Think of it like poking one or more pins into an element and spinning the element around those points in clockwise and counter-clockwise directions measured in degree, …

(Updated on )
Direct link to the article padding-block

padding-block

padding-block is a CSS logical shorthand property that combines the padding-block-start and padding-block-end properties into a single declaration, creating space around an element’s content in the block (top and bottom) direction.

.element {
  padding-block: 30px 60px;
  writing-mode: vertical-rl; /* Determines 
(Updated on )
Direct link to the article padding-inline

padding-inline

padding-inline is a CSS logical shorthand property that combines the padding-inline-start and padding-inline-end properties into a single declaration, creating space around an element’s content in the inline (top and bottom) direction.

.element {
  padding-inline: 30px 60px;
  writing-mode: vertical-rl; /* Determines 
Direct link to the article border-block

border-block

border-block is a CSS logical shorthand property that combines border-block-color, border-block-style, and border-block-width into a single declaration.

.element {
  border-block: 5px solid red;
  writing-mode: horizontal-tb;
}

border-block is the logical equivalent to physical properties including border-top and border-bottom

(Updated on )
Direct link to the article border-inline

border-inline

border-inline is a CSS logical shorthand property that combines border-inline-color, border-inline-style, and border-inline-width into a single declaration, styling an element’s borders in the inline (left and right) direction.

.element {
  border-inline: 5px solid red;
  writing-mode: horizontal-tb;
}

border-inline

(Updated on )

text-emphasis

The text-emphasis property in CSS, as the name implies, is used to emphasize text in CSS. It does it by applying special marks to an element’s text.

.element {
  text-emphasis: circle red;
}

You might think of text emphasis as …