Josetxu PatternsDescargar

Josetxu Patterns INICIO

Josetxu Patterns es un Set de Patrones Teselados totalmente gratuito, creados solo con CSS usando las funciones gradient en la propiedad background.

Actualizado el 08/05/2024

  • patrones


    Seguimos creando y añadiendo nuevos patrones

  • simple


    Muy fácil de usar y de sencilla aplicación

  • dinámico


    Cambia las opciones de los patrones fácilmente

  • editable


    Modifica los patrones o crea los tuyos propios

El set también incluye algunas opciones básicas para modificar los patrones fácilmente, y con un poco de imaginación puedes crear tus propios patrones.

Patrones recientes


Opciones


PATRONES

Josetxu Patterns PATRONES

Aquí puedes ver los 100 patrones que componen el set. Puedes filtrarlos por categorías o mostrar el set de patrones al completo.También puedes modificar el tamaño del patrón, o el color, este último es solo una aproximacion cambiando el matíz de color hue, en cada patrón se podrá modificar cada color por separado.

OPCIONES
TAMAÑO:4
COLOR:
  • 3d
  • grid
  • drawings
  • scales
  • neuromorphic
  • metal
  • interwoven
  • miscelanea
INICIO COMO USAR

Josetxu Patterns COMO USAR

Es muy fácil, para usar los patrones solo se necesitan dos cosas:

  • Un elemento HTML
  • Los estilos CSS

HTML

Muy simple, solo tienes que crear un elemento <html> y añadirle la clase del patron que quieres mostrar, como la clase jp-3d-cube en el ejemplo 1.

Para mostrar otro patrón se cambia la clase por otra diferente, como la clase jp-3d-shaded-cube del ejemplo 2.

Revisa el listado de patrones, elige tu patrón, pon la clase al elemento <html>, y listo. En este último ejemplo, el número 3, se usa la clase jp-puzzle-piece.

CSS

Para que todo esto funcione necesitamos los estilos que dan forma a los patrones.

En la siguiente muestra de código tenemos por un lado los estilos básicos que solo incluyen un tamaño por defecto para los patrones mediante la propiedad personalizada --sz.

Y por otro lado tenemos los estilos específicos de cada patrón de los anteriores ejemplos, en este caso los estilos de los patrones de cubos 3d, de cubos 3d con sombra y por último el patrón de pieza de puzzle.

En cada patrón se pueden aplicar diferentes opciones, normalmente asociadas a las propiedades personalizadas de CSS que hay al principio de la declaración de cada patrón. info de opciones

/*************  JOSETXU PATTERNS jp-patterns CSS *************/

/****** Basic Patterns Styles ******/
[class^="jp-"], [class*="jp-"] {
 --sz: 5px;
}

/***** Specific Patterns Styles *****/
/* cubo 3d */
.jp-3d-cube {
 --sz: 4px;
 --c1: #d6c3ea;
 --c2: #a98ec3;
 --c3: #6a587f;
 --ts: 50% / calc(var(--sz)* 10) calc(var(--sz)* 17.5);
 background: 
  conic-gradient(from 120deg at 50% 83.5%, var(--c1) 0 120deg, #fff0 0 360deg) var(--ts), 
  conic-gradient(from -60deg at 50% 16.5%, var(--c1) 0 120deg, #fff0 0 360deg) var(--ts), 
  conic-gradient(from 0deg at 50% 50%, var(--c2) 0 60deg, var(--c1) 0 120deg, var(--c3) 0 180deg, var(--c2) 0 240deg, var(--c1) 0 300deg, var(--c3) 0 360deg) var(--ts);
}

/* cubo 3d sombreado */
.jp-3d-shaded-cube {
 --sz: 4px;
 --c1: #fafafa;
 --c2: #cacaca;
 --c3: #9c9c9c;
 --c4: #76767680;
 --ts: 50%/ calc(var(--sz) * 10) calc(var(--sz) * 17.1);
 --bp: calc(var(--sz) * -5) calc(var(--sz) * -8.55);
 --bg: 
  conic-gradient(from 0deg at 74% 42%, #fff0 0 19.5deg, #50505080 20deg 60deg, var(--c4) 0 99.5deg, #fff0 101deg 360deg) var(--ts),
  conic-gradient(from -60deg at 50% 16.66%, var(--c1) 0 120deg, #fff0 0 360deg) var(--ts), 
  conic-gradient(from 0deg at 50% 50%, var(--c2) 0 60deg, var(--c1) 0 90deg, #fff0 0 270deg, var(--c1) 0 279.75deg, var(--c4) 280.5deg 300deg, #7c7c7c 0, var(--c3), #adadad 360deg) var(--ts);
 background: var(--bg), var(--bg);
 background-position: var(--bp), var(--bp), var(--bp), 0 0, 0 0, 0 0;
}

/* pieza de puzzle */
.jp-puzzle-piece {
 --sz: 5px;
 --c1: #009688;
 --c2: #d8db24;
 --pz: calc(var(--sz) * 0.65), #fff0 calc(calc(var(--sz) * 0.65) + 1px);
 --ts: 50%/ calc(var(--sz) * 10) calc(var(--sz) * 10);
 background: 
  radial-gradient(circle at 55% 25%, var(--c2) var(--pz)) var(--ts), 
  radial-gradient(circle at 75% 45%, var(--c2) var(--pz)) var(--ts),
  radial-gradient(circle at 5% 75%, var(--c2) var(--pz)) var(--ts), 
  radial-gradient(circle at 25% 55%, var(--c2) var(--pz)) var(--ts),
  radial-gradient(circle at 55% 75%, var(--c1) var(--pz)) var(--ts), 
  radial-gradient(circle at 75% 95%, var(--c1) var(--pz)) var(--ts),
  radial-gradient(circle at 5% 25%, var(--c1) var(--pz)) var(--ts), 
  radial-gradient(circle at 25% 5%, var(--c1) var(--pz)) var(--ts),
  conic-gradient(from 0deg at 50% 50%, var(--c1) 0 25%, var(--c2) 0 50%, var(--c1) 0 75%, var(--c2) 0 100%) var(--ts);
}
PATRONES OPCIONES

Josetxu Patterns OPCIONES

Se incluyen algunas opciones que permiten modificar los patrones fácilmente.

Para aplicar estas opciones se usan propiedades personalizadas de CSS --var que afectarán a nuestros patrones teselados.


Opción Propiedad Personalizada CSS Valores Ejemplos
Tamaño --sz px, em, rem, vw, vh, vmin, vmax, cm ... 2px1em2vw3vmin4cm
Color --c1 --c2 --c3 name, hex, rgb, rgba, hsl, hsla, hwb ... red#ff0000rgb(255,0,0)hsl(0deg,100%,50%)
Extra --ln --gs --sp opciones específicas solo para algunos patrones 4px34%5s

Algunos ejemplos para cada una de las diferentes opciones se encuentran detallados a continuación:

Tamaño

Para cambiar el tamaño del patrón se modifica la propiedad personalizada size que está definida como --sz.

Propiedad Personalizada CSS Valor Resultado
--sz 2px
--sz 0.25em
--sz 0.5vmin
--sz 0.2cm

Información de tamaños

  • Admite todas las unidades de medida absolutas y relativas conocidas ( px, em, ex, in, cm, mm, pt, pc, vmin, vmax, vw, vh ... ) excepto porcentajes %.

Limitaciones de tamaños

  • Se recomienda no usar el valor en porcentajes % ya que se generan errores en algunos de los patrones.

Color

Cada patrón usa un número de colores específico, los hemos definido como --c1 : color 1 , --c2 : color 2 , y así sucesivamente. Dependiendo del número de colores que use cada patrón se añadiran más o menos propiedades personalizadas; --c3 : color 3 , --c4 : color 4 ...

Propiedad Personalizada CSS Valor Resultado
--c1 --c2 #009688 #d8db24
--c1 --c2 rgb(243 101 91) rgb(20 151 255)
--c1 --c2 hsl(220deg 100% 30%) hsl(260deg 50% 45%)
--c1 --c2 chocolate darkorange

Información de colores

  • Admite todas las unidades de color conocidas ( name, hex, rgb, rgba, hsl, hsla ), y también las más modernas ( hwb, lab, oklab, lch, oklch ... )

Extra

Estas opciones se incluyen solo en algunos de los patrones.

Propiedad personalizada CSS Valor Patrón Resultado
--ln 2px .jp-honeycomb
--ln 4px .jp-honeycomb
--gs 42% .jp-metallic-fence
--gs 34% .jp-metallic-fence
--sp 10s .jp-3d-lighted-pyramids
--sp 5s .jp-3d-lighted-pyramids

Información de extras

  • Las opciones extras son específicas de cada patrón.
    • En el patrón .jp-honeycomb se usa --ln (line) para controlar el ancho de la linea entre celdas.
    • En el patrón .jp-metallic-fence se usa --gs (grid size) para controlar el ancho de la rejilla.
    • En el patrón .jp-3d-lighted-pyramids se usa --sp (speed) para controlar la velocidad de la animacion que cambia el color.
COMO USAR SABER MAS

Josetxu Patterns SABER MAS

Los teselados se crean usando copias isométricas de una figura inicial, es decir, copias idénticas de una o diversas piezas o teselas con las cuales se componen figuras para recubrir enteramente una superficie.

La idea de estos patrones teselados es muy básica, usar las funciones gradient en la propiedad background para crear diferentes mosaicos. Combinando múltiples gradientes, unos encima de otros, y con un poco de imaginación conseguiremos crear nuestros patrones teselados.

Si comprendes como funcionan te será muy fácil modificar los patrones o crear los tuyos propios.

Explicación básica

A continuación se muestra un ejemplo básico de patrón teselado usando la función conic-gradient():

Es un patrón muy simple, un cubo 3D, que formaremos usando tres colores diferentes ( --c1 --c2 --c3 ) para dar volumen a las tres caras visibles del cubo. Las siguientes imagenes muestran los pasos necesarios para conseguir la tesela que buscamos, son solo tres pasos con tres conic-gradient() superpuestos unos encima de otros. La relación de tamaño de la tesela es 1:1.75.

Definimos el ángulo de inicio del primer gradiente: 0deg y la posición del mismo: 50% en el eje x y 50% en el eje y.

Después empezamos con los gradientes:

  • de 0 a 60deg con el color 2
  • de 0 a 120deg con el color 1
  • de 0 a 180deg con el color 3
  • de 0 a 240deg con el color 2
  • de 0 a 300deg con el color 1
  • de 0 a 360deg con el color 3
background: 
  /****** primer conic-gradient ******/
   conic-gradient(
     from 0deg at 50% 50%, 
     var(--c2) 0 60deg, 
     var(--c1) 0 120deg, 
     var(--c3) 0 180deg, 
     var(--c2) 0 240deg, 
     var(--c1) 0 300deg, 
     var(--c3) 0 360deg
   )
 ;

Definimos el ángulo de inicio del segundo gradiente: -60deg y la posición del mismo: 50% en el eje x y 16.5% en el eje y.

Y ahora los gradientes, en este caso solo dos colores:

  • de 0 a 120deg con el color 1
  • de 0 a 360deg con el color transparente
background: 
  /****** segundo conic-gradient ******/
   conic-gradient(
     from -60deg at 50% 16.5%, 
     var(--c1) 0 120deg, 
      #fff0 0 360deg
   ),
  /****** primer conic-gradient ******/
   conic-gradient(
     from 0deg at 50% 50%, 
     var(--c2) 0 60deg, 
     var(--c1) 0 120deg, 
     var(--c3) 0 180deg, 
     var(--c2) 0 240deg, 
     var(--c1) 0 300deg, 
     var(--c3) 0 360deg
   )
 ;

Por último, definimos el ángulo de inicio del tercer gradiente: 120deg y la posición del mismo: 50% en el eje x y 83.5% en el eje y.

Los valores de los gradientes de los colores no varían:

  • de 0 a 120deg con el color 1
  • de 0 a 360deg con el color transparente
background: 
  /****** tercer conic-gradient ******/
   conic-gradient(
     from 120deg at 50% 83.5%, 
     var(--c1) 0 120deg, 
     #fff0 0 360deg
   ),
  /****** segundo conic-gradient ******/
   conic-gradient(
     from -60deg at 50% 16.5%, 
     var(--c1) 0 120deg, 
     #fff0 0 360deg
   ),
  /****** primer conic-gradient ******/
   conic-gradient(
     from 0deg at 50% 50%, 
     var(--c2) 0 60deg, 
     var(--c1) 0 120deg, 
     var(--c3) 0 180deg, 
     var(--c2) 0 240deg, 
     var(--c1) 0 300deg, 
     var(--c3) 0 360deg
   )
 ;

Y ya está, ya tenemos nuestra tesela que repetida creara nuestro patrón teselado de cubos 3d solo con CSS.



Explicación detallada

En el artículo Patrones teselados en CSS del blog tenéis una descripción detallada de todo el proceso de teselado, podréis saber que hacer para repetir la tesela, aprender a usar las opciones de los patrones, o ver más teselados explicados paso a paso.

Registro de cambios

  • v1.0 08 05 2024
    • Publicación inicial.
      • 100 patrones en total.
    • Opciones:
      • Tamaño (∞)
      • Color (∞)
      • Extras (3)
OPCIONES
patrón copiado al portapapeles

Selecciona tu descarga

Incluye el archivo jp-patterns-lib.css con los estilos CSS de patrones y opciones.

Incluye el archivo jp-patterns-lib.css con los estilos CSS de patrones y opciones. Incluye el archivo jp-patterns-list.html con el HTML de todos los patrones.
versión 1.0 DescargarJosetxu PatternsBásica