Temani Afif

@temani-afif

260 Points

4 Followers

4 Posts

Joined February 15th, 2021

Computer Engineer & Expert Web Developer. The mastermind behind css-challenges.com

Temani Afif

1 month ago

View Post

Responsive hexagon grid without media query

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...
Responsive hexagon grid without media query
4
Select One:

Temani Afif

1 month ago

View Post

When will we have CSS4?

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...
When will we have CSS4?
7
Select One:

Temani Afif

2 months ago

View Post

Wrapping text inside a circular shape

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...
Wrapping text inside a circular shape
3
Select One:

Temani Afif

2 months ago

View Post

3D image with one element

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)...
3D image with one element
5
Select One:

Loading More Content

Back to DevDojo