Share
Es hora de un poco más de CSS3 vs. Photoshop, y en esta ocasión vamos a profundizar en las transformaciones. Cambiar la forma de un objeto es una gran parte del conjunto de herramientas de cualquier editor gráfico. En estos días, con CSS3 podemos rotar, escalar y sesgar la forma de un elemento sin la necesidad de Photoshop. Vamos a intentarlo!
Nota: Todos los ejemplos siguientes se probaron en Mozilla Firefox, Safari y Chrome. Si quieres obtener algo similar en IE o en cualquier otro navegador, deja un comentario y estaré encantado de ayudarte..
En este tutorial usaremos Fondos degradados, Sombras de cuadro y Fondos de imágenes múltiples, así como Efectos de transición y Estilos de opacidad y transparencia, temas que se tratan en los primeros tres tutoriales de esta serie:
Rotar un elemento es una de las características más básicas de cualquier editor gráfico. El efecto de Rotación utiliza un valor de Coordenadas radiales con ángulos de 0 a 180 (tanto positivo como negativo). Un ángulo positivo se convierte en una rotación hacia la derecha y un ángulo negativo significa una rotación hacia la izquierda.
En el pasado, normalmente era muy complicado rotar un elemento en HTML, ahora con CSS3 todo es muy simple:
Aquí están las sintaxis de una transformación de rotación:
transformar: rotar (
Ahora establece un montón de diferentes rotaciones de ángulo para las secciones HTML:
/ * Transforma * / / * Gira 15 grados * / .rotate15 -moz-transform: rotate (15deg); -webkit-transform: rotate (15deg); / * Girar 45 grados * / .rotate45 -moz-transform: rotate (45deg); -webkit-transform: rotate (45deg); / * Girar -30 grados * / .rotate-30 -moz-transform: rotate (-30deg); -webkit-transform: rotate (-30deg); / * Girar 180 grados (texto invertido) * / .rotate180 -moz-transform: rotate (180deg); -webkit-transform: rotate (180deg); / * Girar 270 grados (texto vertical) * / .rotate270 -moz-transform: rotate (270deg); -webkit-transform: rotate (270deg);
Como puede ver, la manera en que determinamos las transformaciones es exactamente como en Photoshop.
Otra opción básica de transformación que puede obtener con cualquier editor gráfico es Scale. El escalado es bastante simple, aumenta o reduce el ancho y la altura de cualquier elemento o grupo de elementos.
Con CSS3 puede escalar elementos de manera muy parecida a la de Photoshop, las sintaxis para escalar a lo largo de ambos ejes son:
transformar: escala (
transformar: scalex (
transformar:
Veamos un montón de ejemplos:
/ * Escala 50% * / .scale50 -moz-transform: scale (.50); -webkit-transform: scale (.50); / * Escala 120% * / .scale120 -moz-transform: scale (1.2); -webkit-transform: scale (1.2); / * Escala del 25% al 75% en: hover * / .scale25-75 -moz-transform: scale (.25); -webkit-transform: scale (.25); -webkit-transición: todas las 1s de facilidad de entrada; -moz-transición: todas las 1s de facilidad de entrada; .scale25-75: hover -moz-transform: scale (.75); -webkit-transform: scale (.75); / * Escala 50% de ancho * / .scale50x -moz-transform: scalex (.50); -webkit-transform: scalex (.50); / * Escala 50% de altura * / .scale50y -moz-transform: scaley (.50); -webkit-transform: scaley (.50);
Ahora velo corriendo:
Pasando a otra transformación muy básica pero poderosa: sesgar. Al cambiar un ángulo, puede desplazar las líneas paralelas de una forma creando una ilusión de perspectiva que se puede usar como un efecto 3D.
Con CSS3 es posible sesgar una forma igual que en Photoshop, veamos algunos ejemplos:
/ * Sesgo * / / * Sesgo 30 grados X en el hover * / .skew30x -webkit-transition: todos los 1s de facilidad de entrada / salida; -moz-transición: todas las 1s de facilidad de entrada; .skew30x: hover -moz-transform: skewx (30deg); -webkit-transform: skewx (30deg); / * Sesgo 15 grados X * / .skew15x -moz-transform: skewx (15deg); -webkit-transform: skewx (15deg); / * Sesgo -15 grados X * / .skew-15x -moz-transform: skewx (-15deg); -webkit-transform: skewx (-15deg); / * Sesgo 25 grados Y * / .skew25y -moz-transform: skewy (25deg); -webkit-transform: skewy (25deg); / * Sesgo -25 grados Y * / .skew-25y -moz-transform: skewy (-25deg); -webkit-transform: skewy (-25deg);
Intentemos combinar estilos de transformación para crear algunos efectos radicales:
/ * Combinando Transformaciones * / .transformado -moz-transform: rotate (10deg) scale (1.3) skewy (15deg) skewx (-30deg); -webkit-transform: rotate (10deg) scale (1.3) skewy (15deg) skewx (-30deg;
A continuación se muestran algunos ejemplos divertidos de lo que se puede lograr utilizando transformaciones. Comenzaremos con mis representaciones de Photoshop de los diseños, luego veremos si podemos obtener el mismo resultado con CSS3 (puede descargar la fuente PSD en los archivos de tutoriales).
En primer lugar, configurar algunos CSS generales:
/ * Restablecer * / html, cuerpo, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, forma, fieldset, tabla, th, td , img margen: 0; relleno: 0; frontera: 0px; encabezado, sección, pie de página, aparte, navegación, artículo, figura pantalla: bloque; / * Fin de reinicio * / / * Configurar algunos estilos básicos * / body font-family: Arial, Helvetica, sans-serif; color: # 333; html altura: 100%; / * Para agregar un gradiente de CSS3 de cuerpo de página completo, debe establecer esta altura en 100% * / .wrapper margen: 0px auto; ancho: 960px; relleno: 60px 0px 60px 0px; .left text-align: left; .right text-align: right; .center text-align: center; / * Fondo del cuerpo * / body altura: 100% ; / * Para agregar un gradiente de CSS3 del cuerpo de la página completa, debe establecer esta altura en 100% * / background-repeat: no-repeat; imagen de fondo: -moz-lineal-gradiente (arriba, # 0096f5, # 00416a); imagen de fondo: -webkit-gradient (linear, 0% 0%, 0% 100%, desde (# 0096f5), hasta (# 00416a), color-stop (1, # FFF)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a)"; / * Para evitar tener una franja en blanco en la parte inferior, hay un par de correcciones * / / * background-attach: corregido; * / / * Funciona bien excepto en IE * / background-color: # 00416a; / * El fondo se verá bien cuando se desplace, agregando el color de fondo en toda la página * / / * un estilo básico para una columna * / .row ancho: 50%; flotador izquierdo; margen inferior: 10px; altura: 340px; borde inferior: 1px punteado #FFF;
En el primer efecto, tenemos un fan de tres divs y una etiqueta de encabezado. El truco aquí es usar la propiedad z-index para organizar correctamente el contenido.
La estructura HTML:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lo primero que se puede hacer es usarlo en la mano, pero si lo hacemos, no tenemos que recurrir a ninguna parte de la misma forma. Duis aute ire dolor en reprehender en voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Ahora el estilo de los divs y el título:
/ * Caja principal * / .box width: 190px; altura: 190px; color de fondo: rgba (255,255,255, .85); / * Esquinas redondeadas * / -moz-border-radius: 10px; -webkit-border-radius: 10px; radio del borde: 10px; / * Deshazte de Bleed * / -moz-background-clip: relleno; -webkit-background-clip: padding-box; clip de fondo: caja de relleno; / * Establecer la posición * / posición: relativo; izquierda: 0px; arriba: 0px; / * Mostrarlo en la parte superior * / z-index: 3; / * Un estilo de párrafo básico * / .box p color: # 02263D; relleno: 10px; tamaño de fuente: 11px; línea de altura: 140%; / * Mostrar también en la parte superior * / z-index: 3; / * Primera capa translúcida * / .box2 / * Establezca el color de fondo con RGBA * / background-color: rgba (255,255,255, .5); / * Establecer la posición * / izquierda: 20px; superior: -165px; / * Muéstralo un nivel detrás del cuadro principal * / z-index: 2; / * Rotate Trabsform * / -moz-transform: rotate (15deg); -webkit-transform: rotate (15deg); / * Segunda capa translúcida * / .box3 / * Establezca el color de fondo con RGBA * / background-color: rgba (255,255,255, .25); / * Establecer la posición * / izquierda: 30px; arriba: -325px; / * Muéstralo dos niveles detrás de la caja principal * / z-index: 1; / * Rotate Trabsform * / -moz-transform: rotate (30deg); -webkit-transform: rotate (30deg); / * Título vertical * / .title / * Estilos de texto * / color: #FFF; transformación de texto: mayúsculas; tamaño de fuente: 14px; / * Establecer la posición * / posición: relativo; izquierda: -255px; arriba: -45px; / * Rotate Transform * / -moz-transform: rotate (-90deg); -webkit-transform: rotate (-90deg);
Puede rotar independientemente todos los elementos dentro de un elemento html. Esto, combinado con los efectos de transición, puede ser una excelente manera de agregar enfoque a algunas áreas de sus diseños. Tomemos por ejemplo la siguiente maqueta de HTML:
Ahora gire la imagen y la caja del contenedor en diferentes ángulos (hacia la derecha y hacia la izquierda) dentro de la :flotar pseudo clase.
/ * Estilo de caja * / .box4 / * Ancho y relleno * / ancho: 220 px; altura: 220px; relleno: 10px; / * Color de fondo translúcido con RGBA * / color de fondo: rgba (255,255,255, .85); / * Esquinas redondeadas * / -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; radio del borde: 10px; / * Deshazte de Bleed * / -moz-background-clip: relleno; -webkit-background-clip: padding-box; clip de fondo: caja de relleno; / * Habilita los efectos de transición * / -webkit-transition: todos los 1s de facilidad de entrada; -moz-transición: todas las 1s de facilidad de entrada; transición: todas las 1s de fácil salida; / * Establezca los estilos de la imagen dentro de la sección * / .box4 img / * Un borde bonito * / border: 1px solid #FFF; / * Una sombra de cuadro para agregar un poco de sensación profunda * / box-shadow: 5px 5px 5px rgba (0,0,0,0.25); -moz-box-shadow: 5px 5px 5px rgba (0,0,0,0.25); -webkit-box-shadow: 5px 5px 5px rgba (0,0,0,0.25); / * Habilita los efectos de transición * / -webkit-transition: todos los 1s de facilidad de entrada; -moz-transición: todas las 1s de facilidad de entrada; -o-transición: todos los 1s de facilidad de entrada; -ms-transición: todas las salidas son fáciles de usar; transición: todas las 1s de fácil salida; / * Girar al desplazar * / .box4: desplazar / * Rotar -15deg CCW * / -moz-transform: rotar (-15deg); -webkit-transform: rotate (-15deg);
Vamos a llevar las cosas un paso más allá. Con Skew Transforms puedes hacer una especie de profundidad 3D para tus secciones. Intentemos crear una forma alternativa de mostrar un elemento desde una galería multimedia, usando un título, una descripción y una etiqueta de video HTML5.!
Vamos a empezar con la maqueta HTML:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Video de muestra
Desde un
Primero, configura el fondo de la sección del contenedor. El siguiente código genera un degradado brillante que crea una especie de "horizonte" para simular los siguientes elementos.
/ * Configurar el contenedor * / .row2 / * Ajustar el tamaño y la posición * / ancho: 100%; altura: 650px; flotador izquierdo; relleno superior: 10px; / * Sabe que puede escalar toda la sección * / -moz-transform: scale (.90); -webkit-transform: scale (.90); / * Aplique un fondo degradado * / fondo: -degrolencia lineal moz (arriba, rgba (0,105,175,0) 0%, rgba (0,105,175,0.85) 35%, rgba (0,80,130,0.95) 35%, rgba ( 0,80,130,0) 100%); Fondo: -webkit-gradiente (lineal, superior izquierdo, inferior izquierdo, desde (rgba (0,105,175,0)), color stop (0,35, rgba (0,105,175,0.85)), color stop (0,35, rgba (0,80,130) , 0.95)), a (rgba (0,80,130,0)));
Establecer los estilos comunes para el texto..
/ * Estilos comunes (nada realmente difícil aquí) * / .top h2 font-size: 20px; color: #FFF; transformación de texto: mayúsculas; relleno: 25px; .side p font-size: 20px; color: #FFF; fuente-peso: normal; relleno: 10px;
Ahora estilo el contenedor frontal, Las etiquetas pueden manejar casi todos los estilos CSS que conocemos y comportarse como cualquier otro elemento de nivel de bloque HTML.
/ * Configuremos el contenedor frontal * / .front / * Establecemos la posición * / position: relative; izquierda: 220px; arriba: 132px; / * Dimensiones * / ancho: 355px; altura: 200px; color de fondo: #FFF; / * Skew Y Transform * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg);
Ahora la sección lateral (puede ser el video breve, o un texto introductorio.
/ * Establezca la posición del contenedor lateral * / .side / * (junto al contenedor frontal) * / position: relative; izquierda: 575px; arriba: -45px; ancho: 130px; altura: 200px; / * Establecer un fondo de degradado * / background-image: -moz-linear-gradient (left, # 000000, # 313131); imagen de fondo: -webkit-gradient (linear, 0% 0%, 100% 0%, desde (# 000000), hasta (# 313131), color-stop (1, # 313131)); / * Inclínelo * / -moz-transform: skewy (-30deg); -webkit-transform: skewy (-30deg); / * En caso de que el texto sea más grande que el contenedor * / overflow: hidden;
Vamos a diseñar el título.
/ * El título * / .top / * Establezca la posición * / position: relative; izquierda: 220px; superior: -360px; ancho: 355px; altura: 75px; / * Un fondo degradado * / imagen de fondo: -moz-lineal-gradiente (izquierda, # 000000, # 313131); imagen de fondo: -webkit-gradient (linear, 0% 0%, 100% 0%, desde (# 000000), hasta (# 313131), color-stop (1, # 313131)); / * Inclínelo para que coincida con la sección delantera * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg);
Ahora que tenemos los divs principales en su lugar adecuado, agregaremos un par de "reflexiones de piso" (divs con un fondo degradado RGBA) solo para darle a esta sección un efecto más brillante.
.frontreflection / * Establezca la posición justo debajo de la sección delantera * / position: relative; arriba: -147px; izquierda: 220px; ancho: 355px; altura: 200px; / * Inclínelo para que coincida con el ángulo de perspectiva * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg); / * Establezca el fondo del degradado (con el color del tope inferior transparente) * / fondo: gradiente lineal-moz (arriba, rgba (182,182,182,1) 0%, rgba (182,182,182,0) 100%); Fondo: -webkit-gradiente (lineal, superior izquierdo, inferior izquierdo, de (rgba (182,182,182,1)), a (rgba (182,182,182,0))); / * Configura la opacidad que quieras * / opacidad: 0.25; .sidereflection / * Establezca la posición justo debajo de la sección lateral * / position: relative; izquierda: 575px; arriba: -320px; ancho: 130px; altura: 200px; / * Coincidir con el ángulo de sesgo * / -moz-transform: skewy (-30deg); -webkit-transform: skewy (-30deg); / * Establezca el gradiente de fondo * / fondo: -moz-lineal-gradiente (arriba, rgba (73,73,73,1) 0%, rgba (73,73,73,0) 100%); fondo: -webkit-gradiente (lineal, superior izquierdo, inferior izquierdo, de (rgba (10,10,10,1)), a (rgba (10,10,10,0))); / * Establecer la opacidad * / opacidad: 0.35;
Echa un vistazo a este conjunto de ejemplos que se ejecutan en un navegador:
Inténtelo usted mismo y vea qué puede crear con las opciones de transformación de CSS3. Gracias por leer!
Accentsconagua
