DEV Community: Designyff

How to create a closing menu icon using HTML and CSS

Designyff — Fri, 07 Jul 2023 09:37:23 +0000

A step-by-step guide on how to create a menu icon that transforms to close icon on hover.

HTML
For HTML we’ll need a container with 3 div elements — one for each line.
Container will have a class “menu_icon”.

<div class="menu_icon">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS
For CSS, first we’ll style the container.
We’ll display child elements in column using flexbox and add a little gap between them.
Then we’ll set the width to 8 px, which means that every line will be 8 pixels wide.
Since this element should be clickable, and should close a menu on click, we’ll set cursor to pointer.

.menu_icon {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    width: 8px;
    cursor: pointer;
}

Now we’ll style the lines.
First we’ll set height for each line to 1 pixel and background color to black.
Then we’ll round the borders by setting border-radius to 1 pixel.
And lastly, we’ll add transition of 200 milliseconds so that every change on hover (that we’ll set later) is smooth.

.menu_icon div {
    height: 1px;
    background-color: black;
    border-radius: 1px;
    transition: .2s;
}

Now we’ll style all 3 lines when “menu_icon” is hovered.
We’ll just add transition of 200 milliseconds to each line to make upcoming changes smooth.

.menu_icon:hover div {
    transition: .2s;
}

Now we’ll style the first line on “menu_icon” hover.
We’ll set color of this line to red by changing background-color, and we’ll rotate it a bit.
This line now represents half of the close button and will slowly (200ms) rotate and change it’s color to red.

.menu_icon:hover div:first-child {
    background-color: rgb(202, 34, 0);
    transform: rotate(40deg) translate(2px, 2.2px);
}

Now we’ll style the second line.
We’ll just set opacity to 0, to hide this element on hover.

.menu_icon:hover div:nth-child(2) {
    opacity: 0;
}

And lastly, same as on the first line, we’ll set third’s line background color to the same red and rotate it a bit.
First and last line should slowly rotate and form X shape, while second line should disappear.

.menu_icon:hover div:last-child {
    background-color: rgb(202, 34, 0);
    transform: rotate(-40deg) translate(2px, -2.2px);
}

Clicking on this element should close a menu.
And that’s it.

Thank you for reading. ❤️

How to create send button with loader

Designyff — Tue, 30 May 2023 18:06:39 +0000

A step-by-step guide on how to create send button with loader.

HTML

For HTML we need a button with two svgs and a text element.
First svg will be "paper-airplane" and will indicate the send button.

After clicking on this button, using javascript we'll remove the text element and add "rotate" animation (which we will create later using css) to icon, to indicate loading.

After sending is completed, we'll hide the "paper-airplane" icon and display the second one, the "check" icon, which is now hidden, since it has the opacity set to 0 (inline styling).

<button id="send_button" onclick="send()">
    <svg id="send_button_icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="12">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
    </svg>
    <svg id="done_button_icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="opacity: 0;" width="0">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span id="button_text">Send</span>
</button>

CSS

For CSS, first we need to style the button.

We'll align items using flexbox, set width to 80px and height to 30px, add a little transition, remove the border and set it;'s radius to 15px.

Now we'll set text color to white, background to light blue and cursor to pointer.

#send_button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 80px;
    transition: .2s;
    border: none;
    border-radius: 15px;
    color: #fff;
    background-color: rgb(35, 194, 202);
    cursor: pointer;
}

Now we'll style the text.

We'll just align text to the end, set width to 35px and add a little transition.

#button_text {
    text-align: end;
    width: 35px;
    transition: .2s;
}

We'll also add transition to our svgs.

#send_button svg {
    transition: .2s;
}

And create an animation that rotates the element.

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

Javascript

Using javascript, we'll create a "send" function, which is executed on button click.

First, we'll set loading (remove the text element and set rotation on icon) with "setLoading" function, and after two seconds, using setTimeout, we'll set our check icon to indicate that the process has completed, with "setDone" function.

function send() {
    setLoading();
    setTimeout(() => setDone(), 2000);
}

Now we'll create the "setLoading" function.

First we'll select the button element and decrease it's width to 30px and set cursor to default since it's no longer clickable.

Now we'll select the first icon (the "paper-airplane" icon) and set the rotate animation that we created earlier with css.

Lastly, we'll hide the text element by setting width and opacity to 0 and overflow to hidden. With this approach, we'll create a nice and smooth disappearing.

function setLoading() {
    let button = document.getElementById('send_button');
    button.style.width = '30px';
    button.style.cursor = 'default';

    let send_button_icon = document.getElementById('send_button_icon');
    send_button_icon.style.animation = 'rotate 0.7s infinite cubic-bezier(.16,.65,.65,.34)';

    let button_text = document.getElementById('button_text');
    button_text.style.overflow = 'hidden';
    button_text.style.width = '0px';
    button_text.style.opacity = '0';
}

And now we'll create the "seDone" function, to show that the sending has completed.

First we'll change button's background color and set it to light green.

Now we'll hide the first icon, by setting it's opacity and width to 0, transform scale to 0 and animation to none, to achieve the smooth disappearing.

And lastly, we'll display the second icon, "check" svg. We'll set it's width to 15px and opacity to 1.

function setDone() {
    let button = document.getElementById('send_button');
    button.style.backgroundColor = 'rgb(54, 225, 111)';

    let send_button_icon = document.getElementById('send_button_icon');
    send_button_icon.style.animation = 'none';
    send_button_icon.style.transform = 'scale(0)';
    send_button_icon.style.opacity = '0';
    send_button_icon.style.width = '0px';

    let done_button_icon = document.getElementById('done_button_icon');
    done_button_icon.style.width = '15px';
    done_button_icon.style.opacity = '1';
}

And that's it. Simple, huh?

Video tutorial

You can find the video with step-by-step guide (or play a bit in the playground) here.

Thank you for reading. ❤️

Loader - Text loading

Designyff — Thu, 11 May 2023 17:41:36 +0000

Tutorial on how to create a loader inside of a text - CSS only.

HTML

For HTML we need two "loading" texts inside of a container with class "loader".
One will represent the text and the other will animate.



<div class="loader">
    <span>LOADING</span>
    <span>LOADING</span>
</div>

CSS

For CSS, first we'll style the container. We'll just set position to relative so that we can position properly the elements inside.



.loader {
    position: relative;
}

Now we'll style "loading" texts inside of a container.
We'll set position to absolute and transform translate X and Y to -50%, to position elements in the center.
We'll increase the font and set it's size to 50 pixels and weight to 600.



.loader span {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 50px;
    font-weight: 600;
}

Now we'll style only the first text element (the one that represents the text).
We'll set it's color to transparent, and display only the borders of the text by setting text-stroke property.



.loader span:nth-child(1) {
    color: transparent;
    -webkit-text-stroke: 1px rgb(27, 27, 27);
}

Now we'll style the second text element (the one that animates).
We'll only set it's color to yellow.



.loader span:nth-child(2) {
    color: rgb(181, 255, 22);
}

Now we'll create the animation for the second text.
Using clip-path, we'll create two different shapes. The one we'll set at the beginning and at the end od the animation, and the other at 50%.



@keyframes waves {
    0%, 100% {
        clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
    }
    50% {
        clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
    }
}

Now we'll add our animation to the second text element and set it's duration to 2 seconds with infinite iteration count.



.loader span:nth-child(2) {
    color: rgb(181, 255, 22);
    animation: waves 3s infinite;  /* Added animation */
}

And that's it.

Video tutorial:
You can find the whole code with video tutorial here.

Thank you for reading ❤️

How to create a beautiful multicolored input

Designyff — Tue, 28 Mar 2023 18:02:21 +0000

A step-by-step guide on how to create a beautiful multicolored input.

HTML

For HTML the only thing we need is an input and a label.

<div>
    <input type="input" class="colored_input" name="name" id="name" />
    <label for="name" class="colored_label">Name</label>
</div>

CSS

For CSS, first we'll style our input element.

We'll set font family to inherit, background to transparent and with to 400 pixels.

We'll remove the border and outline by setting it to 0, and add border bottom of 3 pixels solid grey.

Lastly, we'll set font size to 20 px, color to white and bottom padding to 5 pixels.

.colored_input {
    font-family: inherit;
    background: transparent;
    width: 400px;
    outline: 0;
    border: 0;
    border-bottom: 3px solid #9b9b9b;
    font-size: 20px;
    color: #fff;
    padding-bottom: 5px;
}

Now we'll style the label.

We'll set position to absolute and display to block.

By setting transform to translate Y to -60 pixels, we'll position this element on top of the input.

And we'll set it's color to the same grey we used before on input.

.colored_label {
    position: absolute;
    display: block;
    transform: translateY(-60px);
    color: #9b9b9b;
}

Now we'll style the input when it's in focus.

Here we'll just change border color and set it to linear gradient image from light blue to light pink.

.colored_input:focus {
    border-image: linear-gradient(to right, #42aec5, #ee82e8);
    border-image-slice: 1;
}

Lastly, we'll change label's color when the input is in focus.

We'll set it to the same light blue color we used for linear gradient on input's border.

.colored_input:focus + .colored_label {
    color: #42aec5;
}

And that's it. Simple but beautiful, isn't it?

Thanks for reading! ❤️

You can watch a video tutorial here.

Neon toggle button — Open/Close text

Designyff — Tue, 17 Jan 2023 16:15:32 +0000

Tutorial on how to create a toggle button inside “open” & “close” texts.

HTML

For HTML we’ll need a container with 5 elements inside, which we’ll position using grid.
You can visualise it like so:

The second element (the toggle button) will take 2 spaces.
Inside of a second element, we’ll need an element for a circle.
And that’s it for the HTML.

<div class="container">
    <div>CL</div>
    <div class="toggle">
    <div class="circle"></div>
    </div>
    <div>SE</div>
    <div></div>
    <div class="open">PEN</div>
</div>

CSS

For CSS, first we’ll style the container.
As we mentioned earlier, we’ll set display to grid, with template columns and rows to 20px.
This means that one cell is 20x20 pixels.
Since the second element will use 2 cells, it will be 20x40 pixels.
Now we’ll add a little gap on x axis and set color to dark gray.

.container {
    display: grid;
    grid-template-columns: 20px 20px 20px;
    grid-template-rows: 20px 20px 20px;
    gap: 0 2px;
    color: #444;
}

Now we’ll style the toggle button.
We’ll set position to relative and height to 40px.
By setting grid-column property to number 2, this element will take 2 columns.
With 1/3 value for the grid-row, this element will be the same width as other 2.
Now we’ll set border to the same dark gray we used for container color and add a little radius.
Lastly, we’ll set box-sizing to border-box<, cursor to pointer and a little transition.

.toggle {
    position: relative;
    height: 40px;
    grid-column: 2;
    grid-row: 1 / 3;
    border: 1px solid #444;
    border-radius: 20px;
    box-sizing: border-box;
    cursor: pointer;
    transition: .2s;
}

Now we’ll style the circle inside of our toggle button.
Using absolute position, we’ll set top to 0, width and height to 16 px and add 1 px margin.
We’ll set border to 2 px with radius of 100% to create a circle and set it’s color to the same dark gray we used before.
By setting box sizing to border box, width and height of 16px will include the width and height of an element as well as the border.
By setting this, we’ll achieve to have the circle in the center of toggle button’s border.
Lastly, we’ll add a little transition.

.circle {
    position: absolute;
    top: 0;
    width: 16px;
    height: 16px;
    margin: 1px;
    border-radius: 100%;
    border: 2px solid #444;
    box-sizing: border-box;
    transition: .2s;
}

Now we’ll style he circle when the toggle button is active.
We’ll move it down by 20px, by setting top to 20px.
With a little transition, this movement will be nice and smooth.
We’ll change border color and set it to white, and add a light blue shadow inside as well as outside, to achieve neon effect.

.toggle:hover .circle {
    top: 20px;
    transition: .2s;
    border-color: #fff;
    box-shadow: 0 0 10px #5271ff,
          inset 0 0 10px #5271ff;
}

Now we’ll style the toggle button when it’s active.Same as for the circle, we’ll set the border color to white, add a little transition and add 2 light blue shadows, inside and outside.

.toggle:hover {
    border-color: #fff;
    transition: .2s;
    box-shadow: 0 0 10px #5271ff,
          inset 0 0 10px #5271ff;
}

Now we’ll style the “PEN” text.
We’ll add a little transition, because this element will be changing color on toggle.
Using flexbox, we’ll position the text at the end of the element.

.open {
    transition: .2s;
    display: flex;
    align-items: flex-end;
}

And lastly, we’ll style the “PEN” text when toggle is active.
Same as for toggle and circle, we’ll set color to white, add light blue text shadow and a little transition.

.toggle:hover ~ .open {
    color: #fff;
    text-shadow: 0 0 8px #5271ff,
    0 0 8px #5271ff;
    transition: .2s;
}

Video tutorial
You can find the video with step-by-step guide here.

Thank you for reading ❤️

How to create a send button with animation - Step-by-step

Designyff — Wed, 30 Nov 2022 18:15:28 +0000

Tutorial on how to create a send button with animated icon.

HTML

For HTML, we need a send svg and text "SEND" inside a div with "send-button" class.

<div class="send-button">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="20" height="20">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
    </svg>
    <span>SEND</span>
</div>

CSS

For css, first we'll style the div element with "send-button" class.

First, we'll set some basic styling: font to Tahoma, cursor to pointer, background to dark blue, text color to white.

Now we'll position elements in a row using flexbox and align items in center.

We'll set width to fit content and add a little padding.

.send-button {
    font-family: Tahoma;
    cursor: pointer;
    background-color: #34495e;
    color: #fff;
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 10px 15px;
}

Now we'll add some padding to span element with "SEND" text.

.send-button span {
    padding: 0 20px;
}

Then we'll rotate svg by -40 degrees and add 200ms transition.

.send-button svg {
    transform: rotate(-40deg);
    transition: 0.2s;
}

On hover, we'll move svg a by 50% to the right and 5% to top, and rotate by 10 degrees.

We'll also add 200ms transition.

.send-button:hover svg {
    transform: rotate(10deg) translate(50%, 5%);
    transition: 0.2s;
}

Now we'll create an animation named "move" that will, as the name says, move an element.

This animation will move an element by 5% to top and 5% to bottom.

This is why we set 5% X translation to svg on button hover.

Also, it will rotate an element by 10 degrees in both directions.

@keyframes move {
    0% {transform: rotate(10deg) translate(50%, 5%);}
    50% {transform: rotate(-10deg) translate(50%, -5%);}
    100% {transform: rotate(10deg) translate(50%, 5%);}
}

Lastly, we'll add created animation to our svg.

"move" is the name of our animation, infinite is the iteration count, which means that animation will be infinite, 1s is the duration of the animation (for 1 iteration), and 0.2s (200 milliseconds) is animation delay. I added the delay because of the transition I set on svg. Animation will start as soon as the transition finishes.

.send-button:hover svg {
    transform: rotate(10deg) translate(50%, 5%);
    transition: 0.2s;
    animation: move infinite 1s 0.2s; /*  New line -> Animation  */
}

And that's it.

You can find the video with step-by-step guide here.

Thank you for reading ❤️

How to create a snackbar wth close button - Tutorial

Designyff — Fri, 04 Nov 2022 12:04:43 +0000

Tutorial on how to create a snackbar with close button.

HTML

For HTML, first we need a button to open the snackbar. We'll set onclick event and run "openSnackbar()" fuction.

And we'll need a snackbar element, with snackbar text and button to close the snackbar.

We'll set onclick lister to a button and fire the "closeSnackbar()" function.

Inside the button, we'll place the "X" svg.

<button class="open_snackbar_button" onclick="openSnackbar()">Open snackbar</button>

<div id="snackbar">
    <p>You didn't share this video</p>
    <button class="close_snackbar" onclick="closeSnackbar()">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="#fff" width="20" height="20">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
</div>

Javascript

For javascript, we need to create two functions, one to open and the other to close the snackbar.

We'll just remove the "active" class from the snackbar in "closeSnackbar()" function and add it in "openSnackbar()" function.

We'll use this class to hide/show the snackbar.

function openSnackbar() {
    let snackbar = document.getElementById('snackbar')
    snackbar.classList.add('active')
}

function closeSnackbar() {
    let snackbar = document.getElementById('snackbar')
    snackbar.classList.remove('active')
}

CSS

For CSS, first we'll style the snackbar.

We'll set it's position to fixed with bottom of 20px and left of 50% with transform translateX -50% which will place the snackbar in the middle, bottom of the page.

Now we'll set background color to red, to indicate that this in an error message.

Then we'll position the text and button using flexbox.

We'll add some paddings, set border radius to 5 pixels, width to 300 pixels, and change font and set it's color to white.

And set display property to none to hide the element.

#snackbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FF5058;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    border-radius: 5px;
    width: 300px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #fff;
    display: none;
}

Now we'll overwrite the display property of the snackbar using "active" class and set it to flex with "!important" rule in order to overwrite the value.

.active {
    display: flex !important;
}

Now we'll style the close button.

We'll set width and height to 20 pixels, border radius to 50% to create a circle and box-sizing to content-box.

Also, we'll add 2px solid white border and set background color to transparent white.

Lastly, we'll set cursor to pointer and add a little transition (because we'll add hover effect).

.close_snackbar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-sizing: content-box;
    padding: 6px;
    border: 2px solid #fff;
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: .2s;
}

Now we'll style the close button on hover.

We'll add a little transition and decrease the transparency of the background.

.close_snackbar:hover {
    transition: .2s;
    background-color: rgba(255, 255, 255, 0.5);
}

Lastly, we'll style the button which opens the snackbar.

We'll set background color to green, remove the border, set border radius to 3 pixels, text color to white and size to 24 pixels and cursor to pointer.

.open_snackbar_button {
    background-color: #3BBBA0;
    border: none;
    border-radius: 3px;
    color: #fff;
    padding: 5px 20px;
    cursor: pointer;
    font-size: 24px;
}

And that's it.

You can find video tutorial and full code here.

Thank you for reading. ❤️

Password input with label and hide/show toggle eye svg - A simple tutorial

Designyff — Thu, 03 Nov 2022 12:54:55 +0000

Tutorial on how to create a password input that shows/hides text on eye svg click with label.

HTML

For HTML we need a container that will wrap everything. We'll set "password_input_container" class to this element.

Then we'll need an input of type password. Type will be toggled later to text and back to password using javascript.

We'll also set placeholder of input to space (" "), which will allow us to detect with CSS when input has some value, so we can style it differently, because we want the label element to be both label and placeholder.

Also, we need a label for password.

And the button. Click on this element will fire the function called "toggle()". We'll create it later in javascript section.

Inside the button, we'll place an eye svg.

<div class="password_input_container">
    <input placeholder=" " name="password_input" type="password" id="password_input">
    <label for="password_input">Password</label>
    <button id="toggle_button" onclick="toggle()">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="15" height="15">
            <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>
    </button>
</div>

Javascript

For javascript, we'll create a function called "toggle". This function will change input's type and button's svg.

First, we'll select button and input by id.

Then we'll check input's type. If it's of type 'password', we'll change it to 'text' (which means that input's value will now be visible) and set button's innerHTML to a crossed eye svg, to indicate that clicking on this button means hiding the input's value.

And if input's type is 'text', we need to hide the password by setting type to 'password', and we also need to change button's svg to an eye.

function toggle() {
    let input_toggle = document.getElementById('toggle_button')
    let password_input = document.getElementById('password_input')

    if (password_input.type === 'password') {
        password_input.type = 'text'
        toggle_button.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="15" height="15">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
        </svg>`
    } else {
        password_input.type = 'password'
        toggle_button.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="15" height="15">
            <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>`
    }
}

CSS

Now the CSS.

First, we'll style the button. We'll set cursor to pointer and position to absolute with top and right set to 0 with height of 100%, which means that this element will be placed at the end (near the right border, inside of our div element that wraps everything).

Using flexbox, we'll alight svg in the center and set button's background to transparent.

We'll remove the default border and set color to grey.

.password_input_container button {
    cursor: pointer;
    position: absolute;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 0;
    background-color: transparent;
    border: none;
    color: #777;
}

Now we'll style the input. We'll remove the outline and set font size to 9 pixels.

We'll add a little paddings and set width to 130 pixels.

Also, we'll set background color to transparent and border to soli grey (same as svg) 1 pixel wide with 4 pixels radius.
We'll set text color to slightly darker color that the border.

.password_input_container input {
    outline: none;
    font-size: 9px;
    padding: 8px;
    width: 130px;
    background-color: transparent;
    border: #777 solid 1px;
    border-radius: 4px;
    color: #555;
}

Now we'll style the label. This element will also be a placeholder.

We'll add some margins and paddings, set position to absolute, left to 0 and top to 50% with translate Y to -50%, this will place the label in the center of the input.

Now we'll set z index to -1, because we want the input to be on top of this element so the user can click on it.

I'll set a background color to white, because I have white background (you simply set the same color as your background).
We're doing this because this element will appear as label if input is in focus or has some value and will be moved on top of the input's top border. Without background color, the input's border would be seen behind the label.

We'll set color to light grey and font size to 12 pixels and a little transition.

.password_input_container label {
    position: absolute;
    margin: 0 5px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    /* Put the same color as background here */
    background-color: #fff;
    padding: 0 2px;
    color: #aaa;
    font-size: 12px;
    transition: .3s;
}

Now we'll style the label when input is in focus or when it has some value (when placeholder " " isn't shown). That's why we needed an empty placeholder.

We'll set top to 0, to move this element on top of input's top border, and we'll set z index to 1, to place this element on top of input. Otherwise the input's border would be on top of the label.

And we'll decrease a font size a bit.

/* Focus or containing value (placeholder not shown) */
.password_input_container input:focus + label,
.password_input_container input:not(:placeholder-shown) + label {
    top: 0;
    font-size: 8px;
    z-index: 1;
}

Lastly, we'll style the label whe input is in focus.

We'll just set label's text color and input's border to green.

/* Only when focused */
.password_input_container input:focus + label {
    color: rgb(15, 156, 116);
    font-size: 8px;
}
.password_input_container input:focus {
    border-color: rgb(15, 156, 116);
}

And that's it.

You can find video tutorial and full code here.

Thank you for reading. ❤️

How to create a progress bar - Simple loader - A step-by-step tutorial

Designyff — Sun, 30 Oct 2022 18:43:18 +0000

Tutorial on how to create a simple progress bar - loader.

HTML

For HTML, we need only an element for progress bar and an element for progress inside it.

<div class="progress-bar">
    <div class="progress"></div>
</div>

CSS

For CSS, first we'll style the progress bar.

We'll set position to relative, height to 20px and width to 300px.

Then we'll set border to 2px solid blue with 15px radius.

Lastly, we'll set overflow to hidden.

.progress-bar {
    position: relative;
    height: 20px;
    width: 300px;
    border: 2px solid rgb(41, 113, 168);
    border-radius: 15px;
    overflow: hidden;
}

Now we'll style the progress.

This element will display the progress. We'll set it's position to absolute and height to 100% and width to 0. Width property displays the percentage of the progress, so you can simply set 50% width and the progress bar will display 50% progress.

Now we'll set background color to the same blue we used as border for progress bar.

Lastly, we'll set border to 2 pixels solid neon green, with 15 pixels radius and set box sizing to border box.

.progress-bar .progress {
    position: absolute;
    background-color: rgb(41, 113, 168);
    width: 0px;
    height: 100%;
    border-radius: 15px;
    border: 2px solid rgb(174, 255, 0);
    box-sizing: border-box;
}

Now we'll create an animation that increases the elements width from 0 to 100%.

@keyframes progress {
    0% {width: 0%;}
    100% {width: 100%;}
}

And we'll set that animation to our progress element with 3 seconds duration, infinite, ease-in-out.

With the animation timing function property, you can also create a progress as steps, by setting step(number of steps) instead of ease-in-out. Detailed explanation on video below.

.progress-bar .progress {
    position: absolute;
    background-color: rgb(41, 113, 168);
    width: 0px;
    height: 100%;
    border-radius: 15px;
    animation: progress 3s infinite ease-in-out; /*  Added animation  */
    border: 2px solid rgb(174, 255, 0);
    box-sizing: border-box;
}

And that's it.

You can find video tutorial and full code here.

Thanks for reading. ❤️

Beautiful card with blur background - Glass effect - A step-by-step tutorial

Designyff — Sun, 30 Oct 2022 18:07:23 +0000

Tutorial on how to create a beautiful card with blur background.

HTML

For HTML, we need a div element with a "card" class.

Inside of the card element, we need two divs, one with "profile" and the other with "info" class.

Inside info element, we'll place a name in b tag, and a job title in span tag.

And that's it for the HTML code.

<div class="card">
    <div class="profile"></div>
    <div class="info">
        <b>Jane Doe</b>
        <span>Photographer</span>
    </div>
</div>

CSS

For CSS, first we'll style the card element.

We'll set light transparent yellow background color fit blur filter set to 5 pixels. This will create a nice glass effect.
Now we'll add some paddings, border radius and display items in column, aligned in center with 30px gap.

Lastly, we'll set position to relative, overflow to hidden and add a little box shadow.

.card {
    background-color: rgba(255, 170, 0, 0.4);
    backdrop-filter: blur(5px);
    padding: 30px 80px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px #000;
}

Now, using before pseudo class, we'll create the brown transparent shape that is placed on top of the card.

To achieve that, we'll set content, background to transparent brown, position to absolute with top set to -30px, left to -10px, right to -20px and height to 150px.

Using transform rotate, we'll rotate the element by 8 degrees, and add a little box shadow.

.card:before {
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    top: -30px;
    left: -10px;
    right: -20px;
    height: 150px;
    transform: rotate(8deg);
    box-shadow: 0 0 20px #000;
}

Now we'll style the profile element (the picture).

We'll set background to url of the image, size to cover and position to center.

We'll set width and height to 160x160 pixels and border-radius to 50%, with 3px solid goldish border.

Lastly, we'll set z-index to 1, otherwise, the brown shape will be positioned on top of our image.

.card .profile {
    background-image: url('https://fixthephoto.com/blog/UserFiles/double-exposure-self-portrait-photography-actions-before.jpg');
    height: 160px;
    width: 160px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    border: 3px solid rgb(255, 180, 29);
    z-index: 1;
}

Now we'll style the info section.

Using flexbox, we'll align items in column with 5px gap, aligned in center.

.card .info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

Lastly, we'll increase the text with name by setting font size to 24 pixels.

.card .info b {
    font-size: 24px;
}

And that's it.

You can find video tutorial and full code here.

Thanks for reading. ❤️

Pulsing loader - A step-by-step guide

Designyff — Sat, 15 Oct 2022 10:23:27 +0000

Tutorial on how to create a beautiful pulse loader - CSS & HTML only.

HTML

For HTML we need a container with 4 divs. We'll add "loader" class to a container.

<div class="loader">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

For CSS, first we'll style the "loader" element.
We'll set position to relative and width and height to 10 rem.

.loader {
    position: relative;
    width: 10rem;
    height: 10rem;
}

Now we'll style the divs inside the "loader" element.
We'll set position to absolute and border to 10px solid light green with 50% radius.
These elements represent the moving lines. We have 4 of them.

.loader div {
    position: absolute;
    border: 10px solid rgb(151, 197, 12);
    border-radius: 50%;
    animation: load 2s ease-out infinite;
}

Now we'll create a "load" animation for our 4 lines.
By changing top, left, width and height properties, we'll create expanding effect.
And by adding the opacity property to 1 at 5% and back to 0 at 100%, we'll create a nice disappearing effect.


@keyframes load {
    0% {
        top: 4rem;
        left: 4rem;
        width: 0;
        height: 0;
        opacity: 0;
    }
    4.9% {
        top: 4rem;
        left: 4rem;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 4rem;
        left: 4rem;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 8rem;
        height: 8rem;
        opacity: 0;
    }
}

Now we'll simply add the animation to all of our div elements.
We'll set it to 2 second duration, infinite, ease out.

.loader div {
    position: absolute;
    border: 10px solid rgb(151, 197, 12);
    border-radius: 50%;
    animation: load 2s ease-out infinite; /* Added animation */
}

As we have 4 lines, we need to set the beginning of the animation at different time to each element.
For the First element, animation will begin at 0, so we won't change anything.
Now we'll select the second element using the nth child selector and passing in number "2". We'll set delay to -0.5 seconds.
For third element, we'll set animation delay to -1 second.
And for the last element, we'll set delay to -1.5 second.

.loader div:nth-child(2) {
    animation-delay: -0.5s;
}
.loader div:nth-child(3) {
    animation-delay: -1s;
}
.loader div:nth-child(4) {
    animation-delay: -1.5s;
}

And that's it. Simple, huh?

You can find video tutorial and full code here.

Thanks for reading. ❤️

Beautiful goldish avatar using only one element - A step-by-step tutorial

Designyff — Thu, 06 Oct 2022 14:27:52 +0000

Tutorial on how to create a beautiful golden avatar using only one element.

HTML

For HTML, we need only one div element with class "avatar".

<div class="avatar"></div>

CSS
For CSS, first we'll style the "avatar" class.

We'll set width and height of 100x100 pixels with border set to 10px goldish solid.

I'll just set a background image that I found on google and set the size to cover.

To form a circle, simply set border-radius property to 50%.
Lastly, we'll set position to relative.

.avatar {
    width: 100px;
    height: 100px;
    border: 10px solid #d0ab35;
    background-image: url('https://dl.memuplay.com/new_market/img/com.vicman.newprofilepic.icon.2022-06-07-21-33-07.png');
    background-size: cover;
    border-radius: 50%;
    position: relative;
}

Now we'll style the before pseudo element.

We'll set content and position to absolute with top, bottom, left and right set to -16 pixels.

This means that this element will be by 16 pixels larger on all sides that the div "avatar" element.

We'll set border radius to 50% to form a circle.

Now we'll set background image to linear gradient with some beautiful golden colors.

Using clip-path property, we'll create cut two squares, one on top and one on the right side.

By setting z-index property to -1, this element will go beneath the "avatar" div element, and it will look like a 16 pixels wide border.

.avatar:before {
    content: "";
    position: absolute;
    top: -16px;
    bottom: -16px;
    left: -16px;
    right: -16px;
    border-radius: 50%;
    background-image: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    clip-path: polygon(54% 0, 53% 5%, 59% 6%, 61% 0, 100% 0, 100% 60%, 94% 58%, 91% 67%, 100% 70%, 100% 100%, 0 100%, 0 0);
    z-index: -1;
}

Now we'll style the after pseudo element.
We'll set content and position to absolute with top, bottom, left and right set to -11 pixels.
This means that this element will be larger that 11 pixels on all sides that "avatar" div element, and 5 pixels smaller that the before pseudo element.
We'll just set solid white border to 4 pixels with radius of 50% to form a circle.

.avatar:after {
    content: "";
    position: absolute;
    top: -11px;
    bottom: -11px;
    left: -11px;
    right: -11px;
    border: 4px solid #fff;
    border-radius: 50%;
}

And that's it.

You can find video tutorial and full code here.

Thanks for reading. ❤️