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!

Firefox Developer Edition: 6 mejores herramientas para probar

La edición para desarrolladores de Firefox es el único navegador de hoy que está hecho especialmente para desarrolladores. Las herramientas de desarrollador en la edición estándar aparecen primero en la edición del desarrollador y hay herramientas en la edición de desarrollador que no están y no estarán disponibles en la edición estándar. Hoy vamos

(Consejos de tecnología y diseño)

7 consejos SEO para impulsar su negocio local

La optimización de motores de búsqueda es un elemento intrincado, metódico e importante de cualquier negocio en línea, o cualquier entidad corporativa para ese asunto. Sin SEO, su sitio web será enterrado debajo de la pila podrida de resultados del motor de búsqueda y obtendrá casi cero conversiones. Sin e

(Consejos de tecnología y diseño)