[Tutorial] Tooltips animados con css3

**107** · 23 May 2014, 03:06

Hola seguramente has querido darle un buen estilo a esos pequeños iconos llamados Tooltips por eso me he dedicado a hacer este pequeño tutorial, aclaro que el archivo no es mio ni las cosas que en el contiene, sin embargo este tutorial esta completamente elaborado por mi @ Brown

Primero descargamos:

Registrate o inicia tu sesión para ver este contenido

Extraemos el archivo Winrar CSS3Tooltips.zip y adentro aparecerán

Cita:*CSS
*Images
*Index.html
*Index2.html
*Index3.html
*Index4.html

Aquí puedes ir abriendo cada "Index" y ver la animación que mas te guste.Cuando ya tengas el Index que quieras sube la carpeta Images a tu FTP, si te pide combinar la carpeta le das que "si"

Ahora copia el CSS del index que escogiste y lo pegas en tu global.css

Ejemplo:

Cita:Si yo escogí Index2.html me tengo que ir a la carpeta CSS y copiar todo el código de (preferiblemente abrirlo con Notepad++) Style2.css

Ahora abre el Index que escogiste (en mi caso "Index2.html", copia y pega todo el código en la plantilla "Index" de tu estilo, pero recuerda también editar las url de los iconos, eso se encuentra en la Index que escogiste, editala y cámbialo por los tuyos

Ejemplo:

Abro "Index2.html" y edito estas opciones

Código PHP: ( Seleccionar Todo )

<li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
                <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li>
                <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
                <li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>
                <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
                <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>

Por estas

Código PHP: ( Seleccionar Todo )

<li><a class="tt-gplus" href="AQUI LA URL DEL GOOGLE PLUS DE TU FORO"><span>Google Plus</span></a></li>
                <li><a class="tt-twitter" href="AQUI LA URL DEL TWITTER DE TU FORO"><span>Twitter</span></a></li>
                <li><a class="tt-dribbble" href="AQUI LA URL DEL DRIBBBLE DE TU FORO"><span>Dribbble</span></a></li>
                <li><a class="tt-facebook" href="AQUI LA URL DEL FACEBOOK DE TU FORO"><span>Facebook</span></a></li>
                <li><a class="tt-linkedin" href="AQUI LA URL DEL LINKEDEN DE TU FORO"><span>LinkedIn</span></a></li>
                <li><a class="tt-forrst" href="AQUI LA URL DEL FORRST DE TU FORO"><span>Forrst</span></a></li>

Ahora solo faltaría acomodar tu código, eliminando cosas que no te gusten de el, editalo a tu gusto pero recuerda tener precaución para no estropearlo

Bueno, aquí les dejo una captura del resultado que obtuve, edite ciertas cosas que no me gustaban
[Imagen: sin_ta24.png]

Registrate o inicia tu sesión para ver este contenido

:D cualquier duda pueden colocarlas acá mismo ^^

**2,958** · 23 May 2014, 05:19

0

Muy buen aporte creo que todos actualmente utilizan esto y viene perfecto en los foros xd.

**107** · 23 May 2014, 05:26

0

Exacto Dark actualmente se utiliza mucho esto y con esas animaciones quedan muy originales, además el código es bastante editable :D

Posibles temas similares…
Tema		Autor	Respuestas	Vistas	Último mensaje
	[Tutorial] Banderas en movimiento .gif	Joseahfer	20	13,104	6 January 2018, 09:39 Último mensaje: mario
	[Tutorial] Página de error 404	Joseahfer	15	5,707	22 July 2016, 15:04 Último mensaje: Whiteneo
	[Tutorial] Diferentes colores para los thead	Brown	4	1,692	27 May 2014, 17:33 Último mensaje: Brown
	[Tutorial] Montar un foro Localhost con EasyPHP	Brown	16	3,601	19 May 2014, 23:29 Último mensaje: Whiteneo
	[Tutorial] Poner sombras a los enlaces	calamar	5	1,517	19 May 2014, 23:16 Último mensaje: Whiteneo
	[Tutorial]Añadir una nueva pestaña al header	Brown	3	1,719	18 May 2014, 02:07 Último mensaje: Whiteneo
	[TUTORIAL] Añadir Font Awesome a tu Foro	Jean Pierre	6	3,313	12 May 2014, 22:46 Último mensaje: storm
	[TUTORIAL] Script de Mensajes Aleatorios	Jean Pierre	10	3,076	9 April 2014, 23:28 Último mensaje: DarkEternity
	[Tutorial] Avatar online offline away	calamar	0	932	7 March 2014, 13:08 Último mensaje: calamar
	[TUTORIAL] Tablero de Anuncios con Animación Simple	Whiteneo	5	1,708	5 March 2014, 19:46 Último mensaje: Iñaki