jueves, 10 de mayo de 2018

Cajitas con efectos

¡Hola, hola, mis amores! ¿Cómo están? Espero que de las mil maravillas <3 Tuve un día terribleente agotador >.< así que les traigo una entrada sencillita ¿Vieron el índice de Fanfics? A mi querida Cath le interesó cómo hacer esas cajitas tan bonitas, así que aquí me ven con tutorial para que puedan ponerlas en su blog y modificarlas a gusto <3

Este es un código sencillito en HTML, CSS, con efecto Hover ¿qué es el hover? Es la transición que tiene la imagen (cuando se oculta y se muestra el texto en la cajita que vieron, por ejemplo), aunque, se lo puede utilizar para absolutamente todo (como la cabecera que si le pasan el mouse los iconitos cambian de color). Lo único que tienen que hacer es jugar con algunas variables para poder llegar al efect deseado. Yo les dejaré los el utilizado en el tema que les mostré arriba.



Género
Romance
Fandom
Personajes
Nombre de personajes
Sinopsis
De qué trata la historia
Estado: Terminado
<div id="titulof">
<a href="LINK AL TEXTO"><b>Título</b></a></div>
<div id="cajitazoom1">
<img src="LINK IMAGEN"style="position:relative; margin-top:-10px; margin-left:-10px;" />          
<div id="cajitazoom2">
<b>Género</b>
<div id="linkfo">
Romance     </div>
<b>Fandom</b>
<div id="linkfo">
<a href="LINK">NOMBRE</a>      </div>
<b>Personajes</b>
<div id="linkfo">
Nombre de personajes</div>
<div id="sinopsis">
<b>Sinopsis</b>
De qué trata la historia</div>
</div>
</div>
<div id="titulof">
<b>Estado:</b> Terminado</div>
<style type="text/css">#cajitazoom1{background:#20221d;width:250px;height:250px;overflow:hidden;border: 4px solid #8ae78e;} #cajitazoom2{background:#ffffff;width:250px;height:250px;overflow:hidden;position:relative;top:-234px;transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;-webkit-transform: scale(0.2);  -ms-transform: scale(0.2);  -o-transform: scale(0.2);  transform: scale(0.2);opacity:0;} #cajitazoom1:hover #cajitazoom2{-webkit-transform: scale(1);  -ms-transform: scale(1);  -o-transform: scale(1);  transform: scale(1);opacity:1;}#titulof{background:#8ae78e;width:254px;height:auto;padding:1px;margin:1px;text-align:center;}#linkfo {
background:#8ae78e;color:#000000;width:250px;height:auto;padding:1px;margin:1px;text-align:center;}sinopsis{overflow:auto; text-align:justify;margin:2px;padding:2px;height:15px;}#img {position:relative; top-15px;left:-15px;}</style>

Bien, ese es el código para que se vea tal cuál yo lo he usado. ¡Zonas editables! Son las que están con colorcito y ahora, les diré qué deben cambiar y cómo.

background: este es el fondo de la primera cajita de la imagen
border: borde de la caja, el número indica el ancho, solid el tipo de borde y el resto es el color. Tienen que usar colores hexadecimal. Pueden usar cualquier programa de diseño para obtener el código, buscar en Google. Les recomiendo que le den un vistazo a Cerotec, no sólo les da el código de los colores, sino que están organizados en bonitos degrados para combinarlos. Sumamente práctico para hacer algo bonito y a tono <3
width y heigh: ancho y altura de la cajita. 
background: este es el fondo de la segunda cajita, aquí aparecerá nuestro texto, así que recomiendo que usen colores que contrasten bien con el fondo para que sean legibles.
width y heigh: ancho y altura de la cajita.  
background: este es el fondo de la cajita del título.
width y heigh: ancho y altura de la cajita. 
background: este es el fondo de las cajitas que aparecen con el texto (las que dicen Sinopsis, género, etc.)
width: ancho de las cajitas internas. Recomiendo dejarles el mismo ancho que las anteriores.


Ahora, si quieren que aparezcan en columnas lo único que tienen que hacer es agregar una tabla ¿cómo? Se los dejo aquí abajo: 

 
 



Género
Romance
Fandom
Personajes
Nombre de personajes
Sinopsis
De qué trata la historia
Estado: Terminado

Género
Romance
Fandom
Personajes
Nombre de personajes
Sinopsis
De qué trata la historia
Estado: Terminado

<table><tbody>
<tr><td><div id="titulof">
<a href="https://www.blogger.com/LINK%20AL%20TEXTO"><b>Título</b></a></div&gt
<div id="cajitazoom1">
<img src="LINK IMAGEN" style="margin-left: -10px; margin-top: -10px; position: relative;" />         
<div id="cajitazoom2">
<b>Género</b>
<div id="linkfo">
Romance     </div>
<b>Fandom</b>
<div id="linkfo">
<a href="https://www.blogger.com/LINK">NOMBRE</a>      </div>
<b>Personajes</b>
<div id="linkfo">
Nombre de personajes</div>
<div id="sinopsis">
<b>Sinopsis</b>
De qué trata la historia</div>
</div>
</div>
<div id="titulof">
<b>Estado:</b> Terminado</div>
</td><td><div id="titulof">
<a href="https://www.blogger.com/LINK%20AL%20TEXTO"><b>Título</b></a></div>
<div id="cajitazoom1">
<img src="LINK IMAGEN" style="margin-left: -10px; margin-top: -10px; position: relative;" />         
<div id="cajitazoom2">
<b>Género</b>
<div id="linkfo">
Romance     </div>
<b>Fandom</b>
<div id="linkfo">
<a href="https://www.blogger.com/LINK">NOMBRE</a>      </div>
<b>Personajes</b>
<div id="linkfo">
Nombre de personajes</div>
<div id="sinopsis">
<b>Sinopsis</b>
De qué trata la historia</div>
</div>
</div>
<div id="titulof">
<b>Estado:</b> Terminado</div>
</td></tr>
</tbody></table>
<style type="text/css">#cajitazoom1{background:#20221d;width:250px;height:250px;overflow:hidden;border: 4px solid #8ae78e;} #cajitazoom2{background:#ffffff;width:250px;height:250px;overflow:hidden;position:relative;top:-234px;transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;-webkit-transform: scale(0.2);  -ms-transform: scale(0.2);  -o-transform: scale(0.2);  transform: scale(0.2);opacity:0;} #cajitazoom1:hover #cajitazoom2{-webkit-transform: scale(1);  -ms-transform: scale(1);  -o-transform: scale(1);  transform: scale(1);opacity:1;}#titulof{background:#8ae78e;width:254px;height:auto;padding:1px;margin:1px;text-align:center;}#linkfo {
    background:#8ae78e;color:#000000;width:250px;height:auto;padding:1px;margin:1px;text-align:center;}sinopsis{overflow:auto; text-align:justify;margin:2px;padding:2px;height:15px;}#img {position:relative; top-15px;left:-15px;}</style>


No se olviden, que pasar usar estos códigos deben ir a la pestaña HTML en las entradas, pegar el texto y editarlos, ahí, cuando lo publiquen, les quedará tal cual lo ven aquí (que pueden ir intercambiando ente la entrada entre redactar y HTML, eso no afecta al código, sólo recuerden hacerlo así, así será más fácil y no tendrán problemas de visualización.

Iba a hacer la entrada con los tips para hover, pero va a quedar excesivamente larga, así que quedará para una próxima entrada.

Espero les sirva y si tienen dudas, me avisan y los ayudo con lo que haga falta <3

¡Se cuidan!

¡Un abrazo!

10 comentarios:

  1. Muy bonitas las cajitas y la verdad que son chulas si me animo la incorporó aunque veremos a ver si me sale bien ..de todos modos se Agradece la muestra de ayudar que tienes ..
    Un buen jueves muakkk.

    ResponderEliminar
    Respuestas
    1. Qué bueno que te haya gustado <3 Ojalá te sirva.

      ¡Un abrazo!

      Eliminar
  2. Caramba, desconocía este efecto, Roxana. Te agradezco mucho el aporte. Me lo guardo para pensar cómo darle uso. Un abrazo!!

    ResponderEliminar
    Respuestas
    1. Espero subir pronto algunos truquitos más así <3

      ¡Un abrazo!

      Eliminar
  3. Uy se ve bien haber si lo intento. Soy un desastre para esas cosas.

    ResponderEliminar
    Respuestas
    1. Si necesitas ayuda, aquí me tienes
      ¡Un abrazo!

      Eliminar
  4. !Wow, excelente entrada de tutorial!
    Que preciosas cajitas, tambien me gustan!
    Gracias por compartirlas, Roxana.
    Abrazo

    ResponderEliminar
    Respuestas
    1. ¿Verdad que sí? Me alegro que gusten, si las quieres usar, eres libre de llevar el código <3

      ¡Un abrazo!

      Eliminar
  5. WoW, qué curioso, aunque siempre me da miedo meterle mano al html por si fastidio la entrada jajaja
    Qué genial que compartas estas cosas en tu rincón.
    ¡Un besazo!

    ResponderEliminar
  6. Mira que es cosa de probar nada más y perderle el miedo. De última, siempre tener una copia de respaldo de la entrada cosa de no tener que corregir nada de nada XD yo te recomendaría también, si te animas a probarla, que lo hagas primero en un blog de prueba, como para que le pierdas el miedo a meter el HTML, una vez pases eso, solita lo harás sin problema <3

    ¡Besos!

    ResponderEliminar

¡Hola! ¿Cómo estás? Gracias por pasar a leer mi blog y agradezco que vayas a comentar. Me encanta leer sus opiniones.

Pueden escribir lo que gusten, tienen todo el espacio que quieran para comentar ¡Y no se echen para atrás por ser una entrada vieja! Yo responderé el comentario sin importar la fecha <3

¡Qué tengas un lindo día!

¡Un abrazo enorme!

Sueños etiquetados