Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120481 logo réseaux sociaux | | Coucou Ajouter vos logos de vos réseaux sociaux en vertical. Ajoute autant que nécessaire de lien dans le code. HTML: - Code:
-
<ul class="flatflipbuttons"> <ul class="flatflipbuttons second"> <li> <a href="https://forumcrea.forumactif.org/"><span><img src="https://i.servimg.com/u/f38/16/35/10/19/f11.png" /></span></a> </li> <li> <a href="https://forumcrea.forumactif.org/"><span><img src="https://i.servimg.com/u/f38/16/35/10/19/t10.png" /></span></a> </li> <li> <a href="https://forumcrea.forumactif.org/"><span><img src="https://i.servimg.com/u/f38/16/35/10/19/i10.png" /></span></a> </li> </ul> </ul> CSS: - Code:
-
ul.flatflipbuttons{ margin:0; padding:0; list-style:none; -webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */ -moz-perspective: 10000px; perspective: 10000px; }
ul.flatflipbuttons li{ margin:0; display: block; width: 100px; /* dimensions of buttons. */ height: 100px; margin-bottom: 0; /* spacing between buttons */ background: white; text-transform: uppercase; text-align: center; }
ul.flatflipbuttons li a{ display:table; font: bold 36px Arial; /* font size, pertains to icon fonts specifically */ width: 100%; height: 100%; color: black; background: #3B9DD5; text-decoration: none; outline: none; -webkit-transition:all 300ms ease-out; /* CSS3 transition. */ -moz-transition:all 300ms ease-out; transition:all 300ms ease-out; }
ul.flatflipbuttons li:nth-of-type(1) a{ color: white; background: #3B9DD5; }
ul.flatflipbuttons li:nth-of-type(2) a{ background: #A1CD3A; }
ul.flatflipbuttons li:nth-of-type(3) a{ background: #80C5EC; }
ul.flatflipbuttons li:nth-of-type(4) a{ color: white; background: #635746; }
ul.flatflipbuttons li:nth-of-type(5) a{ background: #F2C96D; }
ul.flatflipbuttons li a span{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: table-cell; vertical-align: middle; width: 100%; height: 100%; -webkit-transition: all 300ms ease-out; /* CSS3 transition. */ -moz-transition: all 300ms ease-out; transition: all 300ms ease-out; }
ul.flatflipbuttons li b{ /* CSS for text alongside button */ display: block; position: relative; top: -100%; /* starting vertical position of text */ left: 100%; /* horizontal position of text */ text-align: left; text-indent: 10px; width: 100%; opacity: 0; -webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */ -moz-transition: all 300ms ease-out 0.2s; transition: all 300ms ease-out 0.5s; }
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */ border-width: 0; vertical-align: middle; }
ul.flatflipbuttons li:hover a{ -webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/ -moz-transform: rotateY(180deg); transform: rotateY(180deg); background: #c1e4ec; /* bgcolor of button onMouseover*/ -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; }
ul.flatflipbuttons li:hover a span{ color: black; /* color of icon font onMouseover */ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); /* flip horizontally 180deg*/ transform: rotateY(180deg); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; }
ul.flatflipbuttons li:hover b{ opacity: 1; top: -65%; /* vertical position of text onmouseover */ }
/* CSS for 2nd menu below specifically */
ul.second li a{ background: #eee !important; }
ul.second li a:hover{ background: #ddd !important; }
|
| |