Instagram new logo css background

问题:

Recently, Instagram logo has changed as you all know. I need vector logo but it is not possible, I mean gradients. Is there any css code for new logo?

回答1:

Here is the css code for background color:

.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>

回答2:

#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>

回答3:

You can change the sizes as you see fit.

.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>

If you're feeling particularly adventurous you can use the new(ish) CSS Variables to make it easier to change the size.

.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>

文章来源: Instagram new logo css background