2017-03-17 00:40:03 +03:00
<!doctype html>
2017-06-02 13:10:06 +03:00
< html lang = "en-us" >
2017-03-17 00:40:03 +03:00
< head >
2017-08-02 15:25:00 +03:00
< meta charset = "utf-8" >
< title > Custom Properties Pooch< / title >
< meta name = "og:title" content = "Custom Properties pooch" >
< meta name = "description" content = "See the power of CSS Custom Properties in a cute demo of an adorable pooch in a city park." >
< meta name = "keywords" content = "css, custom properties, variables" >
< meta name = "author" content = "gregwhitworth" >
< link rel = "stylesheet" href = "https://edgeportal.blob.core.windows.net/media/demotemplate.css" >
<!-- Syntax Highlight -->
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github-gist.min.css" >
< link rel = "stylesheet" href = "styles/demo.css" >
2017-03-17 00:40:03 +03:00
< / head >
2017-04-09 17:50:00 +03:00
< body >
2017-03-17 00:40:03 +03:00
< section id = "wrapper" role = "presentation" >
2017-03-17 02:48:26 +03:00
< div id = "feature-detection" >
2017-03-24 21:56:56 +03:00
< div class = "no-vars" role = "heading" > Warning: demo requires CSS Custom Property support, your browser doesn't support this.< / div >
< div class = "no-rgb-calc" role = "heading" > Warning: This demo works best with calc() support of float values within rgb(), your browser doesn't support this.< / div >
2017-03-17 02:48:26 +03:00
< / div >
2017-03-17 00:40:03 +03:00
< section role = "img" class = "day" id = "custom-prop-image" aria-label = "A pooch wags its tail in a city park." >
2017-03-22 01:02:56 +03:00
< svg id = "container" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 1300 750" preserveAspectRatio = "xMaxYMin" > < g id = "lightsource" > < circle r = "87" cx = "861" class = "light-source" cy = "134" id = "primary-circle" / > < defs > < path id = "SVGID_1_" d = "M448 1h861.2v426.1H448z" / > < radialGradient id = "moon" cx = ".8" r = ".95" fx = "-.25" fy = ".3" > < stop offset = "50%" stop-color = "transparent" / > < stop offset = "51%" stop-color = "#fff" / > < / radialGradient > < / defs > < clipPath id = "SVGID_2_" > < use xlink:href = "#SVGID_1_" overflow = "visible" / > < / clipPath > < g id = "Sun_Rays_2_" class = "sunray-container" > < path class = "sunrays" d = "M860.5 139.9c1.8 8.3 3.5 16.7 5 25.1 1.5 8.4 2.9 16.7 4.3 25.1 2.7 16.8 5.1 33.6 7.4 50.4 4.4 33.6 8 67.3 11 101.1s5.2 67.6 6.7 101.4c.7 16.9 1.3 33.9 1.5 50.9.1 8.5.2 17 .1 25.5 0 8.5-.2 17-.6 25.6-1.8-8.3-3.5-16.7-5-25.1-1.5-8.4-3-16.7-4.3-25.1-2.7-16.8-5.1-33.6-7.4-50.4-4.4-33.6-8-67.3-11-101.1-2.9-33.8-5.2-67.6-6.7-101.4-.7-16.9-1.3-33.9-1.5-50.9-.1-8.5-.2-17-.1-25.5.1-8.6.2-17.1.6-25.6z" / > < path class = "sunrays" d = "M860.5 139.9c3.2 7.9 6.3 15.8 9.3 23.8 3 8 5.8 16 8.6 24 5.6 16 10.9 32.2 16 48.3 10.2 32.3 19.6 64.9 28.4 97.6 8.8 32.7 16.9 65.6 24.2 98.7 3.6 16.6 7.1 33.2 10.3 49.9 1.6 8.3 3.1 16.7 4.5 25.1 1.4 8.4 2.7 16.8 3.9 25.3-3.2-7.9-6.3-15.8-9.3-23.8-3-8-5.8-16-8.6-24-5.6-16-10.9-32.2-16-48.3-10.2-32.3-19.6-64.9-28.4-97.6-8.8-32.7-16.9-65.6-24.2-98.7-3.6-16.6-7.1-33.2-10.3-49.9-1.6-8.3-3.1-16.7-4.5-25.1-1.5-8.4-2.8-16.9-3.9-25.3z" / > < path class = "sunrays" d = "M860.5 139.9c4.6 7.2 9 14.5 13.3 21.9 4.3 7.3 8.5 14.7 12.7 22.1 8.3 14.8 16.3 29.8 24.1 44.8 15.6 30.1 30.6 60.5 44.9 91.2 14.3 30.7 28 61.7 41 93 6.5 15.7 12.8 31.4 18.8 47.3 3 7.9 6 15.9 8.8 23.9 2.9 8 5.6 16.1 8.2 24.2-4.6-7.2-9-14.5-13.3-21.9-4.3-7.3-8.5-14.7-12.7-22.1-8.3-14.8-16.3-29.8-24.2-44.8-15.6-30.1-30.6-60.5-44.9-91.2-14.3-30.7-28-61.7-41-93-6.5-15.7-12.8-31.4-18.8-47.3-3-7.9-6-15.9-8.8-23.9-2.8-8-5.5-16.1-8.1-24.2z" / > < path class = "sunrays" d = "M860.5 139.9c5.7 6.3 11.4 12.7 16.8 19.2 5.5 6.5 10.9 13 16.3 19.6 10.7 13.2 21.2 26.5 31.6 39.9 20.6 26.9 40.6 54.3 60.1 82 19.4 27.7 38.3 55.9 56.6 84.5 9.1 14.3 18 28.7 26.7 43.3 4.3 7.3 8.6 14.6 12.8 22 4.2 7.4 8.3 14.9 12.3 22.4-5.7-6.3-11.4-12.7-16.9-19.2-5.5-6.5-10.9-13-16.3-19.6-10.7-13.2-21.2-26.5-31.6-39.9-20.6-26.9-40.6-54.3-60-82-19.4-27.8-38.3-55.9-56.5-84.5-9.1-14.3-18-28.7-26.7-43.3-4.3-7.3-8.6-14.6-12.8-22-4.3-7.4-8.5-14.9-12.4-22.4z" / > < path class = "sunrays" d = "M860.5 139.9c6.8 5.2 13.4 10.6 19.9 16 6.6 5.4 13 10.9 19.5 16.5 12.9 11.1 25.5 22.4 38 33.9 25 22.9 49.4 46.4 73.4 70.3 24 23.9 47.4 48.4 70.4 73.4 11.4 12.5 22.8 25.2 33.9 38 5.5 6.4 11 12.9 16.5 19.5 5.4 6.5 10.8 13.2 16 19.9-6.8-5.2-13.4-10.6-19.9-16-6.6-5.4-13-10.9-19.5-16.5-12.9-11.1-25.5-22.4-38-33.9-25-22.9-49.4-46.4-73.4-70.4-23.9-24-47.4-48.4-70.3-73.4-11.4-12.5-22.8-25.2-33.9-38-5.5-6.4-11.1-12.9-16.5-19.5-5.6-6.4-10.9-13.1-16.1-19.8z" / > < path class = "sunrays" d = "M860.5 139.9c7.6 4 15 8.1 22.4 12.3 7.4 4.2 14.7 8.5 22 12.8 14.6 8.7 29 17.6 43.3 26.7 28.6 18.2 56.7 37.1 84.5 56.5 27.8 19.4 55.1 39.4 82 60 13.4 10.3 26.8 20.8 39.9 31.6 6.6 5.4 13.1 10.8 19.6 16.3 6.5 5.5 12.9 11.1 19.2 16.9-7.6-4-15-8.1-22.4-12.3-7.4-4.2-14.7-8.5-22-12.8-14.6-8.7-29-17.6-43.3-26.7-28.6-18.2-56.7-37.1-84.5-56.6-27.7-19.4-55.1-39.4-82-60.1-13.4-10.3-26.8-20.8-39.9-31.6-6.6-5.4-13.1-10.8-19.6-16.3-6.5-5.4-12.9-11-19.2-16.7z" / > < path class = "sunrays" d = "M860.5 139.9c8.1 2.6 16.2 5.3 24.2 8.2 8 2.9 16 5.8 23.9 8.8 15.9 6 31.6 12.3 47.3 18.8 31.3 13 62.3 26.7 93 41 30.7 14.3 61.1 29.2 91.2 44.9 15 7.8 30 15.9 44.8 24.1 7.4 4.2 14.8 8.4 22.1 12.7 7.3 4.3 14.6 8.7 21.9 13.3-8.1-2.6-16.2-5.3-24.2-8.2-8-2.8-16-5.8-23.9-8.8-15.9-6-31.6-12.3-47.3-18.8-31.3-13-62.3-26.7-93-41-30.7-14.3-61.1-29.3-91.2-44.9-15-7.9-30-15.9-44.8-24.1-7.4-4.2-14.8-8.3-22.1-12.7-7.4-4.3-14.7-8.8-21.9-13.3z" / > < path class = "sunrays" d = "M860.5 139 . 9c8 . 5 1 . 2 16 . 9 2 . 5 25 . 3 3 . 9 8 . 4 1 . 4 16 . 7 3 25 . 1 4 . 5 16 . 7 3 . 2 33 . 3 6 . 7 49 . 9 10 . 3 33 . 1 7 . 4 66 15 . 5 98 . 7 24 . 2 32 . 7 8 . 8 65 . 3 18 . 2 97 . 6 28 . 4 16 . 2 5 . 1 32 . 3 10 . 4 48 . 3 16 8 2 . 8 16 5 . 7 24 8 . 6 8 2 . 9 15 . 9 6 23 . 8 9 . 3-8 . 5-1 . 1-16 .
2017-03-17 00:40:03 +03:00
< / section >
2017-04-09 17:50:00 +03:00
< aside id = "ui" role = "presentation" >
2017-03-17 00:40:03 +03:00
< section id = "environment" role = "presentation" >
2017-03-21 04:33:06 +03:00
< h2 class = "subhead" aria-label = "Environment: Switch the time of day and watch the environment change via custom properties" > Environment< / h2 >
2017-03-17 00:40:03 +03:00
< div class = "thumbnails" role = "presentation" >
2017-03-17 23:55:54 +03:00
< img src = "img/night_scene.png" id = "night" role = "option" alt = "Night" aria-label = "Select this to switch to night time" / >
< img src = "img/day_scene.png" id = "day" aria-selected = "true" role = "option" alt = "Day" aria-label = "Select this to switch to day time" / >
2017-03-17 00:40:03 +03:00
< / div >
< / section >
< section id = "results" role = "presentation" >
2017-03-21 04:33:06 +03:00
< h2 class = "subhead" > Custom props modified< / h2 >
2017-03-17 00:40:03 +03:00
< code id = "code" > --dog-coat-r-mod: 0;
--dog-coat-g-mod: 0;
--dog-coat-b-mod: 0;
2017-04-09 17:50:00 +03:00
--dog__light: rgb(166, 125, 83);
2017-03-17 00:40:03 +03:00
--park-r-mod: 0;
--park-g-mod: 0;
2017-04-09 17:50:00 +03:00
--park-b-mod: 0;
2017-03-17 00:40:03 +03:00
--building-r-mod: 0;
--building-g-mod: 0;
2017-04-09 17:50:00 +03:00
--building-b-mod: 0;
2017-03-17 00:40:03 +03:00
--light-r-mod: 0;
--light-g-mod: 0;
2017-04-09 17:50:00 +03:00
--light-b-mod: 0;
--light-source: rgb(245, 169, 95);
--show-stars: none;
2017-03-17 00:40:03 +03:00
--sky-start: rgb(95, 171, 217);
--sky-end: rgb(216, 150, 115);< / code >
< / section >
2017-04-09 17:50:00 +03:00
< / aside >
2017-03-17 00:40:03 +03:00
< / section > <!-- wrapper -->
2017-03-17 02:09:36 +03:00
2017-03-22 01:02:56 +03:00
< div id = "a11y-button-wrapper" >
< button id = "toggleAnimations" > Pause Animations< / button >
< / div >
2017-03-17 23:20:47 +03:00
< section id = "article-wrapper" >
< article >
2017-03-21 04:33:06 +03:00
< h4 class = "subhead" > Custom properties in Microsoft Edge< / h4 >
2017-03-17 23:20:47 +03:00
< p > Custom properties are a very powerful tool for web developers to create
amazing web experiences.
2017-03-22 01:02:56 +03:00
If you don't know what custom properties are or how they work, we suggest reading our blog post < a href = "https://blogs.windows.com/msedgedev/?p=20042&preview=true" target = "_blank" > CSS Custom Properties in Microsoft Edge< / a > which covers them in detail.< / p >
2017-03-17 20:24:56 +03:00
2017-03-21 04:33:06 +03:00
< h4 class = "subhead" > Deciding on the demo< / h4 >
2017-03-17 20:24:56 +03:00
2017-04-09 17:50:00 +03:00
< p > When discussing the various demo ideas for custom properties we wanted to ensure it covered the major benefits of custom properties; cascade, dynamic update, animatable.
2017-03-17 23:20:47 +03:00
One of the things we realized where custom properties are really powerful is color math within color functions.
We decided to utilize this approach for changing the time of day because one of the most noticeable changes in your
surrounding environment throughought the day is the change of colors from warm to cool (depending on the amount of sun of course).< / p >
2017-03-17 20:24:56 +03:00
2017-03-21 04:33:06 +03:00
< h4 class = "subhead" > Creating the feel of day to night< / h4 >
2017-03-17 23:20:47 +03:00
< p > In order to do this, designer Stephanie Drescher, worked out the various levels that
2017-04-09 17:50:00 +03:00
had similiar color values and could be adjusted together.
2017-03-17 23:20:47 +03:00
These levels within the illustration and their percentage adjustment were provided
2017-04-09 17:50:00 +03:00
to Greg Whitworth who applied these to rgb() modifiers of the custom properties.
2017-03-17 23:20:47 +03:00
Here's an example of one of these levels and its associated rgb() custom property modifiers:< / p >
2017-03-17 20:24:56 +03:00
2017-08-02 15:25:00 +03:00
< pre > < code class = "css" > --building-r-mod: 0;
--building-g-mod: 0;
--building-b-mod: 0;< / code > < / pre >
2017-03-17 23:20:47 +03:00
< p > And then to utilize this on one of the buildings we do the following:< / p >
2017-03-17 20:24:56 +03:00
2017-08-02 15:25:00 +03:00
< pre > < code class = "css" > .distant-building__window
{
fill: rgb(
calc(111 + (111 * var(--building-r-mod))),
calc(79 + (79 * var(--building-g-mod))),
calc(85 + (85 * var(--building-b-mod)))
);
}< / code > < / pre >
2017-03-17 20:24:56 +03:00
2017-03-21 04:33:06 +03:00
< h4 class = "subhead" > Changing the time of day< / h4 >
2017-04-09 17:50:00 +03:00
2017-03-17 23:20:47 +03:00
< p > In order for you to be able to click the button and have it switch we needed to utilize the setProperty() method. Since we have
many custom properties, we created an array of name/value pairs and passed it to a function to update all of them. Here is the code
to change from day to night:< / p >
2017-03-17 20:24:56 +03:00
2017-08-02 15:25:00 +03:00
< pre > < code class = "javascript" > var night = function() {
vars = [
{name: "--sky-start", value: "rgb(100, 75, 128)"},
{name: "--sky-end", value: "rgb(45, 45, 81)"},
{name: "--light-r-mod", value: "-17.5"},
{name: "--light-g-mod", value: "25"},
{name: "--light-b-mod", value: "110"},
{name: "--show-stars", value: "block"},
{name: "--building-r-mod", value: "-.25"},
{name: "--building-g-mod", value: 0},
{name: "--building-b-mod", value: ".15"},
{name: "--park-r-mod", value: "-.30"},
{name: "--park-g-mod", value: "-.20"},
{name: "--park-b-mod", value: "-.08"},
{name: "--light-source", value: "url(#moon)"}
];
setVars(vars);
getVars(vars);
}
function setVars(variables) {
variables.forEach(function(prop) {
rootStyle.setProperty(prop.name, prop.value);
}, this);
}< / code > < / pre >
2017-03-17 20:24:56 +03:00
2017-03-21 04:33:06 +03:00
< h4 class = "subhead" > Animating the dog's tail< / h4 >
2017-03-17 23:20:47 +03:00
< p > Another aspect of custom properties we wanted our demo to highlight was that you can animate a custom property.
However, since custom properties can't be interpolated we needed an animation that would look fine without interpolation.
We discussed this, and decided to make the dog's tail wag because this occurs quickly in real life so your brain fills in the gaps
even though it isn't interpolating. We did this for the twinkling stars and window lights turning on and off as well.< / p >
2017-03-17 20:24:56 +03:00
2017-03-17 23:20:47 +03:00
< p > Here is the code for the dog's tail:< / p >
2017-03-17 20:24:56 +03:00
2017-08-02 15:25:00 +03:00
< pre > < code class = "css" > .tail
{
transform: translateY(10px) rotate(var(--tail-rotate));
transform-origin: 60% 84%;
animation: wagTail 250ms infinite;
}
@keyframes wagTail
{
from
{
--tail-rotate: 15deg;
}
to
{
--tail-rotate: 25deg;
}
}< / code > < / pre >
2017-03-17 20:24:56 +03:00
2017-03-17 23:20:47 +03:00
< / article >
< / section >
2017-03-17 02:48:26 +03:00
2017-08-02 15:25:00 +03:00
<!-- Syntax Highlight -->
< script src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.0.0/highlightjs-line-numbers.min.js" > < / script >
2017-03-17 00:40:03 +03:00
<!-- #Assets -->
< script type = "text/javascript" src = "script.js" > < / script >
2017-08-02 15:25:00 +03:00
<!-- Adds a universal header to the top of the page -->
< script src = "https://msedgecdn.azurewebsites.net/scripts/demo-header.js" > < / script >
2017-03-17 00:40:03 +03:00
< / body >
2017-04-09 17:50:00 +03:00
< / html >
