NOVEDADES
Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas

29 marzo 2020

Caja de texto con cambio de color de fondo progresivo | CSS3 | Blogger

Tutoriales Blogger, CSS3, HTML, Personalizar blog

Información

Vamos a ver cómo crear una caja de texto que cambia de color de forma progresiva al acercar el cursor usando CSS3 y HTML.

Antes que nada, siempre es recomendable hacer copia de seguridad de nuestra plantilla.

En el panel de configuración de Blogger pinchamos en Tema - Editar HTML

Tutoriales Blogger
Vamos al cierre de ]]></b:skin> y antes agregamos lo siguiente:

.caja2 { 
font-weight: 400;
color: #000000;
border: 1px solid #000000;
background:#e6e6e6;
-webkit-transition:background 1s ease-out;
-moz-transition:background 1s ease-out;
-o-transition:background 1s ease-out;
-ms-transition:background 1s ease-out;
transition:background 1s ease-out;
}
.caja2:hover{
color: #ffffff;
background:#ff7d00;
}

Si en vuestra plantilla no hay ninguna entrada con caja, no es necesario poner caja2

Guardamos los cambios y en el fragmento de texto de la entrada del blog donde queremos aplicar este efecto colocamos el código así:

<div class="caja2">Tu texto</div>

Guardamos todo y listo ya tenemos el efecto aplicado, como podemos ver en esta grabación de pantalla.





Si queremos personalizar los colores aquí vemos cada linea a cual pertenece:

Caja de texto con cambio de color de fondo progresivo | CSS3 | Blogger

Espero que os haya gustado, ya podéis personalizar un poco más vuestro blog.

20 agosto 2018

Caja de texto personalizable en blogger con CSS y HTML

Tutorial: Caja personalizada de texto en blogger con CSS y HTML

Información

Resalta partes de un post con una caja de texto personalizable con los colores de tu blog, redondeado de esquinas y bordes.

Como siempre que vamos a tocar la plantilla antes de nada debemos descargar una copia de la misma.

Repasemos como hacerla




Se descargará un archivo con terminación .xml

Hecho esto vamos a clicar en Tema > Editar HTML


En el cuerpo del código HTML pulsamos CTRL+F y escribimos ]]></b:skin>

Justo antes de este cierre colocaremos el siguiente estilo CSS

/*----------- CAJA ----------- */

.caja {
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
color: #ffffff;
font-size: 18px;
font-weight: 400;
text-align: center;
background: #ff7d00;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
border-radius: 35px 0px 35px 0px;
-moz-border-radius: 35px 0px 35px 0px;
-webkit-border-radius: 35px 0px 35px 0px;
border: 0px solid #5878ca;
}

En la siguiente imagen vemos los principales parámetros a personalizar

Al terminar clicamos en Guardar tema y vamos a ver el código que añadiremos a nuestro post para llamar desde el HTML el estilo antes introducido.

<code>
<div class="caja">Aquí el texto a resaltar</div>
</code>
(Sin el code)

Y este es el efecto conseguido
 
Copyright © 2014 AccionglobalXSoft. Designed by OddThemes