CSS cheatsheet

A quick way to center content horizontally and vertically using flex.

#css#flex 
<style>
    .container{
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
 copy

A simple example of the CSS animation using 'from' and 'to' keyframes. First, the animation states are being set within the @keyframe attribute. You need to give it a reference name, 'glow' in the example. In the second block the animation is being triggered by calling it's name in the 'animation-name' tag. The animation-duration allows to set the time elapsed between 'from' and 'to' keyframes.

#css#animation 
<style>
    @keyframes glow {
        from {outline-color: red;}
        to {outline-color: blue;}
    }   
    .link:target {
        outline: 3px solid transparent;
        animation-name: glow;
        animation-duration: 3s;
    }
</style>
<a class="link" href="#animate" id="animate" name="animate">Click here to try it out!</a>
Output:

Click here to try it out!

 copy

Animation example using percentage based keyframes. Each percentage value represents a point in the animation length

#css#animation 
<style>
    @keyframes outline-color {
        0%   {outline-color: red;}
        25%  {outline-color: yellow;}
        50%  {outline-color: blue;}
        100% {outline-color: green;}
    }
    .link-2:target {
        outline: 3px solid transparent;
        animation-name: outline-color;
        animation-duration: 4s;
    }
</style>
<a class="link-2" href="#animate-outline" id="animate-outline" name="animate-outline">Click here to try it out!</a>
Output:

Click here to try it out!

 copy

Pure css arrows using sudo elements. Arrow bottom.

#css#sudo 
<style>
    .arrow-bottom{
        display: block;
    }
    .arrow-bottom:after {
        border-style: solid;
        content: '';
        position: absolute;
        border-color: #eb6300 transparent transparent transparent;
        border-width: 10px 10px 0 10px;
    }
</style>
<span class="arrow-bottom"></span>
Output:

 copy

Pure css arrows using sudo elements. Arrow left.

#css#sudo 
<style>
    .arrow-left{
        display: block;
    }
    .arrow-left:after {
        border-style: solid;
        content: '';
        position: absolute;
        border-color: transparent #eb6300 transparent transparent;
        border-width: 10px 10px 10px 0;
    }
</style>
<span class="arrow-left"></span>
Output:

 copy

Pure css arrows using sudo elements. Arrow right.

#css#sudo 
<style>
    .arrow-right{
        display: block;
    }
    .arrow-right:after {
        border-style: solid;
        content: '';
        position: absolute;
        border-color: transparent transparent transparent #eb6300;
        border-width: 10px 0 10px 10px;
    }
</style>
<span class="arrow-right"></span>
Output:

 copy

Pure css arrows using sudo elements. Arrow top.

#css#sudo 
<style>
    .arrow-top{
        display: block;
    }
    .arrow-top:after {
        border-style: solid;
        content: '';
        position: absolute;
        border-color: transparent transparent #eb6300 transparent;
        border-width: 0 10px 10px 10px;
    }
</style>
<span class="arrow-top"></span>
Output:

 copy

attr() returns an attribute's value of the selected element.

#css 
.element:before{
    content: attr(data-value);
}
 copy

Bouncy animation using @keyframes and transform property.

#css#animation 
<style>

    .bounce{
        animation: bounce 2s infinite;
    }
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-30px);
        }
        60% {
            transform: translateY(-15px);
        }
    }

</style>
<div class="bounce">Bouncy!</div>
Output:
Bouncy!
 copy

Adds shadow to an element. It uses the following properties - inset (this property is optional and if left out the shadow will appear outside of the element), X axis shadow position, Y axis shadow position, blur value (set to 0 for no blur), spread (how big the shadow is going to appear), color of the shadow.

#css 
<style> 
    .element{
        /* properties: inset(optional) x y blur spread color ;*/
        box-shadow: 2px 2px 4px 2px #CCC;
    }
</style>
 copy

Using border-box style on your element will include border and padding within the width and height.

#css 
<style> 
    .with-border-box{
        box-sizing: border-box;
    }

    .element-styles{
        padding: 20px;
        border: 5px solid #4dc3a4;
        width: 100px;
        height: 100px;
        display: block;
    }
</style>

<span class="element-styles">Without Border-box</span>
<span class="element-styles with-border-box">With Border-box</span>
Output:

Without Border-box With Border-box

 copy

Calculates property value. You can mix different types of measurement units in the calculation like %, em, cm, in, mm, pc, pt, px, rem.

#css 
.my-selector{
    width: 100%; /* you can use fallback for the older browsers */
    width: calc(100% - 320px);
}
 copy

Clip path lets you mask an element using set shapes like circle, ellipse, polygon or a custom path.

#css
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path 
<style>
    .clip-image{
        display: inline-block;
        clip-path: polygon(100% 0, 100% 45%, 45% 100%, 0 100%, 0 0);
    }
</style>

<div class="clip-image">
    <img width="200" height="200" src="/assets/icon-512x512.png" alt="Clipped image">
</div>
Output:
Clipped image
copy

This media query let's you target non touch devices. Check browser support before implementing.

#css#media 
<style>
@media (hover: hover) {
    .no-touch { /* ... */ }
    .hover-dropdown { /* ... */ }
}
</style>
 copy

Flex direction sets the axis in which the items are positioned. By default it is set to 'row' but optionally 'row-reverse', 'column' or 'column-reverse' can be used.

#css#flex 
<style>
    .flex-direction{
        display: flex;
        flex-direction: column;
    }
    .flex-direction span{
        border: 1px solid #4dc3a4;
        padding: 6px;
    }
</style>
<span class="flex-direction">
    <span>Element 1</span>
    <span>Element 2</span>
    <span>Element 3</span>
</span>
Output:

Element 1 Element 2 Element 3

copy

Flex grow lets you set the relative size of the items. The higher the number used in the flex-grow attribute the larger the item will grow in relation to other elements.

#css#flex 
<style>
    .flex-grow{
        display: flex;
    }
    .flex-grow-1{
        flex-grow: 1;
    }
    .flex-grow-2{
        flex-grow: 2;
    }
    .flex-grow span{
        border: 1px solid #4dc3a4;
        padding: 6px;
    }
</style>
<span class="flex-grow">
    <span class="flex-grow-1">Grow 1</span>
    <span class="flex-grow-2">Grow 2</span>
    <span class="flex-grow-1">Grow 1</span>
</span>
Output:

Grow 1 Grow 2 Grow 1

copy

Flex order lets you change the sequence of the page elements. The order attribute takes an integer to set the hierarchy.

#css#flex 
<style>
    .flex-order{
        display: flex;
    }
    .flex-order-1{
        order: 1;
    }
    .flex-order-2{
        order: 2;
    }
    .flex-order-3{
        order: 3;
    }
    .flex-order span{
        border: 1px solid #4dc3a4;
        padding: 6px;
    }
</style>
<span class="flex-order">
    <span class="flex-order-3">Element 1</span>
    <span class="flex-order-2">Element 2</span>
    <span class="flex-order-1">Element 3</span>
</span>
Output:

Element 1 Element 2 Element 3

copy

This setting allows you to control the display behaviour of the font. Options - auto, block, swap, fallback, optional.

#css#font 
<style>
    @font-face {

        /* Declare font settings here, font-family, style, weight, and source */

        /* Then you can choose from one of the following options */
        font-display: auto;     /* Use default user agent settings */
        font-display: block;    /* This can stop the font flickering but can affect performance */
        font-display: swap;     /* A suggested solution. Good balance between performance and user experience */
        font-display: fallback; /* Prioritises fallback font over the custom font */
        font-display: optional; /* This will use the fallback font */
    }
</style>
 copy

The inset property shorthand is used to specify top, right, bottom, and left values simultaneously. The values are given in the order top, right, bottom, left, and are separated by spaces.

#css
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/inset 
<style>
    .inset{
        /* top right bottom left */
        inset: 10px 20px 30px 40px;
    }

    .inset-10{
        /* One value for all sides */
        inset: 10px;
    }
</style>
 copy

Set gradient background of the element. The first attribute is for the gradient's angle, choose from "to bottom", "to right", a mixed approach "to bottom left" or a degree value like "-10deg".

#css#background 
<style>
    .element{
        /* background-image: linear-gradient(direction, color-1, color-2, ...); */
        
        /* If the direction isn't set the gradient will be set top to bottom by default. */
        background-image: linear-gradient(start-color, end-color);
        
        /* You can use multiple colors too */
        background-image: linear-gradient(to left, #111c3a, #192850);
    }
</style>
 copy

This example loads a custom font file. Preload tag ensures the request fetching the resource is raised as soon as possible to improve user experience. In addition, font-display and unicode-range attributes are used to optimise performance.

#css#font 
<!-- Use preload tag in the header to prioritise font request -->
<link rel="preload" href="path/to/the/Font-File.woff2" as="font">

<style>
    @font-face {
        font-family: "Font";
        font-style: normal;
        font-weight: 400;
        src:    url(fonts/Font-File.eot);
        src:    local('Font'), /* Get the local font file if available */
                url(fonts/Font-File.woff2) format("woff2"), /* Preloaded in the header */
                url(fonts/Font-File.woff) format("woff"),
                url(fonts/Font-File.eot#iefix) format("eot");
        font-display: optional;     /* Prevent reflows */
        unicode-range: U+000-5FF;   /* Load Latin glyphs only */
    }
</style>
 copy

Target screen width between two sizes.

#css#media#responsive 
@media screen and ( min-width: 768px ) and ( max-width: 1024px ) {
    ...
}
 copy

Target screen width equal to or larger than the value.

#css#media#responsive 
@media screen and ( min-width: 768px ) {
    ...
}
 copy

Media query general specification:

media not|only media type and (media feature and|or|not media feature) {}

Query keywords: not, only, and

Media type: all, print, screen, speech

Values: any-hover, any-pointer, aspect-ratio, color, color-gamut, color-index, grid, height, hover, inverted-colors, light-level, max-aspect-ratio, max-color, max-color-index, max-height, max-monochrome, max-resolution, max-width, min-aspect-ratio, min-color, min-color-index, min-height, min-monochrome, min-resolution, min-width, monochrome, orientation, overflow-block, overflow-inline, pointer, resolution, scan, scripting, update, width

#css#media#responsive 
@media () {
    ...
}
 copy

Target device's orientation. Use landscape or portrait value.

#css#media#responsive 
@media screen and ( orientation: landscape ) {
    ...
}
 copy

Target device's orientation. Use landscape or portrait value.

#css#media#responsive 
@media screen and ( orientation: portrait ) {
    ...
}
 copy

Target print media type.

#css#media#responsive 
@media print {
    ...
}
 copy

Target screen size smaller than the value.

#css#media#responsive 
@media screen and ( max-width: 1024px ) {
    ...
}
 copy

This pseudo class matches an element that has no children. Whitespace is considered as a child, so if you have an element with a space inside, it will not be considered empty.

#css#pseudo-class 
:empty {
    display: none;
}
 copy

Set radial gradient background of the element. The first attribute is to define the shape of the gradient. If not set it will default to an ellipse filling in the background space of the element. The following values are for setting colors of the gradient starting from the inside. You can set multiple colors if you like. The final value defines the size of the effect. Its default value is 100% and it spans from edge to edge of the element.

#css#background 
<style>
    .radial-background{
        background-color: #009cde;
        background-image: radial-gradient(circle, #009cde, #926fd6, #003087 115%);
        padding: 48px 24px;
        color: #FFF;
        text-align: center;
    }
</style>

<div class="radial-background">Element with a radial background.</div>
Output:
Element with a radial background.
 copy

You can use rotate() within transform style declaration. Pass a positive (clockwise) or negative (anti-clockwise) degree value to turn an element.

#css 
<style>
    .rotate{
        transform: rotate(-10deg);
        display: inline-block;
    }
</style>

<div class="rotate">Rotated</div>
Output:
Rotated
 copy

Scroll snap x lets you set horisontal snapping behaviour of the scrolling element. Choose from mandatory or proximity options for different effects. Make sure you are happy with the browser support for this property before using.

#css#scroll 
<style>
    .scroll-snap-x{
        overflow-x: auto;
        scroll-snap-type:x mandatory; /* mandatory|proximity */
        max-height: 320px;
        max-width: 320px;
    }

    .scroll-snap-x__wrapper{
        display: flex;
    }

    .scroll-snap-x img{
        scroll-snap-align: center; /* center|start|end */
    }
</style>

<div class="scroll-snap-x">
    <div class="scroll-snap-x__wrapper">
        <img src="https://picsum.photos/id/480/300/300" alt="image 1">
        <img src="https://picsum.photos/id/480/300/300" alt="image 2">
        <img src="https://picsum.photos/id/480/300/300" alt="image 3">
        <img src="https://picsum.photos/id/480/300/300" alt="image 4">
        <img src="https://picsum.photos/id/480/300/300" alt="image 5">
    </div>
</div>
Output:
image 1 image 2 image 3 image 4 image 5
copy

Scroll snap y lets you set vertical snapping behaviour of the scrolling element. Choose from mandatory or proximity options for different effects. Make sure you are happy with the browser support for this property before using.

#css#scroll 
<style>
    .scroll-snap-y{
        overflow-y: auto;
        scroll-snap-type:y mandatory; /* mandatory|proximity */
        max-height: 320px;
        max-width: 320px;
    }

    .scroll-snap-y img{
        scroll-snap-align: center; /* center|start|end */
    }
</style>
<div class="scroll-snap-y">
    <img src="https://picsum.photos/id/480/300/300" alt="image 1">
    <img src="https://picsum.photos/id/480/300/300" alt="image 2">
    <img src="https://picsum.photos/id/480/300/300" alt="image 3">
    <img src="https://picsum.photos/id/480/300/300" alt="image 4">
    <img src="https://picsum.photos/id/480/300/300" alt="image 5">
</div>
Output:
image 1 image 2 image 3 image 4 image 5
copy

First line selector targets top line in a given text.

#css 
<style>
    .some-text{
        width: 300px;
    }
    .some-text::first-line{
        font-size: 24px;
        font-weight: 800;
    }
</style>
<p class="some-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti, optio harum? Eius, deserunt, optio assumenda accusamus error eos quasi commodi consequuntur recusandae sapiente vel itaque aut reiciendis ipsum nesciunt fugit.</p>
Output:

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti, optio harum? Eius, deserunt, optio assumenda accusamus error eos quasi commodi consequuntur recusandae sapiente vel itaque aut reiciendis ipsum nesciunt fugit.

 copy

Select the next child of a given type.

#css#selector 
<style>
    .first-element > .next-element{ border: 1px solid }
</style>

<span class="first-element">
    <span class="next-element">Item</span> <!--  this gets selected  -->
    <span class="next-element">Item <!--  and this -->
        <span class="next-element">Item</span> <!--  this does not  -->
    </span>
</span>
Output:

Item Item Item

copy

Select only the next sibling of a given type.

#css#selector 
<style>
    .first-element + .next-element{ border: 1px solid }
</style>

<span class="first-element">Item</span>
<span class="next-element">Item</span> <!--  this gets selected  -->
<span class="next-element">Item</span> <!--  this does not  -->
Output:

Item Item Item

copy

Style the selected text and elements.

#css 
<style>
    ::selection{
        background: #FFF;
        color: #EB6300;
    }
</style>
 copy

Example of using transition, transform and opacity to animate elements in.

#css#transition 
<style>
    .animate{
        transform: scaleY(0);
        transform-origin: top;
        opacity: 0;
        transition:
            transform .4s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms,
            opacity .4s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
    }
    .is-active{
        transform: scaleY(1);
        opacity: 1;
    }
</style>
 copy