Various 3

On this page

1. Outline offset

This is a property I hadn’t come across before. It offsets the outline on an element outdwards with a postive value or inwards with a negative one (as above).

h2:first-of-type {
    display: inline-block;
    padding: 0.25em 0.5em;
    background-color: #24d;
    color: white;
    outline: solid white 6px;
    outline-offset: -12px;
}

Below outline-offset is animated.

div {
    width: 500px;
    height: 300px;
    border: solid 2px pink;
    outline: solid 2px pink;
    outline-offset: -2px;
}

In the first button example outline-offset is used first with a -2px value to place the outline on top of the border. (Note that an outline is normally outside of the border.) Then in the hover state the offset value is changed to 2px, revealng the border as it expands outwards.

NB 1. The outline property, like border, is shorthand for

• outline-color
• outline-width
• outline-style

But outline-offset is not included. It’s a separate property.

NB 2. Unlike most other CSS properties outline is not inherited to the hover state. If it’s not declared there it won’t exist there.

2. text-stroke and text-fill

Although not currently officially supported these two properties have been available in all major browsers (Safari, Firefox, Chrome, Opera and Edge) for around a decade using the -webkit- prefix:

h2 {
    color: transparent;
    -webkit-text-stroke: 1px yellow;
    -webkit-text-fill: transparent;
}

3. Adding a gradient to text

This uses background-image: linear-gradient() which is then clipped to the text using background-clip: text

BUT for the background gradient to show through the color of the text must be set to transparent.

Some text

.gradient-text {
  color: transparent;
  background-image: linear-gradient(to right, black, fuchsia);
  background-clip: text;
}

The background-clip can take the following values:

1. border-box - The default. The background image extends out to beneath the border, only visible with non-solid or semi-transparent borders.
2. padding-box - The image is clipped at the outside edge of the padding.
3. content-box - Image is clipped at the edge of the content
4. text - The image is clipped to the text.

Here is an element set to padding-box. (Background gradients can behave strangely under borders.)

4. Using symbols in pseudo-elements

The content property is used inside the pseudo-elements ::before and ::after. Apart from CSS keywords like open-quote and close-quote everything has to be inside inverted commas. If you try to put UTF-8 symbol codes in they’re reproduced as the numbers not the symbol. To use these first find the UTF hex value. Then just prefix it with a backslash:

p::before {
    content: '\2600';
    font-size: 2em;
}

See the Pen This Pen by Synphod (@Synphod) on CodePen.