Cuando empezamos a editar nuestro blog, y nos metemos en la edición HTML, todoshemos pasado por ese momento en que quedas como 'whaaaat?' porque no nacemos familiarizados con los términos "div style", "border-radius" o "text-shadow" acompañados de números, simbolos, signos, corchetes, paréntesis, etc,etc. Y ni hablar decuando nos metemos en un tutorial y nos presentan algo como esto:
.ch-item:hover .ch-info p a{
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-moz-transform: translateX(0px) rotate(0deg);
-o-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
¿Qué clase de magia es esta? Pues dejame decirte que esto es CSS , y son las propiedades que nosotros le ponemos a lo que estemos modifcando (un texto, una caja, etc, etc). Comparándolo con Photoshop, cada uno de esos términos CSS vendría ser las'propiedades de capas' de PS que nosotros utilizamospara crear los estilos (como puede ser trazo, superposición de color, borde,etc)
Por eso he decidido crear una útil lista de alguna de estas propiedades para que sepas exactamente como modificar algoen el momento que quieras hacerlo. Empecemos entonces:
Cajas
Todas las cajas se inician de esta forma:
<div style="PROPIEDADES">
Y terminan en:
</div>
Y todo lo que vaya dentro será parte del contenido, ¿se entiende?Vayamos a un ejemplo:
<div style="Propiedades">Ola Ke Ase'?</div>
No verán ningún cambio notorio, pues no hemos puesto nada de Css en la parte de propiedades,así que el texto se mostrará tal cual estaba, a pesar de que haya colocado el div style y lo haya cerrado con su respectivo div.
Entonces, Vir....
¿Qué propiedades ponemos colocar?
¡Muchas! ¡Muchísimas! Y nunca nadie termina de conocerlas todas.Pero antes debes saber que las propiedades se deben colocar separadas entre 'punto y coma' (;), como cuando en las etiquetas de blogger, que las separamos con coma. Pero en propiedades CSS se utiliza ;
Una vez sabido eso, empecemos con algunas propiedades básicas:
Veamos el siguiente ejemplo y más tarde lo analizamos:
<div style="width:400px; height:100px; background-color:#bcbcbc;"></div>
Resultado:
Análisis:
width: el ancho,en este caso 400px
height: el alto. Números en medidas (como cm, dm, etc); por lo general se usan px. En este caso 100px
background-color: color de fondo. Se pueden usar términos como 'black', 'white', o usar códigos HTML{cuando ustedes seleccionan un color en photoshop, debajo del todo hay una serie de seis digitos con un # delante, por ejemplo: #000000 es el color negro; #ffffff el el blanco; #bcbcbc es el gris, etc}
|
