soy Kseso y esto EsCSS

Prescinde de los prefijos privativos de Css con SCSS y uso de Shapes Css

Artículo original de Eder Iraizoz para #ksesocss. Uso de Scss para evitar el uso de los prefijos privativos de Css y una demo usando Shapes Css.

Prescinde de los prefijos privativos de Css con SCSS y uso de Shapes Css

·Por Kseso ✎ 4

Artículo original de Eder-Iraizoz (aka Lecriminale) para Ksesocss

Olvídate de los prefixes con SCSS

Todos odiamos andar escribiendo los Vendor-Prefixes, Browser-Prefixes o en español prefijos privativos de Css Y aparte de la pereza que da escribirlos, terminan ensuciando la hoja de estilos y haciéndola crecer considerablemente.

Pues bien, existen plugins SCSS (que no he probado) que añaden los prefijos a las propiedades que los necesitan, pero según tengo entendido pueden dar problemas como entre otras cosas, añadir prefijos donde YA NO se necesitan, sumando un peso innecesario a tu hoja de estilos.

Casi a la par de haber descubierto los preprocesadores me crucé con un artículo de Stefan Wienert que me ha ahorrado unos minutos diarios desde entonces.

La cuestión es que, casi todos conocemos al menos por encima las ventajas de los preprocesadores, pero lo que pocos saben (incluido yo hace unos meses) es que aparte de la posibilidad de atribuir argumentos variables a las propiedades, los mismos atributos pueden ser variables por sí mismos:

#{$attr}: #{$arg}; //representa un atributo y su argumento, ambos por definir //"$attr" y "$arg" como el mismo símbolo de dolar indica que son variables de SCSS, pueden nombrarse a gusto de cada uno

Viendo esta ventaja lo primero que se me pasó por la cabeza es HACKEAR LA WEB!!!

Sí, cuando a un webcoder que no ha tocado más que HTML y CSS le pones la posibilidad de manejar una variable se cree un hacker. (Espero no haber sido el único). En fin.

Una vez dejado en el armario nuestro disfraz de superhéroe volvemos al papel de Clark Kent.
Con el dedo índice empujamos nuestras gafas por el entrecejo y a codear:

@mixin prefijos($atributo, $argumento) { -webkit-#{$atributo}: #{$argumento}; -moz-#{$atributo}: #{$argumento}; -ms-#{$atributo}: #{$argumento}; -o-#{$atributo}: #{$argumento}; #{$atributo}: #{$argumento}; } .columna { @include prefijos(box-sizing, border-box) }

No hace falta ni que lo explique. Si has leído hasta aquí supongo que es porque tienes cierto nivel en el uso de preprocesadores. Si no es así, este artículo son mil motivos para probarlos.

Lo que sí puntualizaré es que el atributo sin prefijo va abajo del todo porque teniendo en cuenta que el .css se renderiza de arriba a abajo, pretendemos darle a entender al navegador que sólo debe utilizar su correspondiente prefijo si es que esa versión del navegador la necesita.

See the Pen SCSS absent prefixes by EderIraizoz (@EderIraizoz) on CodePen.

Moldear imágenes con CSS Shapes

CSS Shapes es un (relativamente) nuevo módulo CSS que te permiten trazar siluetas con dos utilidades básicas: dar forma a texto y/o a imágenes.

También tienen dos métodos de uso, pero me voy a centrar en el método sencillo y no por eso menos eficiente. Hasta donde yo entiendo el resultado es exactamente el mismo.

Si os ha picado la curiosidad por el método que NO trataremos sois libres de investigarlo. Pero aquí un pequeño SPOILER:

shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);

Vale, ahora que se fueron los amantes de los numeritos vamos al grano.

Vamos a darle forma a una imagen de usuario porque estamos hartos de verlas cuadradas, redondas, o cuadradas con bordes redondeados.

[alt='img-perfil']{/*uso un selector por atributo*/ width:120px; height:120px;/*tamaño fijo que me interesa para la imagen*/ mask-image: url(imagen.png);/*silueta que da forma a la imagen*/ }

Por supuesto lo debéis poner con sus respectivos prefijos ya que aún está sujeto a cambios.

Podéis ver cómo esquivarlos en la primera parte del artículo.

imagen png para ser usada en mácara cssAhora vamos a cualquier software de dibujo y trazamos nuestra silueta.

Podemos guardar nuestra imagen en formato .png con canal alfa (fondo transparente) o .svg [Imágenes vectoriales].
La parte transparente tapa los extremos de la imagen que por defecto tiene forma rectangular, siendo la zona negra la imagen del usuario en forma de estrella en este caso.

Una ejemplo la imagen adjunta.

Así de fácil se les arranca la monotonía a las imágenes de tu web. Ésto tiene mil métodos de empleo, teniendo el conocimiento falta el toque de imaginación:

See the Pen CSS Shape - Shaping an image by EderIraizoz (@EderIraizoz) on CodePen.

El autor del post: Eder Iraizoz

avatar de Eder Iraizoz en twitter

Eder Iraizoz

Autodidacto en diseño desde que descubrí Paint.
Autodidacto en coding desde que descubrí MSN spaces.
Redacto didáctico desde que me han dejau.

Lecriminale en twitter

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso