7 svar
26 visningar
Beardfactor 6
Postad: 19 nov 10:38

Html & Css konflikt i Webshop

Hej där!
Jag äger en webbshop på Shopify där jag vill ha en social ikonuppsättning på huvudsidan.
Problemet jag har är att koden jag fick för att implementera konflikter med huvud-CSS.
Finns det något sätt att isolera handlingen för bara ikonerna?
Skulle vara väldigt trevligt om ni kunde hjälpa till.

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
</style>
<ul>
  <li>
    <a href="#">
      <i class="fa fa-facebook" aria-hidden="true"></i>
      <span> - Facebook</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-twitter" aria-hidden="true"></i>
      <span> - Twitter</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-pinterest" aria-hidden="true"></i>
      <span> - Pinterest</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-instagram" aria-hidden="true"></i>
      <span> - Instagram</span>
    </a>
  </li>
</ul>
  
<-----------CSS-------------->
  
<style>  
body {
  margin:0;
  padding:0;
  background: rgba(255, 255, 255, .4);
  font-family: 'Roboto Condensed', sans-serif;

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

ul li {
  list-style:none;
  margin:0 5px;
}

ul li a .fa {
  font-size: 40px;
  color: #262626;
  line-height:80px;
  transition: .5s;
  padding-right: 14px;
}

ul li a span {
  padding:0;
  margin:0;
  position:absolute;
  top: 30px;
  color: #262626;
  letter-spacing: 4px;
  transition: .5s;
}

ul li a {
  text-decoration: none;
  display:absolute;
  display:block;
  width:210px;
  height:80px;
  background: #fff;
  text-align:left;
  padding-left: 20px;
  transform: rotate(-30deg) skew(25deg) translate(0,0);
  transition:.5s;
  box-shadow: -20px 20px 10px rgba(0,0,0,.5);
}
ul li a:before {
  content: '';
  position: absolute;
  top:10px;
  left:-20px;
  height:100%;
  width:20px;
  background: #b1b1b1;
  transform: .5s;
  transform: rotate(0deg) skewY(-45deg);
}
ul li a:after {
  content: '';
  position: absolute;
  bottom:-20px;
  left:-10px;
  height:20px;
  width:100%;
  background: #b1b1b1;
  transform: .5s;
  transform: rotate(0deg) skewX(-45deg);
}

ul li a:hover {
  transform: rotate(-30deg) skew(25deg) translate(20px,-15px);
  box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}

ul li:hover .fa {
  color:#fff;
}

ul li:hover span {
  color:#fff;
}

ul li:hover:nth-child(1) a{
  background: #3b5998;
}
ul li:hover:nth-child(1) a:before{
  background: #365492;
}
ul li:hover:nth-child(1) a:after{
  background: #4a69ad;
}

ul li:hover:nth-child(2) a{
  background: #00aced;
}
ul li:hover:nth-child(2) a:before{
  background: #097aa5;
}
ul li:hover:nth-child(2) a:after{
  background: #53b9e0;
}

ul li:hover:nth-child(3) a{
  background: #dd4b39;
}
ul li:hover:nth-child(3) a:before{
  background: #b33a2b;
}
ul li:hover:nth-child(3) a:after{
  background: #e66a5a;
}

ul li:hover:nth-child(4) a{
  background: #e4405f;
}
ul li:hover:nth-child(4) a:before{
  background: #d81c3f;
}
ul li:hover:nth-child(4) a:after{
  background: #e46880;
}
</style>
Palle Derkert 1069 – Admin
Postad: 19 nov 10:54

Om du i HTML:en ändrar <ul> till <ul class="social"> och sen i CSS:en ändrar alla ul till ul.social så kommer css:en endast påverka denna lista. CSS:en för body kan du ju även flytta till ul, om den nu behövs.

Beardfactor 6
Postad: 19 nov 10:57

Det ska jag testa, tack :)

Beardfactor 6
Postad: 19 nov 11:00

Det fungerade, du är en klippa :)

Beardfactor 6
Postad: 19 nov 11:01

Du kan med gott samvete unna dig något extra till helgen, tack!

Beardfactor 6
Postad: 19 nov 11:22

Ursäkta mig! Bara en liten fråga till :)

Koden fungerar jättebra, men lägger sig längst upp på sidan.

Hur gör jag om jag vill ha funktionen på specifikt ställe?

Palle Derkert 1069 – Admin
Postad: 19 nov 12:52

Då får du flytta koden dit du vill ha den i din HTML.

Beardfactor 6
Postad: 19 nov 12:59 Redigerad: 19 nov 13:00

Denna kod ligger i Shopify :) så det är någon sort av liquid block

Svara Avbryt
Close