Skip to content

Instantly share code, notes, and snippets.

Lea Verou LeaVerou

Block or report user

Report or block LeaVerou

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@LeaVerou
LeaVerou / dabblet.css
Last active May 30, 2019
Chrome bug all: unset !important;
View dabblet.css
/**
* Chrome bug all: unset !important;
*/
span {
font-size: 500%;
color: green;
border: 2px solid red;
}
View dabblet.css
/**
* Aspect ratio
*/
img, svg {
background: yellow;
max-height: 1em;
}
View dabblet.css
/**
* Box
*/
.box {
position: absolute;
bottom: 300px;
margin-top: 300px;
xperspective: 600px;
--width: 600px;
@LeaVerou
LeaVerou / dabblet.css
Last active Apr 15, 2019
border-image: SVG
View dabblet.css
/**
* border-image: SVG
*/
html { background: white }
body {
border: 20px solid transparent;
border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6">\
<path fill="red" d="m 0,1 L 1,0 2,1 3,0 4,1 5,0 6,1 5,2 6,3 5,4 5,3 5,4 6,5 5,6 4,5 3,6 2,5 1,6 0,5 1,4 0,3 1,2 z" />\
</svg>') 33.33% fill round;
@LeaVerou
LeaVerou / dabblet.css
Last active Apr 14, 2019
SVG cursors experiments
View dabblet.css
/**
* SVG cursors experiments
*/
html {
height: 100vh;
cursor: busy;
cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100">\
<style>@keyframes dance{to { transform: rotate(-10deg);}</style>\
<text y="1em" style="font-size: 90px; animation: dance .5s infinite alternate">🦄</text></svg>'), not-allowed;
View dabblet.css
/**
* rotate test
*/
body {
background: #E3516E;
}
p {
width: 200px;
height: 200px;
@LeaVerou
LeaVerou / dabblet.css
Created Feb 22, 2019
Cannot insert emojis in input with maxlength="1"
View dabblet.css
/**
* Cannot insert emojis in input with maxlength="1"
*/
input {
font-size: 20px;
width: 30em;
}
@LeaVerou
LeaVerou / dabblet.css
Created Feb 3, 2019
Checkbox hack with display: none?
View dabblet.css
/**
* Checkbox hack with display: none?
*/
input { display: none }
label { display: inline-block; background: yellow; font: bold 300% sans-serif; }
input:checked + label { background: indianred; }
@LeaVerou
LeaVerou / dabblet.css
Created Jan 15, 2019
content property on non-pseudos
View dabblet.css
/**
* content property on non-pseudos
*/
img {
content: url('http://placekitten.com/200/300');
}
@LeaVerou
LeaVerou / dabblet.css
Last active Dec 27, 2018
Pattern from teachingmama.org
View dabblet.css
/**
* Pattern from teachingmama.org
*/
--color: hsl(0, 0%, 83%);
--size: 22px;
--pattern: radial-gradient(circle, var(--color) 10%, transparent 0 20%,
var(--color) 0 30%, transparent 0 40%,
var(--color) 0 50%, transparent 0);
background: var(--pattern) 0 0, var(--pattern) var(--size) calc(var(--size) * .5);
You can’t perform that action at this time.