Ir al contenido principal

Entradas

Mostrando entradas de abril, 2017

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"><