Recursos Web - CSS
MensajePublicado:12 Feb 2017 05:53
Después de un tiempo sin poner nada le toca el turno a CSS mismo. Uno de los recursos que más interesante me parece destacar es este:
Texto absoluto centrado:
Elemento centrado vertical y horizontalmente sin saber el tamaño:
Quizás te estés preguntado que carajo es <<Media Query>>, en resumidas cuentas es una triquiñuela que añadieron en CSS3. Esta usa la regla @media para incluir un bloque de propiedades de CSS bajo una condición que ha de ser cumplida.
Ejemplo:
Texto absoluto centrado:
Código: Seleccionar todo
Más información en http://codepen.io/shshaw/details/gEiDt donde también encontraréis otro tipo de centrados..Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}Elemento centrado vertical y horizontalmente sin saber el tamaño:
Código: Seleccionar todo
Diseño web responsive - Media Queries:.centrado-porcentual {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}Quizás te estés preguntado que carajo es <<Media Query>>, en resumidas cuentas es una triquiñuela que añadieron en CSS3. Esta usa la regla @media para incluir un bloque de propiedades de CSS bajo una condición que ha de ser cumplida.
Ejemplo:
Código: Seleccionar todo
Si el navegador es más pequeño que 768px de ancho, el color de fondo de body cambiará a azul.@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}