Tutorial: Como Usar Efectos CSS

lunes, julio 15

El CSS son efectos que podemos darle a nuestros blogs, ya sea aplicando en imágenes o mismo en textos, son ideales para decorar páginas ya que son ligeros y permite una carga mucho más rápida.

Antes de nada hay que tener muy en cuenta, que no todos los navegadores leen de forma correcta estos efectos ¿el motivo? pues porque los desarolladores no usan unos standar que ya deberían de estar mas que implementados en sus programas. Vamos, no funcionan por que los desarolladores son un poco gilipollas.

Antes de ponerme a publicar super efectos (coas que me voy encontrando por internet super chulas) y demás voy a explicaros un poco como usar el CSS, de esta forma, si mañana publico algo que os interese ya sabréis como utilizarlo a pesar de que no tengáis ni idea de que es cada cosa

Los efectos CSS se puede decir que constan de 2 partes, para explicarme de forma fácil y rápida os diré que una parte es la que dice "como vestirse" y la segunda parte es la que dice "quien se viste".

Vamos entonces con el tutorial rápido y sencillo de como aplicar el CSS y así yo creo que os quedará la cosa algo más clara. Para ello usaré un código que quizás puede resultar complicadete, pero como los efectos mas chulos usan códigos mas complicados, pues este me parece ideal.

Imaginad que veis este efecto (pasad el ratón por encima del texto)



Ejemplo





Como veis está bastante chulo y seguro que querréis ponerlo en algún lugar de vuestras entradas, si ahora os colocase el código necesario para esto, pensareis ¿que carajo es todo eso y que hago con ello? pues bien, aquí viene la explicación



Para hacer este efecto, necesitamos primeramente usar un par de etiquetas llamadas Style, la primera es de apertura y la segunda es de cierre, la segunda siempre lleva esta barrita / y dentro meteremos nuestro código de estilo o mejor dicho nuestro CSS.

<style>

aqui va el código CSS

</style>


El código CSS es el que dice que apariencia tendrá nuestra letra, por ejemplo el color, el tamaño, al fuente, la separación entre cada letra y un largo etc. En el caso del ejemplo de arriba, el css dice a la letra que cambie de color haciendo ese efecto tan chulo.
Vamos a ver como es el código CSS del ejemplo de arriba ¿ok?

<style>

/* swipe #1 styling */

h4.swipe1 {
  font-family: 'Lobster13Regular', sans-serif; 
  font-weight:normal;  
  padding:0 10px; 
  margin:0; 
  color:#e70; 
  position:relative; 
  float:left;

  -webkit-transition:0.6s;

  -o-transition:0.6s;

  transition:0.6s;

}

h4.swipe1 span {
  display:block; 
  position:absolute; 
  margin:0 10px; 
  left:0; top:0;
  padding:2px 0; 
  width:0; 
  height:100%; 
  overflow:hidden;

  -webkit-transition:0.6s;

  -o-transition:0.6s;

  transition:0.6s;

}



h4.swipe1 span:before {
  content:attr(rel); 
  position:absolute; 
  margin:0; 
  left:0; 
  top:0; 
  padding:0; 
  color:#fc9; 
  text-shadow:1px 1px 1px #000;
}



h4.swipe1:hover span {
  width:100%;
}

h4.swipe1:hover {
  color:#fc9;
}

</style>




En un principio todo ese texto puede resultar algo lioso, pero tras hacer pruebas y tocar en el sin miedo veréis que en realidad no es tan complicado, solo es cuestión de practicar y ver que pasa si cambiamos un número
Si os fijáis aparece muchas veces la palabra "swipe1" , esto es el nombre que tiene nuestro efecto, y lo demás es lo que indica su apariencia (como mas o menos os expliqué arriba.). Ahora fijaros un poquito en el código y notaréis que se cumplen ciertos patrones, si no os dais cuenta, no os preocupéis, os lo enseño a continuación.

h4.swipe1 { h4.swipe1 span {
h4.swipe1 span:before {
h4.swipe1:hover span {
h4.swipe1:hover span {

Se puede decir que son los comienzos de cada tipo de estilo, es como por ejemplo decir, "Menganito", "Menganito pantalón" "Menganito Camiseta"... y lo que va debajo de cada uno de estos es, el aspecto de Menganito, si es rubio, moreno,ojos azules.. etc, el siguiente indica como es su pantalón, si es corto, largo, su color, el material de que está echo.., y con la camiseta pasa lo mismo. Cada prenda de ropa de Menganito termina con un }

margin: 0 10px;
position: absolute;
left:0;
top:0;
padding:0;
color:#fc9;
text-shadow:1px 1px 1px #000;

Sigamos con el ejemplo de menganito, como os decía arriba, que nos indicaba su apariencia, como es su camiseta o su pantalón, esto del Margin Position, Left, top... etc, son el color de pelo, ojos, largo de pantalón, color de camiseta.. etc.
¿Que os parece un lio? vale, pues imaginaros ese código así

Menganito {
  Color de ojos: marrón;
  Color de pelo: Pelirrojo;
}
Menganito Pantalón{
  Largo: hasta la rodilla;
  Material: Baquero;
  Color: azul gastado;
}


como veis, en este sencillo ejemplo, parece que estoy dando la guia de vestir a algún modelo, pues como vengo repitiendo todo el rato, CSS hace lo mismo pero con las letras en este caso.
Tener en cuenta, que muchas veces el CSS lo podéis encontrar todo seguido en una misma linea y no bien colocado y separado como en estos ejemplos, igualmente es lo mismo, pero con mala presentación, así que no os asustéis.


Ahora diréis ¿y donde meto el CSS? Esta parte es la mas fácil o difícil según se mire. Puede ir colocado en varias partes según el código que queramos usar, para el caso de este ejemplo lo colocaremos en la propia entrada, para ello le tendremos que dar al botón de arriba de todo que dice HTML y pegar el código arriba de todo o debajo del todo según prefiramos nosotros.
En otros momentos nos encontraremos casos en los que tendremos que atacar directamente al código interno del blog, o añadir algún Gadget, pero eso normalmente va indicado con el código de turno y a demás se explica como hacerlo, así que ahora no os agobiéis con esto, simplemente es una aclaración a demás de que esto es mas fácil de lo que parece.








Hemos llegado aun punto que ya sabemos usar mas o menos el código CSS, ahora nos falta saber como hacer que todo eso funcione, pues bien, para ponerlo en marcha necesitaremos el siguiente código


<h4 class="swipe1">
Ejemplo<span rel="Ejemplo"></span> </h4>


Comparado a lo otro, podreis ver que este código es bien pequeñito, esto se debe a que simplemente aquí estamos diciendo que use el estilo "swipe1" (acordaos de lo de Menganito y sus ropas), para ello se usa las etiquetas <h4 class="swipe1"> </h4> y luego tenemos la parte de Ejemplo<span rel="Ejemplo"></span> esto es lo que se verá modificado por el CSS.
El primer "ejemplo", es lo que leemos sin pasar el ratón por encima, el segundo "ejemplo" es el que leeremos después de pasar el cursor por encima.

Como veis, lo de arriba es mucho bla bla bla bla, para luego encontrarnos con este pequeño código, en fin, os invito a que creéis una entrada y copieis los 2 códigos para que veais que sois capaces de hacer esto, también os invito a que cambiéis las 2 palabras "ejemplo" del segundo código y pongáis vuestro nombre o otra cosa que queráis, incluso poner 2 palabras diferentes por hacer un rato el chorras, eso también os enseñará a ver como funciona un poco el segundo código.



Espero que esto os sirva de ayuda y lo que más espero, es que se entienda todo lo que os he contado.
Si veis algún código CSS/html para blogger y no os queda claro como colocarlo, no dudeis en preguntar e intentaré ayudaros, eso si, en modificaciones no me meteré mucho, tampoco soy experta en estas cosas.
un saludo.



2 comentarios:

Fany estuvo aqui dijo...

Hola

Jajajaja como yo soy muy cabezota solo entendí la primera parte XD ._. pero bueno, el caso es que le entendí, lo explicaste muy claro, acabas de ahorrarme muchos problemas =D

Saludos

una_nenna dijo...

Jajaja, nada, paciencia con esto y a prueba error es lo mejor para aprender ^^
Igualmente, edité de nuevo la entrada para explicar mejor las cosas a demás de un nuevo código que añadí y ahora se ve las cosas algo más claro jeje.

un saludo.

Publicar un comentario