Pensaba poner una pequeña imagen que se repitiera, pero se me ocurrió hacerla usando Pantternify, el generador de patterns en Base64 que ya te había mencionado antes.
Es muy simple lograrlo, puesto que un borde que simula el efecto de estar hundido o levantado, se crea poniendo dos lineas juntas, una debajo de la otra, y el orden de éstas dependerá del efecto que se quiere conseguir, tomando en cuenta también el color del fondo donde se quiera poner. Ahora puedes ver el resultado en los comentarios de la plantilla Círculos, en la siguiente imagen:
Te dejo la dirección web del pattern que usé, para que veas cómo crearlo, al verlo te darás cuenta de lo fácil que resulta hacerlo.
Si por ejemplo hubiera querido el efecto contrario, es decir, un borde que simule tener relieve o estar levantado, simplemente se invierte la posición de los dos colores que son gris y blanco...
Para usarlo en algún elemento, usarías algo así :
.elemento{
background:url(Base64) repeat-x;
}
Donde dice Base64, se pone el código generado, y listo nos ahorramos otra imagen ;)
Recuerda que la clave para crear estos efectos radica en los colores que uses para las dos lineas, y el color de fondo donde se va a poner (los tres son importantes), así pues si vas poner un borde que simule estar hundido sobre un fondo gris claro, la linea de arriba deberá ser también gris pero más obscura, y la de abajo, más clara dentro del mismo orden de colores, y el blanco queda muy bien, puesto que el fondo es gris claro.
No hay comentarios:
Publicar un comentario