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