Alype/arq-front_image-dithered
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: Alype:efb50b3da073166265105c625b945287135978a7
Branches Tags
Alype:main
...
compare: Alype:333c7c6ae9a291d2caf6b6d1a494ecd118be56e1
Branches Tags
Alype:main

3 commits
efb50b3da0 ... 333c7c6ae9

Author SHA1 Message Date
Alype
333c7c6ae9 Merge branch 'main' of https://forge.kviro.eu.org/Alype/arq-front_image-dithered 2025-08-12 16:24:55 +02:00
Alype
5ebf4f66cf suppr lignes inutiles + commentaires + style des liens 2025-08-12 16:24:51 +02:00
Alype
d56676e523 source + typo 2025-08-12 16:24:16 +02:00
2 changed files with 63 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -9,7 +9,7 @@
</head>
<body>
<h1>Une page pour tester le dithering des images</h1>
<p>Fortement inspiré par https://site.sarahgarcin.com/web-frugal/#images</p>
<p>Fortement inspiré par <a href="https://site.sarahgarcin.com/web-frugal/#images">le site "web frugal" de Sarah Garcin</a>.</p>
<section>
<div>
<img src="/img/dither_interlope_logo.jpg" alt="">
@ -17,7 +17,7 @@
</div>
<div>
<img src="/img/dither_gouinementLundi_logo.jpg" alt="">
<p>Goinement Lundi</p>
<p>Gouinement Lundi</p>
</div>
<div>
<img src="/img/dither_categorieTrans_logo.jpg" alt="">

98
style.css
View file

@ -1,18 +1,10 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html {
/* reset display */
display: block;
}
body{
/* affichage du contenu en colonne */
display: flex;
flex-direction: column;
align-items: center;
/* style background et font */
background-color: black;
color: white;
font-family: sans-serif;
@ -20,11 +12,11 @@ body{
section{
width: 100%;
/* affichage des images en lignes avec retour à la ligne (wrap)*/
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
h1,h2,h3,h4,h5,h6{
@ -32,39 +24,69 @@ h1,h2,h3,h4,h5,h6{
text-decoration-color: fuchsia;
}
img{
width: 300px;
display: block;
/* Styling des liens */
a{
color: white;
text-decoration-color: fuchsia;
}
/* lors du hover : fushia */
a:hover,
a:active,
a:focus,
a:focus-within {
color: fuchsia;
}
img{
/* Normalize images */
display: block;
/* taille des images */
width: 300px;
}
div{
/* position relative pour la >p absolute */
position: relative;
/* background pour l’effet blend de l’image */
background-color: rgb(255, 20, 255);
/* Prends la taille des images */
height: fit-content;
/* Centre les rectangles avec les carrés dans le row (ex: image interlopes)*/
align-self: center;
}
div>p{
/* N’affiche pas la balise p par défaut */
display:none;
/* Fixe la position du p à l’intérieur de la div / de l’image, au centre */
position: absolute;
bottom: calc((100% / 2) - 1em);
/* style du paragraphe */
margin: 10px 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
/* style de la font */
color: white;
font-size: larger;
font-weight: bolder;
/* centre le texte */
text-align: center;
}
/* HOVER */
/* Simule un élément interactif pour le proto (le pointer change) */
div:hover{
cursor: pointer;
}
/* lors du hover de la div : blend le background de la div avec l’image */
div:hover>img{
mix-blend-mode:multiply;
}
div{
position: relative;
background-color: rgb(255, 20, 255);
height: fit-content;
}
div>p{
position: absolute;
display:none;
bottom: calc((100% / 2) - 1em);
margin: 10px 0;
padding: 0;
width: 100%;
color: white;
background-color: rgba(0, 0, 0, 0.5);
font-size: larger;
font-weight: bolder;
text-align: center;
}
/* Lors du hover de la div, afficher le paragraphe */
div:hover>p{
display: block;
}