#css#flex

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

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

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.

<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
#css#animation

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

<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
#css#sudo

Pure css arrows using sudo elements. Arrow bottom.

<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
#css#sudo

Pure css arrows using sudo elements. Arrow left.

<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
#css#sudo

Pure css arrows using sudo elements. Arrow right.

<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
#css#sudo

Pure css arrows using sudo elements. Arrow top.

<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
#css

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

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

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.

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

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

<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
#css

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

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

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.

<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
#css#flex

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.

<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
#css#flex

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

<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
#css#background

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".

<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
#css#flex

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.

<!-- 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
#css#media#responsive

Target screen width between two sizes.

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

Target screen width equal to or larger than the value.

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

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

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

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

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

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

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

Target print media type.

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

Target screen size smaller than the value.

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

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.

<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
#css

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

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

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

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.

<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
#css#scroll

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.

<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
#css

First line selector targets top line in a given text.

<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
#css#selector

Select the next child of a given type.

<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
#css#selector

Select only the next sibling of a given type.

<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
#css#transition

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

<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
Sitemap Git repository