Forem: Yigit S

Back to top with only CSS

Yigit S — Fri, 22 Dec 2023 14:25:07 +0000

Hello everyone!

Here's my approach for a back-to-top button without Javascript.

I hope you find this tutorial useful. See you on the next article.
Check it out on CodePen

Follow me on

How to toggle dark mode

Yigit S — Sun, 09 Jan 2022 17:31:34 +0000

Hi all. In this post, I'll show you how to create a toggle button to switch between dark and light mode.

HTML

<!DOCTYPE html>
<html lang="en" data-theme ="light">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, 
initial-scale=1.0">

    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>

    <title>toggleDark</title>
</head>
<body>

    <div class="toggle-container">
        <input type="checkbox" id="toggle" name="toggle">
        <label for="toggle"></label>
    </div>

    <h1>Long Live Rock 'n Roll</h1>
    <p>Rock and Roll ain't noise pollution!
Rock and Roll will never die!
I like that old time Rock and Roll!</p>

</body>
</html>

CSS

*{
    box-sizing: border-box;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;

    min-height: 100vh;
    flex-direction: column;
    padding: 5rem;
    transition: background 0.4s linear, color 0.4s linear;
    font-size: 2rem;
}

body.dark{
    background: #201e1e;
    color: white;
}

label{
    user-select: none;
    cursor: pointer;
    background-color: #201e1e;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    transition: background 0.4s linear;
}

body.dark label{
    background-color: #ffff;
}

.toggle-container{
    position: fixed;
    top: 10px;
    right:10px
}

input{
    visibility: hidden;
}

Javascript

const toggle = document.getElementById("toggle")

toggle.addEventListener('change', (e)=>{
document.body.classList.toggle('dark',e.target.checked)

})

Final Result

I hope you find this tutorial useful. See you on the next article.
Here's the Source Code on GitHub
Here's the YouTube Video where I code it from scratch.
Check it out on CodePen

Follow me on

10 Useful Resources for Web Developers

Yigit S — Fri, 07 Jan 2022 21:54:20 +0000

Hi all. In this article I'm gonna share some useful resources related with web development. Hope you find them useful.

Fancy Border Radius
Open source web app to create fancy border radius.
CSS Separator Generator
In this website, you can create section separator and copy the HTML and CSS code.
Hover CSS
A collection of CSS hover effects that can be applied to links, buttons and logos etc.
CSS Reference
A visual guide to CSS.
WinBox JS
Create modern windows using free and open source library.
Responsively
This is an open source must-have program for web developers.
Wicked Backgrounds
A web app to create wicked backgrounds.
Favicon
You can quickly generate favicons from texts and images etc.
HTML5 UP
You can find responsive HTML5 and CSS3 templates.
Emmet Cheat Sheet
Emmet cheat sheet. You can also download it as PDF.

Follow me on

How to make a pulse effect

Yigit S — Sun, 02 Jan 2022 12:57:06 +0000

In this article, I'll teach you how to make a pulse effect on an image.

HTML Code

First, we add our image inside <img> tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pulse Effect</title>
</head>
<body>

    <img class="moonPulse" src="https://i.pinimg.com/564x/a1/01/e2/a101e22fc458c1110d418ee309f240c8.jpg"
alt="moon pic"/>

</body>
</html>

CSS Code

Styling the body

  body{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5em;
    background: #000;
}

Styling the image

.moonPulse{
    animation: pulse 1s infinite;
    border-radius: 50%;
    width: 20em;
}

Finally, adding pulse effect animation

 @keyframes pulse{
      from{
        box-shadow: 0 0 0 0 rgba(198, 182, 179, 0.85);
      }

      to{
        box-shadow: 0 0 0 30px rgba(201, 48, 48, 0);
      }
  }

Final Result

I hope you find this tutorial useful. See you on the next article.
Here's the Source Code on GitHub
Here's the YouTube Video where I code it from scratch.
Check it out on CodePen

Follow me on

10 Resources for Web Developers

Yigit S — Sun, 02 Jan 2022 08:39:17 +0000

Hi all. In this post I'm gonna share some resources related with web development and UI design. Hope you find them useful.

Omatsuri
Open source web app that includes 12 frontend tools.
SmallDevTools
In this website, you can find useful developer tools.
Keyframes
You can create animations, shadows and play with colors.
ColorHunt
Find color palettes for your project.
UIDesignDaily
UI designs for inspiration.
Carbon
Share your code as beautiful editable images.
DesignResources
This is a collection of design resources. You can find many design recources from Figma to Unsplash.
CSSLayout
You can create css layouts and patterns from Accordion to Navigation.
UISnippets
To copy the style, just right click the animation.
PatternCSS
A CSS library to turn empty background to beautiful patterns.

Follow me on

How to create a navbar in 5 minutes

Yigit S — Thu, 30 Dec 2021 10:55:11 +0000

Hi all. In this post, we're creating a navbar in less than 5 minutes.

HTML Code

Inside the <body> tag we create a navbar with the tag <nav>. Under <nav>, we put <ul> and 3 <li> items. Finally, we put our links with # <a href="#about-me> to go to that section on the page. It's something like this:

<nav>
        <ul>
            <li><a href="#about-me">About me</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact-me">Contact</a></li>
        </ul>
    </nav>

CSS Code

In the video, I didn't create a style.css file. I wrote all the css code in <style> tag. Here's the css code.
Body

 body{
            margin: 0;
            padding: 0;
            background-color: rgb(172, 170, 168);
        }

Nav bar

      nav {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(28, 29, 37);
        }

Ul, li and a

      ul {
            display: flex;
            list-style-type: none;
            width: 500px;
            justify-content: center;
            font-size: 30px;
        }

        li {
            text-decoration: none;
            margin-right: 11px;
        }

        ul li a{
            color: rgb(232, 231, 233);
            text-decoration: none;
        }

        ul li a:hover{
            text-decoration: underline;
            color: rgb(150, 120, 180);
        }

Here's the final code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, 
                                 initial-scale=1.0">
    <title>Nav Bar</title>

</head>
<body>

    <nav>
        <ul>

            <li><a href="#about-me">About me</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact-me">Contact</a></li>
        </ul>
    </nav>


    <style>

        body{
            margin: 0;
            padding: 0;
            background-color: rgb(172, 170, 168);
        }

        nav {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(28, 29, 37);
        }

        ul {
            display: flex;
            list-style-type: none;
            width: 500px;
            justify-content: center;
            font-size: 30px;
        }

        li {
            text-decoration: none;
            margin-right: 11px;
        }

        ul li a{
            color: rgb(232, 231, 233);
            text-decoration: none;
        }

        ul li a:hover{
            text-decoration: underline;
            color: rgb(150, 120, 180);
        }

    </style>

</body>
</html>

I hope you find this tutorial useful. See you on the next article.
Here's the Source Code on GitHub
Here's the YouTube Video where I code it from scratch.
Check it out on CodePen

Follow me on

8 Websites Every Web Developer Should Visit

Yigit S — Tue, 28 Dec 2021 15:21:16 +0000

Hi all. In this post I'm gonna share some of the websites that I personally use daily that help me save time while developing websites. Hope you find them useful.

1.Get Waves
Generate svg waves.

2.Blobmaker
Create and modify svg shapes.

3.FLEX
Visualisation of flex box.

4.Buttons Generator
Select a button and click to copy the code.

5.CSS Generator
The ultimate css generator.

6.Animate CSS
CSS library for animations.

7.CSS Code Generator
Another source for generating css.

8.Daily.dev
Latest developer news on browser.

Follow me on