CSS Lighting Talk

Liam Jay

Designer, Code Monkey,
Cyclist, Gamer, Coffee Addict
at Love Creative UK

        @liamjay66

https://slides.com/liamjay66

Assumptions

p {
    color: DarkGoldenRod;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
}

<p>Hello Bristol!</p>

currentColor

currentColor always resolves to the value
of the color property

h1 {
    color: currentColor;
}

body {
    color: DarkGoldenRod;
}

hr {
    background: currentColor;
}

<p>Hello Bristol</p>

<hr>

Inheritance

The inherit keyword can be used in any
CSS property.

It always corresponds to the computed value
of the parent element.

h1 {
    color: inherit;
}

<p>Hello Bristol</p>

<hr>

<p>
    <a href="www.liamjaydesigns.com">www.liamjaydesigns.com</a>
</p>

body {
    color: DarkGoldenRod;
}

a {
    color: DarkGoldenRod;
}

body {
    color: DarkGoldenRod;
}

a {
    color: inherit;
}

body {
    color: DarkGoldenRod;
}

a {
    color: inherit;
    text-decoration: inherit;
}

.callout {
    position: relative;
    color: #6b592e;
    border: 1px dashed #5c5a60;
    background-color: #fffce0;
    padding: 0.75rem;
    border-radius: 8px;
}

.callout:before {
    content: "";
    position: absolute;
    top: -0.55em;
    left: 1em;
    padding: 0.5em;
    background: inherit;
    border: inherit;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg);
}

Vertical dividers in a list

<ol>
    <li>Item 1</li> |
    <li>Item 2</li> |
    <li>Item 3</li> |
    <li>Item 4</li> |
    <li>Item 5</li>
</ol>

li {
    display: inline-block;
}

li {
    display: inline-block;
}

li + :before {
    content: ' | ';
}

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ol>

More info: https://tinyurl.com/ycb27tbn

CSS Character Units

html {
    font-size: 100px;
}

.wrapper {
    width: 4ch; /* 1 ch is the width of a "0" */
}

Allows for perfect element + text scaling.

ch — Unit representing the width of the character "0" in the current font, of particular use in combination with monospace fonts.

Liam Jay

        @liamjay66

https://slides.com/liamjay66

www.liamjaydesigns.com