DEV Community: Temani Afif

A CSS-only game playable with keyboard! 🤯 (No, you are not dreaming)

Temani Afif — Mon, 27 May 2024 13:44:03 +0000

You think it's a clickbait title or it's a joke but No! I created a CSS-only game that you can play using your keyboard. No hidden JavaScript and 100% CSS Magic.

Enjoy the first-ever CSS-only game playable using the keyboard! 🥳

Super CSS Mario

👉 Start a New Game 👈

If you prefer here is a codepen link and it's a chrome-only experimentation (like all the cool stuff).

Record yourself and show me your best attempt👇 (No screenshots and no cheating 😈)

Share it so that people know what is possible using modern CSS features or if you want another argument against the "CSS is not a programming language" 😜

// Detect dark theme var iframe = document.getElementById('tweet-1795027054695436404-291'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1795027054695436404&theme=dark" }

css-shape.com: The Ultimate Collection of CSS-only Shapes ⚡️

Temani Afif — Mon, 22 Apr 2024 11:17:29 +0000

Are you searching for a CSS Shape? Look no further! I have collected all¹ of them into one place.

👉 css-shape.com 👈

The only resource you will ever need for CSS Shapes!

Pfff, another website for CSS Shapes?! We already have countless websites and all the shapes are already made a ton of times! Why another one?

Don't leave yet and continue reading to understand why my website is better than most of the online resources!

Single-element Implementation

Every shape is created with a single element. No complex HTML code whatsoever. Only One element and that's all!

Most of the shapes don't even require pseudo-elements so they can be applied to images as well.

Modern CSS

No magic numbers, No hacks, No headaches! Only modern CSS is used to create the different shapes. Forget about those old and obsolete codes and discover new ways to easily create CSS shapes!

Optimized Code

When using modern CSS, we don't need a lot of code. Only a few lines are enough to create even the most complex shapes. I optimized each code to be the smallest possible.

Flexibility

An optimized code means that it's unreadable, hard to understand, and difficult to update. This is not an issue because I am relying on CSS variables to control the shapes.

No need to dig into the code and make a lot of changes to control the shape. You only have to adjust a few values to get any variation you want.

Easy to use

I hope you are comfortable using NPM packages and the command line because you don't need any of them! One click is all that you need to copy the CSS code and use it. As simple as that!

You can also edit the code online to update the different values and see the changes live before copying the code.

Not yet convinced? Visit the website and I am sure you will instantly click that bookmark button! ^{If you don't, I will haunt you for the rest of your life 👹}

👉 css-shape.com 👈

¹: Saying "all" the shapes is a bit pretentious but that's the ultimate goal. I am launching the website with many CSS Shapes but I have even more on the waiting list. This is only the beginning and more Shapes will be added in the future.

You can also help! If you see a missing shape or you want a specific one, drop a comment and I will try to add it 👇

css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯)

Temani Afif ・ Aug 30 '23

#webdev #css #html #beginners

I created 100+ unique CSS patterns | The best collection 🤩

Temani Afif ・ May 23 '23

#showdev #webdev #css #codepen

OR

The Frontend Challenge: 🍩 Donut eat my favorite snack!

Temani Afif — Fri, 22 Mar 2024 19:13:56 +0000

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

I think the cover image is more than explicit. I will be drawing a Donut which is the favorite snack of many of you.

To draw this snack, I invited a Donut expert to help me get the perfect output and make sure my art is so realistic that you want to eat it but donut eat it!

I know, I know. You are excited to see the result, so let's jump straight to the demo.

Demo

Ladies and gentlemen here is my CSS Art: A Beautiful Donut 🥳

Noooooooooooo 😱

He was supposed to help me draw a Donut not eat it. I spent a lot of time making a perfect donut but now it's over... 😩

Sorry for this inconvenience, instead of a Donut my entry will be "Homer Simpson ate my Donut".

I was really proud of my Donut...

Wait a minute, nothing is lost! I have tried to make a few donuts before he came. Yes, I am saved!

Well, they are not as perfect as the one Homer ate but still good ones.

Hurry Up and select one before he eats them as well!

Journey

I wanted something a bit surprising and creative so I hope you liked this plot twist 😁

The donut is a single-element implementation and can be easily adjusted to get as many variations as you want. I used an <input> tag to get that "eating" effect on click.

Drawing Homer Simpson was more complicated but it was a good opportunity to get back to some CSS Arts so thank you for this challenge!

The demos are best viewed in Chrome (or Firefox).

^{^{Please, don't ask me about Safari}}

Do you need a Tooltip or a Speech Bubble? I have created 100 using CSS 😲

Temani Afif — Mon, 04 Mar 2024 14:20:36 +0000

It's a fact: you will need a Tooltip at least once in your front-end journey so here I am with another CSS-only collection. 100 different tooltip (or speech bubble) shapes!

👉 CSS Tooltip shapes 👈

Stop searching for codes and tutorials on how to create tooltips. My collection contains all the variations you will ever need and guess what? All of them are made with a single element. No complex HTML is required, simply copy the CSS and you are done!

You will also get a code made with modern CSS and optimized with CSS variables. No magic numbers or hacks, update a few variables to adjust the shape.

What makes your collection special? There is already a ton of code on the internet to create tooltips and speech bubbles!

In addition to the simple shapes, my collection contains the ones that are difficult to create and even if you find their code on the internet, they are either made with complex code or rely on tons of hacks and magic numbers.

Not convinced, see a few examples!

Rounded Corners

You can have rounded corners while easily adjust the position of the tail using one variable. And without pseudo-elements!

Play with the following demo to control the tail position.

Gradient Coloration

Do you want a gradient coloration? Here you go!

Adding Borders

One of the difficult tasks is to add a border around the shape, right? It's no more the case!

As a bonus, you can even have a gradient coloration for both the border and background.

What about a border with a gradient coloration and a transparent background? It's there too!

I let you explore the whole collection to see all the examples. Which one will you use for your next project?

You can get a unique link for each tooltip. If for example, you want the #35 then the link is: https://css-generators.com/tooltip-speech-bubble/#t35

Each shape has its own link for an easy share!

If you want to know the secret behind creating most of the shapes, I wrote a detailed article. Having a code ready to use is good but knowing the CSS tricks is better 👍

I made 100 CSS loaders for your next project

Temani Afif ・ May 12 '21

#css #webdev #beginners #html

100 underline/overlay animations | The ultimate CSS collection 🥇

Temani Afif ・ Mar 16 '21

#css #beginners #webdev #codepen

I created 100+ unique CSS patterns | The best collection 🤩

Temani Afif ・ May 23 '23

#showdev #webdev #css #codepen

I have made 100+ CSS-only Ribbon Shapes | The Perfect Collection 🎀

Temani Afif ・ Nov 13 '23

#css #webdev #beginners #showdev

OR

Stop using obsolete methods to create CSS Triangles! ⚠️

Temani Afif — Tue, 13 Feb 2024 10:00:32 +0000

The triangle is the most popular shape in CSS since years. If you google "how to create a triangle using CSS" you will get a ton of old and obsolete methods like using the border property 😫

⚠️ Stop using such methods ⚠️

I have created an online generator from where you can get the code of any CSS triangle with an optimized and modern code

👉 CSS Triangle Shapes 👈

You will find the basic triangle shapes but also more complex ones like the border-only and rounded corners triangles.

But how to create a triangle shape?

Creating a basic triangle is as simple as using 2 CSS properties: aspect-ratio and clip-path with a 3-point polygon. That's all!

Here is a figure to illustrate a few examples.

No pseudo-element, No border, No magic numbers, nothing complex! You set the ratio, you choose 3 points for your polygon and you are done.

To create the border-only and rounded corners variations, you will need a more complex code that I won't detail here to keep this article simple but I have another article where I explain them that I invite you to read.

I will repeat it again, Stop using obsolete methods to create triangle shapes! And if you don't want to write two lines of code, bookmark my online collection so you can easily get the code using one-click.

My collection doesn't contain all the triangle shapes so feel free to suggest any shape you struggle to create or you think deserve to belong in that collection. Let's have all of them in one place.

OR

I have made 100+ CSS-only Ribbon Shapes | The Perfect Collection 🎀

Temani Afif — Mon, 13 Nov 2023 10:37:12 +0000

It's time for another collection! After the loaders, the hover effects, and the background patterns, let's make some Ribbon Shapes!

👉 CSS Ribbon Shapes 👈

More than 100 CSS-only Ribbon Shapes that are made using a single element. Yes, only one element per shape (even the most complex ones).

Stop looking at CSS Ribbons made with old and obsolete code. Mine are made with modern CSS and optimized with CSS variables. There are no magic numbers or fixed dimensions. All the shapes fit whatever content you put inside them and you can easily control them by adjusting a few variables.

What are you waiting for? All it takes is one click to copy the CSS of any ribbon shape.

You will find the classic ribbons but a lot of new and fancy ones. I won't detail all of them but here are some of my favorites.

The Multi-line Ribbons

Probably the ones I like the most. It was a bit challenging to create a repeating shape that fit multi-line text. In the end, The final result is satisfying.

Here are two interactive demos where you can edit the text and see how the shape adjusts to fit the content.

The Curved Ribbons

It wasn't easy to combine straight text with a curved shape but I found a few interesting ideas

The Infinite Ribbons

A Ribbon that never ends? why not! You will find a few of them that extend to the edge of the screen in any direction you want (top, bottom, right, left).

They are built without pseudo-elements and won't create any overflow issues. Here are two demos to illustrate some of them (best viewed at full screen)

What about you? Which one do you like? 👇

You can get a unique link for each ribbon. If you like the #54 then the link is: https://css-generators.com/ribbon-shapes/#r54

You can easily share your favorite Ribbon Shape!

If you want to know the secret behind building such shapes, I have written a few articles that you can find here: https://css-articles.com

I will be writing more in the future so make sure to subscribe to my RSS feed to not miss them.

I also shared a lot of CSS Tips around ribbon shapes so make sure to also subscribe to the RSS feed of my CSS Tip website

I made 100 CSS loaders for your next project

Temani Afif ・ May 12 '21

#css #webdev #beginners #html

100 underline/overlay animations | The ultimate CSS collection 🥇

Temani Afif ・ Mar 16 '21

#css #beginners #webdev #codepen

I created 100+ unique CSS patterns | The best collection 🤩

Temani Afif ・ May 23 '23

#showdev #webdev #css #codepen

OR

css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯)

Temani Afif — Wed, 30 Aug 2023 09:36:53 +0000

It's been a while but I finally did it. I collected all my CSS-only loaders into one unique place.

👉 css-loaders.com 👈

Around 580 loaders are made using only one element! The HTML is as simple as <div class="loader"></div>. Nothing more!

If you followed me, you probably know most of them but if you are new then go check what CSS can do. From the simple animations to the craziest ones, you will for sure find what you want. If you don't want any loaders, then simply enjoy some fancy CSS animations that are satisfying to watch.

More than 500?! It's too much! I don't have time 😤

No problem, I have the solution! Use the following link and I will pick a nice loader for you

random.css-loaders.com

If you don't like it, click on "get another CSS loader" and you will get another one. No need to navigate the whole website. Keep surprising yourself with random loaders until you get the perfect one.

You also have a unique link for each generated loader. You can easily share your favorite one with anyone!

How to get the link of a loader I saw inside the collection and not using the random generator?

It's easy! Let's suppose you are browsing "The shapes" loaders here: https://css-loaders.com/shapes/ and you liked the #20. The link will be: https://css-loaders.com/shapes/#l20 (it's a lowercase "L" not "I").

Share the link of your favorite one in the comment section 👇

The random feature and the link sharing use the :has() selector so it won't work well on Firefox for now. Consider another browser if you want to enjoy them.

I also wrote a lot of articles about creating single-element loaders. Good tutorials if you want to know some of my secret recipes 🤫

Build your CSS loader with only one div — The Dots

How to Create a CSS-Only Loader Using One Element

Single Element Loaders: The Spinner

Single Element Loaders: The Dots

Single Element Loaders: The Bars

Single Element Loaders: Going 3D!

How to create a CSS-only loader with one element

Subscribe to my RSS Feed if you don't want to miss my new CSS articles and don't forget to bookmark https://css-loaders.com/.

I won't stop making CSS loaders. The goal is, one day, to reach 1000 single-element loaders! 💪

OR

What's your Lucky CSS Pattern? Check It Now!

Temani Afif — Tue, 20 Jun 2023 09:17:34 +0000

You liked my CSS Patterns collection but you are lost and you don't know which one to choose. Don't worry, I have the solution for you!

One-click and you have the best CSS Pattern that matches your preference.

👉 Get Your CSS Pattern 👈

I have developed an advanced AI (better than ChatGPT) that will read your mind, scan your actual mood, find out the web projects you are working on, ~~check your bank account~~, then it will select THE CSS Pattern you want with the perfect colors.

What are you waiting for? Get your CSS Pattern now!

Yes, you already guess it. I will simply generate a random pattern from my collection but I need to make the article a bit lengthy and it's trending to talk about AI 🤪

In addition to the pattern, you can easily adjust the colors, the size and get the code with one click.

You can reload the page to generate a new one BUT the first pattern you get is your "Lucky CSS Pattern". Share yours in the comments section 👇. A CSS Pattern can tell a lot about its owner!

I created 100+ unique CSS patterns | The best collection 🤩

Temani Afif ・ May 23 '23

#showdev #webdev #css #codepen

I made 100 CSS loaders for your next project

Temani Afif ・ May 12 '21

#css #webdev #beginners #html

100 underline/overlay animations | The ultimate CSS collection 🥇

Temani Afif ・ Mar 16 '21

#css #beginners #webdev #codepen

I created 100+ unique CSS patterns | The best collection 🤩

Temani Afif — Tue, 23 May 2023 11:36:30 +0000

After the CSS Loaders and the CSS Underline/Overlay animations, I am back with another big collection. This time it's about CSS Patterns.

👉 CSS Pattern 👈

More than 100 unique CSS patterns coded from scratch by me (Yes, It took me a lot of time).

All the patterns have the same code structure:

html {
  --s: 50px; /* control the size */
  --c1: red;
  --c2: blue;
  /* more colors if needed */

  /* A lot of gradients and strange numbers*/

}

You have one variable to control the size and each color is defined once in the code. All you have to do is one click to copy/paste the code and adjust a few variables.

Grab a nice pattern and show me the result on your favorite website 👇

I will not list all the CSS patterns in this article but here are my Top 10

The Best

I really like this one. Only 2 gradients are used and the result is quite satisfying, especially that little shadow.

The Impossible

15 Gradients for this one! I thought it was an impossible one but after a lot of math and headaches, I did it.

The Accident

I was trying to create a specific pattern, made a mistake in the calculation and I end with a better one. A nice accident!

The Hexagon

Everyone like Hexagons so I must have one in the Top 10

The 3D

I made a few 3D patterns but this one is really cool

The Optical Illusion

Are the lines straight? Don't trust your brain!

The Challenging

A lot of geometry tricks are used in this one. It was a good challenge.

The Wavy

If you don't like hexagons, you must like waves.

The Perfect

I am using this one on CSS Tip and the result is perfect.

The Christmas

In case you have no idea of gifts for Christmas

What about you? Tell me your favorite one 👇

You can also generate a link for your favorite CSS pattern and share it with everyone. It's easy!

Inspect the code of the pattern, grab its ID and get a unique link to share!

My favorite one is "g48" 👉 https://css-pattern.com/#g48

Here are 2 beginner-friendly articles I wrote if you want to get started with some basic patterns:

Learn CSS radial-gradient by Building Background Patterns

How to create background pattern using CSS & conic-gradient

I will have more articles in the future. I will reveal all the secrets of making complex CSS Patterns so stay tuned 👀

The collection will keep growing in the future so don't forget to bookmark the site: https://css-pattern.com

All the code is in Github so go click that ⭐ Star and let's make the project popular.

OR

What's your CSS level? Take a CSS Quiz!

Temani Afif — Mon, 15 May 2023 11:00:48 +0000

Do you want to have some fun with CSS? What about some CSS Quizzes?

👉 CSS Quizzes 👈

Selectors, Flexbox, Transform, Gradients... Pick your game! Can you get a perfect score? Show me your results 👇

Except for the Basic Quiz, all the others aren't easy. Only a few people got a perfect score after many tries! And the quiz is never the same when you try again so good luck! 😈

Be the first to get a perfect score for a chance to win [insert price here]*. Don't forget to create an account so you can track your progress.

What are you waiting for? Go take a quiz!

* I didn't decide about the price but don't expect money, it will probably be a simple "thank you for your effort"

CSS Tip: learn CSS the easy way!

Temani Afif — Fri, 14 Apr 2023 12:38:42 +0000

Do you want to learn CSS? Are you lost in all the courses, tutorials, and online stuff? The code is too long, the explanation is too boring, and it never works!

Don't worry! I have the solution for you:

One minute to learn CSS 🤯

You are probably thinking it's impossible but it's possible! Take one minute to learn one CSS Tip per day and ... that's all!

I created THE website for this 👉 css-tip.com

CSS Tip is a micro-blog where I am sharing simple tips that you can read in less than one minute. Each tip comes with a demo so you can easily play with your discovery.

What are you waiting for? Got check that website before everyone else! There are already more than 60 CSS Tips ready for you! To not miss the new Tips use the RSS feed link with your favorite RSS reader.

Where to start? There are a lot of CSS tips, I am lost...

I also have the solution for this! Click this link and I will redirect you to the CSS Tip you need. I have developed an advanced AI that reads your mind, detects what you know and don't know about CSS, and gives you the next CSS tip you need to know.

You don't trust me? You think it's fake? Click and try!

Learn CSS the easy way!

Let's be serious now and stop the "grifter-clickbait" introduction 🙃

I have been sharing a lot of CSS Tips on Twitter (and I still do) so I decided to collect most them and have a kind of archive.

css-tip.com is born!

A simple website, easy to navigate where you can find all kinds of CSS Tips. I also have an RSS Feed so you can easily get the new CSS Tips.

The website will keep growing so if you don't know where to start you can get a random tip using the following link: random.css-tip.com.

Surprise yourself with a new CSS Tip!

The "one minute to learn CSS" was a lie??

No, it's true. All the tips are simple and short. You can read them in less than one minute. This said, I sometimes link to a relevant article to get more detail. You can get a tip in one minute but you will need more than that to grasp the logic of some concepts. There is no magic method to learn CSS fast. Even if you read a small tip per day you have to spend time trying the code, reading the doc, etc

Go check my CSS Articles if you want some deep diving into a few CSS concepts

Do you know that I have a big collection of CSS loaders? 👀

I made 100 CSS loaders for your next project

Temani Afif ・ May 12 '21

#css #webdev #beginners #html

DEV added new reaction icons so if you already liked my post go add some 🤯 🙌 🔥

Stay tuned for another collection! Not about loaders but something even better 🤩

Another CSS Art from Demon Slayer

Temani Afif — Thu, 28 Apr 2022 12:28:11 +0000

The last CSS Art I made was so real that he start talking! He was so nervous and screaming everywhere:

"Nezuko!! Where is Nezuko?!"

Stay calm Tanjiro, Nezuko is here 👇

Another CSS-Only illustration to be added to the list of my previous ones:

CSS Art

It's on twitter if you want to spread the word 📣📣

// Detect dark theme var iframe = document.getElementById('tweet-1519636083260424192-129'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1519636083260424192&theme=dark" }

Tanjiro : "Nezuko, let's go!"

Nezuko : "Hum!!"