diff --git a/playground.html b/playground.html index 2b63073..9f89950 100644 --- a/playground.html +++ b/playground.html @@ -1,5 +1,6 @@ + @@ -8,16 +9,72 @@ +

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

???

+ \ No newline at end of file