Temani Afif
@temani-afif
Joined February 15th, 2021
Computer Engineer & Expert Web Developer. The mastermind behind css-challenges.com
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...
6
Select One:
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...
3
Select One:
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)...
5
Select One:
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...
1
Select One:
Loading More Content
