The easiest way to make a glass effect in CSS 💎

Zouhir Yaçouri — Wed, 04 Jan 2023 12:49:38 +0000

Salute everybody, i hope y'all doing well.

Recently i have seen a lot of designs and websites using the glass effect which makes the website looks smoother 💎. So you might be wondering how have they done this effect.

Today i will show you the easiest way to use this effect in your project in 4 steps.

1- Create a new div

So first things first we create a new div in our html file and giving it a class name like so:

<div class="box">
  <button class="my-btn">Click me!</button>
<div>

2- Remove extra space

Secondly we go to our CSS file to remove all the extra space from the html elements.

* {
  margin: 0;
  padding: 0;
}

3- Center the content

Adding a beautiful background to the body & align our div to center.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("<https://images.unsplash.com/photo-1488718729626-53eaa41c0848?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=633&q=80>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;

Third step results

4- Add glass effect

Adding some styling & glass effect.

.box {
  position: relative;
  width: 400px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  backdrop-filter: blur(15px); /* glass effect */
}

Congrats 🎉🎊 you have created the glass effect successfully!
This is how the final result looks like ! 💯

For the "Click me" button here is the CSS:

.my-btn {
  cursor: pointer;
  padding: 15px 40px;
  background-color: black;
  color: white;
  border: none;
  outline: none;
  border-radius: 5px;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.5s;
}

🌐 Here is a link if you want to visit the whole code HERE.

Connect with me if you have any question.

👌 I hope this post helped you to create your own glass effect.

💖 If you find this post a bit useful let me know in the comment section.

⚛️ ReactJS folder structure + Boilerplate.

Zouhir Yaçouri — Wed, 13 Apr 2022 11:59:17 +0000

There are many folders structure to follow in ReactJS , And you might be confused which one you have to pick for your next project 🤔. We will answer this question in this article.

And i’m going to share with you a boilerplate that i will be using for my next projects.

About ReactJS folders structure ⚛

By default ReactJS comes with a simple project setup, so for those who never coded with react they shouldn’t be worried that much about folders structure.

Otherwise if you are experienced with react then your time has come to organize your application structure.

Explaining each folder’s role 📁

Our focus will be in the src folder where we’re going to structure our folders.

(For the folder icons i am using a vs-code extension called “ Material Icon Theme”) intermediate

📁 Assets

Here we group all of our media files.
I personally prefer to create subfolders such as Images, Icons, Videos, Audios etc....

You might want to put all of the components in one place, but you better break it into 2 folders. (Components & Containers).

📁 Components

This folder contains all of our application presentational components (Stateless Components).

📁 Containers

In this folder we have the Stateful components (Smart component) where we keep tracking the state.

📁 Constants

In this file we group all constants like regex.

📁 Helpers

Here we create and export functions that will be re-used in different places in our application.

📁 Hooks

A folder made for customized hooks.

📁 Layouts

It contains layout files such as Navbar, Footer, Sidebar .
Layouts are used to wrap a specific components.

📁 Pages

This folder contains pages components like Home, Contact etc...
Each page wrapped with a specific Layout

📁 Validations

Here we write our form validation and rules using a library like Formik .

📁 Services

In this folder we manage all of the API requests by creating files for each service.

📁 Context

This folder contains all the context files where we manage and globalize the state in our application such as theming styles.

📁 Config

All of our application configuration will be here in this folder.

📁 i18n

This folder is made for multi-language support.
You can create subfolders with a JSON file for each language you want to translate.
Take a look to their Step by Step guide HERE .

✨ Keep consistency in your code

By adding Eslint & Prettier to your project it will give you :
- A nice linting environment.
- Correct bad coding practices.
- Make your code clean and consistent.

Boilerplate

I created a Github repository with the same folder structure that i explained above. if you ever want to use it here is the link [ HERE ]

Conclusion

Alright so the structure that i followed it's based on my experience and also depends on the project .

If you feel good with your folder structure ✅ then you are not obliged to follow the same structure as mine.

Thank you for reading this article ❤️

Forem: Zouhir Yaçouri