¿Cómo consiguen tantos menús de aplicaciones ese aspecto texturizado acabado?

Las texturas suelen ser algún tipo de ruido o mapa de bits. Hay una variedad de formas de lograr el efecto en Photoshop, Illustrator y CSS.

Si desea mantener las cosas en CSS tanto como sea posible, entonces probablemente aún tendrá que usar imágenes de mapa de bits y usar la propiedad background-image(o background) como parte de su estilo de elemento. Es posible que la imagen de la textura no necesite ser demasiado grande, ya que puede repetirla horizontal y verticalmente y usarla junto con otras propiedades de CSS.

Si desea una textura o ruido como parte de un degradado, casi siempre será mejor que lo hornee en una imagen de mapa de bits. Una vez más, podría colocarse en mosaico horizontal o verticalmente, por lo que es posible que solo necesite una imagen de ~ 10 px de ancho.

Por cierto, los dos ejemplos que ha publicado parecen estar construidos en Photoshop o algo similar, no en CSS (aunque podría estar equivocado, ¿tiene enlaces a la fuente?).

¿Hay un método (css/o imagen completa) más adecuado para dispositivos móviles?

En realidad, esa es una pregunta bastante difícil de responder, porque hay muchos factores en juego. Las imágenes normalmente tendrán un tamaño de archivo más grande, pero se renderizarán más rápido. CSS puede ser increíblemente lento y consumir más RAM si tiene muchas sombras y efectos internos. Pero, CSS se escala a medida que se acerca, lo que significa que las cosas se vuelven a representar en tamaño. Esas son buenas noticias, hasta que te acercas mucho y MobileSafari falla porque está usando demasiada RAM (sucede todo el tiempo con SVG en iOS).

Pros de CSS: * Se vuelve a representar en tamaño a medida que hace zoom en MobileSafari. * Puede ser más pequeño (en términos de tamaño de archivo), lo que significa que se descargará más rápido con 3G, etc.

Contras de CSS: * Puede ocupar mucha más RAM y es más propenso a bloquear los navegadores. * Puede ser complicado diseñar (la creación suele ser menos visual que la creación de imágenes). * Requiere soporte en navegadores para ciertas funciones. * Menos control sobre el renderizado (tramado de degradado, etc.).

Ventajas de la imagen: * Control total sobre cómo se ven las cosas. * Las imágenes siempre tienen el mismo aspecto porque están renderizadas previamente. * Es mucho menos probable que los navegadores se bloqueen debido al uso de la memoria.

Desventajas de la imagen: * Se requiere trabajo adicional y CSS si desea admitir pantallas de mayor DPI (generalmente dos conjuntos de imágenes). * Por lo general, la descarga es más lenta porque los archivos son más grandes.

¿Podría vincular a una fuente de calidad para estos pequeños mapas de bits?

Si solo desea algo de ruido, puede crear un documento de Photoshop y aplicar el filtro de ruido. Hay algunas formas diferentes de hacer que funcione, pero dependerá de la situación exacta que esté buscando. Es posible que desee crear un documento de Photoshop blanco, llenarlo con mucho ruido (Filtro> Ruido> Agregar ruido), luego hacer que la capa sea mayormente transparente (¿5% de opacidad?) y guardarla para la web. De esa manera se puede aplicar encima de otro color y agregará textura.

¿Existe un método CSS puro para lograr este efecto de ruido?

No. El ruido no es parte de la especificación CSS. Sin embargo, puede incrustar imágenes en su archivo CSS. Aquí hay un ejemplo de eso:

http://www.mightymeta.co.uk/css-noise/

Esta página también puede ser de su interés:

http://lea.verou.me/css3patterns/

Hay algunas formas de usar imágenes que se pueden estirar a diferentes anchos y altos, repitiendo las secciones centrales. Vale la pena familiarizarse con CSS3 border-image: puede permitirle crear divs y botones rápidos y flexibles que tienen estilo con imágenes.

http://css-tricks.com/understanding-border-image/

Usted mencionó que las transformaciones CSS tienen un costo mucho mayor en la RAM. ¿Es este un precio único a pagar cuando el diseño se representa inicialmente?

Los elementos dibujados en CSS a menudo necesitan muchos búferes, composición y máscaras (sombras, sombras insertadas, degradados, esquinas redondeadas, etc.). Por lo general, solo se realizan una vez, pero parece que las cosas se pueden volver a dibujar si salen de la pantalla y vuelven a aparecer (si el usuario se desplaza o si los divs se mueven). Probablemente no sea una pregunta fácil de responder y los resultados pueden cambiar de un navegador a otro.

(Supongo que solo está hablando de elementos creados en CSS, en lugar de la propiedad de transformación CSS real, que es algo diferente. Ligeramente relacionado: he notado que la transformación CSS y la animación CSS generalmente no se vuelven a renderizar, lo que significa que es rápido, no usa más RAM y puede pixelarse si se amplía demasiado).

Esta es una pregunta difícil de responder, en un entorno de poca RAM, ¿cuán cauteloso debo ser al agregar otro div a mi proyecto?

Probablemente deberías estar bien. :) Mis comentarios sobre la falta de memoria se relacionan con el zoom completo en páginas web con algunos elementos CSS grandes o imágenes SVG (vectoriales) en el dispositivo Retina. Tenemos un sitio web simple con algunos SVG muy simples y el acercamiento falla casi siempre en un iPad.

(suponiendo que no haya una transformación css loca o un sombreado excesivo del cuadro) ¿Debería pensar que cada div tiene un impacto? o cada 10? o 100?

box-shadowpuede tener un gran impacto en el rendimiento. Tenga mucho cuidado con él, especialmente en elementos grandes. Probablemente tendrá que hacer sus propias pruebas en lo que respecta al rendimiento. Agregar otros 10 divs no debería tener mucho impacto, pero depende de lo que contienen, qué tan grandes son y cómo están diseñados.

Ligeramente relacionado: aquí hay una excelente charla sobre el ajuste del rendimiento de CSS.

Una charla sobre algunos problemas resueltos relacionados con CSS Performance en GitHub. La charla se dio en la Conferencia de desarrollo de CSS en Honolulu, HI 2012.

Lo más cerca que he llegado a un método css puro es crear un mosaico de grano semitransparente (PNG) . De esta forma, el color de fondo se puede cambiar a través de css (por ejemplo, un cambio de color de interfaz) y el color siempre se ve granulado de la misma manera. No es necesario volver a Photoshop para obtener nuevos colores o formas.

Tiene sus limitaciones, pero debo decir que funciona bastante bien.

Me gusta usar esto: http://www.noisetexturegenerator.com/

Así que ni siquiera tengo que entrar en Photoshop;)

CSS: {fondo: url (lo que sea.png) repetir repetir; }

• elemento de la lista

  Título

enter preformatted text here

Blockquote ingrese la descripción del enlace aquí texto fuerte