Check the new version here

Popular channels

Crea tus Patrones Repetitivos con CSS [Tutorial]

Hola amigos, lo prometido es deuda, pero, antes de hacer el tutorial, les voy a dar una pequeña introducción importante.

Primeramente, cuando me pongo a "Dibujar" patrones en CSS, utilizo mucho la herramienta http://dabblet.com/ desarrollada por Lea Verou, pero ¿Que ventajas me proporciona esa Herramienta comparado con el IDE que uso habitualmente para programar?

yo puedo resaltar aquí 2 ventajas (1 de ellas por momentos se puede volver una desventaja )
  • Muestra inmediatamente el Elemento en la pantalla, esto evita que este dándole F5 al Navegador, ver como se ve reflejado, regresar al IDE y seguir avanzando, en pocas palabras me optimiza tiempo


  • La segunda Ventaja que le encuentro es que si yo dejo el cursor un momento sobre alguna fila, me muestra en miniatura la "Forma" de la figura y el color, con eso puedo identificar rápidamente sobre que elemento estoy realizando algunos cambios.


Lógicamente esto se puede volver una desventaja ya que sin querer se puede activar obstruyendo visualmente el código.

En fin, la estructura para desarrollar patrones repetitivos en css es la siguiente

background: /*puede ser también backgorund-image: */
/*Aquí adentro van declarados los Gradientes y se termina con ;*/
background-color:#FC5241;  
/*Se define el color del fondo que va a tener el Bakcground*/
background-size:200px 280px; 
/*Se define el ancho y el alto (en ese orden) de nuestro "Dibujo" */
background-position:
/*en caso de usar backgorund-image, se colocan aquí las "coordenadas en px tanto del eje X como del eje Y" de cada uno de los elementos de nuestro "Dibujo" */
background-repeat:
 /*si no se pone, por defecto, se repite tanto en el eje X como Y, podemos hacer que solo se repita en un solo plano o inclusive que no se repita " */


Estas son las propiedades que mas eh utilizado, ahora bien, yo en este momento conozco 3 tipos de gradientes, el Lineal, el Circular y el elíptico, de este ultimo, no me eh dado la oportunidad de experimentar con el tanto como el Circular o el Lineal, asi que de este, no lo mencionare en el transcurso del tutorial.
a lo largo del tutorial, voy a estar explicando los gradientes dentro del "Background:" y no del "Background-image:" por cuestiones de prácticidad

Características que tienen los Gradientes Lineales

Los Gradientes lineales en CSS están definidos de la siguiente forma

linear-gradient(150deg, #105495 30px, transparent 35px) 20px 10px;


150Deg Es la inclinación que tienen la pendiente del Degradado
#105495 es el color que tiene el Degradado
30px Es la dimensión que tiene el degradado con el color antes mencionado, también puede ir indicado en porcentaje en vez de Pixels

Como se puede observar, hay una "," y posteriormente sigue "transparent 35px", lo que nos indica que va una segunda capa de color, y esta llegara al pixel numero 35, en este caso es transparente, por lo que del pixel 35 en adelante no tendría color alguno. Se pueden poner mas de 2 colores por Gradiente lineal, todo depende exactamente de lo que se quiera lograr.

20px 10px; son las coordenadas del eje X y Y en donde ira ubicado el Gradiente generado ("Figura o elemento del Dibujo" )

¿como le hacemos para colocar 2 o mas Gradientes Lineales?
es muy simple, en vez de colocar un";" colocamos en cada uno de los Gradientes lineales una "," y solo el ultimo elemento le colocamos el ";" ahorita lo veremos en la practica.

Antes de comenzar les dejo una tabla que contiene las "figuras Básicas" que se pueden generar con los Gradientes lineales, tomando como base el siguiente código

background:
linear-gradient(Xdeg, #F8F8F8 21% ,transparent 0)460px 10px;
background-color:#FC5241;
backgorund-size:200px 200px;
background-repeat:no-repeat;


Tabla Gradientes Lineales


En esta tabla no puse todos los valores posibles que puede tener el "deg", simplemente puse los valores mas significativos [0, 0+15, 45, 90-15, y 90 (todo es en los 4 ejes del plano cartesiano)] con la finalidad de mostrar la orientación de los Triángulos generados con los Gradientes.

Nota: en los Grados 0, 90, 180, 270 y 360 (con sus múltiplos excediendo los 360 grados)
se forman "Rectángulos" horizontales o Verticales, con el detalle que cuando interactúa el Background-repeat, ocupan todo el área horizontal y/o Vertical con esas dimensiones, por lo tanto, para hacer lineas Horizontales o verticales que formen parte de nuestro "Dibujo" queda descartado, claro, hay excepciones, si quieren hacer algún tipo de cerca o algo por el estilo, es valido, eso hice en una animación, les muestro una imagen de la parte donde use ese truco
, el enlace de la animación es el siguiente

Círculos

Dibujar un circulo con los Gradientes es relativamente fácil, la forma como esta constituida es la siguiente

Background:
radial-gradient(circle at 50% 50% rgb(0, 120,185) 30%, transparent 0) 580px 10px;


circle at 50% 50% nos permite tener un circulo completo, las dimensiones de este estaran reducida en un 50% del tamaño que se este declarando

rgb(0, 120,185) 30%, nos indica del color radial que tendría el "Circulo" y su dimensión, también puede ser representado en px en vez de %

transparent 0 al igual que en los Gradientes Lineales, se puede ir colocando colores y dimensiones en un mismo Gradiente Radial, en este caso lo deje en transparent 0 para que el color fuera "Solido"

Aquí les proporciono una 2da tabla de algunas figuras que se pueden formar con radial-gradient

background:
radial-gradient(circle at A% B% rgb(0,120,185) 30%, transparent 0 )580px 10px;
background-color:#FC5241;
backgorund-size:200px 250px;
background-repeat:no-repeat;




Se pueden manejar valores menores a 0% y mayores 100%, pero influirá mucho la dimensión del background-size para que los resultados sean visibles, por esa cuestión no los incluí

por si se pregunta ¿y como hacemos algún "dibujo" si solo tenemos triangulos y "circulos"?
Respuesta: Simple, no se si conocieron el famoso juego llamado "Tangram", bueno, este juego constaba en hacer "Dibujos" a trabes de algunas figuras geométricas, finalmente resultaba ser un pequeño rompecabezas Geométrico, aplicando el mismo principio + algunas trampas extras como encimar figuras, modelarlas al tamaño deseado y hacer efectos ópticos con el mismo color de fondo, se pueden generar un sin fin de "Dibujos", solo falta usar un poco de creatividad y tiempo para experimentar

Con esto concluimos la Introducción y empezamos con el tutorial.

primeramente definimos el tamaño de nuestra imagen que se repetirá, asi mismo, también elegimos el color de fondo y por ultimo dejamos indicado mientras trabajamos el background-repeat:, el código nos quedaría de la siguiente forma


background-color:#FC5241;
background-size:200px 280px;
background-repeat:no-repeat;


se preguntaran ¿por que quitamos la repetición? si finalmente vamos a querer que se repita nuestro "dibujo"
simple, por experiencia propia pueden tener problemas a la hora de incorporar el código dentro de un Div u otro elemento si no lo ponen las dimensiones apropiadas, les mostrare un ejemplo que tengo sobre una calavera no tiene forma, ¿verdad? ¿me creerían si les dijera que es esta misma calavera?
Efectivamente, si lo es, pero, como no utilice la propiedad del background-repeat:no-repeat; tengo pequeños detalles a la hora de incorporarlo con un div, cosa que se puede solucionar modificando las posiciones, pero es trabajar doble y por eso les quiero ahorrar ese detalle.

bueno, hasta ahorita lo que tenemos es lo siguiente

asi que lo primero que voy a hacer para dibujar un "celular" es comenzar desde la base, se que mi dibujo sera un rectángulo alargado del eje Y por las dimensiones que le puse, también me interesa que el "Celular" este despegado de la pantalla a mano izquierda, por lo que le daré un desplazamiento de 80px como margen, después de jugar un poco con el ángulo y el tamaño, este seria mi resultado
ahora viene lo interesante, tengo un triángulo con 65deg, para formar un rectángulo, necesito otro triángulo con la misma hipotenusa pero invertido, mi punto de apoyo son 45° como media + 20° que me dan 65°, haciendo algunos calculos, llegaría como resultado al 245deg, pero, ahora como tengo la tabla hecha, es mas fácil, ya que solo busco el triángulo que tiene la inclinación que deseo y genero la equivalencia, en este caso, de acuerdo a la tabla tengo 255°, que vendría siendo 75° de la manera como lo tengo en el primer Triángulo, pero, mi primer triángulo tiene 65°, entonces a 75° le resto 65° y el resultado es 10°, por lo tanto, a 255° le quito 10° y me genera 245° este seria el inverso de 65°(Si no esta muy claro, me avisan y veo otra forma de replantear esto)
Bueno, genero triángulo con las mismas características, pero, le cambio el ángulo a 245°, el resultado seria el siguiente

como se darán cuenta, cada vez que pongo un nuevo Gradiante, lo pongo arriba del anterior, esto se debe a que el gradiente que este en la parte superior, siempre se estará superponiendo sobre el inferior, (efecto sanwdich).

Tip: una vez que ya esta listo el "contorno" mayor del "dibujo", se puede quitar el background-repeat por un momento, con la finalidad de ver que nuestro dibujo no quede sobrepuesto al momento de repetirse, una vez que nos aseguramos que no se tapa a si mismo, proseguimos con el interior del "dibujo", recuerden reactivar el background-repeat

Ahora bien, vamos con la pantalla, como la pantalla es otro rectángulo de menor dimensión, nuevamente, voy jugando un poco con el ángulo y el tamaño, hasta que encuentre la dimensión apropiada

igual, como necesito formar nuevamente un rectángulo, hago lo mismo que en el triángulo blanco 2
75°-62° =13°
255°-13°=242°
mi ángulo inverso es de 242°, solo que en este caso, podre un poco mas claro este triángulo para darle un efecto "diferente"

si observan con atención, tengo un pequeño desface tanto en la esquina superior izquierda, como en la esquinas inferior derecha, esto se debe a que en este momento estoy usando Firefox, el desface lo genero con toda intención para este navegador, ya que el navegador mas usado estadísticamente en gran parte del mundo es chrome, asi es como se ve actualmente
¿A que se debe esto? a que 1 px no es lo mismo tanto para firefox como para chrome, como para IE, etc. entonces, hay que hacer pequeños sacrificios visuales por momentos para algunos navegadores, el lado positivo de esto es que ese desface es mínimo (casi de 2 px aproximadamente) por lo que casi no es muy notorio. aclarando esto, continuamos.

en este momento voy a "dibujar" un botón redondo que simulara ser el botón de algunos modelos de celulares, voy a hacer algunas aclaraciones aqui

radial-gradient(circle at 50% 50%, #DBDBDB 8px, #CFCFCF 8px,  #CFCFCF 12px, transparent 0) 42px 107px,

dirían ¿que sucede con esto #DBDBDB 8px, #CFCFCF 8px,? simple, a pesar que ambos tienen la misma dimensión en PX, estoy generando una pequeña trampa, ya que quiero obtener un color solido que sobresalga, para generar un poco de profundidad, por eso puse el mismo color del segundo elemento, pero ahora, con una dimensión de 12px ¿que sucede si omitimos #CFCFCF 8px,? simple, me generaría una linea circular delgada al extremo del circulo con el color #CFCFCF, ya que en cierta forma habría una mezcla gradiente entre el color #DBDBDB y #CFCFCF, por eso, lo que estoy haciendo es cortar esa mezcla y dejar un tono solido de "4 pixeles"

Como verán realmente no es difícil hacer un "dibujo" como patrón repetitivo en CSS, tal vez sea un poquito laborioso, pero no es difícil
en fin el código final seria este
 
background:
radial-gradient(circle at 50% 50%, #CFCFCF 4px,  transparent 0) 38px -114px,
/*bocina*/
linear-gradient(190deg, #DBDBDB 4px, transparent 0) -52px 37px,
linear-gradient(10deg, #DBDBDB 4px, transparent 0) -72px 40px,
/*Cuadrado inferior del boton*/
linear-gradient(225deg, #AFCFCF 6px, transparent 0) -54px 244px,
linear-gradient(45deg, #AFCFCF 6px, transparent 0) 139px -29px,
radial-gradient(circle at 50% 50%, #DBDBDB 8px, #CFCFCF 8px,  #CFCFCF 12px, transparent 0) 42px 107px,
linear-gradient(242deg, #3A3A3A 84px, transparent 0) -14px 52px,
linear-gradient(62deg, #303030 84px, transparent 0) 92px -52px,
linear-gradient(245deg, #F8F8F8 108px, transparent 0) -2px 10px,
linear-gradient(65deg, #F8F8F8 108px, transparent 0) 80px -16px;
background-color:#FC5241;
background-size:200px 280px;


y aqui lo podran apreciar mejor


Espero que les haya gustado este tutorial, si tienen dudas, pregunten y con mucho gusto les respondere
+69
0
0
0No comments yet