SocialBar: problemi centratura e transition elemento

**stefanosh** · 30-08-2016, 19:10

Ciao a tutti ragazzi, approfitto per fare il mio primo saluto alla community.

Ho da poco iniziato a giocare con html5 e css3, sto realizzando un piccolo sito.
Il problema che incontro è nel caso specifico con la socialbar, l'ho creata con un ul ma non riesco a centrarla. Inoltre ho un problema con la transazione di un elemento, in particolare non riesco a far si che la transazione in uscita dell'hover di #ig sia fluida.

Vi lascio il codice e il css così magari riuscite a dirmi dove sbaglio,

Grazie mille

<!doctype html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="socialbar">
<ul>
<li><a href="https://www.facebook.com" id="fb"><span class="socicon-facebook"></span></a></li>
<li><a href="https://www.youtube.com" id="yt"><span class="socicon-youtube"></span></a></li>
<li><a href="https://www." id="ig"><span class="socicon-instagram"></span></a></li>
<li><a href="https://www." id="ml"><span class="socicon-mail"></span></a></li>
</ul>
</div>
</body>
</html>

#socialbar ul li{
float:left;
text-align:center;
margin:0 auto;
font-size:150%;
list-style:none;
padding:20px;
}
#socialbar ul li a{
display: inline-block;
color:#5d6061;
padding:auto;
text-decoration:none;
transition:all ease-out 0.5s;
}
#socialbar ul li a:hover{
font-size:200%;
padding: 1px 1px;
}
#fb:hover{
color: #3e5b98;
}
#yt:hover{
color: #e02a20
}
#ig:hover{
background: -webkit-linear-gradient(#4c68d7, #8a3ab9, #bc2a8d, #cd486b, #e95950, #fbad50, #fccc63);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#ml:hover{
color: #00bf8f
}

**ResianTaxidrive** · 01-09-2016, 18:27

a #socialbar ul li togli il float:left e metti invece display:inline-block.
Inoltre è al contenitore dei li (non ai li), cioè all'ul oppure all'id socialid che devi assegnare margin:0 auto. E devi, sempre a questo contenitore assegnare una larghezza (o in px o in %) inferiore del contenitore rispetto a cui si deve centrare. Fai le prove per vedere quale valore potrebbe essere più opportuno.

Non vedo quella mancanza di fluidità che lamenti. Ma la vedi solo per uno dei 4 elementi o per tutti? Su più di un browser noti questo effetto?

**stefanosh** · 02-09-2016, 03:08

Grazie mille per la risposta.

Nel frattempo avevo risolto creando un ulteriore div che conteneva il div socialbar e avevo dato a questo margin: 0 auto, assegnando una larghezza in px ad entrambi. Ovviamente ho cambiato scrivendo come hai detto te perché viene decisamente più pulito, ti ringrazio.
La transazione riguarda l'icona di ig, avendo usato un background e un text fill per poter colorare il font con un gradiente, quando si toglie il mouse questa sparisce per un piccolo frame lasciando l'animazione poco fluida.

Ti lascio il codice aggiornato magari se hai tempo puoi dirmi se sbaglio io o se semplicemente è dovuto al background e non posso farci nulla.

#socialbar{
margin-top: 50px;
padding: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
width: 340px;
}

#socialbar ul li{
display:inline-block;
margin:0 auto;
font-size:200%;
list-style:none;
padding:20px;
}

#socialbar ul li a{
color:#5d6061;
text-decoration:none;
}

#fb:hover{
color: #3e5b98;
}

#yt:hover{
color: #e02a20
}

#ig:hover{
background: -webkit-linear-gradient(#4c68d7, #8a3ab9, #bc2a8d, #cd486b, #e95950, #fbad50, #fccc63);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#ml:hover{
color: #00bf8f
}

.hvr-bounce-in {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}

.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
-webkit-transform: scale(1.8);
transform: scale(1.8);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
padding: 1px 1px;
}

**ResianTaxidrive** · 02-09-2016, 17:23

Non riesco a vedere la non fluidità. Cmq l'icona di instagram non si colora su Firefox, rimane grigia.

**stefanosh** · 03-09-2016, 01:46

si perché la compatibilità con l'espediente che ho trovato è solo webkit non -moz- né -o-
Evidentemente non riesci a vedere quel frame di cui parlo proprio perché è dovuto al colore.

**ResianTaxidrive** · 03-09-2016, 18:37

ma neanche su chrome vedo la cosa.

**stefanosh** · 05-09-2016, 13:56

io su chrome la vedo fluida, su safari invece lamento questo frame ballerino.
Magari sono io troppo perfezionista eh, ma a questo punto credo sia un bug.

Grazie mille comunque

**ResianTaxidrive** · 10-09-2016, 20:09

Non avevo provato con Safari, comunque non c'è praticamente la transizione, con codesto browser.

Discussione: SocialBar: problemi centratura e transition elemento

Strumenti discussione

Ricerca discussione

Visualizza

SocialBar: problemi centratura e transition elemento

Permessi di invio