Introduction :
En apparence la technique pourrait sembler être un outil d'imitateur. Mais bien utilisée, elle permet de reprendre les traditions, qui sous un aspect anodin, contient bien autre chose que ce qui semblerait.
Si pour le copiste le texte est le même ; des formes repères, des couleurs, des objets ou animaux font apparaitre des textes dans les textes, et le vrai contenue n'est pas dans les mots, mais dans l'expression du copiste qui déploie tout son savoir pour exprimer les textes que seul l'homme peut comprendre.
Ainsi la technique du moine copiste, n'est pas là pour imiter l'image, elle est là pour exprimer l'essentiel de ce que perçoit notre cerveau, elle est là pour ajouter aux détails des sentiments que la reproduction d'une photographie ne saurait exprimer.
Admettons que l'image nommée 1.png inspire
Nous allons en premier créer un document de travail dans le quel nous plaçons l'image.
De manière à ne pas décaler l'image qui va nous servir de toile de fond,
Nous lui donnons dans style la propriété de position: absolute. Nous pouvons placer cette propriété directement dans le div.
Nous appelons l'image à l'aide de la balise img et nous indiquons ou se trouve l'image à l'aide de src=
Ce qui donne pour l'image 1.png placé dans le même répertoire que le fichier HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>moine copiste</title>
<style>
body {
position: absolute;
margin-left: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div style="width: 100%; height: 100%;position: absolute;">
<img src="1.png" alt="img1" /></div>
</body>
</html>
Je ne reprends pas ici le tutoriel sur comment dessiner une forme en css.
Le dessin css est dessiné dans le style et est appelé dans un div du body
Pour placer ou modifier les formes une partie du style est placée dans le div
Pour pouvoir placer notre dessin sans masquer l'image, il suffit d'ajouter une propriété que j'ai cité dans le tutoriel sur les formes, qui est opacity
Plus la valeur de cette propriété est faible, plus notre dessin est transparent laissant apparaitre la photographie de support.
Ce qui donne pour l'image 1.png avec un exemple de dessin css.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>moine copiste</title>
<style>
body {
position: absolute;
margin-left: 20px;
margin-top: 20px;
}
.mondessincss{position: absolute; width: 50px; height: 50px; background: #ff9999;
-webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;border-radius:60% 90% 1% 90% / 90% 90% 1% 90%;
-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;}
</style>
</head>
<body>
<div style="width: 100%; height: 100%;position: absolute;">
<img src="1.png" alt="img1" /></div>
<div class="mondessincss" style="margin-left:70px; margin-top:50px; opacity:0.4;"></div>
</body>
</html>
Une fois tous les dessins css ajustés et bien placés nous pouvons supprimer l'image et la propriété de transparence.
Ce qui donne.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>moine copiste</title>
<style>
body {
position: absolute;
margin-left: 20px;
margin-top: 20px;
}
.mondessincss{position: absolute; width: 50px; height: 50px; background: #ff9999;
-webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;border-radius:60% 90% 1% 90% / 90% 90% 1% 90%;
-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;}
</style>
</head>
<body>
<div class="mondessincss" style="margin-left:70px; margin-top:50px;"></div>
</body>
</html>