Ir al contenido principal

Entradas

Mostrando entradas de 2017

Como centrar un DIV

En realidad es muy sencillo centrar elementos con CSS3. Hay muchos blogs que dan respuestas muy incorrectas, cuando en realidad lo único que debemos hacer es rezarle a nuestro dios FLEX-BOX. Lo primero que hay que hacer es aplicar flex a los displays de todos los contenedores de tu web, y manejarte con ello durante el resto del proyecto. Ejemplo: Flexbox HTML <!DOCTYPE html> <html> <head>                 <link rel="stylesheet" type="text/css" href="styles.css">                 <title></title> </head> <body>                 <section class="contenedor">                                <div class="centrado"></div>                 </section> </body> </html> CSS body{                 display: flex; } .contenedor{                 display: flex; } .centrado{                 display: flex; } Alin

Como alinear un elemento horizontalmente y verticalmente con CSS3

En realidad es muy sencillo centrar elementos con CSS3. Hay muchos blogs que dan respuestas muy incorrectas, cuando en realidad lo único que debemos hacer es rezarle a nuestro dios FLEX-BOX. Lo primero que hay que hacer es aplicar flex a los displays de todos los contenedores de tu web, y manejarte con ello durante el resto del proyecto. Ejemplo: Flexbox HTML <!DOCTYPE html> <html> <head>                 <link rel="stylesheet" type="text/css" href="styles.css">                 <title></title> </head> <body>                 <section class="contenedor">                                <div class="centrado"></div>                 </section> </body> </html> CSS body{                 display: flex; } .contenedor{                 display: flex; } .centrado{                 display: flex; } Alinea

Como hacer una tarjeta 3D que gire con CSS3

Como hacer una carta 3D que se voltee con CSS Para crear una tarjeta 3d debes seguir los siguientes pasos: 1-       Crear el documento HTML con su estructura básica crear un documento css y vincularlos mediante la etiqueta 2-       Crear un contenedor, que será la carta, y dentro de él otros dos contenedores, que serán cada lado de la carta. Es recomendable que ambos lados de la carta tengan dos clases: una compartida y la otra individual. Todo esto dentro de la sección del sitio en donde queramos ubicarlos. Ejemplo: <!DOCTYPE html> <html> <head>                <link rel="stylesheet" type="text/css" href="styles.css">                <title></title> </head> <body>                <section class="seccion">                                <div class="contenedor">                                                <div class="lado frente"><