DEV Community: Albert Walicki

Know How to Google Is Important. Do You Know How Do It?

Albert Walicki — Fri, 19 Mar 2021 06:59:40 +0000

If you like this article, you might also like my Twitter content. You can find me here - Twitter profile. 🚀

Knowing how to google is the most important skill for a developer. Everyone uses Google. Junior developers, mid or senior. It's not cheating to google everything! But do you really know how to google more efficiently? Let me show you some google hacks 👨‍💻.

Explicit phase

Search for an explicit phrase by enclosing it in quotation marks.

Site Search

Refine your search to a specific site using the site: command. For example, typing on the google site:stackoverflow.com will search only on StackOverflow. 💪

Multiple words

Search for multiple words using a plus sign.

Exclude a word

The minus sign - allows you to specify words that that shouldn't show up in your results.

Related words

The tilde ~ operator searches for related words, not just the word you type.

Wildcard

The asterisk * is a wildcard. That means it can match any word! Combine it with the explicit search for awesome results.

Time range

A lot of answers on the internet are outdated. Use a time range operator to narrow the scope.

File type

Narrow the scope of your search to a specific filetype! If you use operator filetype:pdf, you will get only PDF results!

Advanced Search.

You can combine all of the above methods in Google Advanced Search 🤓

Thanks for reading!

Aurora UI - how to create with CSS

Albert Walicki — Fri, 12 Mar 2021 07:22:12 +0000

Design trends are changing like new javascript frameworks—at least one a day. 😄 Today I would like to introduce you to another trend named by my friend Michal Malewicz. It's called Aurora UI, and you can find here an article written by Michal.

What is the Aurora trend?

This trend is not that new. For example, Stripe has been using it in their header for a long time. It's getting more popular on services like Dribbble or Behance.

It's characteristic features are:

blurred shapes
similar colours
smooth transitions between colours

How to create it with CSS?

There are at least three ways to create this effect.

blurred shapes
blurred gradients
blurred images

Blurred shapes

The first method is to create three ovals overlaying on each other. Create big ones and position them:

first one on the top of the container
two in the bottom corners

Then we need to add filter: blur() and lower the opacity slightly.

HTML

 <div class="wrapper">
  <div class="base one"></div>
  <div class="base two"></div>
  <div class="base three"></div>
</div>

CSS

.wrapper {
  width: 400px;
  height: 400px;
  background: #fff;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
}

.base {
  position: absolute;
  filter: blur(60px);
  opacity: 0.8;
}

.one {
  border-radius: 100%;
  width: 600px;
  height: 600px;
  background-color: #373372;
  left:-50px;
  top:-300px;
  z-index: 3;
}

.two {
  width: 500px;
  height: 800px;
  background-color: #7C336C;
  bottom:-30px;
  left:-80px;
}

.three {
  border-radius: 100%;
  width: 450px;
  height: 450px;
  bottom:-80px;
  right:-100px;
  background-color: #B3588A;
}

Radial gradient

The second method is to use gradient colours! Instead of solid colours, we can use a radial-gradient to create our effect.

Let's add three radial-gradients from a solid colour to transparent:

top left
top right
bottom left

HTML

  <div class="wrapper"></div>

CSS

.wrapper {
  width: 400px;
  height: 400px;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
  background-color: #fff;
  background-image: 
    radial-gradient(at top left, #F0ACE0, transparent),
    radial-gradient(at top right, #FFA4B2, transparent),
    radial-gradient(at bottom left, #A7D3F2, transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

Blur an image

The easiest way to create this effect is... to choose a good image and add some filter: blur(). 😄

HTML

<div class="wrapper">
  <img src="ourImg.png"/>
</div>

CSS

.wrapper {
  height: 400px;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
}
img {
  filter: blur(60px);
}

Animated background

You can also animate your backgrounds to make them look better! Here is a small example of rotating backgrounds. 🚀

I used transform:rotate(1turn) translate(100px) rotate(-1turn); to create movment on circle path.

HTML

  <div class="wrapper">
    <div class="base one"></div>
    <div class="base two"></div>
    <div class="base three"></div>
  </div>

CSS

@keyframes fly {
  100% {
    transform:rotate(1turn) translate(100px) rotate(-1turn);
  }
}

@keyframes flyPlus {
  100% {
    transform:rotate(-1turn) translate(100px) rotate(1turn);
  }
}

.wrapper {
  width: 400px;
  height: 400px;
  background: #fff;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
}

.base {
  position: absolute;
  filter: blur(60px);
  opacity: 0.8;
}

.one {
  border-radius: 100%;
  width: 600px;
  height: 600px;
  background-color: #373372;
  left:-50px;
  top:-300px;
  z-index: 3;
  animation: fly 12s linear infinite;
  transform:rotate(0) translate(80px) rotate(0);
}

.two {
  width: 500px;
  height: 800px;
  background-color: #7C336C;
  bottom:-30px;
  left:-80px;
}

.three {
  border-radius: 100%;
  width: 450px;
  height: 450px;
  bottom:-80px;
  right:-100px;
  background-color: #B3588A;
  animation: flyPlus 8s linear infinite;
  transform:rotate(0) translate(100px) rotate(0);
}

You can play with all backgrounds here. 💪

And that's it! You can combine Aurora with glassmorphism to create even better UI.

Thanks for reading!

You can follow me on Twitter or sign up for my newsletter!

🐦 Twitter
💌 Newsletter
🦄 Frontend Unicorn ebook

How to Fall In Love With Single Div Illustrations

Albert Walicki — Fri, 08 Jan 2021 08:10:25 +0000

I always admire people who create single-div illustrations in CSS. One div, multiple background layers, tone of CSS code and BOOM. Here you have an illustration. I always thought that it must be challenging, and I would never create such a thing. I was wrong. 😱

To create a simple image, you need to know only one thing: how backgrounds in CSS works. That's it. Really! You don't have to use CSS variables. They help to maintain clean code. It's much easier to read those images with variables, but it's not required.

Exercise no. 1 - most simple illustration

Let's start with something straightforward. If you understand this example, you will be ready to go. 💪

Okay, what we have here? 100x100px rectangle with linear-gradient starting and ending with the same colour. Our first background has also defined background-position: 0px 0px; - on X-axis and 0px on Y-axis. It means that our background starts on the top-left corner. Then we have background-size: 100px 100px; which obviously defines the size of our purple colour. And the last one background-repeat: no-repeat; to prevent replying our layers.

Conclusion:

Our div is solid #9B59B6 colour because we start and end gradient with the same colour
It is 100x100px

Great, let's move on and add one more layer.

And that's it! We have two linear-gradient layers on each other. Pay attention to layer order! Earlier layers are on top of the others. Think about it as a z-index.
I don't like having properties broken into pieces, so let's clean up a bit.

The forward slash separates background-position values and background-size values. The formal syntax requires the slash.

If we have more background layers, things might be a little bit messy. You probably won't remember if the line 31 of the background goes for window or maybe for a fence. 😄

This is much cleaner!

Exercise no. 2 - small house

You already know enough to create illustrations. To warm up before the final exercise, let's make a small house.

We need there a few layers:

house front
door
roof left part
roof right part
window one and window two

Triangles

The most challenging part of this house is to create triangles. Let's split this code into pieces.

Let's work on this example:

Our goal is to create a triangle for our roof. Currently, our gradient has a 0deg angle, so let's change it. I would like to have a small roof slope angle, so I changed it to 12deg.

I think you got it and you know what you should do now. 😉 Let's decrease the percentage of the gradient. I changed it to 19degs to have a perfect starting point on the right side.

Lastly, we need to replace the red background with a transparent one.

And here we have a nice roof with a right angle. 🚀

A Complex Example of the House

I like throwing myself into the deep end. That's why I created a detailed house as my first one single-div image:

It looks like a complex example. But if you create the previous one, you will be able to make identical as above. The only difference between my samples in the article and this one are units. Here I'm using the vmin unit to create a responsive image.

That's all for today. Thanks for reading! If you have any questions, feel free to DM me on Twitter - @albertwalicki

You can follow me on social media or sign up for my newsletter!
🐦 Twitter
👨🏻‍💻 Blog
📰 Medium
💌 Newsletter
🦄 Frontend Unicorn book

Single-div Wooden Hut

Albert Walicki — Tue, 05 Jan 2021 20:49:30 +0000

Hey! I have created my very first one-div/single-div illustration in CSS. It’s not that hard to create, it just takes a lot of time 💪

Soon I will create a tutorial on how to start with such ilustrations

You can follow me on social media or sign up for my newsletter!
🐦 Twitter
👨🏻‍💻 Blog
📰 Medium
💌 Newsletter
🦄 Frontend Unicorn book

6 Form Related HTML Tags You Might not Know

Albert Walicki — Tue, 22 Dec 2020 07:53:39 +0000

HTML5 achieved W3C recommendation in 2014 and added a lot of new tags. Some of them like <main>, <nav>, <header> or <footer> are semantic replacements for common used <div>. Everybody was talking about those tags, but there a lot of different not so often used and not known. Let's discover together 6 form related HTML elements you might not know.

Progress bar

When you create a form and there is a file upload input, you should show how much of file was uploaded. This is a big UX (user experience) improvement. Your first thought might be:

OK, I will create div and animate background while progress is changing.

And that's OK. But we have special HTML tag to display progress indicator! <progress> was added with other HTML5 elements. Let's take a look at it.

As you can see, there is a simple layout with basic CSS. Also, there is some javascript code to fake file upload. On <input type='file' /> change I initialize fake progress function in setInterval. After 5 seconds, our fake upload is completed, and we have success text. This is the ultimate simple usage of <progress> tag.

Here you can read more about styling <progress>: The HTML5 progress Element.

Unique Attributes

This element includes two attributes:

max - this attribute specifies how much work the task requires in total. If max attribute is present, it must have a value greater than 0. The default value is 1.
value - this attribute specifies how much of task has been completed.

Datalist

The <datalist> element was created to be used as a recommendation list for inputs. You can choose available options or type your own answer. This element is used by browsers to provide autocomplete feature.

<datalist> is an invisible helper for your inputs. You might dynamically add options to it, making it personalized for each user of your app.

Usage

The only thing that you have to remember about <datalist> is that its id must be equal to the input element list attribute. This allows the browser to know that this <datalist> belongs to <input>.

Fieldset and Legend

The <fieldset> element groups several inputs within one form and the <legend> element groups related elements. Think about it as a <label> but for more than one element.

Both elements can be used together to group part of the form (<fieldset>) and to add a global label to it (<legend>).

Output

The output element is one of my favourite not-well-known HTML tags. This element can inject the results of user calculations.

In my example, we have two inputs type number and one type range. Math pattern look like this: (a * b) + c = d;

Optgroup

This HTML tag allows us to group select options. For example, if you have a country select, you can group it by continent.

Thanks! That's all for today. In the next article, I will write about other HTML tags.

You can follow me on social media or sign up for my newsletter!
🐦 Twitter
👨🏻‍💻 Blog
📰 Medium
💌 Newsletter
🦄 Frontend Unicorn book

Dev Portfolios: How to Stand Out From the Crowd

Albert Walicki — Mon, 21 Dec 2020 07:31:13 +0000

A lot of new developers create identical landing pages from the same template (I wasn’t any different). As a result, job applicants are drowning in a pile of CVs and other portfolios.

Create Interesting Projects for Your Portfolio

I am a front end developer who owns a small software house. As an entrepreneur, I’ve seen many candidate’s portfolios. Many landing pages created by those developers were pixel-perfectly identical!

In Poland, we have an incredible challenge for front-end developers called “The Weekly Web Dev Challenge.” I love this challenge and I participated in it when I was a junior. Each week participants create landing pages and are then given feedback.

So, after a few challenges, multiple developers had similar projects in their portfolios/CVs, which they then used to apply to the same employers.

Put yourself in the employer’s shoes. You’re looking for a new developer, so you posted a job offer. After a few hours, you get ten CVs, all with the same project! Not one stands out from the crowd.

Those challenges are useful for practice, but they’re not suitable when you’re trying to distinguish yourself. No one tells you that when you’re looking for your first job. That’s why I’m telling you now!

You Can Do a Lot with HTML and CSS

If you don’t know JavaScript yet, you can still create projects and add scripts later. Start with building simple websites similar to those you like or use often. Then gradually start building more complex websites.

Where Can You Find Design Inspiration?

As an aspiring front-end developer, you probably don’t know much about design. That’s totally fine! You’ll never be responsible for creating a site or product’s design. Knowing the basics of design is helpful and in my opinion, required, but you can leave that for later when you are familiar with the front end stack.

Most of the portfolios that I’ve seen are not very attractive, because developers without much design training tried to design them on their own.

After a few years of work as a front-end developer, I still don’t know how to create all those beautiful designs. I’m 100% a tech person. I have no imagination (except spatial imagination!). Let designers do their job.

But to help ourselves, we can use what they’ve created! The most famous websites for design inspirations are:

You can search for images there and use them to make coded versions. Just remember to give credit to the design owner!

What Should You Create?

You can create all sorts of different projects. Most of the Dribbble/Behance landing pages will be a challenge to work with because of all the images and icons. But you can develop applications! Applications are not as fancy as landing pages, but that’s ok. Fewer custom images mean fewer problems.

As you can see, there aren’t many custom icons. You can replace them all with free ones, or, if you already know some design, you can create your own.

But you aren’t forced to do that. You can create multiple other things, such as:

One-div images
CSS images
CSS animations

I love spending time on searching CodePen for new inspirations. You should try it too!

Beginner With JavaScript

At the beginning of your adventure with JavaScript (which never ends, even for the JavaScript guru), you can add simple scripts. You can upgrade all static websites by adding some JavaScript.

Here are a few simple ideas:

Animated hamburger menu.
Header with position fixed after scrolling.
Buttons which scroll down to the section on click.
Animation on scrolling.
Buttons that open modal/pop-up on click.
Basic website state — adding and removing elements on click.

There are plenty of things that you can do!

Already Know JavaScript?

If you’re familiar with JavaScript, you can go further creating projects. A lot of my projects started with the front end. The back end was either not developed, was in progress, or our company was responsible for creating only the front end. You can do the same. Create apps that are ready to integrate with the back end!

Half Apps

As I wrote before, everybody creates landing pages. So, to stand out, why not make a more complex app? Applications on the front end side are much more straightforward and its easier to achieve pixel-perfection. There might be a lot of different screens, but they’re all much smaller than a landing page.

If you already have the static-dashboard app, you can bring it back to life! You don’t have to know back end to create full apps (for the learning process, of course). My favourite tool is a JSON server. Using this tool, you can create your own database with all necessary requests.

I would love to see an app like this in someone’s portfolio. Basic authorisation, user profile, a dashboard with some charts, and that’s it. It doesn’t have to be a big app, but it shows that someone understands requests, which is a big plus.

Tools

After creating various landing pages and dashboards you might feel bored. That’s totally fine! There are many other projects that you can create.

Creating different tools might be helpful to fight boredom. Those tools can be made in layout frameworks such as Bootstrap or Tailwind. It won’t look fantastic, but it will allow almost to skip the HTML and CSS part. With this help, you might focus on the JavaScript part.

What to Create?

Everything which will speed up your work! If you hate to UI (user interfaces), you can create your own UI generator!
Generators

Box-shadow generator
Custom CSS checkbox/radio inputs generator
New trendy UI generators such as neumorphism or glassmorphism

Other

Drawing tool ( like MS Paint)
Data visualisation
Your own NPM modules

Games

I have hardly ever seen a game in junior front-end developer’s CV. There are a lot of simple games you can create with JavaScript, gradually increasing in complexity. You can start with Tic Tac Toe and finish with 3D games!
Some examples of games written in JavaScript:

Creating games might be hard. It would be best if you broke down the logic of the game inro prime factors. It will help a lot to understand what you need to do. I will describe the logic of Tic Tac Toe for you.

The game should have two game modes: player vs player and player vs computer.
One of the players choose 0 and the other one x to mark their choices.
The game is played turn by turn.
The game ends when one of the players has the whole column/row /diagonal filled with his/her symbol.
If no one wins, then there is a draw.

Additional features:

Randomize which player starts.
Add restart button.
Add user name.

Help Yourself

I hope that I have given you the employer’s perspective. If you don’t help yourself to stand out, no one else will.
Thanks for reading and see you soon!

You can follow me on social media or sign up for my newsletter!
🐦 Twitter
👨🏻‍💻 Blog
📰 Medium
💌 Newsletter
🦄 Frontend Unicorn book

Create Beautiful Images in CSS to Buff Up Your Portfolio

Albert Walicki — Fri, 11 Dec 2020 07:42:52 +0000

Nowadays, it's hard to get your first job without impressing somebody with your portfolio. Everybody is creating weather apps, but does everybody have custom CSS-based images in theirs? Let's create unique images to boost your portfolio.

There are multiple shapes that we can create in CSS, so why not create custom CSS images instead of stock photos? These will cut some unnecessary requests and speed up your website; moreover, they allow you to bring some life to your site.

I don't want to create the entire app here, only images that you can use to build one. It may look like you put in a lot of effort to tweak the app, but you didn't.

Exercise 1. First-Ever CSS Cloud

Let's start with a simple cloud. This cloud is made with one rectangle and two circles. You can use three divs, but I prefer to minimalize HTML as much as I can. That's why I use one div for the rectangle and two pseudo-elements to create the circles.

This is really easy.

 <div class="cloud_1_init"></div>

.cloud_1_init{
  top: 20px;
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 8px 5px rgba(0,0,0, 0.1);
  height: 80px;
  position: relative;
  width: 200px;
}
.cloud_1_init:after,
.cloud_1_init:before {
  content: '';
  position: absolute;
  border-radius: 100px;
  }
.cloud_1_init:after {
  top: 0px;
  left: 30px;
  height: 60px;
  width: 60px;
  background: green;
}
.cloud_1_init:before {
  top: 0px;
  right: 30px;
  width: 100px;
  height: 100px;
  color: orange;
}

Now we need to change the background of our circles and move them closer to the rectangle.

 <div class="cloud_1"></div>

.cloud_1 {
    top: 20px;
    background: #fff;
    border-radius: 100px;
    box-shadow: 0 8px 5px rgba(0,0,0, 0.1);
    height: 80px;
    position: relative;
    width: 200px;
  }

  .cloud_1:after,
  .cloud_1:before {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 100px;
  }
  .cloud_1:after {
    top: -30px;
    left: 30px;
    height: 60px;
    width: 60px;
  }
  .cloud_1:before {
    top: -56px;
    right: 30px;
    width: 100px;
    height: 100px;
  }

Voilà!The first cloud created!

Exercise 2. Magical Cloud

This cloud is unusual. It's created with one rectangle and three squares: one div, two pseudo-elements, and one span.

<div class="FU_cloud">
  <span></span>
</div>

.FU_cloud{
  top: 60px;
  background: #fff;
  filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.2));
  height: 80px;
  width: 200px;
  position: relative;
}

.FU_cloud:after,
.FU_cloud:before {
  content: '';
  position: absolute;
  background: #fff;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  top:-17px;
}
.FU_cloud:before {
  background: green;
  left: -110px;
}
.FU_cloud:after {
  background: orange;
  right: -110px;
}
.FU_cloud span {
  width: 120px;
  height: 120px;
  transform: rotate(45deg);
  background: purple;
  top: -155px;
  margin: 0 auto;
  display: block;
  z-index: 1;
  position: relative;
}

We have the same situation as in the first cloud. We need to slide the elements together and change the background to white.

<div class="FU_cloud">
  <span></span>
</div>

.FU_cloud{
  top: 30px;
  background: #fff;
  filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.2));
  height: 80px;
  width: 200px;
  position: relative;
}

.FU_cloud:after,
.FU_cloud:before {
  content: '';
  position: absolute;
  background: #fff;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  top:-17px;
}
.FU_cloud:before {
  left: -40px;
}
.FU_cloud:after {
  right: -40px;
}
.FU_cloud span {
  width: 120px;
  height: 120px;
  transform: rotate(45deg);
  top: -64px;
  margin: 0 auto;
  display: block;
  background: #fff;
  z-index: 1;
  position: relative;
}

Exercise 3. Weather Images

Let's get our hands dirty. We will create two images: a basic sunny cloud and a stormy, evil one. But don't worry, it's simple.

All images are based on this article.

First, we need to create a few components:

cloud
sun
lightning bolt

Our base colour component is created similar to the way we did the first one.

<div class="cloudBase">
  <div></div>
</div>

.cloudBase {
  top: 30px;
  background: #fff;         
  filter: drop-shadow(0px 5px 10px rgba(175, 215, 243, 0.6));
  height: 120px;
  width: 230px;
  position: relative;
  border-radius: 100px;
}

.cloudBase div {
  background: #fff;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

Cloud shadow

To create shadow, we need to duplicate our cloud with additional blur, colour it blue, and scale it down.

<div class="cloudWrap">
  <div class="cloudBase">
    <div></div>
  </div>
  <div class="cloudBaseShadow">
    <div></div>
  </div>
</div>

.cloudWrap {
  position: relative;
  z-index: 1;
}
.cloudBase {
  top: 30px;
  background: #fff;         
  filter: drop-shadow(0px 5px 10px rgba(175, 215, 243, 0.6));
  height: 120px;
  width: 230px;
  position: relative;
  border-radius: 100px;
}

.cloudBase div {
  background: #fff;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow {
  position: absolute;
  top: 65px;
  left:0;
  right:0;
  background: #69C1F8;
  height: 120px;
  width: 230px;
  border-radius: 100px;
  filter: blur(15px);
  transform: scale(0.8);
  opacity: 0.4;
  z-index: 2;
}

.cloudBaseShadow div {
  background: #69C1F8;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow div:after,
.cloudBaseShadow div:before {
  content: '';
  position: absolute;
  background: #fff;
  height: 100px;
  width: 100px;
  filter: blur(16px);
  border-radius: 100%;
}
.cloudBaseShadow div:after {
  right: -12px;
  top: -20px;
}
.cloudBaseShadow div:before {
  right: -92px;
  top: 33px;
}

Step by step:

Duplicate the cloud with a blue colour.
Add blur.
Scale it down - transform: scale(0.8).
Add pseudo-elements - two white circles to mask our shadow.

Sun image

This is pretty simple: a circle with a shadow and a pseudo-element background to lighten our sun.

<div class="sun"></div>

.sun {
  width:120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(30deg, #ffb347, #fbeb36);
  position: relative;
  box-shadow: 0px -6px 36px 0px #fbeb36, 0px 0px 6px 0px #ffb347;
}
.sun:after {
  content: '';
  position: absolute;
  top:-3px;
  bottom:-3px;
  left:-3px;
  right:-3px;
  border-radius: 50%;
  filter: blur(10px);
  background: linear-gradient(30deg,rgb(251 235 54 / 30%) 20%,rgb(255 255 255 / 49%));
  z-index: 1;
}

Cloud and sun

Now we have to combine the sun, the cloud, and some additional sun flashes.

<div class="cloudWrap">
  <div class="cloudBase">
    <div></div>
  </div>

  <div class="cloudBaseShadow">
    <div></div>
  </div>
  <div class="sun"></div>
  <div class="flash"></div>
</div>

.cloudWrap {
  position: relative;
  z-index: 1;
}
.cloudBase {
  top: 30px;
  background: #fff;         
  filter: drop-shadow(0px 5px 10px rgba(175, 215, 243, 0.6));
  height: 120px;
  width: 230px;
  position: relative;
  border-radius: 100px;
}

.cloudBase div {
  background: #fff;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow {
  position: absolute;
  top: 65px;
  left:0;
  right:0;
  background: #69C1F8;
  height: 120px;
  width: 230px;
  border-radius: 100px;
  filter: blur(15px);
  transform: scale(0.8);
  opacity: 0.4;
  z-index: 2;
}

.cloudBaseShadow div {
  background: #69C1F8;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow div:after,
.cloudBaseShadow div:before {
  content: '';
  position: absolute;
  background: #fff;
  height: 100px;
  width: 100px;
  filter: blur(16px);
  border-radius: 100%;
}
.cloudBaseShadow div:after {
  right: -12px;
  top: -20px;
}
.cloudBaseShadow div:before {
  right: -92px;
  top: 33px;
}

.sun {
  position: absolute;
  top: -50px;
  right: -20px;
  z-index: -1;
  width:120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(30deg, #ffb347, #fbeb36);
  box-shadow: 0px -6px 36px 0px #fbeb36, 0px 0px 6px 0px #ffb347;
}
.sun:after {
  content: '';
  position: absolute;
  top:-3px;
  bottom:-3px;
  left:-3px;
  right:-3px;
  border-radius: 50%;
  filter: blur(10px);
  background: linear-gradient(30deg,rgb(251 235 54 / 30%) 20%,rgb(255 255 255 / 49%));
  z-index: 1;
}

.flash {
  position: absolute;
  bottom: -40px;
  left: -20px;
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.4);
  box-shadow: 0px 0px 6px 3px rgba(255,255,255,0.4);
  border-radius: 50%;
  z-index: 2;
}
.flash:before {
  content: '';
  width: 10px;
  height: 10px;
  background: #fff;
  box-shadow: 0px 0px 6px 3px rgba(255,255,255,0.4);
  border-radius: 50%;
  filter: blur(0px);
  position: absolute;
  top: 60px;
  left: -10px;
}

And that's it!
You can play with the sunny cloud on CodePen.

As you can see, creating this image took us only a few minutes of work. Moreover, creating another image based on this one can be even faster. So let's do this!

Lightning bolt

First of all, let's create a lightning bolt shape by merging two triangles. Now use two triangles and animate the shape with CSS.

<div class="lightningBolt"></div>

@keyframes flash{
  0%, to { opacity: 1; }
  4% { opacity: 0; }
  6% { opacity: .6; }
  8% { opacity: .2; }
  10% { opacity: .9; }
}

@keyframes float{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}


.lightningBolt {
  position: absolute;
  z-index: 3;
  width: 80px;
  height: 20px;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: -40px;
  animation: flash 3s infinite, float 3s ease-in-out infinite;
}

.lightningBolt:before,
.lightningBolt:after {
  content: '';
  position: absolute;
}
.lightningBolt:before {
  width: 0;
  height: 0;
  left: -4px;
  top: 5px;
  border-style: solid;
  border-width: 0px 13px 24px 70px;
  border-color: transparent transparent #fbeb36 transparent;
  transform: rotate(-60deg);
}
.lightningBolt:after {
  width: 0;
  height: 0;
  left: 4px;
  top: -40px;
  border-style: solid;
  border-width: 0px 13px 24px 70px;
  border-color: transparent transparent #fbeb36 transparent;
  transform: rotate(-60deg) scaleY(-1) scaleX(-1);
}

Storm cloud

Okay! Let's finish our cloud by combining our basic cloud (with grey background), the lightning, and some CSS for wind and water drops.

<div class="cloudWrap">
  <div class="cloudBase">
    <div></div>
  </div>
  <div class="cloudBaseShadow">
    <div></div>
  </div>
  <div class="wind"></div>
  <div class="lightningBolt"></div>
</div>

.cloudWrap {
  position: relative;
  z-index: 1;
}
.cloudBase {
  top: 30px;
  background: #fff;         
  filter: drop-shadow(0px 5px 10px rgba(175, 215, 243, 0.6));
  height: 120px;
  width: 230px;
  position: relative;
  border-radius: 100px;
}

.cloudBase div {
  background: #fff;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow {
  position: absolute;
  top: 65px;
  left:0;
  right:0;
  background: #5B7186;
  height: 120px;
  width: 230px;
  border-radius: 100px;
  filter: blur(15px);
  transform: scale(0.8);
  opacity: 0.4;
  z-index: 2;
}

.cloudBaseShadow div {
  background: #5B7186;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow div:after,
.cloudBaseShadow div:before {
  content: '';
  position: absolute;
  background: #fff;
  height: 100px;
  width: 100px;
  filter: blur(16px);
  border-radius: 100%;
}
.cloudBaseShadow div:after {
  right: -12px;
  top: -20px;
}
.cloudBaseShadow div:before {
  right: -92px;
  top: 33px;
}


@keyframes flash{
  0%, to { opacity: 1; }
  4% { opacity: 0; }
  6% { opacity: .6; }
  8% { opacity: .2; }
  10% { opacity: .9; }
}

@keyframes float{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}


.lightningBolt {
  position: absolute;
  z-index: 3;
  width: 80px;
  height: 20px;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: -40px;
  animation: flash 3s infinite, float 3s ease-in-out infinite;
}

.lightningBolt:before,
.lightningBolt:after {
  content: '';
  position: absolute;
}
.lightningBolt:before {
  width: 0;
  height: 0;
  left: -4px;
  top: 5px;
  border-style: solid;
  border-width: 0px 13px 24px 70px;
  border-color: transparent transparent #fbeb36 transparent;
  transform: rotate(-60deg);
}
.lightningBolt:after {
  width: 0;
  height: 0;
  left: 4px;
  top: -40px;
  border-style: solid;
  border-width: 0px 13px 24px 70px;
  border-color: transparent transparent #fbeb36 transparent;
  transform: rotate(-60deg) scaleY(-1) scaleX(-1);
}

.wind {
  position: absolute;
  top: 20px;
  left: -10px;
  width: 90px;
  height: 20px;
  background: linear-gradient(-90deg,rgb(91 113 134 / 0.4),transparent);
  z-index: -1;
}
.wind:before {
  content: '';
  width: 60px;
  height: 20px;
  background: linear-gradient(90deg,transparent,rgb(91 113 134 / 0.4));
  position: absolute;
  top: 60px;
  right: -190px;
}
.wind:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50%;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  z-index: 1;
  filter: blur(2px);
  z-index: 1;
  box-shadow: 
  50px -30px 2px rgb(91 113 134 / 0.4),
  -20px 90px 0px rgb(91 113 134 / 0.4),
  240px 10px 2px rgb(91 113 134 / 0.4);
  animation: float 3s ease-in-out infinite;
}

You can play with the storm cloud on CodePen.

Homework

Now you know how to create awesome weather images, so create your own! Snow? Blizzard? Fog, maybe? Share you codepen on Twitter with #frontendunicorns hashtag!
Thanks for reading!

You can follow me on social media or sign up for my newsletter!
🐦 Twitter
👨🏻‍💻 Blog
📰 Medium
💌 Newsletter
🦄 Frontend Unicorn book

Pure CSS animated gradient colour button is easier than you think!

Albert Walicki — Tue, 08 Dec 2020 07:04:13 +0000

Most buttons are boring. Solid, standard borders. Most of them are not aligned correctly. In today's article, let's learn how to create a gradient colour button with animated borders and text! One single CSS property will handle all the animations.

Outline Button - Easy, Straight, and Boring

Let's start with a basic outline button with hover. It can be created like this:

HTML:

<a href="/" title="Hello button" class="btn">Hello</a>

CSS:

.btn {
  border: 2px solid #4CAF50;
  background-color: transparent;
  color: #4CAF50;
  padding: 10px 28px;
  font-size: 16px;
  cursor: pointer;
  transition: 256ms all;
  border-radius: 20px;
}

.btn:hover {
  background-color: #4CAF50;
  color: #fff;
}

Gradient Button and Text

Going one step further, let's add gradient borders and text. To achieve that, we need to do a few things:

Wrap our button with div and set the background as our body colour.
Add pseudoelements to create borders.
Lastly, we need to add three CSS properties (background-clip: text; -webkit-background-clip: text;).
-webkit-text-fill-color: rgba(255,255,255,0.001)

HTML:

<a href="/" title="Hello button" class="btn">Hello</a>

CSS:

.btn {
  display: block;
  width: 150px;
  background: linear-gradient(90deg, #FFFF00 6%, #FFA500 25%, #F14444 45%, #D53567 55%, #9A109A 94%);
  text-align: center;
  padding: 13px 20px;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,0.001);
  transition: 256ms all;
  position: relative;
  cursor: pointer;
}

.btn:before {
  background: rgb(24,24,24);
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
}

.btn:after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  background: linear-gradient(90deg, #FFFF00 6%, #FFA500 25%, #F14444 45%, #D53567 55%, #9A109A 94%);
  transition: 256ms all;
  z-index: -1;
}

Awesome! You have created a gradient border button with gradient text! Now we will bring it to life with extra CSS.

Final Boss - Animated Gradient Button

In CSS, we can't transition gradients. It would be awesome to see smooth animation with CSS like this:

.gradient {
  background-image: linear-gradient(red, blue);
  transition: background-image 0.5s linear;
}

.gradient:hover {
  background-image: linear-gradient(green, orange);
}

But it won't work. It immediately changes to the other one without transition. There are a few hacks to do it, but my favourite is to animate background-position.

Firstly, we need to add two properties to our button:

background-size: 200% auto
background-position: left center

Then on hover:

background-position: right center

In this case, I added a gradient starting with white colour. It enhances the impression of an animated border.
HTML:

<a href="/" title="Hello button" class="btn">Hello</a>

CSS:

.btn {
  display: block;
  width: 150px;
  background: linear-gradient(90deg,#ffffff 3%,#ffffff 47%,#FFFF00 53%,#FFA500 72%,#F14444 77%,#D53567 88%,#9A109A 97%);
  background-size: 200% 100%;
  background-position: left center;
  text-align: center;
  padding: 13px 20px;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,0.001);
  transition: 256ms all;
  position: relative;
  cursor: pointer;
}

.btn:before {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  background: linear-gradient(90deg,#ffffff 3%,#ffffff 47%,#FFFF00 53%,#FFA500 72%,#F14444 77%,#D53567 88%,#9A109A 97%);
  transition: 256ms all;
  z-index: -1;
  background-size: 200% 100%;
  background-position: left center;
}

.btn:after {
  background: rgb(24,24,24);
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
}

.btn,
.btn:before {
  background-position: right center;
}

And that's it!
You can play with the final button on CodePen.

You can follow me on social media or sign up for my newsletter!
🐦 Twitter
👨🏻‍💻 Blog
📰 Medium
💌 Newsletter
🦄 Frontend Unicorn book

Improving website by replacing images with CSS

Albert Walicki — Mon, 07 Dec 2020 09:12:24 +0000

Improving the performance of the website is serious business. Most people don’t realise how much standard stock photo weight.

My blog was built in Gatsby to have the best performance with images. High-quality images are huge and very heavy; that’s why we should always optimise them.

How images slow down my page?

Heavy images: a website with large images will load much slower. Each image is an additional request to the server and extra seconds to wait.
Wrong dimensions: calling down images won’t speed up your page. Each image should have a few different sizes. For example, on phones, we don’t want to load full HD images, we want to load much much smaller.
Old file formats: Naturally, different formats are larger than others. Next-gen images are images that have superior quality and compression compared to their JPEG and PNG ancestors. We should use them whenever we can.

If you do all this stuff above, you are great! But… Did you ever think about moving further? If you are using next-gen, small, RWD-friendly images what you can do more? Replace images with CSS! A lot of images can be replaced with pure CSS. This is the next level of performance of your website. Consider an example with 4kB image, ten similar images weight 40kB! And of course, often overlooked — 10 additional requests to resolve.

As a developer, I’m always trying to reduce the weight of the bundled app, and this is a straightforward way to do this.

Real examples

A lot of images can be replaced with pure CSS + HTML to improve the performance of the website. All small dots, clouds, speech bubbles, shapes, stars, lines can be created without using images. I will show you two examples from real projects. Let’s start!

Frontend unicorn book

https://frontenduniorn.com

On my book website — Frontend Unicorn all those rectangles are pure CSS. They are extremely easy — squares with background and shadow. When my friend and one of the best designers I know — Diana — did that layout, she wanted to cut all of these squares as one big image.

Hey! Don’t do that! I will create them in CSS.

This image could waste 20–50kB and slow down the page a little bit, moreover doing it with CSS allows me to animate those squares without losing quality!

One square 37x37px as PNG weight 3KB and as SVG almost 1kB. To write it in CSS + HTML we have to use 150B/0.15kB (minified). Of course, images and SVG also need some HTML + CSS which I didn’t count 😉.

PNG	Compresed PNG	SVG	CSS
3kB	1kB	1kB	0.15kB

Using SVG, in this case, is also much better than PNG. We can use currentColor inside them to create more colourful squares.

All those clouds will be replaced with CSS soon.

Counter images

One of our clients asked me a few weeks ago:

For some reason I can not find the files for the number of images. It’s the 1,2,3,4 & 5 circular images.

Image from one of our client's website

Ha! There isn’t any image. This image was created with a few lines of CSS and HTML. This is my favourite performance improvement example.

PNG	Compresed PNG	SVG	CSS
41kB	13kB	4kB	0.5kB

Naturally, like in the example above — images and SVG weight is counted without any styling and HTML.

This client has 5 similar images on his website, but with a different number on it. So let’s count again:

5 PNG	5 Compresed PNG	5 SVG	5 CSS
205kB	65kB	20kB	0.5kB

Do you see it? Five small images replaced with CSS and such an improvement!

Creating an image with 1,2,3,4 & 5 numbers creates one more problem. Accessibility. The Web Content Accessibility Guidelines (WCAG) recommended to not use images of text if you expect the text to be read by the user. You can read more here: Images of Text.

Image-to-CSS

Most of the shapes are built with a single HTML element and one or two pseudo-elements :before and :after.

This article begins the series Image-to-CSS about replacing images with CSS. I will teach you the basics of CSS shapes, and then we will go further into a little bit more complicated cases.

Thanks! 😎

You can follow me on social media or sign up for my newsletter!
🐦 Twitter
👨🏻‍💻 Blog
📰 Medium
💌 Newsletter
🦄 Frontend Unicorn book