[Entregue]Social bar - Pedido

[Jaoow]

 

Como eu faço isso?

[TequilAxBr]

Os icones são da font-awesome, ai ele pegou a cor do Twitter, Facebook e Google + e adicionou de background, creio que foi isso.

Vou tentar fazer aqui e se caso conseguir, posto os resultados..

 

@Edit:

Código HTML, fiz apenas com um...

<a href="https://www.facebook.com/" target="_blank" class="teste"> <i class="fa fa-facebook fa-lg"></i></a>

Código CSS:

.teste {
	position: fixed;
	float: left;
	top: 50px;
	left: 0;
	background-color: #3B5998;
	padding: 10px;
}

Ele não está igual na parte do padding, por que fiz correndo. Mas é só você ajustar.

Editado Novembro 8, 2017 por TequilAxBr

[Pica-Pau]

1º - Crie um elemento no CSS.

2º - Coloque a posição desse elemento em "absolute" caso queria que ele só fique lá no começo, ou, "fixed" pra ele acompanhar o rolamento da página

3º - Alinhe ele verticalmente usando "top"

4º - Alinha ele horizontalmente usando "left"

 

5º - Crie um elemento com background desejado paginação de mais ou menos 5 pixels

6º - Crie "elemento .fa" com a branca.

 

OBS: Você pode usar "ul" e "li" pra alinha-los verticalmente ou criar na mão cada um :)

[Jaoow]

Aqui esta o codigo:

 

@import url(http://weloveiconfonts.com/api/?family=entypo);



/* entypo */

[class*="entypo-"]:before {

   font-family: "entypo", sans-serif;

}

a { 

   text-decoration: none;

}

ul {

   list-style: none;

   margin: 0;

   padding: 0;

}

.container {

   margin: 0 auto;

   padding: 20px 50px;

   background: white;

}

#sticky-social {

   left: 0;

   position: fixed;

   top: 150px;

}

#sticky-social a {

   background: #333;

   color: #fff;

   display: block;

   height: 35px;

   font: 16px "Open Sans", sans-serif;

   line-height: 35px;

   position: relative;

   text-align: center;

   width: 35px;

}

#sticky-social a span {

   line-height: 35px;

   left: -120px;

   position: absolute;

   text-align:center;

   width:120px;

}

#sticky-social a:hover span {

   left: 100%;

}

#sticky-social a[class*="facebook"],

#sticky-social a[class*="facebook"]:hover,

#sticky-social a[class*="facebook"] span { background: #3b5998; }



#sticky-social a[class*="twitter"],

#sticky-social a[class*="twitter"]:hover,

#sticky-social a[class*="twitter"] span { background: #00aced; }



#sticky-social a[class*="gplus"],

#sticky-social a[class*="gplus"]:hover,

#sticky-social a[class*="gplus"] span { background: #dd4b39; }  



#sticky-social a[class*="linkedin"],

#sticky-social a[class*="linkedin"]:hover,

#sticky-social a[class*="linkedin"] span { background: #007bb6; }  



#sticky-social a[class*="instagrem"],

#sticky-social a[class*="instagrem"]:hover,

#sticky-social a[class*="instagrem"] span { background: #517fa4; }  



#sticky-social a[class*="stumbleupon"],

#sticky-social a[class*="stumbleupon"]:hover,

#sticky-social a[class*="stumbleupon"] span { background: #eb4924; }  



#sticky-social a[class*="pinterest"],

#sticky-social a[class*="pinterest"]:hover,

#sticky-social a[class*="pinterest"] span { background: #cc2127; }  



#sticky-social a[class*="flickr"],

#sticky-social a[class*="flickr"]:hover,

#sticky-social a[class*="flickr"] span { background: #ff0084; }  



#sticky-social a[class*="tumblr"],

#sticky-social a[class*="tumblr"]:hover,

#sticky-social a[class*="tumblr"] span { background: #32506d; } 

 

 

Como utilizar:

 

<aside id="sticky-social">

    <ul>

        <li><a href="#" class="entypo-facebook" target="_blank"><span>Facebook</span></a></li>

        <li><a href="#" class="entypo-twitter" target="_blank"><span>Twitter</span></a></li>

        <li><a href="#" class="entypo-gplus" target="_blank"><span>Google+</span></a></li>

        <li><a href="#" class="entypo-linkedin" target="_blank"><span>LinkedIn</span></a></li>

        <li><a href="#" class="entypo-instagrem" target="_blank"><span>Instagram</span></a></li>

        <li><a href="#" class="entypo-stumbleupon" target="_blank"><span>StumbleUpon</span></a></li>

        <li><a href="#" class="entypo-pinterest" target="_blank"><span>Pinterest</span></a></li>

        <li><a href="#" class="entypo-flickr" target="_blank"><span>Flickr</span></a></li>

        <li><a href="#" class="entypo-tumblr" target="_blank"><span>Tumblr</span></a></li>

    </ul>

</aside> 

 

Caso queira remove-lo você basta retira-lo, Caso não queira quando passe em cima aparece o Nome de Rede Social deixando ""

 

Resolvido? Deixa o like :)

[Pica-Pau]

 

 

 

Seu pedido foi marcado como [Entregue] e movido à área de pedidos entregues.

 

 

Atenciosamente,

Gamer's Board