:root {
--link-color-h: 211;
--link-color-s: 100%;
--link-color-l: 50%;
--link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);
--link-color: hsl(var(--link-color-hsl));
--link-color-10: hsla(var(--link-color-hsl), .1);
--link-color-20: hsla(var(--link-color-hsl), .2);
--link-color-30: hsla(var(--link-color-hsl), .3);
--link-color-40: hsla(var(--link-color-hsl), .4);
--link-color-50: hsla(var(--link-color-hsl), .5);
--link-color-60: hsla(var(--link-color-hsl), .6);
--link-color-70: hsla(var(--link-color-hsl), .7);
--link-color-80: hsla(var(--link-color-hsl), .8);
--link-color-90: hsla(var(--link-color-hsl), .9);
--link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l));
--link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l));
--link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l));
--link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l));
--link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
--link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));
}
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 2px;
background: red;
}
span {
background: white;
height: 100px;
}
input[type="radio"]:checked + label {
background: #FF0000;
box-shadow: 60px 30px 0 0 blue, 60px -30px 0 0 blue;
position: relative;
z-index: 1;
}
label {
transition: ease box-shadow .3s;
}
img { max-wdith: 100%; }
, таким образом не возникнет ситуаций, когда картинка где-то вылезла. Если хочешь, чтоб картинка всегда заполняла отведенное пространство по ширине, то img {
wdith: 100%;
heigth: auto;
max-wdith: 100%;
}
<label for="appt">Choose a time for your meeting:</label>
<input type="time" id="appt" name="appt"
min="09:00" max="18:00" required>
<small>Office hours are 9am to 6pm</small>
body {
height: 100%;
overflow: hidden;
}
.scroll {
overflow: hidden;
}
pointer-events: none;
canvas
, а window
. fieldset
, legend
и чуть чуть transform
<fieldset>
<legend>Легенда</legend>
<p>Ну такое совсем просто делается. Много стилей не надо.</p>
</fieldset>
fieldset {
transform: rotateX(180deg);
}
legend {
transform: rotateX(180deg);
}
p {
transform: rotateX(180deg);
}