Playground

Tricks

Gradient text with CSS

This one comes from Kevin Powell, on a YouTube video short "Gradient text with CSS | CSS Tip of the Day". It applies a colored gradient to text. Note that the -webkit- is needed to make this trick work in Safari.

Thingy Text thats with a gradient

Tip for screen sized approriate images

shiny black dog looking pensive 
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-480.jpg" 
srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-960.jpg  2x, 
            https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1440.jpg 3x, 
                    https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1920.jpg 4x" 
alt="shiny black dog looking pensive" 
width="480" height="360">
Better though is smiling black dog 
<picture>
    <source media="(min-width:600px)"
            srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-320.jpg  320w,
                    https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg  480w, 
                    https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-720.jpg  720w,
                    https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-960.jpg  960w, 
                    https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-1440.jpg 1440w, 
                    https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-1920.jpg 1920w" >
    <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-320.jpg 320w,
                    https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-480.jpg 480w, 
                    https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-720.jpg 720w,
                    https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-960.jpg 960w" >
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg" 
            alt="smiling black dog"
            height="360px" width="480px">
</picture>

???