es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Cómo crear bordes sesgados con CSS

En esta publicación, vamos a ver cómo podemos crear un efecto de borde en ángulo (horizontalmente) en una página web. Básicamente, se ve algo como esto:

Tener un borde ligeramente angulado debería hacer que nuestro diseño web parezca menos rígido y aburrido. Para hacer este truco, usaremos los pseudo-elementos ::before y ::after y CSS3 Transform .

Usando pseudo elementos

Esta técnica utiliza los pseudo-elementos ::before y ::after para inclinar los bordes del elemento. En este ejemplo, ajustaremos el borde inferior.

 .block {height: 400px; ancho: 100%; posición: relativa; fondo: gradiente lineal (a la derecha, rgba (241, 231, 103, 1) 0%, rgba (254, 182, 69, 1) 100%); } .block :: after {content: ''; ancho: 100%; altura: 100%; posición: absoluta; fondo: heredar; índice z: -1; abajo: 0; origen transformado: fondo izquierdo; transformar: skewY (3deg); } 

Recapitulemos.

El transform-origin especifica las coordenadas del elemento que queremos transformar. En el ejemplo anterior, especificamos la left bottom que colocará las coordenadas de inicio en el lado inferior izquierdo del bloque.

La transform: skewY(3deg); hace que ::after block se doble o incline a 3 grados. Como especificamos la coordenada de inicio como inferior-izquierda, la parte inferior derecha del bloque aumenta 3 grados. Si cambiamos el transform-origin la transform-origin a right bottom y la esquina inferior izquierda se elevará 3 grados en su lugar.

Puede agregar un fondo de color sólido o degradado para ver el resultado.

Hazlo más fácil con Sass Mixin

Para hacerlo más fácil, he creado un mixin Sass para agregar los bordes en ángulo, menos los dolores de cabeza de lidiar con las complejidades de las reglas de estilo. Con la siguiente mezcla, puede especificar rápidamente el lado - arriba a la izquierda, arriba a la derecha, abajo a la izquierda o abajo a la derecha - para sesgar.

 @mixin ángulo-borde ($ pos-top: nulo, $ ángulo-superior: nulo, $ pos-btm: nulo, $ ángulo-btm: nulo) {ancho: 100%; posición: relativa; fondo: gradiente lineal (a la derecha, rgba (241, 231, 103, 1) 0%, rgba (254, 182, 69, 1) 100%); & :: before, & :: after {content: ''; ancho: 100%; altura: 100%; posición: absoluta; fondo: heredar; índice z: -1; transición: facilitar todos los .5s; } @if $ pos-top {& :: before {@if $ pos-top == 'topleft' {top: 0; origen de transformación: arriba derecha; transformar: skewY ($ angle-top); } @if $ pos-top == 'topright' {top: 0; origen de transformación: arriba izquierda; transformar: skewY (- $ angle-top); }}} @if $ pos-btm {& :: after {@if $ pos-btm == 'bottomleft' {bottom: 0; origen de transformación: fondo derecho; transformar: skewY (- $ angle-btm); } @if $ pos-btm == 'bottomright' (abajo: 0; origen transformado: fondo izquierdo; transformar: skewY ($ angle-btm); }}}} 

Hay cuatro variables en el mixin. Las primeras dos variables, $pos-top y $angle-top, especifican la coordenada de inicio superior y el grado . Las últimas dos variables especifican la coordenada y el grado para el lado inferior .

Si llena las cuatro variables, puede inclinar ambos lados, arriba y abajo, del elemento.

Use la sintaxis Sass @include para insertar la mezcla en un elemento. Puedes ver ejemplos a continuación:

Para agregar borde sesgado en el lado superior izquierdo :

 .block {@include angle-edge (topleft, 3deg); } 

Para agregar borde sesgado en el lado inferior derecho :

 .block {@include angle-edge (bottomright, 3deg); } 

Para agregar un borde sesgado en la parte superior izquierda e inferior derecha :

 .block {@include angle-edge (topleft, 3deg, bottomright, 3deg); } 

A continuación se muestra la demostración con los mixins aplicados. Cambie el cuadro de selección para alternar a otro estilo.

¡Eso es!

20 Iconsets gratuitos y multiusos que deberías marcar

20 Iconsets gratuitos y multiusos que deberías marcar

¿Buscas los íconos correctos para tu aplicación? ¿Qué tal algunos iconos de vectores? En este post, hemos reunido 20 conjuntos de iconos de usos múltiples que puede personalizar a su antojo, y luego descargarlos y usarlos para su próximo proyecto.Lo mejor de todo, puedes usarlos todos gratis. Sin embargo, deberá ir a cada una de las diferentes fuentes para descargar los archivos del conjunto de iconos. Con to

(Consejos de tecnología y diseño)

15 hermosos efectos de texto creados con CSS

15 hermosos efectos de texto creados con CSS

Hermoso texto o tipografía hará que su diseño se vea atractivo. En el diseño web, CSS ayuda a dar estilo al diseño, incluidos varios efectos en texto o tipografía. Con CSS, puede usar recorte y agregar animación al texto para darle un poco más de sabor a las cosas.Y para ilustrar esto, hemos recopilado 15 impresionantes y divertidos efectos de texto que son posibles con CSS (algunos con un poco de ayuda de los códigos Javascript).Para más

(Consejos de tecnología y diseño)