├── animations ├── README.md ├── files │ ├── psy.png │ ├── sprite.png │ ├── transitionplacement.html │ ├── template.html │ ├── bike.html │ ├── file_steps.html │ ├── name.html │ ├── repeated_keyframe.html │ ├── important.html │ ├── no0or100.html │ ├── nomidpoint.html │ ├── specificity.html │ ├── specificity2.html │ ├── cubicbezierprint.html │ ├── cubicbezier.html │ ├── halfiterationforwards.html │ ├── odditeration.html │ └── steps.html ├── static │ ├── img │ │ ├── new.gif │ │ ├── bike.png │ │ ├── sprite.png │ │ └── browser_logos-64.png │ ├── scss │ │ ├── _ex_simpletrans.scss │ │ ├── _variables.scss │ │ ├── style.scss │ │ ├── _yesno.scss │ │ ├── _code.scss │ │ ├── _object.scss │ │ ├── _pre.scss │ │ ├── _deck_functionality.scss │ │ ├── _print.scss │ │ ├── _slide.scss │ │ ├── files.scss │ │ ├── _heading.scss │ │ ├── _ex_navigation.scss │ │ ├── _ex_steps.scss │ │ ├── _content.scss │ │ └── _ex_animations.scss │ └── css │ │ ├── files.css.map │ │ └── files.css └── file_steps.html ├── flexbox ├── files │ ├── Icon │ ├── .dropbox │ ├── style.css │ ├── explain.html │ ├── display.html │ ├── nav_displayflex.html │ ├── nav_sidenav_direction.html │ ├── pagelayout.html │ ├── finalflex.html │ ├── flex3.html │ ├── direction.html │ ├── justify.html │ ├── textflex.html │ ├── button.html │ ├── collapse.html │ └── multi.html ├── 408-368-7620 - padnya ├── images │ ├── unicorn1.jpg │ ├── unicorn2.jpg │ ├── unicorn3.jpg │ ├── unicorn4.jpg │ ├── unicorn5.jpg │ └── flexbasis.png └── flexbox.css ├── borders ├── img │ └── shark.gif └── files │ ├── img │ └── longcat.jpg │ ├── 84_backgroundsize.html │ ├── 83_longcat.html │ ├── 82_borderradius.html │ ├── 81_bgposition.html │ └── 81b_bgposition.html ├── other ├── images │ ├── big.png │ ├── bike.png │ ├── frame.jpg │ ├── huge.png │ ├── plus.gif │ ├── small.png │ ├── frame2.png │ ├── medium.png │ ├── framemask.png │ ├── kittenjaw.jpg │ ├── lessthan.gif │ ├── specificity3.png │ └── unicorncupcake.jpg └── files │ ├── images │ ├── adam.jpg │ ├── mask.png │ ├── ring.png │ ├── phone.jpg │ ├── cupcake.png │ ├── plumber.png │ ├── unicorncupcake.jpg │ ├── heart2.svg │ └── heart.svg │ ├── style.html │ ├── supports.html │ ├── awesome.html │ ├── important.html │ ├── importantanimation.html │ ├── counting.html │ ├── any.html │ ├── steps.html │ ├── shapes_clip_heart.html │ ├── shapes_animation.html │ ├── justify.html │ ├── print_timing_function.html │ ├── blendmode.html │ ├── counter.html │ ├── subset.html │ ├── shapes_heart.html │ ├── vertical.html │ └── icons2.html ├── media ├── images │ └── devicesizes.jpg └── files │ ├── catsvg.html │ ├── b.html │ ├── supports.html │ ├── svgimg.html │ ├── mediaqueries.html │ ├── template.html │ ├── a.html │ ├── circlesvgimg.html │ ├── svgcimg.html │ ├── adaptiveimages.html │ ├── files.css │ ├── clownc.svg │ └── clownd.svg ├── transforms └── files │ ├── animation │ ├── psy.png │ ├── sprite.png │ ├── template.html │ ├── nomidpoint.html │ ├── HW_file_steps.html │ ├── halfiterationforwards.html │ ├── file_steps.html │ ├── name.html │ └── important.html │ ├── 100_simpletransforms.html │ ├── 101_transformorigin.html │ ├── 102_backface.html │ ├── 101_transform3dhtml.html │ ├── transforms │ ├── backfacevisibility.html │ ├── pOrigin.html │ ├── tStyle.html │ ├── perspective.html │ ├── tStyle1.html │ ├── files.css │ └── tOrder.html │ ├── files.css │ ├── flexbox │ ├── explain.html │ ├── pagelayout.html │ ├── display.html │ ├── calc.html │ ├── direction.html │ ├── justify.html │ ├── finalflex.html │ └── 08_dropcap.html │ └── selectors │ ├── 00_basics.html │ ├── 09_firstline.html │ ├── 08_dropcap.html │ └── 02_counting.html ├── tables ├── scss │ ├── style.scss │ ├── _variables.scss │ ├── _code.scss │ ├── _object.scss │ ├── _pre.scss │ ├── _deck_functionality.scss │ ├── _print.scss │ ├── _slide.scss │ ├── _content.scss │ ├── files.scss │ ├── _heading.scss │ └── _buttons.scss ├── files.css.map └── files.css ├── grid ├── scss │ ├── _variables.scss │ ├── style.scss │ ├── _deflist.scss │ ├── _code.scss │ ├── _object.scss │ ├── _pre.scss │ ├── _deck_functionality.scss │ ├── _print.scss │ ├── _slide.scss │ ├── _gridlines.scss │ ├── files.scss │ ├── _content.scss │ ├── _heading.scss │ └── _buttons.scss ├── files.css.map ├── files.css └── files │ ├── aligning.html │ ├── display.html │ ├── pagelayout2.html │ ├── flex.html │ ├── grid2.html │ ├── play.html │ ├── display2.html │ ├── grid.html │ ├── test.html │ ├── content2.html │ ├── content3.html │ ├── content.html │ ├── pagelayoutplay.html │ ├── pagelayout.html │ ├── parentproperties.html │ ├── parentproperties2.html │ ├── extracols.html │ ├── parentproperties4.html │ ├── doit1.html │ └── parentproperties3.html ├── gradients ├── files │ ├── base.html │ ├── play1.html │ ├── radial1.html │ ├── keytermsyntax.html │ ├── colorstop3.html │ ├── radial4.html │ ├── radial2.html │ ├── radial5.html │ ├── radial3.html │ ├── radial7.html │ ├── sidecorner1.html │ ├── colorstop1.html │ ├── repeat1.html │ ├── colorstop4.html │ ├── colorstop6.html │ ├── colorstop7.html │ ├── colorstop2.html │ ├── radial6.html │ ├── radial8.html │ ├── colorstop5.html │ ├── radial10.html │ ├── radial9.html │ ├── colorstop8.html │ ├── template.html │ ├── files.css │ ├── colorhint1.html │ ├── oldlinearsyntax.html │ ├── w3clinearsyntax.html │ ├── prefixedlinearsyntax.html │ ├── flickr.html │ └── repeat.html └── anglessvg.svg ├── colors ├── color.css └── files │ ├── colors.html │ └── files.css ├── selectors └── files │ ├── 01_attr_caseinsensitiveB.html │ ├── importantanimation.html │ ├── editme.css │ ├── 07_empty.html │ ├── 09_firstline.html │ ├── 00_basics.html │ ├── 01_attr_caseinsensitive.html │ ├── animationorderproperties.html │ ├── 08_dropcap.html │ ├── 02_counting.html │ ├── 00_basic.html │ ├── generatedcontent.html │ ├── 03_root.html │ ├── 02_uiselectors.html │ └── 31_generatetext.html ├── generated └── files │ ├── counting.html │ ├── counter.html │ ├── 02_counting.html │ ├── files.css │ ├── icons2.html │ ├── 03_bubbles.html │ ├── 01_images.html │ └── 00_attr.html └── intro └── files └── simpleexample.html /animations/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /flexbox/files/Icon : -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /flexbox/files/.dropbox: -------------------------------------------------------------------------------- 1 | {"tag": "shared", "ns": 1260631261} -------------------------------------------------------------------------------- /borders/img/shark.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/borders/img/shark.gif -------------------------------------------------------------------------------- /flexbox/408-368-7620 - padnya: -------------------------------------------------------------------------------- 1 | 408-368-7620 - padnya 2 | 3 | 4 | 5 | lorena - enza - 650-655-6260 -------------------------------------------------------------------------------- /other/images/big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/images/big.png -------------------------------------------------------------------------------- /other/images/bike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/images/bike.png -------------------------------------------------------------------------------- /other/images/frame.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/images/frame.jpg -------------------------------------------------------------------------------- /other/images/huge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/images/huge.png -------------------------------------------------------------------------------- /other/images/plus.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/images/plus.gif -------------------------------------------------------------------------------- /other/images/small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/images/small.png -------------------------------------------------------------------------------- /animations/files/psy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/animations/files/psy.png -------------------------------------------------------------------------------- /other/images/frame2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/images/frame2.png -------------------------------------------------------------------------------- /other/images/medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/images/medium.png -------------------------------------------------------------------------------- /animations/files/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/animations/files/sprite.png -------------------------------------------------------------------------------- /flexbox/images/unicorn1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/flexbox/images/unicorn1.jpg -------------------------------------------------------------------------------- /flexbox/images/unicorn2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/flexbox/images/unicorn2.jpg -------------------------------------------------------------------------------- /flexbox/images/unicorn3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/flexbox/images/unicorn3.jpg -------------------------------------------------------------------------------- /flexbox/images/unicorn4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/flexbox/images/unicorn4.jpg -------------------------------------------------------------------------------- /flexbox/images/unicorn5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/flexbox/images/unicorn5.jpg -------------------------------------------------------------------------------- /other/files/images/adam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/files/images/adam.jpg -------------------------------------------------------------------------------- /other/files/images/mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/files/images/mask.png -------------------------------------------------------------------------------- /other/files/images/ring.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/files/images/ring.png -------------------------------------------------------------------------------- /other/images/framemask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/images/framemask.png -------------------------------------------------------------------------------- /other/images/kittenjaw.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/images/kittenjaw.jpg -------------------------------------------------------------------------------- /other/images/lessthan.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/images/lessthan.gif -------------------------------------------------------------------------------- /animations/static/img/new.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/animations/static/img/new.gif -------------------------------------------------------------------------------- /borders/files/img/longcat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/borders/files/img/longcat.jpg -------------------------------------------------------------------------------- /flexbox/images/flexbasis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/flexbox/images/flexbasis.png -------------------------------------------------------------------------------- /media/images/devicesizes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/media/images/devicesizes.jpg -------------------------------------------------------------------------------- /other/files/images/phone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/files/images/phone.jpg -------------------------------------------------------------------------------- /other/images/specificity3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/images/specificity3.png -------------------------------------------------------------------------------- /animations/static/img/bike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/animations/static/img/bike.png -------------------------------------------------------------------------------- /animations/static/img/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/animations/static/img/sprite.png -------------------------------------------------------------------------------- /other/files/images/cupcake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/files/images/cupcake.png -------------------------------------------------------------------------------- /other/files/images/plumber.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/files/images/plumber.png -------------------------------------------------------------------------------- /other/images/unicorncupcake.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/images/unicorncupcake.jpg -------------------------------------------------------------------------------- /transforms/files/animation/psy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/transforms/files/animation/psy.png -------------------------------------------------------------------------------- /other/files/images/unicorncupcake.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/other/files/images/unicorncupcake.jpg -------------------------------------------------------------------------------- /transforms/files/animation/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/transforms/files/animation/sprite.png -------------------------------------------------------------------------------- /animations/static/img/browser_logos-64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/estelle/cssmastery/HEAD/animations/static/img/browser_logos-64.png -------------------------------------------------------------------------------- /animations/static/scss/_ex_simpletrans.scss: -------------------------------------------------------------------------------- 1 | .h1 {font-size: 80px;} 2 | .hoverme {color: green; text-decoration:underline;} 3 | .hoverme:hover {color: orange;} 4 | .simptrans {transition:1s;} 5 | /*.simptrans:hover {transition:10s}*/ -------------------------------------------------------------------------------- /tables/scss/style.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import "presentation"; 4 | @import "deck_functionality"; 5 | @import "buttons"; 6 | @import "slide"; 7 | @import "heading"; 8 | @import "content"; 9 | @import "print"; 10 | @import "object"; -------------------------------------------------------------------------------- /animations/static/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $font: 'SanchezSlab Semibold', Georgia, serif; 2 | $splashcolor: #58ADE3; 3 | $text: #333333; 4 | $textsecondary: #4d4d4d; 5 | $invertedtext: #ffffff; 6 | $header_bg: #ffffff; 7 | $light_bg: #f4f4f4; 8 | $dark_bg: #707070; -------------------------------------------------------------------------------- /tables/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $font: 'SanchezSlab Semibold', Georgia, serif; 2 | $splashcolor: #cc0000; 3 | $text: #333333; 4 | $textsecondary: #4d4d4d; 5 | $invertedtext: #ffffff; 6 | $header_bg: #ffffff; 7 | $light_bg: #f4f4f4; 8 | $dark_bg: #000000; 9 | $colorpop: #cc0000; -------------------------------------------------------------------------------- /grid/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $font: 'SanchezSlab Semibold', Georgia, serif; 2 | $splashcolor: #0000cc; 3 | $text: #333333; 4 | $textsecondary: #4d4d4d; 5 | $invertedtext: #ffffff; 6 | $header_bg: #ffffff; 7 | $light_bg: #f4f4f4; 8 | $dark_bg: #333; 9 | $colorpop: #0000cc; 10 | $alert: #cc0000; -------------------------------------------------------------------------------- /grid/scss/style.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import "presentation"; 4 | @import "deck_functionality"; 5 | @import "buttons"; 6 | @import "slide"; 7 | @import "heading"; 8 | @import "content"; 9 | @import "deflist"; 10 | @import "print"; 11 | @import "object"; 12 | 13 | @import "gridlines"; -------------------------------------------------------------------------------- /animations/static/scss/style.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import "presentation"; 4 | @import "deck_functionality"; 5 | @import "slide"; 6 | @import "heading"; 7 | @import "icons"; 8 | @import "content"; 9 | @import "print"; 10 | @import "object"; 11 | @import "animations"; 12 | @import "project"; -------------------------------------------------------------------------------- /flexbox/files/style.css: -------------------------------------------------------------------------------- 1 | style[contenteditable] { 2 | display: block; 3 | white-space: pre; 4 | font-size: 2rem; 5 | color: #666; 6 | font-family: monospace; 7 | } 8 | body {padding-top: 1.25em; font-family: georgia;} 9 | small, style { 10 | -webkit-user-modify: read-write-plaintext-only; } -------------------------------------------------------------------------------- /media/files/catsvg.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SVG as Foreground image 5 | 8 | 9 | 10 | resizable cats 11 |

Resize window to change cats

12 | 13 | -------------------------------------------------------------------------------- /animations/static/scss/_yesno.scss: -------------------------------------------------------------------------------- 1 | .yes, .no { 2 | position: relative; 3 | } 4 | .yes:after, .no:after { 5 | content: '✓'; 6 | color: green; 7 | font-size: 60px; 8 | position: absolute; 9 | top: 5px; 10 | right: 5px; 11 | } 12 | .no:after { 13 | content: 'X'; 14 | color: red; 15 | font-family: "Comic Sans MS", cursive; 16 | } -------------------------------------------------------------------------------- /grid/scss/_deflist.scss: -------------------------------------------------------------------------------- 1 | /* DEFINITION LISTS */ 2 | dl dt {margin-bottom: 1rem; 3 | background-color: rgba($splashcolor, 0.25); 4 | } 5 | dl dd {display: none;} 6 | dl dt:hover + dd {display:inherit;} 7 | dl.listed dt {margin-bottom:0; margin-top:0.2rem; 8 | display:block; width: 50%; padding-left: 5px; 9 | } 10 | dl.listed.wide dt {width:100%;} -------------------------------------------------------------------------------- /media/files/b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 17 |

Change the screen width

18 | clowns 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /other/files/images/heart2.svg: -------------------------------------------------------------------------------- 1 | 2 | heart 3 | 4 | -------------------------------------------------------------------------------- /other/files/style.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Counters 6 | 7 | 12 | Editable Style 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /media/files/supports.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 15 | @supports 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /other/files/images/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | heart 4 | 5 | 6 | -------------------------------------------------------------------------------- /gradients/files/base.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic CSS Gradient 6 | 7 | 8 | 12 | 13 | change: linear | radial
14 | change: colors 15 | -------------------------------------------------------------------------------- /grid/scss/_code.scss: -------------------------------------------------------------------------------- 1 | 2 | .code { 3 | color: $text; 4 | font-size: 85%; 5 | background-color: rgba(255,255,255,0.4); 6 | transition: all 2s ease-in 50ms; 7 | } 8 | .code:hover { 9 | color: $splashcolor; 10 | background-color: rgba(255,255,255,0.9); 11 | } 12 | .code:not(.code2):hover { 13 | font-size: 120%; 14 | } 15 | .code2:hover { 16 | transform: scale(1.4); 17 | transform-origin: top left; 18 | 19 | } -------------------------------------------------------------------------------- /tables/scss/_code.scss: -------------------------------------------------------------------------------- 1 | 2 | .code { 3 | color: $text; 4 | font-size: 85%; 5 | background-color: rgba(255,255,255,0.4); 6 | transition: all 2s ease-in 50ms; 7 | } 8 | .code:hover { 9 | color: $splashcolor; 10 | background-color: rgba(255,255,255,0.9); 11 | } 12 | .code:not(.code2):hover { 13 | font-size: 120%; 14 | } 15 | .code2:hover { 16 | transform: scale(1.4); 17 | transform-origin: top left; 18 | 19 | } -------------------------------------------------------------------------------- /transforms/files/100_simpletransforms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | Simple Transforms 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /animations/static/scss/_code.scss: -------------------------------------------------------------------------------- 1 | 2 | .code { 3 | color: $text; 4 | font-size: 85%; 5 | background-color: rgba(255,255,255,0.4); 6 | transition: all 2s ease-in 50ms; 7 | } 8 | .code:hover { 9 | color: $splashcolor; 10 | background-color: rgba(255,255,255,0.9); 11 | } 12 | .code:not(.code2):hover { 13 | font-size: 120%; 14 | } 15 | .code2:hover { 16 | transform: scale(1.4); 17 | transform-origin: top left; 18 | 19 | } -------------------------------------------------------------------------------- /gradients/files/play1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic CSS Gradient 6 | 7 | 8 | 12 | 13 | add a linear gradient with color stops. Angles or keyterm, hint, play with sizing and repeating
14 | 15 | -------------------------------------------------------------------------------- /gradients/files/radial1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Radial Gradient Defaults 6 | 7 | 8 | 14 | 15 | change all the values
16 | 17 | -------------------------------------------------------------------------------- /gradients/files/keytermsyntax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Gradient Keyterms 6 | 7 | 8 | 14 | 15 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /grid/scss/_object.scss: -------------------------------------------------------------------------------- 1 | /* OBJECT PAGES */ 2 | .object header { 3 | position:absolute; 4 | top: 10px; 5 | width: 100%; 6 | text-align:center; 7 | background-color: rgba(255,255,255,0.9); 8 | left:0; 9 | } 10 | .objectlink { 11 | position:absolute; 12 | top:0; right:0; 13 | color: white; 14 | background-color: #000; 15 | padding: 3px 5px; 16 | border: none; 17 | } 18 | .slide.object {padding:0;} 19 | .object object {width: 100%; height: 100%;} 20 | -------------------------------------------------------------------------------- /tables/scss/_object.scss: -------------------------------------------------------------------------------- 1 | /* OBJECT PAGES */ 2 | .object header { 3 | position:absolute; 4 | top: 10px; 5 | width: 100%; 6 | text-align:center; 7 | background-color: rgba(255,255,255,0.9); 8 | left:0; 9 | } 10 | .objectlink { 11 | position:absolute; 12 | top:0; right:0; 13 | color: white; 14 | background-color: #000; 15 | padding: 3px 5px; 16 | border: none; 17 | } 18 | .slide.object {padding:0;} 19 | .object object {width: 100%; height: 100%;} 20 | -------------------------------------------------------------------------------- /animations/static/scss/_object.scss: -------------------------------------------------------------------------------- 1 | /* OBJECT PAGES */ 2 | .object header { 3 | position:absolute; 4 | top: 10px; 5 | width: 100%; 6 | text-align:center; 7 | background-color: rgba(255,255,255,0.9); 8 | left:0; 9 | } 10 | .objectlink { 11 | position:absolute; 12 | top:0; right:0; 13 | color: white; 14 | background-color: #000; 15 | padding: 3px 5px; 16 | border: none; 17 | } 18 | .slide.object {padding:0;} 19 | .object object {width: 100%; height: 100%;} 20 | -------------------------------------------------------------------------------- /gradients/files/colorstop3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic CSS Gradient 6 | 7 | 8 | 17 | 18 | Add red and purple
19 | 20 | -------------------------------------------------------------------------------- /gradients/files/radial4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Radial Gradient Shapes 6 | 7 | 8 | 15 | 16 | change the shape to circle
17 | 18 | -------------------------------------------------------------------------------- /flexbox/flexbox.css: -------------------------------------------------------------------------------- 1 | #presentation { 2 | background: linear-gradient(to bottom, #9de89d, #3b6c3b) 3 | } 4 | pre b, strong { 5 | color: #3b6c3b; 6 | text-shadow: #9de89d 0 0 1px; 7 | font-weight: bold; 8 | } 9 | code {color: inherit;} 10 | @media screen and (-webkit-min-device-pixel-ratio: 0) { 11 | .textmask, h1, a { 12 | background: linear-gradient(to bottom, #9de89d, #3b6c3b); 13 | -webkit-background-clip: text; 14 | background-clip: text; 15 | color: #3b6c3b; 16 | } 17 | -------------------------------------------------------------------------------- /gradients/files/radial2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Radial Gradient Defaults 6 | 7 | 8 | 15 | 16 | change all the values
17 | 18 | -------------------------------------------------------------------------------- /gradients/files/radial5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Radial Gradient Shapes 6 | 7 | 8 | 15 | 16 | change the shape to circle
17 | 18 | -------------------------------------------------------------------------------- /other/files/supports.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | @Supports 13 | 14 | 15 | 16 | 
-moz-appearance: none
17 | shape-outside: circle()
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /colors/color.css: -------------------------------------------------------------------------------- 1 | #presentation { 2 | background: linear-gradient(to bottom, royalblue, rebeccapurple) 3 | } 4 | pre b, strong, code { 5 | color: rebeccapurple; 6 | text-shadow: royalblue 0 0 1px; 7 | font-weight: bold; 8 | } 9 | @media screen and (-webkit-min-device-pixel-ratio: 0) { 10 | .textmask, h1, a { 11 | background: linear-gradient(to bottom, royalblue, rebeccapurple); 12 | -webkit-background-clip: text; 13 | background-clip: text; 14 | color: rebeccapurple; 15 | } 16 | -------------------------------------------------------------------------------- /other/files/awesome.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS is Awesome 6 | 7 | 14 | 15 | 16 | 17 |
CSS is awesome!
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /gradients/files/radial3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Radial Gradient Defaults 6 | 7 | 8 | 15 | 16 | change all the values
17 | 18 | -------------------------------------------------------------------------------- /gradients/files/radial7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Radial Gradient Shapes 6 | 7 | 8 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /gradients/files/sidecorner1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic CSS Gradient 6 | 7 | 8 | 19 | 20 | change the direction term(s)
21 | 22 | -------------------------------------------------------------------------------- /transforms/files/101_transformorigin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 20 | Transform origin 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /media/files/svgimg.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 20 | 21 | 22 | 23 | 24 |

Change the image size above

25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /gradients/files/colorstop1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic CSS Gradient 6 | 7 | 8 | 19 | 20 | drop % of red and purple
21 | 22 | -------------------------------------------------------------------------------- /gradients/files/repeat1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic CSS Gradient 6 | 7 | 8 | 18 | 19 | change the starting and ending lengths
20 | 21 | -------------------------------------------------------------------------------- /other/files/important.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | !important 6 | 7 | 13 | 14 | 15 |