Here a curated collection of css snippets that you can use for determinate situations or just for fun. Let’s start.
Image rendering
img.QRcode {
image-rendering: pixelated;
}
This property is useful to render QR codes and image thumbnails to increase their quality.
Run style on Safari 11+
@supports (padding: env(safe-area-inset)) {
/* Your code for Safari 11+ */
}
The env()
function and the environment variables
is implemented by Safary 11+ to support Apple iPhone X screens. You can read more info here.
Check empty nodes
my-component:empty {
display: none;
}
Hide your element when have no content inside. Returns
and white spaces
are considered as content.
Shape your text
p {
shape-outside: polygon(0 0, 0 200px, 300px 600px);
}
Change the way how content will wrap around your floated elements.
Plain SVG as background
my-component {
background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');
}
Use <svg>
as css background without convert it to base64.
This article continue on..
Top comments (0)