CODEWITHSUNDEEP
htmlcssisometricsocial-media
ahmadrezarad
ahmadrezarad

Reputation: 13

isometric social media icons

I was trying to make an isometric hover effect on social media icons according to this tutorial in video format.

The problem is that the lateral faces of the prisms aren't rendered, as shown below. These faces are defined in the ... a:before and ... a:after selectors, which are there (I verified it by inspecting the page).

div.col-md-12{
  padding: 0;
}
div.social-media{
  min-height: 200px;
  background-color: darkgray;

}
ul.social{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 0;
  margin: 0;
  display: flex;

}
ul.social li{
  list-style: none;
  margin: 0 40px;
}
ul.social li a .fab{
  font-size: 40px;
  color: #262626;
  line-height: 80px;
  transition: .5s;

}
ul.social li a{
  position: relative;
  width: 80px;
  height: 80px;
  display: block;
  background-color: #fff;
  text-align: center;
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
  box-shadow: -20px 20px 10px rgba(0.0,0,.5);
  transition: .5s;
}
ul.social li a:before {
  content: '';
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  color: red;
  transition: .5s;
  transform: rotate(0deg) skewY(-45deg);
  box-sizing: border-box !important;
}
ul.social li a:after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -10px;
  height: 20px;
  width: 100%;
  color: red;
  transition: .5s;
  transform: rotate(0deg) skewx(-45deg);
  box-sizing: border-box !important;
}
ul.social li a:hover{
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
  box-shadow: -50px 50px 50px rgba(0.0,0,.5);
}

ul.social li a:hover i.fa-facebook-f{
  color:#3B5998;
}
ul.social li a:hover i.fa-google-plus-g{
  color:#DB4437;
}
ul.social li a:hover i.fa-twitter{
  color:#1DA1F2;
}
ul.social li a:hover i.fa-snapchat-ghost{
  color:#FFFC00;
}
ul.social li a:hover i.fa-instagram{
  color:#9b6954;
}
ul.social li a:hover i.fa-telegram{
  color:#0088cc;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>

<footer class="footer-bottom">
  <div class="container-fluid">
    <div class=" social-media row">
        <div class="col-md-12 mahi">
          <div>
            <ul class="social">
              <li>
                <a class="" title="facebook">
                <i class="fab fa-facebook-f fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="google plus">
                <i class="fab fa-google-plus-g fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="twitter">
                <i class="fab fa-twitter fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="snapchat">
                <i class="fab fa-snapchat-ghost fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="instagram">
                <i class="fab fa-instagram fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="telegram">
                <i class="fab fa-telegram fa-lg fa-2x"></i>
               </a>
              </li>
            </ul>
            </body>

how it should look like

Upvotes: 1

Views: 244

Answers (1)

wordbug
wordbug

Reputation: 671

You are using the color css property, which defines text color. Use instead background or background-color:

background-color: red;

Other considerations:

  • Use of !important is discouraged when it can be avoided, and you can avoid it (you have direct control over the html).
  • It should be a::before and a::after (two colons instead of one); these are not pseudo-classes but pseudo-elements. It will work either way, but it might not work in future browsers and it's less clear about what's actually going on.

div.col-md-12{
  padding: 0;
}
div.social-media{
  min-height: 200px;
  background-color: darkgray;

}
ul.social{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 0;
  margin: 0;
  display: flex;

}
ul.social li{
  list-style: none;
  margin: 0 40px;
}
ul.social li a .fab{
  font-size: 40px;
  color: #262626;
  line-height: 80px;
  transition: .5s;

}
ul.social li a{
  position: relative;
  width: 80px;
  height: 80px;
  display: block;
  background-color: #fff;
  text-align: center;
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
  box-shadow: -20px 20px 10px rgba(0.0,0,.5);
  transition: .5s;
}
ul.social li a::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  background-color: pink;
  transition: .5s;
  transform: rotate(0deg) skewY(-45deg);
  box-sizing: border-box !important;
}
ul.social li a::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -10px;
  height: 20px;
  width: 100%;
  background-color: red;
  transition: .5s;
  transform: rotate(0deg) skewx(-45deg);
  box-sizing: border-box !important;
}
ul.social li a:hover{
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
  box-shadow: -50px 50px 50px rgba(0.0,0,.5);
}

ul.social li a:hover i.fa-facebook-f{
  color:#3B5998;
}
ul.social li a:hover i.fa-google-plus-g{
  color:#DB4437;
}
ul.social li a:hover i.fa-twitter{
  color:#1DA1F2;
}
ul.social li a:hover i.fa-snapchat-ghost{
  color:#FFFC00;
}
ul.social li a:hover i.fa-instagram{
  color:#9b6954;
}
ul.social li a:hover i.fa-telegram{
  color:#0088cc;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>

<footer class="footer-bottom">
  <div class="container-fluid">
    <div class=" social-media row">
        <div class="col-md-12 mahi">
          <div>
            <ul class="social">
              <li>
                <a class="" title="facebook">
                <i class="fab fa-facebook-f fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="google plus">
                <i class="fab fa-google-plus-g fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="twitter">
                <i class="fab fa-twitter fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="snapchat">
                <i class="fab fa-snapchat-ghost fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="instagram">
                <i class="fab fa-instagram fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="telegram">
                <i class="fab fa-telegram fa-lg fa-2x"></i>
               </a>
              </li>
            </ul>
            </body>

Upvotes: 1

Related Questions