Avoiding <img> layout shifts: aspect-ratio vs width & height attributes - JakeArchibald.com
Journal
Tagged: css
FLEX: A simple visual cheatsheet for flexbox
And another really nice visual cheatsheet for CSS flexbox properties.
GRID: A simple visual cheatsheet for CSS Grid Layout
A really nice cheatsheet for CSS grid properties.
The Flexbox Holy Albatross | HeydonWorks
I still have to fully get my head around this but it seems Heydon Pickering solved container queries with this one.
Use the :lang pseudo-class over the lang attribute selector for language-specific styles
This might be useful at some point!
100 Buttons 067
button{
outline: none;
cursor: pointer;
display: block;
position: relative;
text-align: center;
padding: 1.25em 2.5em;
border: none;
border-radius: 10px;
color: #FFF;
background-color: #70b180;
font-family: serif;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
line-height: 1;
letter-spacing: .35em;
transition: all .4s ease;
}
button:hover,
button:focus{
background-color: #71c386;
}
100 Buttons 066
button{
outline: none;
cursor: pointer;
display: block;
position: relative;
text-align: center;
padding: .25em .5em;
border: none;
color: #FFF;
background-color: #000;
font-family: serif;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
line-height: 1;
letter-spacing: 1px;
transition: all .4s ease;
}
button:before,
button:after{
content: "";
width: 120%;
height: 1px;
background-color: #FFF;
position: absolute;
z-index: -1;
left: -10%;
transition: all .3s ease;
}
button:before{top: -10px;}
button:after{bottom: -10px;}
button:hover:before,
button:focus:before{
top: 50%;
transform: translate(0,-50%);
}
button:hover:after,
button:focus:after{
bottom: 50%;
transform: translate(0,-50%);
}
100 Buttons 065
button{
outline: none;
cursor: pointer;
display: block;
position: relative;
text-align: center;
padding: 1.25em 2.25em;
border: none;
border-radius: 4px;
color: #fcb00b;
background-color: #FFF;
box-shadow: 0px 0px 10px #9a6f0f;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
line-height: 1;
letter-spacing: .25em;
transition: all .2s ease;
}
button:hover,
button:focus{
box-shadow: 0px 0px 10px 3px #9a6f0f;
}
100 Buttons 064
button{
outline: none;
cursor: pointer;
display: block;
position: relative;
text-align: center;
padding: 1.25em 2.25em;
border: 1px dashed #4f918d;
color: #358c87;
background-color: transparent;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
line-height: 1;
letter-spacing: .25em;
transition: all .4s ease;
}
button:hover,
button:focus{
border-style: solid;
box-shadow: 0 0 5px rgba(79, 145, 141, 0.7);
}
100 Buttons 063
button{
outline: none;
cursor: pointer;
display: block;
position: relative;
text-align: center;
padding: 1em 2em;
border: 2px solid #4f918d;
color: #4f918d;
background-color: transparent;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
line-height: 1;
letter-spacing: .25em;
transition: all .4s ease;
}
button:hover,
button:focus{
box-shadow: inset 0px 0px 0px 30px #4f918d;
color: #FFF;
}
100 Buttons 062
button{
outline: none;
cursor: pointer;
display: block;
position: relative;
text-align: center;
padding: .5em 0;
border: none;
color: #FFF;
background-color: transparent;
font-family: serif;
font-size: 32px;
font-weight: 700;
font-style: italic;
text-transform: lowercase;
text-shadow: 2px 2px rgba(0,0,0,.5);
line-height: 1;
transition: all .2s ease;
}
button:before{
content: "";
display: block;
height: 100%;
width: 180%;
background-color: #4a5c4a;
position: absolute;
z-index: -1;
left: -90%;
top: 0;
transition: all .3s ease;
}
button:hover:before,
button:focus:before{
left: -40%;
}
100 Buttons 061
button{
outline: none;
cursor: pointer;
display: block;
overflow: hidden;
position: relative;
text-align: center;
padding: 2em .25em .25em 5em;
border: none;
color: #e8644d;
background-color: transparent;
font-family: sans-serif;
font-size: 16px;
line-height: 1;
transition: all .2s ease;
box-shadow: inset 4px 4px 0 0 #e8644d, 1px 1px 0 0 #e8644d;
}
button:hover,
button:focus{
padding: 2em 1.25em .25em 4em;
}
100 Buttons 060
button{
outline: none;
cursor: pointer;
display: block;
overflow: hidden;
position: relative;
text-align: center;
padding: 1em 2.5em;
border: none;
color: #4de7d7;
background-color: transparent;
font-family: sans-serif;
font-size: 16px;
line-height: 1;
transition: all .2s ease;
box-shadow:
0.3em 0.3em 0 0 #4de7d7,
inset 0.3em 0.3em 0 0
}
button:hover,
button:focus{
box-shadow: 0 0 0 0 #4de7d7,
inset 6em 3.5em 0 0 #4de7d7;
color: #000;
}
100 Buttons 059
button{
outline: none;
cursor: pointer;
display: block;
overflow: hidden;
position: relative;
text-align: center;
padding: 1em 2.5em;
border: 2px solid #e687c4;
color: #e687c4;
background-color: transparent;
font-family: sans-serif;
font-size: 16px;
line-height: 1;
transition: all .2s ease;
}
button:hover,
button:focus{
box-shadow: 0 0 0 10px rgba(230, 136, 197, 0.4);
}
100 Buttons 058
button{
outline: none;
cursor: pointer;
display: block;
overflow: hidden;
position: relative;
text-align: center;
padding: 1em 1.5em 1em 3.5em;
border: 1px solid #1F4AFC;
color: #1F4AFC;
background-color: transparent;
font-family: monospace;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
line-height: 1;
transition: all .2s ease;
}
button:before,
button:after{
box-sizing: border-box;
position: absolute;
left: 10px;
top: 50%;
content: "";
display: block;
width: 0px;
height: 0px;
border-right: 18px solid transparent;
border-top: 18px solid #FEF731;
border-left: 18px solid #FEF731;
border-bottom: 18px solid #FEF731;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
transform-origin: center;
transform-style: flat;
transform-origin: 50% 0;
}
button:before{
transform: rotate(-10deg) translate(0,-50%);
}
button:after{
transform: rotate(10deg) translate(0,-50%);
}
button:hover:before{
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
animation: jaw-down 200ms 7, move-out 1s .5s 1;
}
button:hover:after{
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
animation: jaw-up 200ms 7, move-out 1s .5s 1;
}
@-webkit-keyframes jaw-up{
from{transform: rotate(10deg) translate(0,-50%);}
to{transform: rotate(45deg) translate(0,-50%);}
}
@-moz-keyframes jaw-up{
from{transform: rotate(10deg) translate(0,-50%);}
to{transform: rotate(45deg) translate(0,-50%);}
}
@keyframes jaw-up{
from{transform: rotate(10deg) translate(0,-50%);}
to{transform: rotate(45deg) translate(0,-50%);}
}
@-webkit-keyframes jaw-down{
from{transform: rotate(-10deg) translate(0,-50%);}
to{transform: rotate(-45deg) translate(0,-50%);}
}
@-moz-keyframes jaw-down{
from{transform: rotate(-10deg) translate(0,-50%);}
to{transform: rotate(-45deg) translate(0,-50%);}
}
@keyframes jaw-down{
from{transform: rotate(-10deg) translate(0,-50%);}
to{transform: rotate(-45deg) translate(0,-50%);}
}
@-webkit-keyframes move-out{
from{left: 10px;}
to{left: 110%;}
}
@-moz-keyframes move-out{
from{left: 10px;}
to{left: 110%;}
}
@keyframes move-out{
from{left: 10px;}
to{left: 110%;}
}
100 Buttons 057
button{
outline: none;
cursor: pointer;
display: block;
position: relative;
top: 0;
text-align: center;
padding: 1em 2.5em;
border: 2px solid #e85e00;
color: #e85e00;
background-color: transparent;
font-family: sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
line-height: 1;
transition: all .2s ease;
}
button:focus,
button:hover{
animation-name: shake;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@-webkit-keyframes shake {
0% {transform: translate(0px, 0px) rotate(0deg);}
2% {transform: translate(0.5px, -1.5px) rotate(1.5deg);}
4% {transform: translate(0.5px, 0.5px) rotate(1.5deg);}
6% {transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
8% {transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
10% {transform: translate(1.5px, -0.5px) rotate(0.5deg);}
12% {transform: translate(-0.5px, -0.5px) rotate(1.5deg);}
14% {transform: translate(-1.5px, 2.5px) rotate(-0.5deg);}
16% {transform: translate(1.5px, -1.5px) rotate(1.5deg);}
18% {transform: translate(0.5px, -0.5px) rotate(1.5deg);}
20% {transform: translate(0.5px, 2.5px) rotate(0.5deg);}
22% {transform: translate(0.5px, 0.5px) rotate(-0.5deg);}
24% {transform: translate(1.5px, -1.5px) rotate(-0.5deg);}
26% {transform: translate(2.5px, 0.5px) rotate(-0.5deg);}
28% {transform: translate(-0.5px, 1.5px) rotate(-0.5deg);}
30% {transform: translate(0.5px, 1.5px) rotate(1.5deg);}
32% {transform: translate(0.5px, 0.5px) rotate(1.5deg);}
34% {transform: translate(0.5px, 2.5px) rotate(0.5deg);}
36% {transform: translate(2.5px, -1.5px) rotate(0.5deg);}
38% {transform: translate(0.5px, -0.5px) rotate(-0.5deg);}
40% {transform: translate(-1.5px, -0.5px) rotate(1.5deg);}
42% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
44% {transform: translate(-1.5px, -0.5px) rotate(1.5deg);}
46% {transform: translate(1.5px, -1.5px) rotate(0.5deg);}
48% {transform: translate(2.5px, 0.5px) rotate(0.5deg);}
50% {transform: translate(2.5px, 2.5px) rotate(-0.5deg);}
52% {transform: translate(1.5px, -1.5px) rotate(0.5deg);}
54% {transform: translate(-0.5px, 0.5px) rotate(1.5deg);}
56% {transform: translate(0.5px, 1.5px) rotate(-0.5deg);}
58% {transform: translate(-1.5px, -0.5px) rotate(-0.5deg);}
60% {transform: translate(0.5px, -0.5px) rotate(-0.5deg);}
62% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
64% {transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
66% {transform: translate(-1.5px, 0.5px) rotate(0.5deg);}
68% {transform: translate(1.5px, 1.5px) rotate(1.5deg);}
70% {transform: translate(2.5px, 2.5px) rotate(-0.5deg);}
72% {transform: translate(-1.5px, -1.5px) rotate(0.5deg);}
74% {transform: translate(-0.5px, 2.5px) rotate(-0.5deg);}
76% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
78% {transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
80% {transform: translate(2.5px, -1.5px) rotate(-0.5deg);}
82% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
84% {transform: translate(1.5px, 2.5px) rotate(1.5deg);}
86% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
88% {transform: translate(-1.5px, 2.5px) rotate(-0.5deg);}
90% {transform: translate(-0.5px, 1.5px) rotate(-0.5deg);}
92% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
94% {transform: translate(2.5px, 1.5px) rotate(-0.5deg);}
96% {transform: translate(0.5px, 1.5px) rotate(1.5deg);}
98% {transform: translate(-0.5px, 2.5px) rotate(-0.5deg);}
}
@-moz-keyframes shake {
0% {transform: translate(0px, 0px) rotate(0deg);}
2% {transform: translate(0.5px, -1.5px) rotate(1.5deg);}
4% {transform: translate(0.5px, 0.5px) rotate(1.5deg);}
6% {transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
8% {transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
10% {transform: translate(1.5px, -0.5px) rotate(0.5deg);}
12% {transform: translate(-0.5px, -0.5px) rotate(1.5deg);}
14% {transform: translate(-1.5px, 2.5px) rotate(-0.5deg);}
16% {transform: translate(1.5px, -1.5px) rotate(1.5deg);}
18% {transform: translate(0.5px, -0.5px) rotate(1.5deg);}
20% {transform: translate(0.5px, 2.5px) rotate(0.5deg);}
22% {transform: translate(0.5px, 0.5px) rotate(-0.5deg);}
24% {transform: translate(1.5px, -1.5px) rotate(-0.5deg);}
26% {transform: translate(2.5px, 0.5px) rotate(-0.5deg);}
28% {transform: translate(-0.5px, 1.5px) rotate(-0.5deg);}
30% {transform: translate(0.5px, 1.5px) rotate(1.5deg);}
32% {transform: translate(0.5px, 0.5px) rotate(1.5deg);}
34% {transform: translate(0.5px, 2.5px) rotate(0.5deg);}
36% {transform: translate(2.5px, -1.5px) rotate(0.5deg);}
38% {transform: translate(0.5px, -0.5px) rotate(-0.5deg);}
40% {transform: translate(-1.5px, -0.5px) rotate(1.5deg);}
42% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
44% {transform: translate(-1.5px, -0.5px) rotate(1.5deg);}
46% {transform: translate(1.5px, -1.5px) rotate(0.5deg);}
48% {transform: translate(2.5px, 0.5px) rotate(0.5deg);}
50% {transform: translate(2.5px, 2.5px) rotate(-0.5deg);}
52% {transform: translate(1.5px, -1.5px) rotate(0.5deg);}
54% {transform: translate(-0.5px, 0.5px) rotate(1.5deg);}
56% {transform: translate(0.5px, 1.5px) rotate(-0.5deg);}
58% {transform: translate(-1.5px, -0.5px) rotate(-0.5deg);}
60% {transform: translate(0.5px, -0.5px) rotate(-0.5deg);}
62% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
64% {transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
66% {transform: translate(-1.5px, 0.5px) rotate(0.5deg);}
68% {transform: translate(1.5px, 1.5px) rotate(1.5deg);}
70% {transform: translate(2.5px, 2.5px) rotate(-0.5deg);}
72% {transform: translate(-1.5px, -1.5px) rotate(0.5deg);}
74% {transform: translate(-0.5px, 2.5px) rotate(-0.5deg);}
76% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
78% {transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
80% {transform: translate(2.5px, -1.5px) rotate(-0.5deg);}
82% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
84% {transform: translate(1.5px, 2.5px) rotate(1.5deg);}
86% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
88% {transform: translate(-1.5px, 2.5px) rotate(-0.5deg);}
90% {transform: translate(-0.5px, 1.5px) rotate(-0.5deg);}
92% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
94% {transform: translate(2.5px, 1.5px) rotate(-0.5deg);}
96% {transform: translate(0.5px, 1.5px) rotate(1.5deg);}
98% {transform: translate(-0.5px, 2.5px) rotate(-0.5deg);}
}
@keyframes shake {
0% {transform: translate(0px, 0px) rotate(0deg);}
2% {transform: translate(0.5px, -1.5px) rotate(1.5deg);}
4% {transform: translate(0.5px, 0.5px) rotate(1.5deg);}
6% {transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
8% {transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
10% {transform: translate(1.5px, -0.5px) rotate(0.5deg);}
12% {transform: translate(-0.5px, -0.5px) rotate(1.5deg);}
14% {transform: translate(-1.5px, 2.5px) rotate(-0.5deg);}
16% {transform: translate(1.5px, -1.5px) rotate(1.5deg);}
18% {transform: translate(0.5px, -0.5px) rotate(1.5deg);}
20% {transform: translate(0.5px, 2.5px) rotate(0.5deg);}
22% {transform: translate(0.5px, 0.5px) rotate(-0.5deg);}
24% {transform: translate(1.5px, -1.5px) rotate(-0.5deg);}
26% {transform: translate(2.5px, 0.5px) rotate(-0.5deg);}
28% {transform: translate(-0.5px, 1.5px) rotate(-0.5deg);}
30% {transform: translate(0.5px, 1.5px) rotate(1.5deg);}
32% {transform: translate(0.5px, 0.5px) rotate(1.5deg);}
34% {transform: translate(0.5px, 2.5px) rotate(0.5deg);}
36% {transform: translate(2.5px, -1.5px) rotate(0.5deg);}
38% {transform: translate(0.5px, -0.5px) rotate(-0.5deg);}
40% {transform: translate(-1.5px, -0.5px) rotate(1.5deg);}
42% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
44% {transform: translate(-1.5px, -0.5px) rotate(1.5deg);}
46% {transform: translate(1.5px, -1.5px) rotate(0.5deg);}
48% {transform: translate(2.5px, 0.5px) rotate(0.5deg);}
50% {transform: translate(2.5px, 2.5px) rotate(-0.5deg);}
52% {transform: translate(1.5px, -1.5px) rotate(0.5deg);}
54% {transform: translate(-0.5px, 0.5px) rotate(1.5deg);}
56% {transform: translate(0.5px, 1.5px) rotate(-0.5deg);}
58% {transform: translate(-1.5px, -0.5px) rotate(-0.5deg);}
60% {transform: translate(0.5px, -0.5px) rotate(-0.5deg);}
62% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
64% {transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
66% {transform: translate(-1.5px, 0.5px) rotate(0.5deg);}
68% {transform: translate(1.5px, 1.5px) rotate(1.5deg);}
70% {transform: translate(2.5px, 2.5px) rotate(-0.5deg);}
72% {transform: translate(-1.5px, -1.5px) rotate(0.5deg);}
74% {transform: translate(-0.5px, 2.5px) rotate(-0.5deg);}
76% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
78% {transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
80% {transform: translate(2.5px, -1.5px) rotate(-0.5deg);}
82% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
84% {transform: translate(1.5px, 2.5px) rotate(1.5deg);}
86% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}
88% {transform: translate(-1.5px, 2.5px) rotate(-0.5deg);}
90% {transform: translate(-0.5px, 1.5px) rotate(-0.5deg);}
92% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}
94% {transform: translate(2.5px, 1.5px) rotate(-0.5deg);}
96% {transform: translate(0.5px, 1.5px) rotate(1.5deg);}
98% {transform: translate(-0.5px, 2.5px) rotate(-0.5deg);}
}
100 Buttons 056
button{
outline: none;
cursor: pointer;
display: block;
position: relative;
top: 0;
text-align: center;
padding: 1em 2.5em;
border: none;
color: #df612b;
background-color: #f3d305;
font-family: sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
line-height: 1;
transition: all .2s ease;
}
button:focus,
button:hover{
box-shadow: 5px 5px #FFF;
top: -5px;
}
100 Buttons 055
button{
outline: none;
cursor: pointer;
display: block;
position: relative;
top: 0;
text-align: center;
padding: 1em 2.5em;
border: 1px solid #FFF;
border-radius: 50%;
color: #FFF;
background-color: transparent;
font-family: sans-serif;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: .1em;
line-height: 1;
transition: all .2s ease;
}
button:focus,
button:hover{
box-shadow: 0px 5px #FFF;
top: -5px;
}
100 Buttons 054
button{
outline: none;
cursor: pointer;
display: block;
text-align: center;
padding: 1em 2.5em 1em 1em;
border: 2px solid #FFF;
border-radius: 60px 4px 4px 60px;
color: #FFF;
background-color: transparent;
font-family: sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
line-height: 1;
transition: all .2s ease;
}
button:focus,
button:hover{
background: #FFF;
color: #96bf9c;
transform: rotate(-5deg);
}
100 Buttons 053
button{
outline: none;
cursor: pointer;
display: block;
text-align: center;
padding: 1em 2.5em;
border: 1px solid #a5a5a5;
border-radius: 60px;
color: #747474;
background: -webkit-linear-gradient(#ffffff 0%, #b7b7b7 100%);
box-shadow: 0 0 3px rgba(0,0,0,.7);
font-family: sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
line-height: 1;
}
button:before{
content: "";
background: -webkit-linear-gradient(rgba(186,186,186,1) 0%, #FFF 100%);
display: block;
position: absolute;
z-index: -1;
top: -18%;
left: -5%;
width: 110%;
height: 130%;
border-radius: 60px;
border: 1px solid #BBB;
box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
}
button:focus,
button:hover{
background: -webkit-linear-gradient(#f4f4f4 0%, #b7b7b7 100%);
box-shadow: 0 0 1px rgba(0,0,0,.3);
color: #f27f40
}