Instagram 新标志 css 背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37751375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Instagram new logo css background
提问by O?uzhan Kahyao?lu
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?
最近，众所周知，Instagram 标志发生了变化。我需要矢量标志，但这是不可能的，我的意思是渐变。是否有新徽标的 css 代码？
回答by O?uzhan Kahyao?lu
Here is the css code for background color:
这是背景颜色的css代码：
.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>回答by sarthak7gupta
Here's the code for the icon with the gradient background. Hope this helps. :)
这是带有渐变背景的图标的代码。希望这可以帮助。:)
#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>I found 2 more great implementations of the font awesome icon here- https://codepen.io/monir/pen/wGZWvB(new logo) https://codepen.io/thomasrye/pen/VaRoYv(old logo)
我在这里找到了两个很棒的字体真棒图标的实现 - https://codepen.io/monir/pen/wGZWvB（新标志） https://codepen.io/thomasrye/pen/VaRoYv（旧标志）
回答by Andrew Bone
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 Variablesto make it easier to change the size.
如果您特别喜欢冒险，可以使用新的（ish）CSS 变量来更轻松地更改大小。
.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>回答by Iggy
More modern gradient for 2018
2018 年更现代的渐变
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
