Instagram新徽标css背景

Question

最近，Instagram徽标已经发生了变化，众所周知。我需要矢量标志，但这是不可能的，我的意思是渐变。是否有新徽标的CSS代码？

Answer 1

以下是背景颜色的css代码：

＆＃13;

＆＃13;

JQueryStatic

＆＃13;

.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 );
  }

＆＃13;

＆＃13;

＆＃13;

Answer 2

这里是带有渐变背景的图标的代码。希望这可以帮助。 :)

＆＃13;

＆＃13;

#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*/
  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我在这里找到了两个更好的字体真棒图标 - https://codepen.io/monir/pen/wGZWvB（新徽标） https://codepen.io/thomasrye/pen/VaRoYv（旧徽标）

Answer 3

您可以根据需要更改尺寸。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您感觉特别喜欢冒险，可以使用新的（ish）CSS Variables来更轻松地更改尺寸。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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%);

Answer 5

另一种使用 SVG 图标的方法。您可以从 https://icomoon.io

获取 SVG 图标

<svg class="header__link-icon-instagram" fill="url(#instagram-gradient)">
    <linearGradient id="instagram-gradient" x2="0.35" y2="1">
       <stop offset="0%" stop-color="var(--color-instagram1)" />
       <stop offset="25%" stop-color="var(--color-instagram2)" />
       <stop offset="50%" stop-color="var(--color-instagram3)" />
       <stop offset="75%" stop-color="var(--color-instagram4)" />
       <stop offset="100%" stop-color="var(--color-instagram5)" />
    </linearGradient>
    <use xlink:href="img/sprite.svg#icon-instagram"></use>
</svg>

--color-instagram1: #f09433;
--color-instagram2: #e6683c;
--color-instagram3: #dc2743;
--color-instagram4: #cc2366;
--color-instagram5: #bc1888;