Old Instagram Logo with HTML and CSS quality logo

- Advertisement -

Create the Old Instagram Logo by HTML and CSS.

Old Instagram Logo CSS 

for new style Instagram logo 

- Advertisement -

logo.html

- Advertisement -

[html light=”true”]

<div class="Instagram">
<span class="Instagram-strip"></span>
<span class="Instagram-viewfinder"></span>
<span class="Instagram-shadow"></span>
<span class="Instagram-lens"></span>
</div>

[/html]

style.css

[css]

body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #101010;
}
.Instagram {
position: relative;
display: block;
overflow: hidden;
width: 1em;
height: 1em;
font-size: 50vmin;
background-color: #ded1c1;
border-radius: 22.3%;
}
.Instagram-strip {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 0.3333333333em;
background: linear-gradient(90deg, #9b6954 0em, #9b6954 0.05em, #fb3958 0.05em, #fb3958 0.1em, #ffc838 0.1em, #ffc838 0.15em, #6dc993 0.15em, #6dc993 0.2em, #458eff 0.2em, #458eff 0.25em, #9b6954 0.25em, #9b6954 0.3em);
}
.Instagram-viewfinder {
position: absolute;
top: 0.0666666667em;
right: 0.0666666667em;
z-index: 2;
display: block;
width: 0.2em;
height: 0.2em;
background-color: #061d2e;
border-radius: 22.3%;
}
.Instagram-viewfinder::before, .Instagram-viewfinder::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: block;
border-radius: 50%;
content: "";
}
.Instagram-viewfinder::before {
width: 50%;
height: 50%;
background-color: #0c3a5b;
}
.Instagram-viewfinder::after {
width: 10%;
height: 10%;
background-color: #125688;
}
.Instagram-shadow {
position: absolute;
top: 50%;
left: 0;
right: 0;
z-index: 3;
display: block;
margin: 0 auto;
width: 0.5em;
height: sqrt(pow(0.5, 2)pow(0.5, 2)) * 1em;
background: linear-gradient(to bottom, #bba07e, #ded1c1);
transform: rotate(-45deg);
transform-origin: top center;
}
.Instagram-lens {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
z-index: 4;
display: block;
width: 0.5em;
height: 0.5em;
background-color: #ded1c1;
border-radius: 50%;
}
.Instagram-lens::before, .Instagram-lens::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: block;
border-radius: 50%;
content: "";
}
.Instagram-lens::before {
width: 0.3333333333em;
height: 0.3333333333em;
background-color: #0c3a5b;
box-shadow: inset 0 0 0 0.0833333333em #061d2e;
}
.Instagram-lens::after {
width: 0.0625em;
height: 0.0625em;
background-color: #061d2e;
}
.Plug {
position: absolute;
right: 1rem;
bottom: 1rem;
display: inline-block;
color: #458eff;
font-weight: 300;
line-height: 1;
text-decoration: none;
}
.Plug:hover {
color: #6dc993;
}

[/css]

- Advertisement -

Share it with friends:

Related Articles

Get in Touch

175FansLike
112FollowersFollow

Latest Posts

Popular Posts