Bienvenidos al foro de Hive Mind

Aquí se intentarán resolver dudas sobre informática y compartir conocimientos sobre edición de vídeos, web y diseño
Avatar de Usuario
Por IndiferenteJack
#1524
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:
Código: Seleccionar todo
.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
Más información en http://codepen.io/shshaw/details/gEiDt donde también encontraréis otro tipo de centrados.

Elemento centrado vertical y horizontalmente sin saber el tamaño:
Código: Seleccionar todo
.centrado-porcentual {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
Diseño web responsive - Media Queries:
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
@media screen and (max-width: 768px) {  
    body {
        background-color: lightblue;
    }
}
Si el navegador es más pequeño que 768px de ancho, el color de fondo de body cambiará a azul.
0