Instagram neues Logo css Hintergrund

Question

Vor kurzem hat sich Instagram Logo geändert, wie Sie alle wissen. Ich brauche Vektor-Logo, aber es ist nicht möglich, ich meine Gradienten. Gibt es einen CSS-Code für ein neues Logo?

Answer 1

Hier ist die CSS-Code für die Hintergrundfarbe:

.instagram{ width:100px; height:100px; 
 
    background: #f09433; 
 
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
 
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
 
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888',GradientType=1); 
 
    }

<div class="instagram"></div>

Answer 2

Sie können die Größe ändern, wie Sie für richtig halten.

.insta-icon { 
 
    position: relative; 
 
    width: 36px; 
 
    height: 36px; 
 
    border-radius: 20%; 
 
    background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf) 
 
} 
 
.insta-icon:after, 
 
.insta-icon:before { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 25px; 
 
    height: 25px; 
 
    border: 2px solid #fff; 
 
    transform: translate(-50%, -50%); 
 
    content: '' 
 
} 
 
.insta-icon:before { 
 
    border-radius: 20% 
 
} 
 
.insta-icon:after { 
 
    width: 11px; 
 
    height: 11px; 
 
    border-radius: 50% 
 
}

<div class="insta-icon"></div>

Wenn Sie besonders etwas Zeit mitbringen Sie die neue (ish) verwenden können CSS Variables es die Größe leichter machen zu ändern.

.insta-icon.small { 
 
    --insta-icon-size: 64px; 
 
} 
 
.insta-icon { 
 
    --insta-icon-size: 128px; 
 
} 
 
.insta-icon.large { 
 
    --insta-icon-size: 256px; 
 
} 
 
.insta-icon { 
 
    position: relative; 
 
    width: var(--insta-icon-size); 
 
    height: var(--insta-icon-size); 
 
    border-radius: 20%; 
 
    background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf) 
 
} 
 
.insta-icon:after, 
 
.insta-icon:before { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: calc(var(--insta-icon-size)/1.5); 
 
    height: calc(var(--insta-icon-size)/1.5); 
 
    border: calc(var(--insta-icon-size)/18) solid #fff; 
 
    transform: translate(-50%, -50%); 
 
    content: '' 
 
} 
 
.insta-icon:before { 
 
    border-radius: 20% 
 
} 
 
.insta-icon:after { 
 
    width: calc(var(--insta-icon-size)/4); 
 
    height: calc(var(--insta-icon-size)/4); 
 
    border-radius: 50% 
 
}

64: 
 
<br> 
 
<div class="insta-icon small"></div> 
 
128: 
 
<br> 
 
<div class="insta-icon"></div> 
 
256: 
 
<br> 
 
<div class="insta-icon large"></div>

Answer 3

#insta { 
 
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); 
 
    -webkit-background-clip: text; 
 
      /* Also define standard property for compatibility */ 
 
      background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    
 
    font-size: 200px; /* change this to change the size*/ 
 
    
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> 
 
<i class="fa fa-instagram" id="insta" aria-hidden="true"></i>