5 Logos using Pure CSS - Coding Torque

byPiyush Patil -
0
5 Logos using Pure CSS - Coding Torque

5 Logos using Pure CSS

Hello Coders! Welcome to Coding Torque. In this blog, We are going to create 5 different logos using pure CSS. Let's get started 🚀.

Demo

1. Avengers Logo using Pure CSS


Avengers Logo using Pure CSS

Code Credit: codepen
HTML Code 
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <title>Avengers Logo using pure css - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="container">

        <div> class="circle"></div>
        <div> class="a-1"></div>
        <div> class="a-2"></div>
        <div> class="a-3"></div>
        <div> class="arrow-right"></div>
        <div> class="arrow-down"></div>
        <div> class="arrow-left"></div>
        <div> class="black-bar-1"></div>
        <div> class="black-bar-2"></div>

    </div>
</body>

</html>

CSS Code 
body {
    background: #000000;
}

.container {
    width: 700px;
    height: auto;
    margin: 150px auto;
    position: relative;
}

.circle {
    width: 600px;
    height: 600px;
    border: solid 50px #ffffff;
    border-radius: 50%;
    top: 70px;
    position: absolute;
    z-index: 10;
}

.a-1 {
    width: 100px;
    height: 770px;
    background: #ffffff;
    transform: skewX(-25deg);
    position: absolute;
    left: 200px;
    z-index: 20px;
}

.a-2 {
    width: 100px;
    height: 380px;
    background: #ffffff;
    position: absolute;
    left: 400px;
    z-index: 30;
}

.a-3 {
    width: 190px;
    height: 100px;
    background: #ffffff;
    position: absolute;
    left: 210px;
    top: 450px;
    z-index: 40;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 90px solid transparent;
    border-bottom: 90px solid transparent;
    border-left: 120px solid #ffffff;
    left: 400px;
    top: 410px;
    position: absolute;
    z-index: 50px;
}

.arrow-down {
    width: 0;
    height: 0;
    border-bottom: 80px solid transparent;
    border-right: 100px solid #ffffff;
    left: 400px;
    top: 380px;
    position: absolute;
    z-index: 60;
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: 80px solid transparent;
    border-right: 100px solid #ffffff;
    left: 400px;
    top: 540px;
    position: absolute;
    z-index: 70;
}

.black-bar-1,
.black-bar-2 {
    width: 25px;
    height: 80px;
    background: #000000;
    transform: skewX(-25deg);
    position: absolute;
}

.black-bar-1 {
    left: 158px;
    top: 650px;
    z-index: 80;
}

.black-bar-2 {
    left: 72px;
    top: 565px;
    z-index: 90;
}

2. Google Logo using Pure CSS

Google Logo using Pure CSS
Code Credit: codepen
HTML Code 
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <title>Google Logo using pure css - @code.scientist x @codingtorque</title>
</head>

<body>
    <div id="container">
        <div id="logo">
            <div class="g-line"></div>
            <span class="red"></span>
            <span class="yellow"></span>
            <span class="green"></span>
            <span class="blue"></span>
        </div>
    </div>
</body>

</html>

CSS Code 
 html,
body {
    background: #f1f1f1;
    margin: 0;
    min-height: 100%;
}

#container {
    position: relative;
    margin-left: auto;
    margin-top: 200px;
    margin-right: auto;
    width: 1000px;
    height: 300px;
}

#logo {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    border: 25px solid #f1f1f1;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
}

#logo::after {
    position: absolute;
    content: '';
    display: block;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: #f1f1f1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 4;
}

#logo::before {
    position: absolute;
    content: '';
    display: block;
    width: 35%;
    height: 32%;
    background: #f1f1f1;
    right: 0;
    z-index: 10;
    bottom: 50%;
    transform: rotateZ(45deg);
}

.g-line {
    width: 50%;
    height: 20%;
    background: #0091ea;
    position: absolute;
    right: 0;
    margin: auto;
    border-bottom-right-radius: 4px 20px;
    top: 0;
    bottom: 0;
    z-index: 15;
}

.yellow {
    width: 40%;
    height: 40%;
    position: absolute;
    left: -15%;
    bottom: 32%;
    margin: auto;
    background: #ffc107;
    transform: rotateZ(-48deg);
    z-index: 3;
}

.green {
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    border-radius: 0 0 100% 100%;
    background: #4caf50;
    z-index: 2;
}

.blue {
    position: absolute;
    width: 0px;
    height: 0px;
    right: 0;
    z-index: 30;
    top: 50%;
    z-index: 2;
    width: 35%;
    height: 32%;
    background: #0091ea;
    right: 0;
    z-index: 2;
    transform: rotateZ(45deg);
}

.red {
    width: 81%;
    height: 50%;
    position: absolute;
    top: 0px;
    background: #f44336;
}

3. Instagram Logo using Pure CSS

Instagram Logo using Pure CSS
HTML Code 
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Instagram Logo using HTML & CSS - @code.scientist</title>
</head>

<body>
    <div class="logo">
        <div class="inner-box"></div>
    </div>
</body>

</html>

CSS Code 
body {
    background-color: #111827;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    margin-top: 10rem;
    height: 8rem;
    width: 8rem;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner-box {
    border: 8px solid white;
    height: 70%;
    width: 70%;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.inner-box::after {
    content: '';
    border: 8px solid white;
    height: 50%;
    width: 50%;
    border-radius: 50%;
}

.inner-box::before {
    content: '';
    background-color: white;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    right: 7px;
}

4. Facebook Logo using Pure CSS

Facebook Logo using Pure CSS

Code Credit: codepen
HTML Code 
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Facebook Logo using HTML & CSS - @code.scientist and @codingtorque</title>
</head>


<body>
    <div id='f-icon'></div>
</body>

</html>

CSS Code 
        body {
    margin-top: 10rem;
    text-align: center;
}

#f-icon {
    background: #3b5998;
    text-indent: -999em;
    width: 100px;
    height: 110px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    border: 15px solid #3b5998;
    border-bottom: 0;
    display: inline-block;
}

#f-icon::before {
    background: #3b5998;
    content: "/20";
    position: absolute;
    bottom: -30px;
    right: -37px;
    width: 40px;
    height: 90px;
    border: 20px solid #eee;
    border-radius: 25px;
}

#f-icon::after {
    background: #eee;
    content: "/20";
    position: absolute;
    top: 50px;
    right: 5px;
    width: 55px;
    height: 20px;
}

5. XBox Logo using Pure CSS

XBox Logo using Pure CSS
HTML Code 
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Xbox logo using pure css - @code.scientist x @julianvelez1997</title>
</head>

<style>
    
</style>

<body>
    <div class="wrapper">
        <div class="logo">
            <div class="circle">
                <div class="xbox"></div>
                <div class="xbox-1"></div>
            </div>
        </div>
    </div>
    <h1 class="title">xbox</h1>
</body>

</html>
CSS Code
 body {
    background: #111;
}

.wrapper {
    width: 100px;
    margin: auto;
    position: relative;
    top: 200px;
}

.logo {
    display: inline-block;
}

.circle {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #eee;
    position: relative;
    overflow: hidden;
    box-shadow: 0 -10px 30px rgba(0, 10, 30, 0.3) inset;
}

.xbox {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100px;
    height: 60px;
    webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    box-shadow: inset 0 10px 10px #2d2, inset 0px 15px 0 #2c2;
    -webkit-transform: rotate(-45deg);
}

.xbox-1 {
    position: absolute;
    top: 20px;
    right: 0;
    width: 100px;
    height: 60px;
    border-radius: 50%;
    box-shadow: inset 0 10px 10px #2d2, inset 0px 15px 0 #2c2;
}

.title {
    text-align: center;
    font: normal 36pt sans-serif;
    color: #2d2;
}


If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

 If you have any doubt or any project ideas feel free to Contact Us 

Hope you find this post helpful💖 

 Written by: Coding Torque | Piyush Patil 

 Follow us on Instagram for more projects like this👨‍💻 

Tags:

Post a Comment

Previous Post Next Post