CAJA DE HERRAMIENTAS CSS DIVI THEME

En esta sección compartiremos pequeños fragamentos de codigos CSS
algunos muy básicos otros un poco más complejos.
Pero estoy seguro que serán de mucha utilidad para sus proyectos

/* ************************** */
/* ** Enlaces/ ** *
/* ************************** */

Color: black  (Color de letra)    /    p a:hover { color: #f05c27 (Cambio de color cuando pasamos el ratón )
Teniendo este css en Themes divi – optiones -css personalizado, podemos hacer los cambios globlales

p a:link {
color: green; text-decoration: none }
p a:active { color: black; text-decoration: none }
p a:visited { color: black; text-decoration: none }
p a:hover { color: ##f05c27; text-decoration: none }

/* ********************************************/
/* ** CAMBIAR COLOR H1, H2 y H3 ***/
/* ******************************************/

Hay veces que tenemos que cambiar los Titulos de H1, H2, Y H3 todas las H.
Pero algunos no sabemos como, y tenemos que hacerlo manualmente
MUY pero MUY TRABAJOSO.

Este código básico sirve para cambiar todos los títulos

h1 {
color: #f05c27;
}

h2 {
color: #3cfc8f;
}

h3 {
color: #3caefa;
}

HEADING 1

HEADING 2

HEADING 3

/* ************************** */
/* ** COLOR STRONG(NEGRITAS) Y VIÑETAS** *
/* ************************** */

Cuando en un parrafo tenemos letras en negritas y viñetas.
Pero tenemos que cambiar el color de ellos necesitaremos mucha paciencia si lo hacemos manualmente
pero con este pequeño código nos ahorraremos mucho trabajo


strong { 
color: #6f9bbc; }

li{
color: #036cbc;
}
li span{
color: grey;
}
<ul>
 	<li><span>ITEM 1</span></li>
 	<li><span>ITEM 2</span></li>
 	<li><span>ITEM 3</span></li>
 	<li><span>ITEM 4</span></li>
</ul>

SERVICIOS:

  • ITEM 1
  • ITEM 2
  • ITEM 3
  • ITEM 4

/* ************************** */
/* ** IMAGEN CIRCULAR / ** *
/* ************************** */

Hemos visto muchos efectos en internet que tienen fotos redondas.
Se ven muy bien, pero que pasa cuando el cliente nos pide ese efecto 😮
Bueno aquíe les dejo un pequeño codigo css para aplicarlos a sus imagenes 😀


.circular--portrait {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}

.circular--portrait img {
width: 100%;
height: auto;
}

Suscríbete a nuestro boletín.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Shares