I know there is a ton of articles detailing how to create hexagon grid but how many of them are responsive? Only few of them and they rely on a lot of media query or JS.
Here is a CSS only solution to have a responsive hexagon grid that fit nicely into all the sreen sizes. No JS, no media query and no complex html code. Only few...
Never! There will be no V4 release of CSS.
Saying it like that sounds a bit strange but don't worry, CSS will keep evolving. We need to understand how versioning works with CSS. To be more accurate, we talk about Levels.
Let's refer to the official Specification:
Cascading Style Sheets does not have versions in the traditional...
Yes, we are going to make a text wrap perfectly inside a circular shape.
No JS, no SVG, no external plugin. Only few lines of CSS and a basic HTML structure.
{% codepen https://codepen.io/t_afif/pen/dyOWVrr %}
Explanation
<div class="box">
<i></i>
Lorem ipsum ..
</div>
div.box {
--s:450p...
A quick trick to create a 3D illustration using only an <img> tag. No pseudo elements, no extra tag, no SVG, Nothing! Only one tag and few lines of CSS.
Here you go
{% codepen https://codepen.io/t_afif/pen/NWbdYJE %}
Let's dig into the code
img {
--x:10px;
--y:20px;
clip-path:polygon( /* 4 */
var(--y)...