[TUTORIAL] Hacer patrones Repetitivos en CSS utilizo la herramienta http://dabblet.com/ desarrollada por Lea Verou.
¿Que ventajas me proporciona esa Herramienta?
Muestra inmediatamente el gradiente en la pantalla, optimiza mi tiempo
[align=center]
[/align]el cursor puesto sobre alguna fila, muestra en miniatura la "Forma" del gradiente y el color, asi identifico rápidamente el elemento que estoy trabajando
[align=center]
[/align]Estructura de los Gradientes
Código:
En este momento conozco 3 tipos de gradientes, el Lineal, el Circular y el elíptico, este ultimo no lo eh experimentado, por esta razon no lo mencionare en el transcurso del tutorial. background: /*puede ser backgorund-image: */ /*Aquí los Gradientes*/ ; background-color:#FC5241; background-size:200px 280px; /*Ancho y el alto de nuestro "Dibujo" (en ese orden) */ background-position: /*si usamos backgorund-image, colocamos las "coordenadas en px del eje X y Y" de cada gradiente */
Explicare los gradientes dentro del "Background:" no del "Background-image:" por cuestiones de prácticidad
Los Gradientes lineales en CSS están definidos de la siguiente forma
Código:
150Deg angulo del Degradadolinear-gradient(150deg, #105495 30px, transparent 35px) 20px 10px;
#105495 color del degradado
30px Dimensión del gradiente, también puede ir indicado en % en vez de px
Hay una "," y posteriormente sigue "transparent 35px", indica una segunda capa de color, llegara al pixel numero 35, como es transparente, no tendría color alguno en adelante. Se pueden poner mas de 2 colores por Gradiente lineal.
20px 10px; Desplazamiento del Gradiente en los ejes X y Y.
¿Como colocamos 2 o mas Gradientes Lineales?
ponemos una "," en cada uno de los Gradientes lineales, en el ultimo colocamos un ";"
Tabla Gradientes Lineales tomando como base el siguiente código
Código:
[align=center]background:linear-gradient(Xdeg, #F8F8F8 21% ,transparent 0)460px 10px; background-color:#FC5241; backgorund-size:200px 200px; background-repeat:no-repeat;
[/align]La tabla contiene 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.
Nota: en los Grados 0, 90, 180, 270 y 360 (con sus múltiplos excediendo los 360 grados)
forman "Rectángulos" horizontales o Verticales, 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, excepto si quieren hacer algún tipo de cerca o algo por el estilo, eso hice en una animación, les muestro el ejemplo
, el enlace de la animación es el siguiente http://codepen.io/elestudiantefantasma/full/AxoKf[align=center]Círculos[/align]
Dibujar circulos con los Gradientes es fácil, se constituye asi
Código:
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 declarandoBackground:radial-gradient(circle at 50% 50% rgb(0, 120,185) 30%, transparent 0) 580px 10px;
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"
Base de la tabla Gradientes Radiales
Código:
[align=center]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;
[/align]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.
¿como hacemos algún "dibujo" si solo tenemos triángulos y "círculos"?
Aplicando el principio del "Tangram" con algunas ventajas como encimar figuras, modelarl el tamaño 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
Fin de la Introducción y empezamos con el tutorial.
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
Código:
¿por que quitamos la repetición?background-color:#FC5241; background-size:200px 280px; background-repeat:no-repeat;
pueden tener problemas a la hora de incorporar el código dentro de un Div u otro elemento si no lo ponen las posiciones apropiadas, ejemplo
no tiene forma, ¿verdad? ¿me creerían si les dijera que es esto?
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, puedo solucionarlo modificando las posiciones, pero es trabajo doble, por eso quiero ahorrarles problemas.
esto llebamos
voy comenzar con la base del celular, se que mi dibujo sera un rectángulo, también me interesa despegarlo un poco de la izquierda, le daré un desplazamiento de 80px en X, después de jugar un poco con el ángulo y el tamaño, este seria mi resultado
El triángulo tiene 65deg, para formar un rectángulo, necesito otro triángulo con la misma dimencion 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, 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°.
Genero triángulo con las mismas características, le cambio el ángulo a 245°
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á sobreponiendo en el inferior (efecto sanwdich).
Tip: una vez que ya esta listo el "contorno" mayor del "dibujo", quiten el background-repeat por un momento, y observen 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
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
como necesito formar 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"
Tengo un pequeño desface tanto en la esquina superior izquierda, como en la esquinas inferior derecha, estoy usando Firefox, el desface lo genero con intención para este navegador, ya que el navegador mas usado es chrome, asi se ve ahiactualmente
¿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
Código:
¿que sucede con #DBDBDB 8px, #CFCFCF 8px,? A pesar que ambos tienen la misma dimensión en PX, estoy haciendo un truco, quiero obtener un color solido para generar un poco de profundidad, por eso uso el mismo color del 2do elemento, pero ahora con una dimensión de 12px ¿que sucede si omitimos #CFCFCF 8px,? me genera 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.radial-gradient(circle at 50% 50%, #DBDBDB 8px, #CFCFCF 8px, #CFCFCF 12px, transparent 0) 42px 107px,
