web-dev-qa-db-fra.com

Texture de fond de papier ancien avec juste css

Est-il possible de créer une texture d'arrière-plan avec du CSS pur (sans utiliser d'image) qui ressemble à un vieux papier, par ex. comme ceci: http://i.stack.imgur.com/kb0Zm.jpg

Je sais qu'il y a des limites, la texture n'a pas besoin d'être aussi complexe que l'exemple.

Existe-t-il un moyen de le faire en CSS?

cssbackgroundtextures
18
Macman

Site générateur d'images d'arrière-plan

Le meilleur que j'ai trouvé en 2016 était cette API qui crée une image de texture de bruit. Ce n'est pas basé sur CSS3 intelligent, mais je ne fais que poster ceci car aucune des autres réponses n'atteint de toute façon ce que l'OP veut.

http://www.cssmatic.com/noise-texture

Notez que le site a le mauvais code CSS de sortie. Cela devrait être quelque chose comme:

body {
    background-image : url(http://api.thumbr.it/whitenoise-361x370.png?background=ffffffff&noise=5c5c5c&density=13&opacity=62);
}

Tout le monde est invité à suggérer des paramètres alternatifs à cet appel d'API qui ressemblent davantage à du papier. Je mettrai à jour ma réponse si j'en trouve une bonne.

http://api.thumbr.it/whitenoise-600x200.png?background=f8faebff&noise=6c702d&density=17&opacity=15

Il a l'air décent sur mon site personnel et vous montre à quel point le blanc pur n'est pas naturel et à quel point il est inconfortable pour les yeux humains: http://netgear.rohidekar.com/inventory/books.html

3
Sridhar Sarnobat

Comme répondu ici ( Comment créer un fond de papier de texture en utilisant CSS sans image ) Dustin a dit, il n'y a pas de fonctionnalité CSS "texture". cependant, si vous utilisez CSS3, vous pouvez faire des trucs assez sympas comme des dégradés ou des ombres pour créer des arrière-plans soignés.

2
Milche Patern

Je n'aime pas l'idée que quelque chose ne soit pas possible. Tout est possible!! Dans ce cas, c'est juste très difficile: D Si vous faites dans cet exemple 478800 <div> éléments (600x798 pixels dans votre exemple d'image) et traitez-les comme des pixels et enfin positionnez-les absolus. Vous pouvez obtenir une copie exacte de votre image.

<div style="top: 0; left: 0; posistion: absolute; width: 1px; height: 1px; background-color: #112233;"></div>
<div style="top: 0; left: 1; posistion: absolute; width: 1px; height: 1px; background-color: #112433;"></div>
<div style="top: 0; left: 2; posistion: absolute; width: 1px; height: 1px; background-color: #111234;"></div>
.. etc

Dans ce cas, il est même possible d'utiliser moins d'éléments, mais vous devez également travailler avec des index z .. Douleur dans le cul: D

1
Harmen de Vries

Non, le mieux que vous puissiez faire avec CSS est un dégradé. http://www.colorzilla.com/gradient-editor/

0
MadCom