Instagram New Logo CSS Background

Instagram new logo css background

Here is the css code for background color:

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

How to add a color gradient to the instagram logo without affecting the visibility?

Using radial gradient and background-clip

Credits https://stackoverflow.com/a/49659118/8053274

.wrapper {

  justify-content: center;

  align-items: center;

}

.wrapper i {

  padding: 10px;

  text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);

  transition: all ease-in-out 150ms;

}

.wrapper a:nth-child(1) {

  color: #3b5998

}

.wrapper a:nth-child(2) {

  color: #1DA1F2;

}

.wrapper a:nth-child(3) {

  color: black;

}

.wrapper i:hover {

  margin-top: -3px;

  text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);

}

.fa-instagram {

  color: transparent;

  background: -webkit-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);

  background: -o-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);

  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);

  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);

  background-clip: text;

  -webkit-background-clip: text;

}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="wrapper">

  <a href="http://www.facebook.com"><i class="fa fa-3x fa-facebook-square"></i></a>

  <a href="http://www.twitter.com"><i class="fa fa-3x fa-twitter-square"></i></a>

  <a href="http://www.instagram.com"><i class="fa fa-3x fa-instagram instagram"></i></a>

</div>

How to prevent the Instagram logo from being hidden when hovered over?

I realized my problem was that the gradients are treated as if they were images, so what I did was overlap two 'images' to obtain the outcome that was needed.

So the code finalized was:

.social-icons li.instagram a {
    border-radius: 50%;
    background: #F2F2F2 url(http://www.myprojectsite.com/images/social/instagram.png) no-repeat 0 0;
}
.social-icons li.instagram a:hover {
    background-color: #f09433;
    background-image: url('http://www.myprojectsite.com/images/social/instagram.png'), linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
    background-image: url('http://www.myprojectsite.com/images/social/instagram.png'), -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    background-image: url('http://www.myprojectsite.com/images/social/instagram.png'), -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}

Instagram icon with hover effect

You can use something like below code in your Footer.css

.instagram:hover{
    background: #fff;
    transform: scale(1.5);
    color: #fd5949;
}

Gradient over Instagram SVG of FontAwesome 5

Icons are no longer referenced as glyphs from a font, but injected as inline SVG. The content color of the icon is defined as fill="currentColor".

The technique with setting the background and using -webkit-background-clip no longer works. Instead you can set the color property directly. Unfortunately, that is where you get into a bit of trouble because color does not support gradients. You can set fill instead, if you use a SVG gradient definition:

body{

  background: black;

}

div {

  display:flex;

  justify-content:center;

  font-size:50px;

  color: white;

}

div:hover svg * {

  fill: url(#rg);

}

<script src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

<svg width="0" height="0">

  <radialGradient id="rg" r="150%" cx="30%" cy="107%">

    <stop stop-color="#fdf497" offset="0" />

    <stop stop-color="#fdf497" offset="0.05" />

    <stop stop-color="#fd5949" offset="0.45" />

    <stop stop-color="#d6249f" offset="0.6" />

    <stop stop-color="#285AEB" offset="0.9" />

  </radialGradient>

</svg>

<div>

<i class="fab fa-instagram" aria-hidden="true"></i>

</div>

How can I change background image of logo when accessed by mobile?

As some have answered you could apply a class to each of the image tags and then manipulate on which resolution they display, but you could also use:

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
        <img src="https://99designs-blog.imgix.net/wp-content/uploads/2017/04/attachment_79503506-e1491509305138.jpg?auto=format&q=60&fit=max&w=930" alt="icon" width="150" height="150">
        <img class="logo-school" src="https://99designs-blog.imgix.net/wp-content/uploads/2017/04/attachment_79503506-e1491509305138.jpg?auto=format&q=60&fit=max&w=930" alt="logo"  width="300" height="300">
    </a>
</nav>

CSS

@media (max-width:530px) {
  nav a img:nth-child(1) {
    display: none;
  }
}

@media (min-width:530px) {
  nav a img:nth-child(2) {
    display: none;
  }
}

Just adjust image sources to your own.

---

Related Topics