├── README.md ├── dist ├── .htaccess ├── .well-known │ └── brave-rewards-verification.txt ├── OLDsw.js ├── apple-touch-icon.png ├── css │ ├── critical.css │ ├── styles.css │ ├── styles.max.css │ └── styles.min.css ├── favicon.ico ├── fonts │ ├── alexbrush.woff │ ├── alexbrush.woff2 │ ├── bevan.woff │ └── bevan.woff2 ├── images │ ├── bg-1.png │ ├── bg-2.png │ ├── bg-borderimage.png │ ├── bg-external.gif │ ├── compass.png │ ├── filters.png │ ├── guitar-amp-original.jpg │ ├── guitaramp.jpg │ ├── loading.gif │ └── object-fit.png ├── includes │ ├── bsa.html │ ├── common.html │ ├── edge.html │ ├── embed │ │ ├── assets │ │ │ └── flag.png │ │ ├── index-m.html │ │ ├── index.html │ │ ├── script.js │ │ ├── script.min.js │ │ ├── scriptm.js │ │ ├── scriptm.min.js │ │ ├── style.css │ │ └── style.min.css │ ├── features │ │ ├── 2d-transforms │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── 3d-transforms │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── appearance │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── background-clip │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── background-origin │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── background-size │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── bg-local │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── blending-modes │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── border-image │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── border-radius │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── box-decoration-break │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── box-shadow │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── box-sizing │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── calc │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── caret-color │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── clip-path │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── conditional-supports │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── currentcolor │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── cursors │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── default │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── exclusions │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── filters │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── flexbox │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── font-face │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── font-size-adjust │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── gradients │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── grid-layout │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── hsla-rgba │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── hyphenation │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── image-orientation │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── image-rendering │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── keyframe-animations │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── masks │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── media-queries │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── multiple-backgrounds │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── multiple-columns │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── object-fit-position │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── opacity │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── overflow-wrap │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── paged-media │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── placeholder-shown │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── pointer-events │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── rem-units │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── resize │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── scroll-behavior │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── scroll-snap-points │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── selection-color │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── space-round │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── tab-size │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── text-decoration │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── text-overflow │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── text-shadow │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── touch-action │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── transform-origin │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── transitions │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── unset │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── user-select │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── variables │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── viewport-units │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ ├── viewport │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ │ └── will-change │ │ │ ├── code.html │ │ │ ├── description.html │ │ │ ├── polyfills.html │ │ │ ├── result.html │ │ │ ├── technical.html │ │ │ ├── title.html │ │ │ └── tutorials.html │ └── support-widget.php ├── index-test.php ├── index.html ├── index.php ├── js │ ├── caniuse-embed.m.min.js │ ├── caniuse-embed.min.js │ ├── general.js │ ├── general.max.js │ └── general.min.js └── manifest.json ├── gulpfile.js ├── index.php ├── package.json ├── sitemap.xml └── src ├── .htaccess ├── OLDsw.js ├── apple-touch-icon.png ├── css └── styles.css ├── favicon.ico ├── fonts ├── alexbrush.woff ├── alexbrush.woff2 ├── bevan.woff └── bevan.woff2 ├── images ├── bg-1.png ├── bg-2.png ├── bg-borderimage.png ├── bg-external.gif ├── compass.png ├── filters.png ├── guitar-amp-original.jpg ├── guitaramp.jpg ├── loading.gif └── object-fit.png ├── includes ├── bsa.html ├── common.html ├── edge.html ├── embed │ ├── assets │ │ └── flag.png │ ├── index-m.html │ ├── index.html │ ├── script.js │ ├── scriptm.js │ └── style.css ├── features │ ├── 2d-transforms │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── 3d-transforms │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── appearance │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── background-clip │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── background-origin │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── background-size │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── bg-local │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── blending-modes │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── border-image │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── border-radius │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── box-decoration-break │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── box-shadow │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── box-sizing │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── calc │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── caret-color │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── clip-path │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── conditional-supports │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── currentcolor │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── cursors │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── default │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── exclusions │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── filters │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── flexbox │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── font-face │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── font-size-adjust │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── gradients │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── grid-layout │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── hsla-rgba │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── hyphenation │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── image-orientation │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── image-rendering │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── keyframe-animations │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── masks │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── media-queries │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── multiple-backgrounds │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── multiple-columns │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── object-fit-position │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── opacity │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── overflow-wrap │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── paged-media │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── placeholder-shown │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── pointer-events │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── rem-units │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── resize │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── scroll-behavior │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── scroll-snap-points │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── selection-color │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── space-round │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── tab-size │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── text-decoration │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── text-overflow │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── text-shadow │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── touch-action │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── transform-origin │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── transitions │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── unset │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── user-select │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── variables │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── viewport-units │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ ├── viewport │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html │ └── will-change │ │ ├── code.html │ │ ├── description.html │ │ ├── polyfills.html │ │ ├── result.html │ │ ├── technical.html │ │ ├── title.html │ │ └── tutorials.html └── support-widget.php ├── index-test.php ├── index.html ├── index.php ├── js ├── caniuse-embed.m.min.js ├── caniuse-embed.min.js └── general.js └── manifest.json /dist/.well-known/brave-rewards-verification.txt: -------------------------------------------------------------------------------- 1 | This is a Brave Rewards publisher verification file. 2 | 3 | Domain: css3clickchart.com 4 | Token: 368b36ebf6a623a926f240cd42e94608b3e1d61a79dd411eff66e7066b585f48 5 | -------------------------------------------------------------------------------- /dist/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/apple-touch-icon.png -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/favicon.ico -------------------------------------------------------------------------------- /dist/fonts/alexbrush.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/fonts/alexbrush.woff -------------------------------------------------------------------------------- /dist/fonts/alexbrush.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/fonts/alexbrush.woff2 -------------------------------------------------------------------------------- /dist/fonts/bevan.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/fonts/bevan.woff -------------------------------------------------------------------------------- /dist/fonts/bevan.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/fonts/bevan.woff2 -------------------------------------------------------------------------------- /dist/images/bg-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/images/bg-1.png -------------------------------------------------------------------------------- /dist/images/bg-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/images/bg-2.png -------------------------------------------------------------------------------- /dist/images/bg-borderimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/images/bg-borderimage.png -------------------------------------------------------------------------------- /dist/images/bg-external.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/images/bg-external.gif -------------------------------------------------------------------------------- /dist/images/compass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/images/compass.png -------------------------------------------------------------------------------- /dist/images/filters.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/images/filters.png -------------------------------------------------------------------------------- /dist/images/guitar-amp-original.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/images/guitar-amp-original.jpg -------------------------------------------------------------------------------- /dist/images/guitaramp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/images/guitaramp.jpg -------------------------------------------------------------------------------- /dist/images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/images/loading.gif -------------------------------------------------------------------------------- /dist/images/object-fit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/images/object-fit.png -------------------------------------------------------------------------------- /dist/includes/embed/assets/flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/embed/assets/flag.png -------------------------------------------------------------------------------- /dist/includes/features/2d-transforms/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | transform: translate(10px, 10px) 3 | skew(-20deg) 4 | rotate(-10deg) 5 | scale(.9); 6 | } -------------------------------------------------------------------------------- /dist/includes/features/2d-transforms/description.html: -------------------------------------------------------------------------------- 1 | Allows you to use the transform property along with one or more functions to transform elements in two-dimensional space (translate, scale, skew, rotate). -------------------------------------------------------------------------------- /dist/includes/features/2d-transforms/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/2d-transforms/result.html: -------------------------------------------------------------------------------- 1 |

This element is translated, skewed, scaled, and rotated using CSS transforms.

-------------------------------------------------------------------------------- /dist/includes/features/2d-transforms/technical.html: -------------------------------------------------------------------------------- 1 | Transforms on W3C -------------------------------------------------------------------------------- /dist/includes/features/2d-transforms/title.html: -------------------------------------------------------------------------------- 1 | Transforms -------------------------------------------------------------------------------- /dist/includes/features/2d-transforms/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/3d-transforms/description.html: -------------------------------------------------------------------------------- 1 | Extends CSS transforms to allow for three-dimensional transforms on CSS-rendered elements. -------------------------------------------------------------------------------- /dist/includes/features/3d-transforms/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/3d-transforms/technical.html: -------------------------------------------------------------------------------- 1 | CSS Transform Module Level 2 on W3C -------------------------------------------------------------------------------- /dist/includes/features/3d-transforms/title.html: -------------------------------------------------------------------------------- 1 | 3D Transforms -------------------------------------------------------------------------------- /dist/includes/features/appearance/code.html: -------------------------------------------------------------------------------- 1 | input[type=search] { 2 | appearance: none; 3 | } -------------------------------------------------------------------------------- /dist/includes/features/appearance/description.html: -------------------------------------------------------------------------------- 1 | Provides limited control over the look of native UI controls that are normally not able to be styled via CSS. -------------------------------------------------------------------------------- /dist/includes/features/appearance/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/appearance/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/appearance/technical.html: -------------------------------------------------------------------------------- 1 | Image Processing on W3C -------------------------------------------------------------------------------- /dist/includes/features/appearance/title.html: -------------------------------------------------------------------------------- 1 | Appearance Property -------------------------------------------------------------------------------- /dist/includes/features/appearance/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/appearance/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/background-clip/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | background: #d78965; 3 | padding: 16px; 4 | background-clip: content-box; /* border-box, padding-box */ 5 | } -------------------------------------------------------------------------------- /dist/includes/features/background-clip/description.html: -------------------------------------------------------------------------------- 1 | Defines how far the background of the element should visibly extend (i.e. where it's "clipped"). -------------------------------------------------------------------------------- /dist/includes/features/background-clip/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/background-clip/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/background-clip/result.html: -------------------------------------------------------------------------------- 1 |


This element's background is clipped at the edges of its content (using content-box).

-------------------------------------------------------------------------------- /dist/includes/features/background-clip/technical.html: -------------------------------------------------------------------------------- 1 | Background Clip on W3C -------------------------------------------------------------------------------- /dist/includes/features/background-clip/title.html: -------------------------------------------------------------------------------- 1 | Background Clip -------------------------------------------------------------------------------- /dist/includes/features/background-clip/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/background-origin/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | border: 16px solid rgba(23, 23, 23, .5); 3 | background: url(images/bg-1.png) no-repeat center; 4 | background-origin: content-box; 5 | background-size: cover; 6 | padding: 16px; 7 | } -------------------------------------------------------------------------------- /dist/includes/features/background-origin/description.html: -------------------------------------------------------------------------------- 1 | Similar to background-clip, defines how far the background of the element should visibly extend (i.e. where its extremities originate). -------------------------------------------------------------------------------- /dist/includes/features/background-origin/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/background-origin/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/background-origin/result.html: -------------------------------------------------------------------------------- 1 |

This element's background originates in the content area.

-------------------------------------------------------------------------------- /dist/includes/features/background-origin/technical.html: -------------------------------------------------------------------------------- 1 | Background Origin on W3C -------------------------------------------------------------------------------- /dist/includes/features/background-origin/title.html: -------------------------------------------------------------------------------- 1 | Background Origin -------------------------------------------------------------------------------- /dist/includes/features/background-origin/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/background-origin/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/background-size/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | background-color: firebrick; 3 | background-image: linear-gradient(transparent 50%, rgba(255, 255, 255, .5) 50%); 4 | background-size: 20px 20px; 5 | } -------------------------------------------------------------------------------- /dist/includes/features/background-size/description.html: -------------------------------------------------------------------------------- 1 | Lets you define the size of a background image using units or keywords. This also applies to the size of linear and radial gradients. -------------------------------------------------------------------------------- /dist/includes/features/background-size/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/background-size/result.html: -------------------------------------------------------------------------------- 1 |

The background-size property can be used to create repeating backgrounds with no images:

2 |
-------------------------------------------------------------------------------- /dist/includes/features/background-size/technical.html: -------------------------------------------------------------------------------- 1 | Background Size on W3C -------------------------------------------------------------------------------- /dist/includes/features/background-size/title.html: -------------------------------------------------------------------------------- 1 | Background Size -------------------------------------------------------------------------------- /dist/includes/features/background-size/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/background-size/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/bg-local/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | background-image: url(image.png); 3 | background-attachment: local; 4 | } -------------------------------------------------------------------------------- /dist/includes/features/bg-local/description.html: -------------------------------------------------------------------------------- 1 | Lets you apply a "fixed" background that's fixed relative to the element on which its applied, rather than the viewport. -------------------------------------------------------------------------------- /dist/includes/features/bg-local/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/bg-local/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/bg-local/technical.html: -------------------------------------------------------------------------------- 1 | Affixing Images: the 'background-attachment' property on W3C -------------------------------------------------------------------------------- /dist/includes/features/bg-local/title.html: -------------------------------------------------------------------------------- 1 | background-attachment: local -------------------------------------------------------------------------------- /dist/includes/features/bg-local/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/blending-modes/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | mix-blend-mode: color-dodge; 3 | } 4 | 5 | .element2 { 6 | background-image: url(image.png); 7 | background-color: hotpink; 8 | background-blend-mode: color-dodge; 9 | } 10 | -------------------------------------------------------------------------------- /dist/includes/features/blending-modes/description.html: -------------------------------------------------------------------------------- 1 | Allows you to "blend" HTML, SVG elements, and backgrounds, using effects like "multiply", "darken", "luminosity", etc. that are common in graphics editors. -------------------------------------------------------------------------------- /dist/includes/features/blending-modes/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/blending-modes/technical.html: -------------------------------------------------------------------------------- 1 | The mix-blend-mode and background-blend-mode properties on W3C. -------------------------------------------------------------------------------- /dist/includes/features/blending-modes/title.html: -------------------------------------------------------------------------------- 1 | Blending and Compositing -------------------------------------------------------------------------------- /dist/includes/features/border-image/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | border: solid 20px transparent; 3 | border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat; 4 | } -------------------------------------------------------------------------------- /dist/includes/features/border-image/description.html: -------------------------------------------------------------------------------- 1 | Allows a repeating or stretched image to appear on an element's border in place of customary border styles. -------------------------------------------------------------------------------- /dist/includes/features/border-image/result.html: -------------------------------------------------------------------------------- 1 |

Resize this box using the bottom-right handle and the image on the border will stay fluid.

-------------------------------------------------------------------------------- /dist/includes/features/border-image/technical.html: -------------------------------------------------------------------------------- 1 | Border Images on W3C -------------------------------------------------------------------------------- /dist/includes/features/border-image/title.html: -------------------------------------------------------------------------------- 1 | Border Images -------------------------------------------------------------------------------- /dist/includes/features/border-radius/description.html: -------------------------------------------------------------------------------- 1 | Adds rounded corners to elements using shorthand, longhand, or "slash" syntax, which lets you define different values for horizontal and vertical radii on individual corners. -------------------------------------------------------------------------------- /dist/includes/features/border-radius/result.html: -------------------------------------------------------------------------------- 1 |

This paragraph has rounded corners defined without the use of JavaScript, images, or extra markup.

-------------------------------------------------------------------------------- /dist/includes/features/border-radius/technical.html: -------------------------------------------------------------------------------- 1 | Border Radius on W3C -------------------------------------------------------------------------------- /dist/includes/features/border-radius/title.html: -------------------------------------------------------------------------------- 1 | Border Radius -------------------------------------------------------------------------------- /dist/includes/features/border-radius/tutorials.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /dist/includes/features/box-decoration-break/code.html: -------------------------------------------------------------------------------- 1 | .example { 2 | box-shadow: 0 0 20px #000; 3 | background: linear-gradient(to right, #fd746c, #2c3e50); 4 | box-decoration-break: clone; /* or "slice" (default) */ 5 | } -------------------------------------------------------------------------------- /dist/includes/features/box-decoration-break/description.html: -------------------------------------------------------------------------------- 1 | Lets you determine how the browser should handle elements that have their margins, borders, padding, etc. split by page breaks, column breaks, regions, etc. -------------------------------------------------------------------------------- /dist/includes/features/box-decoration-break/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/box-decoration-break/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/box-decoration-break/technical.html: -------------------------------------------------------------------------------- 1 | Fragmented Borders and Backgrounds on W3C -------------------------------------------------------------------------------- /dist/includes/features/box-decoration-break/title.html: -------------------------------------------------------------------------------- 1 | Box Decoration Break -------------------------------------------------------------------------------- /dist/includes/features/box-decoration-break/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/box-decoration-break/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/box-shadow/code.html: -------------------------------------------------------------------------------- 1 | /* color, h-offset, v-offset, blur, spread, inset (optional) */ 2 | 3 | .element { 4 | box-shadow: #000 10px 10px 10px 3px inset; 5 | } -------------------------------------------------------------------------------- /dist/includes/features/box-shadow/description.html: -------------------------------------------------------------------------------- 1 | Creates a drop-shadow effect on an element. -------------------------------------------------------------------------------- /dist/includes/features/box-shadow/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/box-shadow/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/box-shadow/result.html: -------------------------------------------------------------------------------- 1 |

This box has a drop shadow.

-------------------------------------------------------------------------------- /dist/includes/features/box-shadow/technical.html: -------------------------------------------------------------------------------- 1 | Box Shadow on W3C -------------------------------------------------------------------------------- /dist/includes/features/box-shadow/title.html: -------------------------------------------------------------------------------- 1 | Box Shadow -------------------------------------------------------------------------------- /dist/includes/features/box-shadow/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/box-shadow/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/box-sizing/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | width: 200px; 3 | padding: 0 30px; 4 | box-sizing: border-box; /* content-box */ 5 | } -------------------------------------------------------------------------------- /dist/includes/features/box-sizing/description.html: -------------------------------------------------------------------------------- 1 | Used to alter the default CSS box model for calculating width and height of the elements, which includes border and padding in its total, usually an undesirable result. -------------------------------------------------------------------------------- /dist/includes/features/box-sizing/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/box-sizing/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/box-sizing/result.html: -------------------------------------------------------------------------------- 1 |

Extra padding does not make this box wider or taller. It will be only as large as its width and/or height properties define.

-------------------------------------------------------------------------------- /dist/includes/features/box-sizing/technical.html: -------------------------------------------------------------------------------- 1 | Box Sizing on W3C -------------------------------------------------------------------------------- /dist/includes/features/box-sizing/title.html: -------------------------------------------------------------------------------- 1 | Box Sizing -------------------------------------------------------------------------------- /dist/includes/features/calc/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | width: calc(100% + 20px); 3 | } -------------------------------------------------------------------------------- /dist/includes/features/calc/description.html: -------------------------------------------------------------------------------- 1 | Allows you to use a function in place of a length value to calculate the size or shape of an element instead of defining it explicitly. -------------------------------------------------------------------------------- /dist/includes/features/calc/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/calc/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/calc/result.html: -------------------------------------------------------------------------------- 1 |

The width of this element is 70% minus 50px, using the calc() function.

-------------------------------------------------------------------------------- /dist/includes/features/calc/technical.html: -------------------------------------------------------------------------------- 1 | Mathematical Expressions: calc() on W3C -------------------------------------------------------------------------------- /dist/includes/features/calc/title.html: -------------------------------------------------------------------------------- 1 | Values Using calc() -------------------------------------------------------------------------------- /dist/includes/features/caret-color/code.html: -------------------------------------------------------------------------------- 1 | textarea { 2 | caret-color: hotpink; 3 | } -------------------------------------------------------------------------------- /dist/includes/features/caret-color/description.html: -------------------------------------------------------------------------------- 1 | For an element with editable text, this property allows you to set the color of the caret (the blinking visible indicator where text is to be inserted). -------------------------------------------------------------------------------- /dist/includes/features/caret-color/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/caret-color/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/caret-color/result.html: -------------------------------------------------------------------------------- 1 |
2 |

Click inside the textarea below. The color of the blinking cursor (i.e. caret) will be hot pink.

3 | 4 |
-------------------------------------------------------------------------------- /dist/includes/features/caret-color/technical.html: -------------------------------------------------------------------------------- 1 | Insertion caret on W3C -------------------------------------------------------------------------------- /dist/includes/features/caret-color/title.html: -------------------------------------------------------------------------------- 1 | Caret Color -------------------------------------------------------------------------------- /dist/includes/features/caret-color/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/caret-color/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/clip-path/description.html: -------------------------------------------------------------------------------- 1 | Lets you define a "clipping path", which is a region of an element where everything on the inside of the region is visible, whereas the remainder is "clipped" out (not visible). -------------------------------------------------------------------------------- /dist/includes/features/clip-path/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/clip-path/technical.html: -------------------------------------------------------------------------------- 1 | Clipping Shape: the clip-path property on W3C -------------------------------------------------------------------------------- /dist/includes/features/clip-path/title.html: -------------------------------------------------------------------------------- 1 | Clip Path -------------------------------------------------------------------------------- /dist/includes/features/conditional-supports/description.html: -------------------------------------------------------------------------------- 1 | Allows native feature detection using @supports, similar to what's done using a tool like Modernizr. -------------------------------------------------------------------------------- /dist/includes/features/conditional-supports/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/conditional-supports/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/conditional-supports/technical.html: -------------------------------------------------------------------------------- 1 | Feature queries: the @supports rule on W3C -------------------------------------------------------------------------------- /dist/includes/features/conditional-supports/title.html: -------------------------------------------------------------------------------- 1 | Conditional Rules with @supports -------------------------------------------------------------------------------- /dist/includes/features/conditional-supports/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/currentcolor/code.html: -------------------------------------------------------------------------------- 1 | .parent { 2 | color: lightgreen; 3 | } 4 | 5 | .child { 6 | background-color: currentColor; 7 | } -------------------------------------------------------------------------------- /dist/includes/features/currentcolor/description.html: -------------------------------------------------------------------------------- 1 | A keyword value that allows an element to inherit the current computed color value rather than explicitly declaring a color. -------------------------------------------------------------------------------- /dist/includes/features/currentcolor/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/currentcolor/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/currentcolor/result.html: -------------------------------------------------------------------------------- 1 |
2 |

The element below inherits its background color from its parent's color value.

3 |
4 |
-------------------------------------------------------------------------------- /dist/includes/features/currentcolor/technical.html: -------------------------------------------------------------------------------- 1 | currentColor color keyword on W3C -------------------------------------------------------------------------------- /dist/includes/features/currentcolor/title.html: -------------------------------------------------------------------------------- 1 | currentColor Keyword Value -------------------------------------------------------------------------------- /dist/includes/features/cursors/code.html: -------------------------------------------------------------------------------- 1 | .element:hover { 2 | cursor: none; 3 | } 4 | 5 | .element2:hover { 6 | cursor: context-menu; 7 | } 8 | 9 | .element3:hover { 10 | cursor: not-allowed; 11 | } -------------------------------------------------------------------------------- /dist/includes/features/cursors/description.html: -------------------------------------------------------------------------------- 1 | Additional values for the cursor property, including none, context-menu, col-resize, and more. -------------------------------------------------------------------------------- /dist/includes/features/cursors/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/cursors/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/cursors/technical.html: -------------------------------------------------------------------------------- 1 | Cursor Property on W3C -------------------------------------------------------------------------------- /dist/includes/features/cursors/title.html: -------------------------------------------------------------------------------- 1 | New Cursors -------------------------------------------------------------------------------- /dist/includes/features/cursors/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/default/code.html: -------------------------------------------------------------------------------- 1 | No feature selected. -------------------------------------------------------------------------------- /dist/includes/features/default/description.html: -------------------------------------------------------------------------------- 1 | No feature selected. -------------------------------------------------------------------------------- /dist/includes/features/default/polyfills.html: -------------------------------------------------------------------------------- 1 | No feature selected. -------------------------------------------------------------------------------- /dist/includes/features/default/result.html: -------------------------------------------------------------------------------- 1 | No feature selected. -------------------------------------------------------------------------------- /dist/includes/features/default/technical.html: -------------------------------------------------------------------------------- 1 | No feature selected. -------------------------------------------------------------------------------- /dist/includes/features/default/title.html: -------------------------------------------------------------------------------- 1 | Select a CSS3 Feature Above -------------------------------------------------------------------------------- /dist/includes/features/default/tutorials.html: -------------------------------------------------------------------------------- 1 | No feature selected. -------------------------------------------------------------------------------- /dist/includes/features/exclusions/code.html: -------------------------------------------------------------------------------- 1 | .exclusion { 2 | grid-row: 2; 3 | -ms-grid-column: 2; 4 | -ms-wrap-flow: both; 5 | padding: 10px; 6 | -ms-wrap-margin: 15px; 7 | z-index: 1; 8 | } -------------------------------------------------------------------------------- /dist/includes/features/exclusions/description.html: -------------------------------------------------------------------------------- 1 | As an extension of the float property, exclusions (a.k.a. "positioned floats") allow you to define arbitrary areas that inline content can flow around. -------------------------------------------------------------------------------- /dist/includes/features/exclusions/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/exclusions/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/exclusions/result.html: -------------------------------------------------------------------------------- 1 |

For a live demonstration of CSS exclusions, visit this link in a supporting browser.

-------------------------------------------------------------------------------- /dist/includes/features/exclusions/technical.html: -------------------------------------------------------------------------------- 1 | CSS Exclusions Module -------------------------------------------------------------------------------- /dist/includes/features/exclusions/title.html: -------------------------------------------------------------------------------- 1 | Exclusions -------------------------------------------------------------------------------- /dist/includes/features/exclusions/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/filters/description.html: -------------------------------------------------------------------------------- 1 | Includes different features that allow you to add Photoshop-like effects to elements (hue, grayscale, sepia, blur, invert, saturate, etc.) using pure CSS. -------------------------------------------------------------------------------- /dist/includes/features/filters/technical.html: -------------------------------------------------------------------------------- 1 | Filter Effects on W3C -------------------------------------------------------------------------------- /dist/includes/features/filters/title.html: -------------------------------------------------------------------------------- 1 | Filter Effects -------------------------------------------------------------------------------- /dist/includes/features/flexbox/code.html: -------------------------------------------------------------------------------- 1 | .flexcontainer { 2 | display: flex; 3 | flex-direction: row-reverse; 4 | } 5 | 6 | .flexitem { 7 | flex-grow: 1; 8 | } 9 | 10 | .flexitem:first-child { 11 | order: 3; 12 | flex-grow: 2; 13 | } -------------------------------------------------------------------------------- /dist/includes/features/flexbox/description.html: -------------------------------------------------------------------------------- 1 | A layout module that makes it easier to align, center, space, distribute, etc., multiple elements in a layout. -------------------------------------------------------------------------------- /dist/includes/features/flexbox/technical.html: -------------------------------------------------------------------------------- 1 | CSS Flexible Box Layout Module Level 1 -------------------------------------------------------------------------------- /dist/includes/features/flexbox/title.html: -------------------------------------------------------------------------------- 1 | Flexible Box Model -------------------------------------------------------------------------------- /dist/includes/features/font-face/description.html: -------------------------------------------------------------------------------- 1 | Allows embedding of custom, appropriately licensed fonts using the @font-face at-rule. -------------------------------------------------------------------------------- /dist/includes/features/font-face/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/font-face/result.html: -------------------------------------------------------------------------------- 1 |

Below is a custom font embedded using @font-face

2 |
Bulletproof Web Fonts
-------------------------------------------------------------------------------- /dist/includes/features/font-face/technical.html: -------------------------------------------------------------------------------- 1 | @font-face on W3C -------------------------------------------------------------------------------- /dist/includes/features/font-face/title.html: -------------------------------------------------------------------------------- 1 | Web Fonts with @font-face -------------------------------------------------------------------------------- /dist/includes/features/font-size-adjust/code.html: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-face: 'Trebuchet MS', Georgia, serif; 3 | font-size: 20px; 4 | font-size-adjust: 0.523; 5 | } -------------------------------------------------------------------------------- /dist/includes/features/font-size-adjust/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/font-size-adjust/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/font-size-adjust/technical.html: -------------------------------------------------------------------------------- 1 | Relative sizing: the font-size-adjust property on W3C -------------------------------------------------------------------------------- /dist/includes/features/font-size-adjust/title.html: -------------------------------------------------------------------------------- 1 | Font Size Adjust -------------------------------------------------------------------------------- /dist/includes/features/font-size-adjust/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/font-size-adjust/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/gradients/description.html: -------------------------------------------------------------------------------- 1 | Allows the creation of a linear or radial gradients (images that fade smoothly from color to color), using special functions included where you would normally place an image URL. -------------------------------------------------------------------------------- /dist/includes/features/gradients/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/gradients/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/gradients/result.html: -------------------------------------------------------------------------------- 1 |
2 |

Linear and radial gradients. No images.

3 |
4 |
5 |
-------------------------------------------------------------------------------- /dist/includes/features/gradients/technical.html: -------------------------------------------------------------------------------- 1 | Gradients on W3C -------------------------------------------------------------------------------- /dist/includes/features/gradients/title.html: -------------------------------------------------------------------------------- 1 | Linear & Radial Gradients -------------------------------------------------------------------------------- /dist/includes/features/grid-layout/code.html: -------------------------------------------------------------------------------- 1 | .parent { 2 | display: grid; 3 | grid-template-columns: 20% 20% 20% 20% 20%; 4 | } 5 | 6 | .child { 7 | grid-column-start: 4; 8 | } -------------------------------------------------------------------------------- /dist/includes/features/grid-layout/description.html: -------------------------------------------------------------------------------- 1 | A 2-dimensional layout module that allows you to size and position elements and their content in a flexibile and fluid manner, allowing major layout transformations without the need for corresponding markup changes. -------------------------------------------------------------------------------- /dist/includes/features/grid-layout/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/grid-layout/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/grid-layout/result.html: -------------------------------------------------------------------------------- 1 |
2 |

The child element below is positioned in the 4th column of the grid:

3 |
4 |
5 |
6 |
7 |
-------------------------------------------------------------------------------- /dist/includes/features/grid-layout/technical.html: -------------------------------------------------------------------------------- 1 | Grid Layout Module on W3C -------------------------------------------------------------------------------- /dist/includes/features/grid-layout/title.html: -------------------------------------------------------------------------------- 1 | Grid Layout -------------------------------------------------------------------------------- /dist/includes/features/grid-layout/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/grid-layout/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/hsla-rgba/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | background: hsl(207, 38%, 47%); 3 | color: hsla(207, 38%, 47%, .8) 4 | } 5 | 6 | .element3 { 7 | background: rgba(25, 167, 200, .6); 8 | } -------------------------------------------------------------------------------- /dist/includes/features/hsla-rgba/description.html: -------------------------------------------------------------------------------- 1 | Allows colors to be defined in HSL (Hue, Saturation, and Lightness), HSLA format (Hue, Saturation, Lightness, and Alpha), or RGB plus Alpha format. -------------------------------------------------------------------------------- /dist/includes/features/hsla-rgba/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/hsla-rgba/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/hsla-rgba/result.html: -------------------------------------------------------------------------------- 1 |

The background color of this paragraph is defined using an RGBA setting of rgba(255, 43, 0, .2)

-------------------------------------------------------------------------------- /dist/includes/features/hsla-rgba/title.html: -------------------------------------------------------------------------------- 1 | HSL, HSLA, and RGBA Colors -------------------------------------------------------------------------------- /dist/includes/features/hyphenation/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | hyphens: auto; /* or "manual" */ 3 | } -------------------------------------------------------------------------------- /dist/includes/features/hyphenation/description.html: -------------------------------------------------------------------------------- 1 | Allows you to tell the browser whether to hyphenate words at line breaks, or to just break the entire word onto the next line. -------------------------------------------------------------------------------- /dist/includes/features/hyphenation/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/hyphenation/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/hyphenation/result.html: -------------------------------------------------------------------------------- 1 |

The text in this box is set to automatic hyphenation. Some big words might help illustrate the hyphenation: Discombobulationary interdisciplinary reinstitutionalized ramifications.

-------------------------------------------------------------------------------- /dist/includes/features/hyphenation/technical.html: -------------------------------------------------------------------------------- 1 | Hyphenation on W3C -------------------------------------------------------------------------------- /dist/includes/features/hyphenation/title.html: -------------------------------------------------------------------------------- 1 | Hyphenation -------------------------------------------------------------------------------- /dist/includes/features/image-orientation/description.html: -------------------------------------------------------------------------------- 1 | Allows you to correctly orient an image that was taken with a camera turned on its side, or an image that positioned improperly on a scanner. -------------------------------------------------------------------------------- /dist/includes/features/image-orientation/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/image-orientation/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/image-orientation/technical.html: -------------------------------------------------------------------------------- 1 | Orienting an Image on the Page on W3C -------------------------------------------------------------------------------- /dist/includes/features/image-orientation/title.html: -------------------------------------------------------------------------------- 1 | Image Orientation -------------------------------------------------------------------------------- /dist/includes/features/image-orientation/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/image-rendering/code.html: -------------------------------------------------------------------------------- 1 | .img-1 { 2 | image-rendering: crisp-edges; 3 | } 4 | 5 | .img-2 { 6 | image-rendering: pixelated; 7 | } 8 | 9 | .img-3 { 10 | image-rendering: smooth; 11 | } -------------------------------------------------------------------------------- /dist/includes/features/image-rendering/description.html: -------------------------------------------------------------------------------- 1 | Provides a hint to the browser about what aspects of an image are most important to preserve when the image is scaled, to help the browser optimize its scaling algorithm. -------------------------------------------------------------------------------- /dist/includes/features/image-rendering/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/image-rendering/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/image-rendering/technical.html: -------------------------------------------------------------------------------- 1 | Image Processing on W3C -------------------------------------------------------------------------------- /dist/includes/features/image-rendering/title.html: -------------------------------------------------------------------------------- 1 | Image Rendering -------------------------------------------------------------------------------- /dist/includes/features/keyframe-animations/description.html: -------------------------------------------------------------------------------- 1 | Allows for the creation of complex animations that incorporate timing, delay, timing functions, multiple keyframes, and more. -------------------------------------------------------------------------------- /dist/includes/features/keyframe-animations/result.html: -------------------------------------------------------------------------------- 1 |

No Flash, no JavaScript.

2 |
-------------------------------------------------------------------------------- /dist/includes/features/keyframe-animations/technical.html: -------------------------------------------------------------------------------- 1 | CSS3 Animations on W3C -------------------------------------------------------------------------------- /dist/includes/features/keyframe-animations/title.html: -------------------------------------------------------------------------------- 1 | Keyframe Animations -------------------------------------------------------------------------------- /dist/includes/features/masks/description.html: -------------------------------------------------------------------------------- 1 | Allows you to use a graphical element or image as a luminance or alpha mask to hide portions of elements. -------------------------------------------------------------------------------- /dist/includes/features/masks/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/masks/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/masks/result.html: -------------------------------------------------------------------------------- 1 |

The image below has been partially masked with a staggered transparent gradient.

2 |
-------------------------------------------------------------------------------- /dist/includes/features/masks/technical.html: -------------------------------------------------------------------------------- 1 | Positioned Masks on W3C -------------------------------------------------------------------------------- /dist/includes/features/masks/title.html: -------------------------------------------------------------------------------- 1 | Masks -------------------------------------------------------------------------------- /dist/includes/features/media-queries/code.html: -------------------------------------------------------------------------------- 1 | @media (max-width: 1200px) { 2 | .element { 3 | background: #bada55; 4 | } 5 | } 6 | 7 | @media (max-width: 480px) { 8 | .element { 9 | background: #d78965; 10 | } 11 | } -------------------------------------------------------------------------------- /dist/includes/features/media-queries/description.html: -------------------------------------------------------------------------------- 1 | Lets you serve different styles to a browser depending on various media types (print, screen, etc) and media conditions (screen size, portrait, landscape, etc.). -------------------------------------------------------------------------------- /dist/includes/features/media-queries/result.html: -------------------------------------------------------------------------------- 1 |

Resize the browser window to cross the 1200px and 480px thresholds and the background color of this paragraph will change.

-------------------------------------------------------------------------------- /dist/includes/features/media-queries/technical.html: -------------------------------------------------------------------------------- 1 | Media Queries Level 3 on W3C -------------------------------------------------------------------------------- /dist/includes/features/media-queries/title.html: -------------------------------------------------------------------------------- 1 | Media Queries -------------------------------------------------------------------------------- /dist/includes/features/multiple-backgrounds/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | background: url(images/example.png) center center no-repeat, 3 | url(images/example-2.png) top left repeat; 4 | } -------------------------------------------------------------------------------- /dist/includes/features/multiple-backgrounds/description.html: -------------------------------------------------------------------------------- 1 | Allows multiple background images to be placed on a single element. -------------------------------------------------------------------------------- /dist/includes/features/multiple-backgrounds/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/multiple-backgrounds/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/multiple-backgrounds/result.html: -------------------------------------------------------------------------------- 1 |

This element has two background images.

-------------------------------------------------------------------------------- /dist/includes/features/multiple-backgrounds/technical.html: -------------------------------------------------------------------------------- 1 | Multiple Backgrounds on W3C -------------------------------------------------------------------------------- /dist/includes/features/multiple-backgrounds/title.html: -------------------------------------------------------------------------------- 1 | Multiple Backgrounds -------------------------------------------------------------------------------- /dist/includes/features/multiple-backgrounds/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/multiple-columns/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | column-count: 3; 3 | column-width: 75px; 4 | column-gap: 20px; 5 | column-rule: 1px solid #fff; 6 | } -------------------------------------------------------------------------------- /dist/includes/features/multiple-columns/description.html: -------------------------------------------------------------------------------- 1 | Allows the content in a single element to be divided into multiple columns with a gap and rule, similar to newspaper layouts. -------------------------------------------------------------------------------- /dist/includes/features/multiple-columns/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/multiple-columns/technical.html: -------------------------------------------------------------------------------- 1 | CSS Multi-column Layout Module Level 1 -------------------------------------------------------------------------------- /dist/includes/features/multiple-columns/title.html: -------------------------------------------------------------------------------- 1 | Multiple Columns -------------------------------------------------------------------------------- /dist/includes/features/object-fit-position/code.html: -------------------------------------------------------------------------------- 1 | img { 2 | object-fit: cover; 3 | object-position: top center; 4 | } -------------------------------------------------------------------------------- /dist/includes/features/object-fit-position/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/object-fit-position/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/object-fit-position/technical.html: -------------------------------------------------------------------------------- 1 | Object Fit and Object Position on W3C -------------------------------------------------------------------------------- /dist/includes/features/object-fit-position/title.html: -------------------------------------------------------------------------------- 1 | Object Fit / Object Position -------------------------------------------------------------------------------- /dist/includes/features/object-fit-position/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/opacity/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | opacity: .4; 3 | } -------------------------------------------------------------------------------- /dist/includes/features/opacity/description.html: -------------------------------------------------------------------------------- 1 | Allows you to apply a transparency setting to an element and all of its children. -------------------------------------------------------------------------------- /dist/includes/features/opacity/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/opacity/result.html: -------------------------------------------------------------------------------- 1 |

Using the opacity property, this white box is semi-transparent.

-------------------------------------------------------------------------------- /dist/includes/features/opacity/technical.html: -------------------------------------------------------------------------------- 1 | Transparency on W3C -------------------------------------------------------------------------------- /dist/includes/features/opacity/title.html: -------------------------------------------------------------------------------- 1 | Opacity / Transparency -------------------------------------------------------------------------------- /dist/includes/features/opacity/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/overflow-wrap/code.html: -------------------------------------------------------------------------------- 1 | /* You can use word-wrap as a fallback for old browsers */ 2 | .element { 3 | word-wrap: break-word; /* "normal" */ 4 | overflow-wrap: break-word; 5 | } -------------------------------------------------------------------------------- /dist/includes/features/overflow-wrap/description.html: -------------------------------------------------------------------------------- 1 | This property allows you to define how to handle line breaking. An alternate syntax is the old word-wrap, which has support in every browser, including old versions of IE. -------------------------------------------------------------------------------- /dist/includes/features/overflow-wrap/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/overflow-wrap/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/overflow-wrap/technical.html: -------------------------------------------------------------------------------- 1 | overflow-wrap on W3C -------------------------------------------------------------------------------- /dist/includes/features/overflow-wrap/title.html: -------------------------------------------------------------------------------- 1 | Word Wrap / Overflow Wrap -------------------------------------------------------------------------------- /dist/includes/features/paged-media/code.html: -------------------------------------------------------------------------------- 1 | @media -o-paged { 2 | html { 3 | height: 100%; 4 | overflow: -o-paged-x; 5 | } 6 | } -------------------------------------------------------------------------------- /dist/includes/features/paged-media/description.html: -------------------------------------------------------------------------------- 1 | Allows content to be split into one or more "pages", giving you control over page breaks, page size, orientation, page margins, and orphans and widows. -------------------------------------------------------------------------------- /dist/includes/features/paged-media/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/paged-media/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/paged-media/result.html: -------------------------------------------------------------------------------- 1 |

N/A

-------------------------------------------------------------------------------- /dist/includes/features/paged-media/technical.html: -------------------------------------------------------------------------------- 1 | CSS Paged Media Module on W3C -------------------------------------------------------------------------------- /dist/includes/features/paged-media/title.html: -------------------------------------------------------------------------------- 1 | Paged Media -------------------------------------------------------------------------------- /dist/includes/features/placeholder-shown/code.html: -------------------------------------------------------------------------------- 1 | input:placeholder-shown { 2 | background: lightblue; 3 | } 4 | 5 | input:placeholder-shown ~ .msg { 6 | display: none; 7 | } -------------------------------------------------------------------------------- /dist/includes/features/placeholder-shown/description.html: -------------------------------------------------------------------------------- 1 | A pseudo-element and pseudo-class to allow you to style a text input's placeholder text, or to style a text input based on whether or not the placeholder text is visible. -------------------------------------------------------------------------------- /dist/includes/features/placeholder-shown/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/placeholder-shown/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/placeholder-shown/technical.html: -------------------------------------------------------------------------------- 1 | :placeholder-shown and ::placeholder on W3C. -------------------------------------------------------------------------------- /dist/includes/features/placeholder-shown/title.html: -------------------------------------------------------------------------------- 1 | Placeholder/Placeholder Shown -------------------------------------------------------------------------------- /dist/includes/features/placeholder-shown/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/placeholder-shown/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/pointer-events/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | pointer-events: none; 3 | } 4 | 5 | /* For SVG only */ 6 | 7 | .element2 { 8 | pointer-events: visibleFill; 9 | } -------------------------------------------------------------------------------- /dist/includes/features/pointer-events/description.html: -------------------------------------------------------------------------------- 1 | Allows control over the circumstances under which elements can be the target of mouse events. -------------------------------------------------------------------------------- /dist/includes/features/pointer-events/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/pointer-events/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/pointer-events/result.html: -------------------------------------------------------------------------------- 1 |

The link below doesn't work because its set to pointer-events: none

2 | 3 | Visit my website

-------------------------------------------------------------------------------- /dist/includes/features/pointer-events/technical.html: -------------------------------------------------------------------------------- 1 | The pointer-events Property on W3C -------------------------------------------------------------------------------- /dist/includes/features/pointer-events/title.html: -------------------------------------------------------------------------------- 1 | Pointer Events -------------------------------------------------------------------------------- /dist/includes/features/pointer-events/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/pointer-events/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/rem-units/code.html: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 20px; 3 | } 4 | 5 | p { 6 | font-size: 1.5rem; 7 | } -------------------------------------------------------------------------------- /dist/includes/features/rem-units/description.html: -------------------------------------------------------------------------------- 1 | Allows you to define values relative to the root element (usually the <html> element), rather than being relative to the inherited font size (like em units). -------------------------------------------------------------------------------- /dist/includes/features/rem-units/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/rem-units/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/rem-units/result.html: -------------------------------------------------------------------------------- 1 |

This text is set to 1.5rem. This computes to 27px, which is one and a half times 18px (the root font size).

-------------------------------------------------------------------------------- /dist/includes/features/rem-units/technical.html: -------------------------------------------------------------------------------- 1 | Rem Units on W3C -------------------------------------------------------------------------------- /dist/includes/features/rem-units/title.html: -------------------------------------------------------------------------------- 1 | Rem Units -------------------------------------------------------------------------------- /dist/includes/features/resize/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | overflow: hidden; /* anything but "visible" */ 3 | resize: both; /* none, horizontal, vertical */ 4 | } -------------------------------------------------------------------------------- /dist/includes/features/resize/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/resize/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/resize/result.html: -------------------------------------------------------------------------------- 1 |

This <p> element can be resized by the user with a bottom-right handle.

-------------------------------------------------------------------------------- /dist/includes/features/resize/technical.html: -------------------------------------------------------------------------------- 1 | Resizing Boxes on W3C -------------------------------------------------------------------------------- /dist/includes/features/resize/title.html: -------------------------------------------------------------------------------- 1 | Resize -------------------------------------------------------------------------------- /dist/includes/features/resize/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/scroll-behavior/code.html: -------------------------------------------------------------------------------- 1 | .example { 2 | scroll-behavior: smooth; 3 | } -------------------------------------------------------------------------------- /dist/includes/features/scroll-behavior/description.html: -------------------------------------------------------------------------------- 1 | Lets you define the behavior of a scrolling element (instant scrolling or smooth transition) when scrolling is via navigation or a scrolling API. User scrolling is not affected. -------------------------------------------------------------------------------- /dist/includes/features/scroll-behavior/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/scroll-behavior/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/scroll-behavior/technical.html: -------------------------------------------------------------------------------- 1 | Smooth Scrolling: The scroll-behavior Property on W3C -------------------------------------------------------------------------------- /dist/includes/features/scroll-behavior/title.html: -------------------------------------------------------------------------------- 1 | Scroll Behavior -------------------------------------------------------------------------------- /dist/includes/features/scroll-behavior/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/scroll-behavior/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/scroll-snap-points/description.html: -------------------------------------------------------------------------------- 1 | Multiple features to allow you to set "snap positions" to control how an element scrolls or pans. This can improve the user experience when (for example) viewing a gallery of images. -------------------------------------------------------------------------------- /dist/includes/features/scroll-snap-points/polyfills.html: -------------------------------------------------------------------------------- 1 | Font Squirrel's @font-face Generator
-------------------------------------------------------------------------------- /dist/includes/features/scroll-snap-points/result.html: -------------------------------------------------------------------------------- 1 |

For a demonstration of the different scroll snap points features, view this CodePen demo in a supporting browser.

-------------------------------------------------------------------------------- /dist/includes/features/scroll-snap-points/technical.html: -------------------------------------------------------------------------------- 1 | CSS Scroll Snap Module on W3C -------------------------------------------------------------------------------- /dist/includes/features/scroll-snap-points/title.html: -------------------------------------------------------------------------------- 1 | Scroll Snap Points -------------------------------------------------------------------------------- /dist/includes/features/selection-color/code.html: -------------------------------------------------------------------------------- 1 | ::selection { 2 | background: purple; 3 | color: hotpink; 4 | } 5 | 6 | ::-moz-selection { 7 | background: purple; 8 | color: hotpink; 9 | } -------------------------------------------------------------------------------- /dist/includes/features/selection-color/description.html: -------------------------------------------------------------------------------- 1 | Using a pseudo-element, allows you to change the text color or background color on selected text. -------------------------------------------------------------------------------- /dist/includes/features/selection-color/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/selection-color/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/selection-color/result.html: -------------------------------------------------------------------------------- 1 |

Select the text in this paragraph. The background color and text color will change to purple and hotpink for the selected area.

-------------------------------------------------------------------------------- /dist/includes/features/selection-color/technical.html: -------------------------------------------------------------------------------- 1 | Selecting Highlighted Content on W3C -------------------------------------------------------------------------------- /dist/includes/features/selection-color/title.html: -------------------------------------------------------------------------------- 1 | Selection Pseudo-Element -------------------------------------------------------------------------------- /dist/includes/features/selection-color/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/selection-color/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/space-round/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | background: url(bg.png) space 0 0; 3 | } 4 | 5 | .element2 { 6 | background-image: url(bg.png); 7 | background-repeat: round; 8 | } -------------------------------------------------------------------------------- /dist/includes/features/space-round/description.html: -------------------------------------------------------------------------------- 1 | Alternate values for the background-repeat property. Each repeats the background as often as it will fit without being clipped. "space" repeats to fit, while "round" scales it. -------------------------------------------------------------------------------- /dist/includes/features/space-round/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/space-round/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/space-round/result.html: -------------------------------------------------------------------------------- 1 |

For a live demonstration of CSS3's space and round values, visit this link in a supporting browser.

-------------------------------------------------------------------------------- /dist/includes/features/space-round/technical.html: -------------------------------------------------------------------------------- 1 | Tiling Images: the 'background-repeat' property on W3C -------------------------------------------------------------------------------- /dist/includes/features/space-round/title.html: -------------------------------------------------------------------------------- 1 | Space and Round Values for Background Repeat -------------------------------------------------------------------------------- /dist/includes/features/space-round/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/tab-size/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | tab-size: 4; 3 | } -------------------------------------------------------------------------------- /dist/includes/features/tab-size/description.html: -------------------------------------------------------------------------------- 1 | Allows you to change the number of characters making up a tab. Value can be an integer (representing number of spaces) or a length value. -------------------------------------------------------------------------------- /dist/includes/features/tab-size/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/tab-size/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/tab-size/technical.html: -------------------------------------------------------------------------------- 1 | Tab Character Size on W3C -------------------------------------------------------------------------------- /dist/includes/features/tab-size/title.html: -------------------------------------------------------------------------------- 1 | Tab Character Size -------------------------------------------------------------------------------- /dist/includes/features/tab-size/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/tab-size/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/text-decoration/code.html: -------------------------------------------------------------------------------- 1 | a { 2 | text-decoration-line: underline; 3 | text-decoration-color: orange; 4 | text-decoration-style: dashed; 5 | text-underline-position: under; 6 | } -------------------------------------------------------------------------------- /dist/includes/features/text-decoration/description.html: -------------------------------------------------------------------------------- 1 | New text decoration features, including the text-decoration property as a shorthand, adding various new longhand properties to manipulate underlines, overlines, etc. -------------------------------------------------------------------------------- /dist/includes/features/text-decoration/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/text-decoration/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/text-decoration/result.html: -------------------------------------------------------------------------------- 1 |
2 |

This link uses new text decoration features. Only supporting browsers will show the changes.

3 |
-------------------------------------------------------------------------------- /dist/includes/features/text-decoration/technical.html: -------------------------------------------------------------------------------- 1 | Line Decoration: Underline, Overline, and Strike-Through on W3C -------------------------------------------------------------------------------- /dist/includes/features/text-decoration/title.html: -------------------------------------------------------------------------------- 1 | Text Decoration Shorthand -------------------------------------------------------------------------------- /dist/includes/features/text-decoration/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/text-decoration/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/text-overflow/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | white-space: nowrap; 3 | overflow: hidden; 4 | text-overflow: ellipsis; /* or "clip" */ 5 | } -------------------------------------------------------------------------------- /dist/includes/features/text-overflow/description.html: -------------------------------------------------------------------------------- 1 | Defines how to signal to the user that text is overflowing its parent. This can be done using an ellipses or custom string. -------------------------------------------------------------------------------- /dist/includes/features/text-overflow/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/text-overflow/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/text-overflow/result.html: -------------------------------------------------------------------------------- 1 |

Click and hold to see the remainder of this text that overflows its parent. The rest of this is just filler text.

-------------------------------------------------------------------------------- /dist/includes/features/text-overflow/technical.html: -------------------------------------------------------------------------------- 1 | Text Overflow on W3C -------------------------------------------------------------------------------- /dist/includes/features/text-overflow/title.html: -------------------------------------------------------------------------------- 1 | Text Overflow -------------------------------------------------------------------------------- /dist/includes/features/text-overflow/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/text-shadow/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | text-shadow: #555 4px 4px 4px; /* color, h-offset, v-offset, blur */ 3 | } -------------------------------------------------------------------------------- /dist/includes/features/text-shadow/description.html: -------------------------------------------------------------------------------- 1 | Creates a drop-shadow effect on text. -------------------------------------------------------------------------------- /dist/includes/features/text-shadow/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/text-shadow/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/text-shadow/result.html: -------------------------------------------------------------------------------- 1 |

Text Shadow

-------------------------------------------------------------------------------- /dist/includes/features/text-shadow/technical.html: -------------------------------------------------------------------------------- 1 | Text Shadows on W3C -------------------------------------------------------------------------------- /dist/includes/features/text-shadow/title.html: -------------------------------------------------------------------------------- 1 | Text Shadow -------------------------------------------------------------------------------- /dist/includes/features/text-shadow/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/touch-action/description.html: -------------------------------------------------------------------------------- 1 | Allows you to determine whether, and by what means, a given area on the page can be manipulated via a touchscreen. -------------------------------------------------------------------------------- /dist/includes/features/touch-action/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/touch-action/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/touch-action/technical.html: -------------------------------------------------------------------------------- 1 | The touch-action CSS property on W3C -------------------------------------------------------------------------------- /dist/includes/features/touch-action/title.html: -------------------------------------------------------------------------------- 1 | Touch Action -------------------------------------------------------------------------------- /dist/includes/features/touch-action/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/transform-origin/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | transform: rotate(-10deg); 3 | transform-origin: -20px -50px; 4 | } -------------------------------------------------------------------------------- /dist/includes/features/transform-origin/description.html: -------------------------------------------------------------------------------- 1 | Allows you to define horizontal and vertical offsets to change the origin, or anchor point, of a CSS transform (rotate, scale, etc). -------------------------------------------------------------------------------- /dist/includes/features/transform-origin/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/transform-origin/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/transform-origin/result.html: -------------------------------------------------------------------------------- 1 |

This box is rotated using CSS3 transforms, but the origin of the rotation is changed from the default center to -20px -50px.

-------------------------------------------------------------------------------- /dist/includes/features/transform-origin/technical.html: -------------------------------------------------------------------------------- 1 | Transform Origin on W3C -------------------------------------------------------------------------------- /dist/includes/features/transform-origin/title.html: -------------------------------------------------------------------------------- 1 | Transform Origin -------------------------------------------------------------------------------- /dist/includes/features/transform-origin/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/transitions/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | background-color: red; 3 | transition: background-color linear .8s; 4 | } 5 | 6 | .element:hover { 7 | background-color: blue; 8 | } -------------------------------------------------------------------------------- /dist/includes/features/transitions/description.html: -------------------------------------------------------------------------------- 1 | By means of changes to property values, allows you to create simple two-step transitions, or animations, over a specified duration on elements in response to state changes. -------------------------------------------------------------------------------- /dist/includes/features/transitions/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/transitions/result.html: -------------------------------------------------------------------------------- 1 |

Hover over this element and it will gradually change background color.

-------------------------------------------------------------------------------- /dist/includes/features/transitions/technical.html: -------------------------------------------------------------------------------- 1 | Transitions on W3C -------------------------------------------------------------------------------- /dist/includes/features/transitions/title.html: -------------------------------------------------------------------------------- 1 | Transitions -------------------------------------------------------------------------------- /dist/includes/features/transitions/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/unset/code.html: -------------------------------------------------------------------------------- 1 | .example { 2 | font-family: unset; 3 | } -------------------------------------------------------------------------------- /dist/includes/features/unset/description.html: -------------------------------------------------------------------------------- 1 | A universal CSS value that's the same as inherit if a property is inherited or initial if a property is not inherited. -------------------------------------------------------------------------------- /dist/includes/features/unset/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/unset/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/unset/technical.html: -------------------------------------------------------------------------------- 1 | Erasing All Declarations: the unset keyword on W3C. -------------------------------------------------------------------------------- /dist/includes/features/unset/title.html: -------------------------------------------------------------------------------- 1 | Keyword value unset -------------------------------------------------------------------------------- /dist/includes/features/unset/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/user-select/code.html: -------------------------------------------------------------------------------- 1 | .example { 2 | user-select: none; 3 | } 4 | 5 | .example2 { 6 | user-select: all; 7 | } 8 | 9 | .example3 { 10 | user-select: auto; 11 | } -------------------------------------------------------------------------------- /dist/includes/features/user-select/description.html: -------------------------------------------------------------------------------- 1 | Enables you to define which elements can be selected by the user and how, for example to help avoid accidental selections of neighbouring content. -------------------------------------------------------------------------------- /dist/includes/features/user-select/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/user-select/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/user-select/technical.html: -------------------------------------------------------------------------------- 1 | Controlling content selection on W3C. -------------------------------------------------------------------------------- /dist/includes/features/user-select/title.html: -------------------------------------------------------------------------------- 1 | User Select -------------------------------------------------------------------------------- /dist/includes/features/user-select/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/variables/code.html: -------------------------------------------------------------------------------- 1 | :root { 2 | --global-color: cadetblue; 3 | --accent-color: chartreuse; 4 | } 5 | 6 | body { 7 | background-color: var(--global-color); 8 | color: var(--accent-color); 9 | } -------------------------------------------------------------------------------- /dist/includes/features/variables/description.html: -------------------------------------------------------------------------------- 1 | Lets you define your own variables or "custom properties" to which you can assign values and use in multiple places, very similar to how variables work in a programming language like JavaScript or PHP. -------------------------------------------------------------------------------- /dist/includes/features/variables/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/variables/result.html: -------------------------------------------------------------------------------- 1 |
2 |

The background color and text for this element are defined using CSS variables.

3 |
-------------------------------------------------------------------------------- /dist/includes/features/variables/technical.html: -------------------------------------------------------------------------------- 1 | CSS Custom Properties for Cascading Variables on W3C -------------------------------------------------------------------------------- /dist/includes/features/variables/title.html: -------------------------------------------------------------------------------- 1 | Variables (Custom Properties) -------------------------------------------------------------------------------- /dist/includes/features/viewport-units/code.html: -------------------------------------------------------------------------------- 1 | .example { 2 | width: 100%; 3 | height: 100vh; 4 | padding: 20vw; 5 | } -------------------------------------------------------------------------------- /dist/includes/features/viewport-units/description.html: -------------------------------------------------------------------------------- 1 | Allows you to define lengths using percentage-based values relative to the width or height of the viewport (visible area of the page). -------------------------------------------------------------------------------- /dist/includes/features/viewport-units/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/viewport-units/result.html: -------------------------------------------------------------------------------- 1 |

For a live demonstration of viewport units in action, see this CodePen demo.

-------------------------------------------------------------------------------- /dist/includes/features/viewport-units/technical.html: -------------------------------------------------------------------------------- 1 | Viewport-percentage lengths on W3C -------------------------------------------------------------------------------- /dist/includes/features/viewport-units/title.html: -------------------------------------------------------------------------------- 1 | Viewport-relative Units -------------------------------------------------------------------------------- /dist/includes/features/viewport-units/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/includes/features/viewport/code.html: -------------------------------------------------------------------------------- 1 | @viewport { 2 | width: device-width; 3 | zoom: 1.0; 4 | user-zoom: zoom; 5 | } -------------------------------------------------------------------------------- /dist/includes/features/viewport/description.html: -------------------------------------------------------------------------------- 1 | Allows you to specify the size, zoom factor, and orientation of the viewport using @viewport and descriptors, similar to what's done with the viewport <meta> tag. -------------------------------------------------------------------------------- /dist/includes/features/viewport/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/viewport/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/viewport/result.html: -------------------------------------------------------------------------------- 1 |
N/A
-------------------------------------------------------------------------------- /dist/includes/features/viewport/technical.html: -------------------------------------------------------------------------------- 1 | CSS Device Adaptation on W3C -------------------------------------------------------------------------------- /dist/includes/features/viewport/title.html: -------------------------------------------------------------------------------- 1 | Device Adaptation with @viewport -------------------------------------------------------------------------------- /dist/includes/features/viewport/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/viewport/tutorials.html -------------------------------------------------------------------------------- /dist/includes/features/will-change/code.html: -------------------------------------------------------------------------------- 1 | .parent:hover .child { 2 | will-change: transform; 3 | } 4 | 5 | .child { 6 | transition: transform 0.3s; 7 | } 8 | 9 | .child:hover { 10 | transform: scale(1.5); 11 | } -------------------------------------------------------------------------------- /dist/includes/features/will-change/description.html: -------------------------------------------------------------------------------- 1 | Lets you to inform the browser which elements and what properties will change, which allows the browser to optimize animations. -------------------------------------------------------------------------------- /dist/includes/features/will-change/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/dist/includes/features/will-change/polyfills.html -------------------------------------------------------------------------------- /dist/includes/features/will-change/technical.html: -------------------------------------------------------------------------------- 1 | CSS Will Change Module Level 1 on W3C -------------------------------------------------------------------------------- /dist/includes/features/will-change/title.html: -------------------------------------------------------------------------------- 1 | Will Change -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/apple-touch-icon.png -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/favicon.ico -------------------------------------------------------------------------------- /src/fonts/alexbrush.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/fonts/alexbrush.woff -------------------------------------------------------------------------------- /src/fonts/alexbrush.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/fonts/alexbrush.woff2 -------------------------------------------------------------------------------- /src/fonts/bevan.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/fonts/bevan.woff -------------------------------------------------------------------------------- /src/fonts/bevan.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/fonts/bevan.woff2 -------------------------------------------------------------------------------- /src/images/bg-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/images/bg-1.png -------------------------------------------------------------------------------- /src/images/bg-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/images/bg-2.png -------------------------------------------------------------------------------- /src/images/bg-borderimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/images/bg-borderimage.png -------------------------------------------------------------------------------- /src/images/bg-external.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/images/bg-external.gif -------------------------------------------------------------------------------- /src/images/compass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/images/compass.png -------------------------------------------------------------------------------- /src/images/filters.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/images/filters.png -------------------------------------------------------------------------------- /src/images/guitar-amp-original.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/images/guitar-amp-original.jpg -------------------------------------------------------------------------------- /src/images/guitaramp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/images/guitaramp.jpg -------------------------------------------------------------------------------- /src/images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/images/loading.gif -------------------------------------------------------------------------------- /src/images/object-fit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/images/object-fit.png -------------------------------------------------------------------------------- /src/includes/embed/assets/flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/embed/assets/flag.png -------------------------------------------------------------------------------- /src/includes/features/2d-transforms/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | transform: translate(10px, 10px) 3 | skew(-20deg) 4 | rotate(-10deg) 5 | scale(.9); 6 | } -------------------------------------------------------------------------------- /src/includes/features/2d-transforms/description.html: -------------------------------------------------------------------------------- 1 | Allows you to use the transform property along with one or more functions to transform elements in two-dimensional space (translate, scale, skew, rotate). -------------------------------------------------------------------------------- /src/includes/features/2d-transforms/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/2d-transforms/result.html: -------------------------------------------------------------------------------- 1 |

This element is translated, skewed, scaled, and rotated using CSS transforms.

-------------------------------------------------------------------------------- /src/includes/features/2d-transforms/technical.html: -------------------------------------------------------------------------------- 1 | Transforms on W3C -------------------------------------------------------------------------------- /src/includes/features/2d-transforms/title.html: -------------------------------------------------------------------------------- 1 | Transforms -------------------------------------------------------------------------------- /src/includes/features/2d-transforms/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/3d-transforms/description.html: -------------------------------------------------------------------------------- 1 | Extends CSS transforms to allow for three-dimensional transforms on CSS-rendered elements. -------------------------------------------------------------------------------- /src/includes/features/3d-transforms/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/3d-transforms/technical.html: -------------------------------------------------------------------------------- 1 | CSS Transform Module Level 2 on W3C -------------------------------------------------------------------------------- /src/includes/features/3d-transforms/title.html: -------------------------------------------------------------------------------- 1 | 3D Transforms -------------------------------------------------------------------------------- /src/includes/features/appearance/code.html: -------------------------------------------------------------------------------- 1 | input[type=search] { 2 | appearance: none; 3 | } -------------------------------------------------------------------------------- /src/includes/features/appearance/description.html: -------------------------------------------------------------------------------- 1 | Provides limited control over the look of native UI controls that are normally not able to be styled via CSS. -------------------------------------------------------------------------------- /src/includes/features/appearance/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/appearance/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/appearance/technical.html: -------------------------------------------------------------------------------- 1 | Image Processing on W3C -------------------------------------------------------------------------------- /src/includes/features/appearance/title.html: -------------------------------------------------------------------------------- 1 | Appearance Property -------------------------------------------------------------------------------- /src/includes/features/appearance/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/appearance/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/background-clip/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | background: #d78965; 3 | padding: 16px; 4 | background-clip: content-box; /* border-box, padding-box */ 5 | } -------------------------------------------------------------------------------- /src/includes/features/background-clip/description.html: -------------------------------------------------------------------------------- 1 | Defines how far the background of the element should visibly extend (i.e. where it's "clipped"). -------------------------------------------------------------------------------- /src/includes/features/background-clip/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/background-clip/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/background-clip/result.html: -------------------------------------------------------------------------------- 1 |


This element's background is clipped at the edges of its content (using content-box).

-------------------------------------------------------------------------------- /src/includes/features/background-clip/technical.html: -------------------------------------------------------------------------------- 1 | Background Clip on W3C -------------------------------------------------------------------------------- /src/includes/features/background-clip/title.html: -------------------------------------------------------------------------------- 1 | Background Clip -------------------------------------------------------------------------------- /src/includes/features/background-clip/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/background-origin/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | border: 16px solid rgba(23, 23, 23, .5); 3 | background: url(images/bg-1.png) no-repeat center; 4 | background-origin: content-box; 5 | background-size: cover; 6 | padding: 16px; 7 | } -------------------------------------------------------------------------------- /src/includes/features/background-origin/description.html: -------------------------------------------------------------------------------- 1 | Similar to background-clip, defines how far the background of the element should visibly extend (i.e. where its extremities originate). -------------------------------------------------------------------------------- /src/includes/features/background-origin/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/background-origin/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/background-origin/result.html: -------------------------------------------------------------------------------- 1 |

This element's background originates in the content area.

-------------------------------------------------------------------------------- /src/includes/features/background-origin/technical.html: -------------------------------------------------------------------------------- 1 | Background Origin on W3C -------------------------------------------------------------------------------- /src/includes/features/background-origin/title.html: -------------------------------------------------------------------------------- 1 | Background Origin -------------------------------------------------------------------------------- /src/includes/features/background-origin/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/background-origin/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/background-size/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | background-color: firebrick; 3 | background-image: linear-gradient(transparent 50%, rgba(255, 255, 255, .5) 50%); 4 | background-size: 20px 20px; 5 | } -------------------------------------------------------------------------------- /src/includes/features/background-size/description.html: -------------------------------------------------------------------------------- 1 | Lets you define the size of a background image using units or keywords. This also applies to the size of linear and radial gradients. -------------------------------------------------------------------------------- /src/includes/features/background-size/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/background-size/result.html: -------------------------------------------------------------------------------- 1 |

The background-size property can be used to create repeating backgrounds with no images:

2 |
-------------------------------------------------------------------------------- /src/includes/features/background-size/technical.html: -------------------------------------------------------------------------------- 1 | Background Size on W3C -------------------------------------------------------------------------------- /src/includes/features/background-size/title.html: -------------------------------------------------------------------------------- 1 | Background Size -------------------------------------------------------------------------------- /src/includes/features/background-size/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/background-size/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/bg-local/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | background-image: url(image.png); 3 | background-attachment: local; 4 | } -------------------------------------------------------------------------------- /src/includes/features/bg-local/description.html: -------------------------------------------------------------------------------- 1 | Lets you apply a "fixed" background that's fixed relative to the element on which its applied, rather than the viewport. -------------------------------------------------------------------------------- /src/includes/features/bg-local/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/bg-local/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/bg-local/technical.html: -------------------------------------------------------------------------------- 1 | Affixing Images: the 'background-attachment' property on W3C -------------------------------------------------------------------------------- /src/includes/features/bg-local/title.html: -------------------------------------------------------------------------------- 1 | background-attachment: local -------------------------------------------------------------------------------- /src/includes/features/bg-local/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/blending-modes/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | mix-blend-mode: color-dodge; 3 | } 4 | 5 | .element2 { 6 | background-image: url(image.png); 7 | background-color: hotpink; 8 | background-blend-mode: color-dodge; 9 | } 10 | -------------------------------------------------------------------------------- /src/includes/features/blending-modes/description.html: -------------------------------------------------------------------------------- 1 | Allows you to "blend" HTML, SVG elements, and backgrounds, using effects like "multiply", "darken", "luminosity", etc. that are common in graphics editors. -------------------------------------------------------------------------------- /src/includes/features/blending-modes/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/blending-modes/technical.html: -------------------------------------------------------------------------------- 1 | The mix-blend-mode and background-blend-mode properties on W3C. -------------------------------------------------------------------------------- /src/includes/features/blending-modes/title.html: -------------------------------------------------------------------------------- 1 | Blending and Compositing -------------------------------------------------------------------------------- /src/includes/features/border-image/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | border: solid 20px transparent; 3 | border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat; 4 | } -------------------------------------------------------------------------------- /src/includes/features/border-image/description.html: -------------------------------------------------------------------------------- 1 | Allows a repeating or stretched image to appear on an element's border in place of customary border styles. -------------------------------------------------------------------------------- /src/includes/features/border-image/result.html: -------------------------------------------------------------------------------- 1 |

Resize this box using the bottom-right handle and the image on the border will stay fluid.

-------------------------------------------------------------------------------- /src/includes/features/border-image/technical.html: -------------------------------------------------------------------------------- 1 | Border Images on W3C -------------------------------------------------------------------------------- /src/includes/features/border-image/title.html: -------------------------------------------------------------------------------- 1 | Border Images -------------------------------------------------------------------------------- /src/includes/features/border-radius/description.html: -------------------------------------------------------------------------------- 1 | Adds rounded corners to elements using shorthand, longhand, or "slash" syntax, which lets you define different values for horizontal and vertical radii on individual corners. -------------------------------------------------------------------------------- /src/includes/features/border-radius/result.html: -------------------------------------------------------------------------------- 1 |

This paragraph has rounded corners defined without the use of JavaScript, images, or extra markup.

-------------------------------------------------------------------------------- /src/includes/features/border-radius/technical.html: -------------------------------------------------------------------------------- 1 | Border Radius on W3C -------------------------------------------------------------------------------- /src/includes/features/border-radius/title.html: -------------------------------------------------------------------------------- 1 | Border Radius -------------------------------------------------------------------------------- /src/includes/features/border-radius/tutorials.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/includes/features/box-decoration-break/code.html: -------------------------------------------------------------------------------- 1 | .example { 2 | box-shadow: 0 0 20px #000; 3 | background: linear-gradient(to right, #fd746c, #2c3e50); 4 | box-decoration-break: clone; /* or "slice" (default) */ 5 | } -------------------------------------------------------------------------------- /src/includes/features/box-decoration-break/description.html: -------------------------------------------------------------------------------- 1 | Lets you determine how the browser should handle elements that have their margins, borders, padding, etc. split by page breaks, column breaks, regions, etc. -------------------------------------------------------------------------------- /src/includes/features/box-decoration-break/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/box-decoration-break/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/box-decoration-break/technical.html: -------------------------------------------------------------------------------- 1 | Fragmented Borders and Backgrounds on W3C -------------------------------------------------------------------------------- /src/includes/features/box-decoration-break/title.html: -------------------------------------------------------------------------------- 1 | Box Decoration Break -------------------------------------------------------------------------------- /src/includes/features/box-decoration-break/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/box-decoration-break/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/box-shadow/code.html: -------------------------------------------------------------------------------- 1 | /* color, h-offset, v-offset, blur, spread, inset (optional) */ 2 | 3 | .element { 4 | box-shadow: #000 10px 10px 10px 3px inset; 5 | } -------------------------------------------------------------------------------- /src/includes/features/box-shadow/description.html: -------------------------------------------------------------------------------- 1 | Creates a drop-shadow effect on an element. -------------------------------------------------------------------------------- /src/includes/features/box-shadow/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/box-shadow/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/box-shadow/result.html: -------------------------------------------------------------------------------- 1 |

This box has a drop shadow.

-------------------------------------------------------------------------------- /src/includes/features/box-shadow/technical.html: -------------------------------------------------------------------------------- 1 | Box Shadow on W3C -------------------------------------------------------------------------------- /src/includes/features/box-shadow/title.html: -------------------------------------------------------------------------------- 1 | Box Shadow -------------------------------------------------------------------------------- /src/includes/features/box-shadow/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/box-shadow/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/box-sizing/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | width: 200px; 3 | padding: 0 30px; 4 | box-sizing: border-box; /* content-box */ 5 | } -------------------------------------------------------------------------------- /src/includes/features/box-sizing/description.html: -------------------------------------------------------------------------------- 1 | Used to alter the default CSS box model for calculating width and height of the elements, which includes border and padding in its total, usually an undesirable result. -------------------------------------------------------------------------------- /src/includes/features/box-sizing/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/box-sizing/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/box-sizing/result.html: -------------------------------------------------------------------------------- 1 |

Extra padding does not make this box wider or taller. It will be only as large as its width and/or height properties define.

-------------------------------------------------------------------------------- /src/includes/features/box-sizing/technical.html: -------------------------------------------------------------------------------- 1 | Box Sizing on W3C -------------------------------------------------------------------------------- /src/includes/features/box-sizing/title.html: -------------------------------------------------------------------------------- 1 | Box Sizing -------------------------------------------------------------------------------- /src/includes/features/calc/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | width: calc(100% + 20px); 3 | } -------------------------------------------------------------------------------- /src/includes/features/calc/description.html: -------------------------------------------------------------------------------- 1 | Allows you to use a function in place of a length value to calculate the size or shape of an element instead of defining it explicitly. -------------------------------------------------------------------------------- /src/includes/features/calc/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/calc/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/calc/result.html: -------------------------------------------------------------------------------- 1 |

The width of this element is 70% minus 50px, using the calc() function.

-------------------------------------------------------------------------------- /src/includes/features/calc/technical.html: -------------------------------------------------------------------------------- 1 | Mathematical Expressions: calc() on W3C -------------------------------------------------------------------------------- /src/includes/features/calc/title.html: -------------------------------------------------------------------------------- 1 | Values Using calc() -------------------------------------------------------------------------------- /src/includes/features/caret-color/code.html: -------------------------------------------------------------------------------- 1 | textarea { 2 | caret-color: hotpink; 3 | } -------------------------------------------------------------------------------- /src/includes/features/caret-color/description.html: -------------------------------------------------------------------------------- 1 | For an element with editable text, this property allows you to set the color of the caret (the blinking visible indicator where text is to be inserted). -------------------------------------------------------------------------------- /src/includes/features/caret-color/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/caret-color/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/caret-color/result.html: -------------------------------------------------------------------------------- 1 |
2 |

Click inside the textarea below. The color of the blinking cursor (i.e. caret) will be hot pink.

3 | 4 |
-------------------------------------------------------------------------------- /src/includes/features/caret-color/technical.html: -------------------------------------------------------------------------------- 1 | Insertion caret on W3C -------------------------------------------------------------------------------- /src/includes/features/caret-color/title.html: -------------------------------------------------------------------------------- 1 | Caret Color -------------------------------------------------------------------------------- /src/includes/features/caret-color/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/caret-color/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/clip-path/description.html: -------------------------------------------------------------------------------- 1 | Lets you define a "clipping path", which is a region of an element where everything on the inside of the region is visible, whereas the remainder is "clipped" out (not visible). -------------------------------------------------------------------------------- /src/includes/features/clip-path/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/clip-path/technical.html: -------------------------------------------------------------------------------- 1 | Clipping Shape: the clip-path property on W3C -------------------------------------------------------------------------------- /src/includes/features/clip-path/title.html: -------------------------------------------------------------------------------- 1 | Clip Path -------------------------------------------------------------------------------- /src/includes/features/conditional-supports/description.html: -------------------------------------------------------------------------------- 1 | Allows native feature detection using @supports, similar to what's done using a tool like Modernizr. -------------------------------------------------------------------------------- /src/includes/features/conditional-supports/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/conditional-supports/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/conditional-supports/technical.html: -------------------------------------------------------------------------------- 1 | Feature queries: the @supports rule on W3C -------------------------------------------------------------------------------- /src/includes/features/conditional-supports/title.html: -------------------------------------------------------------------------------- 1 | Conditional Rules with @supports -------------------------------------------------------------------------------- /src/includes/features/conditional-supports/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/currentcolor/code.html: -------------------------------------------------------------------------------- 1 | .parent { 2 | color: lightgreen; 3 | } 4 | 5 | .child { 6 | background-color: currentColor; 7 | } -------------------------------------------------------------------------------- /src/includes/features/currentcolor/description.html: -------------------------------------------------------------------------------- 1 | A keyword value that allows an element to inherit the current computed color value rather than explicitly declaring a color. -------------------------------------------------------------------------------- /src/includes/features/currentcolor/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/currentcolor/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/currentcolor/result.html: -------------------------------------------------------------------------------- 1 |
2 |

The element below inherits its background color from its parent's color value.

3 |
4 |
-------------------------------------------------------------------------------- /src/includes/features/currentcolor/technical.html: -------------------------------------------------------------------------------- 1 | currentColor color keyword on W3C -------------------------------------------------------------------------------- /src/includes/features/currentcolor/title.html: -------------------------------------------------------------------------------- 1 | currentColor Keyword Value -------------------------------------------------------------------------------- /src/includes/features/cursors/code.html: -------------------------------------------------------------------------------- 1 | .element:hover { 2 | cursor: none; 3 | } 4 | 5 | .element2:hover { 6 | cursor: context-menu; 7 | } 8 | 9 | .element3:hover { 10 | cursor: not-allowed; 11 | } -------------------------------------------------------------------------------- /src/includes/features/cursors/description.html: -------------------------------------------------------------------------------- 1 | Additional values for the cursor property, including none, context-menu, col-resize, and more. -------------------------------------------------------------------------------- /src/includes/features/cursors/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/cursors/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/cursors/technical.html: -------------------------------------------------------------------------------- 1 | Cursor Property on W3C -------------------------------------------------------------------------------- /src/includes/features/cursors/title.html: -------------------------------------------------------------------------------- 1 | New Cursors -------------------------------------------------------------------------------- /src/includes/features/cursors/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/default/code.html: -------------------------------------------------------------------------------- 1 | No feature selected. -------------------------------------------------------------------------------- /src/includes/features/default/description.html: -------------------------------------------------------------------------------- 1 | No feature selected. -------------------------------------------------------------------------------- /src/includes/features/default/polyfills.html: -------------------------------------------------------------------------------- 1 | No feature selected. -------------------------------------------------------------------------------- /src/includes/features/default/result.html: -------------------------------------------------------------------------------- 1 | No feature selected. -------------------------------------------------------------------------------- /src/includes/features/default/technical.html: -------------------------------------------------------------------------------- 1 | No feature selected. -------------------------------------------------------------------------------- /src/includes/features/default/title.html: -------------------------------------------------------------------------------- 1 | Select a CSS3 Feature Above -------------------------------------------------------------------------------- /src/includes/features/default/tutorials.html: -------------------------------------------------------------------------------- 1 | No feature selected. -------------------------------------------------------------------------------- /src/includes/features/exclusions/code.html: -------------------------------------------------------------------------------- 1 | .exclusion { 2 | grid-row: 2; 3 | -ms-grid-column: 2; 4 | -ms-wrap-flow: both; 5 | padding: 10px; 6 | -ms-wrap-margin: 15px; 7 | z-index: 1; 8 | } -------------------------------------------------------------------------------- /src/includes/features/exclusions/description.html: -------------------------------------------------------------------------------- 1 | As an extension of the float property, exclusions (a.k.a. "positioned floats") allow you to define arbitrary areas that inline content can flow around. -------------------------------------------------------------------------------- /src/includes/features/exclusions/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/exclusions/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/exclusions/result.html: -------------------------------------------------------------------------------- 1 |

For a live demonstration of CSS exclusions, visit this link in a supporting browser.

-------------------------------------------------------------------------------- /src/includes/features/exclusions/technical.html: -------------------------------------------------------------------------------- 1 | CSS Exclusions Module -------------------------------------------------------------------------------- /src/includes/features/exclusions/title.html: -------------------------------------------------------------------------------- 1 | Exclusions -------------------------------------------------------------------------------- /src/includes/features/exclusions/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/filters/description.html: -------------------------------------------------------------------------------- 1 | Includes different features that allow you to add Photoshop-like effects to elements (hue, grayscale, sepia, blur, invert, saturate, etc.) using pure CSS. -------------------------------------------------------------------------------- /src/includes/features/filters/technical.html: -------------------------------------------------------------------------------- 1 | Filter Effects on W3C -------------------------------------------------------------------------------- /src/includes/features/filters/title.html: -------------------------------------------------------------------------------- 1 | Filter Effects -------------------------------------------------------------------------------- /src/includes/features/flexbox/code.html: -------------------------------------------------------------------------------- 1 | .flexcontainer { 2 | display: flex; 3 | flex-direction: row-reverse; 4 | } 5 | 6 | .flexitem { 7 | flex-grow: 1; 8 | } 9 | 10 | .flexitem:first-child { 11 | order: 3; 12 | flex-grow: 2; 13 | } -------------------------------------------------------------------------------- /src/includes/features/flexbox/description.html: -------------------------------------------------------------------------------- 1 | A layout module that makes it easier to align, center, space, distribute, etc., multiple elements in a layout. -------------------------------------------------------------------------------- /src/includes/features/flexbox/technical.html: -------------------------------------------------------------------------------- 1 | CSS Flexible Box Layout Module Level 1 -------------------------------------------------------------------------------- /src/includes/features/flexbox/title.html: -------------------------------------------------------------------------------- 1 | Flexible Box Model -------------------------------------------------------------------------------- /src/includes/features/font-face/description.html: -------------------------------------------------------------------------------- 1 | Allows embedding of custom, appropriately licensed fonts using the @font-face at-rule. -------------------------------------------------------------------------------- /src/includes/features/font-face/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/font-face/result.html: -------------------------------------------------------------------------------- 1 |

Below is a custom font embedded using @font-face

2 |
Bulletproof Web Fonts
-------------------------------------------------------------------------------- /src/includes/features/font-face/technical.html: -------------------------------------------------------------------------------- 1 | @font-face on W3C -------------------------------------------------------------------------------- /src/includes/features/font-face/title.html: -------------------------------------------------------------------------------- 1 | Web Fonts with @font-face -------------------------------------------------------------------------------- /src/includes/features/font-size-adjust/code.html: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-face: 'Trebuchet MS', Georgia, serif; 3 | font-size: 20px; 4 | font-size-adjust: 0.523; 5 | } -------------------------------------------------------------------------------- /src/includes/features/font-size-adjust/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/font-size-adjust/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/font-size-adjust/technical.html: -------------------------------------------------------------------------------- 1 | Relative sizing: the font-size-adjust property on W3C -------------------------------------------------------------------------------- /src/includes/features/font-size-adjust/title.html: -------------------------------------------------------------------------------- 1 | Font Size Adjust -------------------------------------------------------------------------------- /src/includes/features/font-size-adjust/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/font-size-adjust/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/gradients/description.html: -------------------------------------------------------------------------------- 1 | Allows the creation of a linear or radial gradients (images that fade smoothly from color to color), using special functions included where you would normally place an image URL. -------------------------------------------------------------------------------- /src/includes/features/gradients/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/gradients/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/gradients/result.html: -------------------------------------------------------------------------------- 1 |
2 |

Linear and radial gradients. No images.

3 |
4 |
5 |
-------------------------------------------------------------------------------- /src/includes/features/gradients/technical.html: -------------------------------------------------------------------------------- 1 | Gradients on W3C -------------------------------------------------------------------------------- /src/includes/features/gradients/title.html: -------------------------------------------------------------------------------- 1 | Linear & Radial Gradients -------------------------------------------------------------------------------- /src/includes/features/grid-layout/code.html: -------------------------------------------------------------------------------- 1 | .parent { 2 | display: grid; 3 | grid-template-columns: 20% 20% 20% 20% 20%; 4 | } 5 | 6 | .child { 7 | grid-column-start: 4; 8 | } -------------------------------------------------------------------------------- /src/includes/features/grid-layout/description.html: -------------------------------------------------------------------------------- 1 | A 2-dimensional layout module that allows you to size and position elements and their content in a flexibile and fluid manner, allowing major layout transformations without the need for corresponding markup changes. -------------------------------------------------------------------------------- /src/includes/features/grid-layout/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/grid-layout/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/grid-layout/result.html: -------------------------------------------------------------------------------- 1 |
2 |

The child element below is positioned in the 4th column of the grid:

3 |
4 |
5 |
6 |
7 |
-------------------------------------------------------------------------------- /src/includes/features/grid-layout/technical.html: -------------------------------------------------------------------------------- 1 | Grid Layout Module on W3C -------------------------------------------------------------------------------- /src/includes/features/grid-layout/title.html: -------------------------------------------------------------------------------- 1 | Grid Layout -------------------------------------------------------------------------------- /src/includes/features/grid-layout/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/grid-layout/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/hsla-rgba/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | background: hsl(207, 38%, 47%); 3 | color: hsla(207, 38%, 47%, .8) 4 | } 5 | 6 | .element3 { 7 | background: rgba(25, 167, 200, .6); 8 | } -------------------------------------------------------------------------------- /src/includes/features/hsla-rgba/description.html: -------------------------------------------------------------------------------- 1 | Allows colors to be defined in HSL (Hue, Saturation, and Lightness), HSLA format (Hue, Saturation, Lightness, and Alpha), or RGB plus Alpha format. -------------------------------------------------------------------------------- /src/includes/features/hsla-rgba/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/hsla-rgba/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/hsla-rgba/result.html: -------------------------------------------------------------------------------- 1 |

The background color of this paragraph is defined using an RGBA setting of rgba(255, 43, 0, .2)

-------------------------------------------------------------------------------- /src/includes/features/hsla-rgba/title.html: -------------------------------------------------------------------------------- 1 | HSL, HSLA, and RGBA Colors -------------------------------------------------------------------------------- /src/includes/features/hyphenation/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | hyphens: auto; /* or "manual" */ 3 | } -------------------------------------------------------------------------------- /src/includes/features/hyphenation/description.html: -------------------------------------------------------------------------------- 1 | Allows you to tell the browser whether to hyphenate words at line breaks, or to just break the entire word onto the next line. -------------------------------------------------------------------------------- /src/includes/features/hyphenation/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/hyphenation/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/hyphenation/result.html: -------------------------------------------------------------------------------- 1 |

The text in this box is set to automatic hyphenation. Some big words might help illustrate the hyphenation: Discombobulationary interdisciplinary reinstitutionalized ramifications.

-------------------------------------------------------------------------------- /src/includes/features/hyphenation/technical.html: -------------------------------------------------------------------------------- 1 | Hyphenation on W3C -------------------------------------------------------------------------------- /src/includes/features/hyphenation/title.html: -------------------------------------------------------------------------------- 1 | Hyphenation -------------------------------------------------------------------------------- /src/includes/features/image-orientation/description.html: -------------------------------------------------------------------------------- 1 | Allows you to correctly orient an image that was taken with a camera turned on its side, or an image that positioned improperly on a scanner. -------------------------------------------------------------------------------- /src/includes/features/image-orientation/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/image-orientation/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/image-orientation/technical.html: -------------------------------------------------------------------------------- 1 | Orienting an Image on the Page on W3C -------------------------------------------------------------------------------- /src/includes/features/image-orientation/title.html: -------------------------------------------------------------------------------- 1 | Image Orientation -------------------------------------------------------------------------------- /src/includes/features/image-orientation/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/image-rendering/code.html: -------------------------------------------------------------------------------- 1 | .img-1 { 2 | image-rendering: crisp-edges; 3 | } 4 | 5 | .img-2 { 6 | image-rendering: pixelated; 7 | } 8 | 9 | .img-3 { 10 | image-rendering: smooth; 11 | } -------------------------------------------------------------------------------- /src/includes/features/image-rendering/description.html: -------------------------------------------------------------------------------- 1 | Provides a hint to the browser about what aspects of an image are most important to preserve when the image is scaled, to help the browser optimize its scaling algorithm. -------------------------------------------------------------------------------- /src/includes/features/image-rendering/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/image-rendering/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/image-rendering/technical.html: -------------------------------------------------------------------------------- 1 | Image Processing on W3C -------------------------------------------------------------------------------- /src/includes/features/image-rendering/title.html: -------------------------------------------------------------------------------- 1 | Image Rendering -------------------------------------------------------------------------------- /src/includes/features/keyframe-animations/description.html: -------------------------------------------------------------------------------- 1 | Allows for the creation of complex animations that incorporate timing, delay, timing functions, multiple keyframes, and more. -------------------------------------------------------------------------------- /src/includes/features/keyframe-animations/result.html: -------------------------------------------------------------------------------- 1 |

No Flash, no JavaScript.

2 |
-------------------------------------------------------------------------------- /src/includes/features/keyframe-animations/technical.html: -------------------------------------------------------------------------------- 1 | CSS3 Animations on W3C -------------------------------------------------------------------------------- /src/includes/features/keyframe-animations/title.html: -------------------------------------------------------------------------------- 1 | Keyframe Animations -------------------------------------------------------------------------------- /src/includes/features/masks/description.html: -------------------------------------------------------------------------------- 1 | Allows you to use a graphical element or image as a luminance or alpha mask to hide portions of elements. -------------------------------------------------------------------------------- /src/includes/features/masks/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/masks/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/masks/result.html: -------------------------------------------------------------------------------- 1 |

The image below has been partially masked with a staggered transparent gradient.

2 |
-------------------------------------------------------------------------------- /src/includes/features/masks/technical.html: -------------------------------------------------------------------------------- 1 | Positioned Masks on W3C -------------------------------------------------------------------------------- /src/includes/features/masks/title.html: -------------------------------------------------------------------------------- 1 | Masks -------------------------------------------------------------------------------- /src/includes/features/media-queries/code.html: -------------------------------------------------------------------------------- 1 | @media (max-width: 1200px) { 2 | .element { 3 | background: #bada55; 4 | } 5 | } 6 | 7 | @media (max-width: 480px) { 8 | .element { 9 | background: #d78965; 10 | } 11 | } -------------------------------------------------------------------------------- /src/includes/features/media-queries/description.html: -------------------------------------------------------------------------------- 1 | Lets you serve different styles to a browser depending on various media types (print, screen, etc) and media conditions (screen size, portrait, landscape, etc.). -------------------------------------------------------------------------------- /src/includes/features/media-queries/result.html: -------------------------------------------------------------------------------- 1 |

Resize the browser window to cross the 1200px and 480px thresholds and the background color of this paragraph will change.

-------------------------------------------------------------------------------- /src/includes/features/media-queries/technical.html: -------------------------------------------------------------------------------- 1 | Media Queries Level 3 on W3C -------------------------------------------------------------------------------- /src/includes/features/media-queries/title.html: -------------------------------------------------------------------------------- 1 | Media Queries -------------------------------------------------------------------------------- /src/includes/features/multiple-backgrounds/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | background: url(images/example.png) center center no-repeat, 3 | url(images/example-2.png) top left repeat; 4 | } -------------------------------------------------------------------------------- /src/includes/features/multiple-backgrounds/description.html: -------------------------------------------------------------------------------- 1 | Allows multiple background images to be placed on a single element. -------------------------------------------------------------------------------- /src/includes/features/multiple-backgrounds/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/multiple-backgrounds/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/multiple-backgrounds/result.html: -------------------------------------------------------------------------------- 1 |

This element has two background images.

-------------------------------------------------------------------------------- /src/includes/features/multiple-backgrounds/technical.html: -------------------------------------------------------------------------------- 1 | Multiple Backgrounds on W3C -------------------------------------------------------------------------------- /src/includes/features/multiple-backgrounds/title.html: -------------------------------------------------------------------------------- 1 | Multiple Backgrounds -------------------------------------------------------------------------------- /src/includes/features/multiple-backgrounds/tutorials.html: -------------------------------------------------------------------------------- 1 |  -------------------------------------------------------------------------------- /src/includes/features/multiple-columns/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | column-count: 3; 3 | column-width: 75px; 4 | column-gap: 20px; 5 | column-rule: 1px solid #fff; 6 | } -------------------------------------------------------------------------------- /src/includes/features/multiple-columns/description.html: -------------------------------------------------------------------------------- 1 | Allows the content in a single element to be divided into multiple columns with a gap and rule, similar to newspaper layouts. -------------------------------------------------------------------------------- /src/includes/features/multiple-columns/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/multiple-columns/technical.html: -------------------------------------------------------------------------------- 1 | CSS Multi-column Layout Module Level 1 -------------------------------------------------------------------------------- /src/includes/features/multiple-columns/title.html: -------------------------------------------------------------------------------- 1 | Multiple Columns -------------------------------------------------------------------------------- /src/includes/features/object-fit-position/code.html: -------------------------------------------------------------------------------- 1 | img { 2 | object-fit: cover; 3 | object-position: top center; 4 | } -------------------------------------------------------------------------------- /src/includes/features/object-fit-position/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/object-fit-position/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/object-fit-position/technical.html: -------------------------------------------------------------------------------- 1 | Object Fit and Object Position on W3C -------------------------------------------------------------------------------- /src/includes/features/object-fit-position/title.html: -------------------------------------------------------------------------------- 1 | Object Fit / Object Position -------------------------------------------------------------------------------- /src/includes/features/object-fit-position/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/opacity/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | opacity: .4; 3 | } -------------------------------------------------------------------------------- /src/includes/features/opacity/description.html: -------------------------------------------------------------------------------- 1 | Allows you to apply a transparency setting to an element and all of its children. -------------------------------------------------------------------------------- /src/includes/features/opacity/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/opacity/result.html: -------------------------------------------------------------------------------- 1 |

Using the opacity property, this white box is semi-transparent.

-------------------------------------------------------------------------------- /src/includes/features/opacity/technical.html: -------------------------------------------------------------------------------- 1 | Transparency on W3C -------------------------------------------------------------------------------- /src/includes/features/opacity/title.html: -------------------------------------------------------------------------------- 1 | Opacity / Transparency -------------------------------------------------------------------------------- /src/includes/features/opacity/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/overflow-wrap/code.html: -------------------------------------------------------------------------------- 1 | /* You can use word-wrap as a fallback for old browsers */ 2 | .element { 3 | word-wrap: break-word; /* "normal" */ 4 | overflow-wrap: break-word; 5 | } -------------------------------------------------------------------------------- /src/includes/features/overflow-wrap/description.html: -------------------------------------------------------------------------------- 1 | This property allows you to define how to handle line breaking. An alternate syntax is the old word-wrap, which has support in every browser, including old versions of IE. -------------------------------------------------------------------------------- /src/includes/features/overflow-wrap/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/overflow-wrap/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/overflow-wrap/technical.html: -------------------------------------------------------------------------------- 1 | overflow-wrap on W3C -------------------------------------------------------------------------------- /src/includes/features/overflow-wrap/title.html: -------------------------------------------------------------------------------- 1 | Word Wrap / Overflow Wrap -------------------------------------------------------------------------------- /src/includes/features/paged-media/code.html: -------------------------------------------------------------------------------- 1 | @media -o-paged { 2 | html { 3 | height: 100%; 4 | overflow: -o-paged-x; 5 | } 6 | } -------------------------------------------------------------------------------- /src/includes/features/paged-media/description.html: -------------------------------------------------------------------------------- 1 | Allows content to be split into one or more "pages", giving you control over page breaks, page size, orientation, page margins, and orphans and widows. -------------------------------------------------------------------------------- /src/includes/features/paged-media/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/paged-media/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/paged-media/result.html: -------------------------------------------------------------------------------- 1 |

N/A

-------------------------------------------------------------------------------- /src/includes/features/paged-media/technical.html: -------------------------------------------------------------------------------- 1 | CSS Paged Media Module on W3C -------------------------------------------------------------------------------- /src/includes/features/paged-media/title.html: -------------------------------------------------------------------------------- 1 | Paged Media -------------------------------------------------------------------------------- /src/includes/features/placeholder-shown/code.html: -------------------------------------------------------------------------------- 1 | input:placeholder-shown { 2 | background: lightblue; 3 | } 4 | 5 | input:placeholder-shown ~ .msg { 6 | display: none; 7 | } -------------------------------------------------------------------------------- /src/includes/features/placeholder-shown/description.html: -------------------------------------------------------------------------------- 1 | A pseudo-element and pseudo-class to allow you to style a text input's placeholder text, or to style a text input based on whether or not the placeholder text is visible. -------------------------------------------------------------------------------- /src/includes/features/placeholder-shown/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/placeholder-shown/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/placeholder-shown/technical.html: -------------------------------------------------------------------------------- 1 | :placeholder-shown and ::placeholder on W3C. -------------------------------------------------------------------------------- /src/includes/features/placeholder-shown/title.html: -------------------------------------------------------------------------------- 1 | Placeholder/Placeholder Shown -------------------------------------------------------------------------------- /src/includes/features/placeholder-shown/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/placeholder-shown/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/pointer-events/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | pointer-events: none; 3 | } 4 | 5 | /* For SVG only */ 6 | 7 | .element2 { 8 | pointer-events: visibleFill; 9 | } -------------------------------------------------------------------------------- /src/includes/features/pointer-events/description.html: -------------------------------------------------------------------------------- 1 | Allows control over the circumstances under which elements can be the target of mouse events. -------------------------------------------------------------------------------- /src/includes/features/pointer-events/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/pointer-events/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/pointer-events/result.html: -------------------------------------------------------------------------------- 1 |

The link below doesn't work because its set to pointer-events: none

2 | 3 | Visit my website

-------------------------------------------------------------------------------- /src/includes/features/pointer-events/technical.html: -------------------------------------------------------------------------------- 1 | The pointer-events Property on W3C -------------------------------------------------------------------------------- /src/includes/features/pointer-events/title.html: -------------------------------------------------------------------------------- 1 | Pointer Events -------------------------------------------------------------------------------- /src/includes/features/pointer-events/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/pointer-events/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/rem-units/code.html: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 20px; 3 | } 4 | 5 | p { 6 | font-size: 1.5rem; 7 | } -------------------------------------------------------------------------------- /src/includes/features/rem-units/description.html: -------------------------------------------------------------------------------- 1 | Allows you to define values relative to the root element (usually the <html> element), rather than being relative to the inherited font size (like em units). -------------------------------------------------------------------------------- /src/includes/features/rem-units/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/rem-units/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/rem-units/result.html: -------------------------------------------------------------------------------- 1 |

This text is set to 1.5rem. This computes to 27px, which is one and a half times 18px (the root font size).

-------------------------------------------------------------------------------- /src/includes/features/rem-units/technical.html: -------------------------------------------------------------------------------- 1 | Rem Units on W3C -------------------------------------------------------------------------------- /src/includes/features/rem-units/title.html: -------------------------------------------------------------------------------- 1 | Rem Units -------------------------------------------------------------------------------- /src/includes/features/resize/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | overflow: hidden; /* anything but "visible" */ 3 | resize: both; /* none, horizontal, vertical */ 4 | } -------------------------------------------------------------------------------- /src/includes/features/resize/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/resize/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/resize/result.html: -------------------------------------------------------------------------------- 1 |

This <p> element can be resized by the user with a bottom-right handle.

-------------------------------------------------------------------------------- /src/includes/features/resize/technical.html: -------------------------------------------------------------------------------- 1 | Resizing Boxes on W3C -------------------------------------------------------------------------------- /src/includes/features/resize/title.html: -------------------------------------------------------------------------------- 1 | Resize -------------------------------------------------------------------------------- /src/includes/features/resize/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/scroll-behavior/code.html: -------------------------------------------------------------------------------- 1 | .example { 2 | scroll-behavior: smooth; 3 | } -------------------------------------------------------------------------------- /src/includes/features/scroll-behavior/description.html: -------------------------------------------------------------------------------- 1 | Lets you define the behavior of a scrolling element (instant scrolling or smooth transition) when scrolling is via navigation or a scrolling API. User scrolling is not affected. -------------------------------------------------------------------------------- /src/includes/features/scroll-behavior/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/scroll-behavior/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/scroll-behavior/technical.html: -------------------------------------------------------------------------------- 1 | Smooth Scrolling: The scroll-behavior Property on W3C -------------------------------------------------------------------------------- /src/includes/features/scroll-behavior/title.html: -------------------------------------------------------------------------------- 1 | Scroll Behavior -------------------------------------------------------------------------------- /src/includes/features/scroll-behavior/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/scroll-behavior/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/scroll-snap-points/description.html: -------------------------------------------------------------------------------- 1 | Multiple features to allow you to set "snap positions" to control how an element scrolls or pans. This can improve the user experience when (for example) viewing a gallery of images. -------------------------------------------------------------------------------- /src/includes/features/scroll-snap-points/polyfills.html: -------------------------------------------------------------------------------- 1 | Font Squirrel's @font-face Generator
-------------------------------------------------------------------------------- /src/includes/features/scroll-snap-points/result.html: -------------------------------------------------------------------------------- 1 |

For a demonstration of the different scroll snap points features, view this CodePen demo in a supporting browser.

-------------------------------------------------------------------------------- /src/includes/features/scroll-snap-points/technical.html: -------------------------------------------------------------------------------- 1 | CSS Scroll Snap Module on W3C -------------------------------------------------------------------------------- /src/includes/features/scroll-snap-points/title.html: -------------------------------------------------------------------------------- 1 | Scroll Snap Points -------------------------------------------------------------------------------- /src/includes/features/selection-color/code.html: -------------------------------------------------------------------------------- 1 | ::selection { 2 | background: purple; 3 | color: hotpink; 4 | } 5 | 6 | ::-moz-selection { 7 | background: purple; 8 | color: hotpink; 9 | } -------------------------------------------------------------------------------- /src/includes/features/selection-color/description.html: -------------------------------------------------------------------------------- 1 | Using a pseudo-element, allows you to change the text color or background color on selected text. -------------------------------------------------------------------------------- /src/includes/features/selection-color/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/selection-color/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/selection-color/result.html: -------------------------------------------------------------------------------- 1 |

Select the text in this paragraph. The background color and text color will change to purple and hotpink for the selected area.

-------------------------------------------------------------------------------- /src/includes/features/selection-color/technical.html: -------------------------------------------------------------------------------- 1 | Selecting Highlighted Content on W3C -------------------------------------------------------------------------------- /src/includes/features/selection-color/title.html: -------------------------------------------------------------------------------- 1 | Selection Pseudo-Element -------------------------------------------------------------------------------- /src/includes/features/selection-color/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/selection-color/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/space-round/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | background: url(bg.png) space 0 0; 3 | } 4 | 5 | .element2 { 6 | background-image: url(bg.png); 7 | background-repeat: round; 8 | } -------------------------------------------------------------------------------- /src/includes/features/space-round/description.html: -------------------------------------------------------------------------------- 1 | Alternate values for the background-repeat property. Each repeats the background as often as it will fit without being clipped. "space" repeats to fit, while "round" scales it. -------------------------------------------------------------------------------- /src/includes/features/space-round/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/space-round/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/space-round/result.html: -------------------------------------------------------------------------------- 1 |

For a live demonstration of CSS3's space and round values, visit this link in a supporting browser.

-------------------------------------------------------------------------------- /src/includes/features/space-round/technical.html: -------------------------------------------------------------------------------- 1 | Tiling Images: the 'background-repeat' property on W3C -------------------------------------------------------------------------------- /src/includes/features/space-round/title.html: -------------------------------------------------------------------------------- 1 | Space and Round Values for Background Repeat -------------------------------------------------------------------------------- /src/includes/features/space-round/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/tab-size/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | tab-size: 4; 3 | } -------------------------------------------------------------------------------- /src/includes/features/tab-size/description.html: -------------------------------------------------------------------------------- 1 | Allows you to change the number of characters making up a tab. Value can be an integer (representing number of spaces) or a length value. -------------------------------------------------------------------------------- /src/includes/features/tab-size/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/tab-size/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/tab-size/technical.html: -------------------------------------------------------------------------------- 1 | Tab Character Size on W3C -------------------------------------------------------------------------------- /src/includes/features/tab-size/title.html: -------------------------------------------------------------------------------- 1 | Tab Character Size -------------------------------------------------------------------------------- /src/includes/features/tab-size/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/tab-size/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/text-decoration/code.html: -------------------------------------------------------------------------------- 1 | a { 2 | text-decoration-line: underline; 3 | text-decoration-color: orange; 4 | text-decoration-style: dashed; 5 | text-underline-position: under; 6 | } -------------------------------------------------------------------------------- /src/includes/features/text-decoration/description.html: -------------------------------------------------------------------------------- 1 | New text decoration features, including the text-decoration property as a shorthand, adding various new longhand properties to manipulate underlines, overlines, etc. -------------------------------------------------------------------------------- /src/includes/features/text-decoration/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/text-decoration/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/text-decoration/result.html: -------------------------------------------------------------------------------- 1 |
2 |

This link uses new text decoration features. Only supporting browsers will show the changes.

3 |
-------------------------------------------------------------------------------- /src/includes/features/text-decoration/technical.html: -------------------------------------------------------------------------------- 1 | Line Decoration: Underline, Overline, and Strike-Through on W3C -------------------------------------------------------------------------------- /src/includes/features/text-decoration/title.html: -------------------------------------------------------------------------------- 1 | Text Decoration Shorthand -------------------------------------------------------------------------------- /src/includes/features/text-decoration/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/text-decoration/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/text-overflow/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | white-space: nowrap; 3 | overflow: hidden; 4 | text-overflow: ellipsis; /* or "clip" */ 5 | } -------------------------------------------------------------------------------- /src/includes/features/text-overflow/description.html: -------------------------------------------------------------------------------- 1 | Defines how to signal to the user that text is overflowing its parent. This can be done using an ellipses or custom string. -------------------------------------------------------------------------------- /src/includes/features/text-overflow/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/text-overflow/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/text-overflow/result.html: -------------------------------------------------------------------------------- 1 |

Click and hold to see the remainder of this text that overflows its parent. The rest of this is just filler text.

-------------------------------------------------------------------------------- /src/includes/features/text-overflow/technical.html: -------------------------------------------------------------------------------- 1 | Text Overflow on W3C -------------------------------------------------------------------------------- /src/includes/features/text-overflow/title.html: -------------------------------------------------------------------------------- 1 | Text Overflow -------------------------------------------------------------------------------- /src/includes/features/text-overflow/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/text-shadow/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | text-shadow: #555 4px 4px 4px; /* color, h-offset, v-offset, blur */ 3 | } -------------------------------------------------------------------------------- /src/includes/features/text-shadow/description.html: -------------------------------------------------------------------------------- 1 | Creates a drop-shadow effect on text. -------------------------------------------------------------------------------- /src/includes/features/text-shadow/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/text-shadow/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/text-shadow/result.html: -------------------------------------------------------------------------------- 1 |

Text Shadow

-------------------------------------------------------------------------------- /src/includes/features/text-shadow/technical.html: -------------------------------------------------------------------------------- 1 | Text Shadows on W3C -------------------------------------------------------------------------------- /src/includes/features/text-shadow/title.html: -------------------------------------------------------------------------------- 1 | Text Shadow -------------------------------------------------------------------------------- /src/includes/features/text-shadow/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/touch-action/description.html: -------------------------------------------------------------------------------- 1 | Allows you to determine whether, and by what means, a given area on the page can be manipulated via a touchscreen. -------------------------------------------------------------------------------- /src/includes/features/touch-action/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/touch-action/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/touch-action/technical.html: -------------------------------------------------------------------------------- 1 | The touch-action CSS property on W3C -------------------------------------------------------------------------------- /src/includes/features/touch-action/title.html: -------------------------------------------------------------------------------- 1 | Touch Action -------------------------------------------------------------------------------- /src/includes/features/touch-action/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/transform-origin/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | transform: rotate(-10deg); 3 | transform-origin: -20px -50px; 4 | } -------------------------------------------------------------------------------- /src/includes/features/transform-origin/description.html: -------------------------------------------------------------------------------- 1 | Allows you to define horizontal and vertical offsets to change the origin, or anchor point, of a CSS transform (rotate, scale, etc). -------------------------------------------------------------------------------- /src/includes/features/transform-origin/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/transform-origin/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/transform-origin/result.html: -------------------------------------------------------------------------------- 1 |

This box is rotated using CSS3 transforms, but the origin of the rotation is changed from the default center to -20px -50px.

-------------------------------------------------------------------------------- /src/includes/features/transform-origin/technical.html: -------------------------------------------------------------------------------- 1 | Transform Origin on W3C -------------------------------------------------------------------------------- /src/includes/features/transform-origin/title.html: -------------------------------------------------------------------------------- 1 | Transform Origin -------------------------------------------------------------------------------- /src/includes/features/transform-origin/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/transitions/code.html: -------------------------------------------------------------------------------- 1 | .element { 2 | background-color: red; 3 | transition: background-color linear .8s; 4 | } 5 | 6 | .element:hover { 7 | background-color: blue; 8 | } -------------------------------------------------------------------------------- /src/includes/features/transitions/description.html: -------------------------------------------------------------------------------- 1 | By means of changes to property values, allows you to create simple two-step transitions, or animations, over a specified duration on elements in response to state changes. -------------------------------------------------------------------------------- /src/includes/features/transitions/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/transitions/result.html: -------------------------------------------------------------------------------- 1 |

Hover over this element and it will gradually change background color.

-------------------------------------------------------------------------------- /src/includes/features/transitions/technical.html: -------------------------------------------------------------------------------- 1 | Transitions on W3C -------------------------------------------------------------------------------- /src/includes/features/transitions/title.html: -------------------------------------------------------------------------------- 1 | Transitions -------------------------------------------------------------------------------- /src/includes/features/transitions/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/unset/code.html: -------------------------------------------------------------------------------- 1 | .example { 2 | font-family: unset; 3 | } -------------------------------------------------------------------------------- /src/includes/features/unset/description.html: -------------------------------------------------------------------------------- 1 | A universal CSS value that's the same as inherit if a property is inherited or initial if a property is not inherited. -------------------------------------------------------------------------------- /src/includes/features/unset/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/unset/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/unset/technical.html: -------------------------------------------------------------------------------- 1 | Erasing All Declarations: the unset keyword on W3C. -------------------------------------------------------------------------------- /src/includes/features/unset/title.html: -------------------------------------------------------------------------------- 1 | Keyword value unset -------------------------------------------------------------------------------- /src/includes/features/unset/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/user-select/code.html: -------------------------------------------------------------------------------- 1 | .example { 2 | user-select: none; 3 | } 4 | 5 | .example2 { 6 | user-select: all; 7 | } 8 | 9 | .example3 { 10 | user-select: auto; 11 | } -------------------------------------------------------------------------------- /src/includes/features/user-select/description.html: -------------------------------------------------------------------------------- 1 | Enables you to define which elements can be selected by the user and how, for example to help avoid accidental selections of neighbouring content. -------------------------------------------------------------------------------- /src/includes/features/user-select/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/user-select/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/user-select/technical.html: -------------------------------------------------------------------------------- 1 | Controlling content selection on W3C. -------------------------------------------------------------------------------- /src/includes/features/user-select/title.html: -------------------------------------------------------------------------------- 1 | User Select -------------------------------------------------------------------------------- /src/includes/features/variables/code.html: -------------------------------------------------------------------------------- 1 | :root { 2 | --global-color: cadetblue; 3 | --accent-color: chartreuse; 4 | } 5 | 6 | body { 7 | background-color: var(--global-color); 8 | color: var(--accent-color); 9 | } -------------------------------------------------------------------------------- /src/includes/features/variables/description.html: -------------------------------------------------------------------------------- 1 | Lets you define your own variables or "custom properties" to which you can assign values and use in multiple places, very similar to how variables work in a programming language like JavaScript or PHP. -------------------------------------------------------------------------------- /src/includes/features/variables/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/variables/result.html: -------------------------------------------------------------------------------- 1 |
2 |

The background color and text for this element are defined using CSS variables.

3 |
-------------------------------------------------------------------------------- /src/includes/features/variables/technical.html: -------------------------------------------------------------------------------- 1 | CSS Custom Properties for Cascading Variables on W3C -------------------------------------------------------------------------------- /src/includes/features/variables/title.html: -------------------------------------------------------------------------------- 1 | Variables (Custom Properties) -------------------------------------------------------------------------------- /src/includes/features/viewport-units/code.html: -------------------------------------------------------------------------------- 1 | .example { 2 | width: 100%; 3 | height: 100vh; 4 | padding: 20vw; 5 | } -------------------------------------------------------------------------------- /src/includes/features/viewport-units/description.html: -------------------------------------------------------------------------------- 1 | Allows you to define lengths using percentage-based values relative to the width or height of the viewport (visible area of the page). -------------------------------------------------------------------------------- /src/includes/features/viewport-units/polyfills.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/viewport-units/result.html: -------------------------------------------------------------------------------- 1 |

For a live demonstration of viewport units in action, see this CodePen demo.

-------------------------------------------------------------------------------- /src/includes/features/viewport-units/technical.html: -------------------------------------------------------------------------------- 1 | Viewport-percentage lengths on W3C -------------------------------------------------------------------------------- /src/includes/features/viewport-units/title.html: -------------------------------------------------------------------------------- 1 | Viewport-relative Units -------------------------------------------------------------------------------- /src/includes/features/viewport-units/tutorials.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/includes/features/viewport/code.html: -------------------------------------------------------------------------------- 1 | @viewport { 2 | width: device-width; 3 | zoom: 1.0; 4 | user-zoom: zoom; 5 | } -------------------------------------------------------------------------------- /src/includes/features/viewport/description.html: -------------------------------------------------------------------------------- 1 | Allows you to specify the size, zoom factor, and orientation of the viewport using @viewport and descriptors, similar to what's done with the viewport <meta> tag. -------------------------------------------------------------------------------- /src/includes/features/viewport/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/viewport/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/viewport/result.html: -------------------------------------------------------------------------------- 1 |
N/A
-------------------------------------------------------------------------------- /src/includes/features/viewport/technical.html: -------------------------------------------------------------------------------- 1 | CSS Device Adaptation on W3C -------------------------------------------------------------------------------- /src/includes/features/viewport/title.html: -------------------------------------------------------------------------------- 1 | Device Adaptation with @viewport -------------------------------------------------------------------------------- /src/includes/features/viewport/tutorials.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/viewport/tutorials.html -------------------------------------------------------------------------------- /src/includes/features/will-change/code.html: -------------------------------------------------------------------------------- 1 | .parent:hover .child { 2 | will-change: transform; 3 | } 4 | 5 | .child { 6 | transition: transform 0.3s; 7 | } 8 | 9 | .child:hover { 10 | transform: scale(1.5); 11 | } -------------------------------------------------------------------------------- /src/includes/features/will-change/description.html: -------------------------------------------------------------------------------- 1 | Lets you to inform the browser which elements and what properties will change, which allows the browser to optimize animations. -------------------------------------------------------------------------------- /src/includes/features/will-change/polyfills.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/impressivewebs/CSS3-Click-Chart/5ae73f392b8ec0c6e0898f74a20c4d2737c38c4f/src/includes/features/will-change/polyfills.html -------------------------------------------------------------------------------- /src/includes/features/will-change/technical.html: -------------------------------------------------------------------------------- 1 | CSS Will Change Module Level 1 on W3C -------------------------------------------------------------------------------- /src/includes/features/will-change/title.html: -------------------------------------------------------------------------------- 1 | Will Change --------------------------------------------------------------------------------