Temani Afif

@temani-afif

110 Points

3 Followers

4 Posts

Joined February 15th, 2021

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

Temani Afif

5 days 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?
6
Select One:

Temani Afif

1 week 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 weeks 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:

Temani Afif

2 weeks ago

View Post

Float an image to the bottom corners

Floating an image to the right or the left? well, this is an easy task but what about floating an image to the bottom left or bottom right. Sounds a bit tricky, we probably need JS to handle this? No, few lines of CSS can do it! {% codepen https://codepen.io/t_afif/pen/JjbEXYm %} Yes I know, it's not easy to get it at first glan...
Float an image to the bottom corners
1
Select One:

Loading More Content

Back to DevDojo