DEV Community

Cover image for Hot tips CSS
Mattia Astorino
Mattia Astorino

Posted on • Originally published at equinsuocha.io

Hot tips CSS

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;
}
Enter fullscreen mode Exit fullscreen mode

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+ */
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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>');
}
Enter fullscreen mode Exit fullscreen mode

Use <svg> as css background without convert it to base64.



This article continue on..

equinsuocha.io/blog/hot-tips-css



Top comments (0)