Len nedávno som hľadal spôsob, ako jednoducho (bez JS) vytvoriť stránku galérie pre svoje portfólio a vytvoril tento css z mnohých návodov na internete :)
Jednoducho toto pridajte do svojho css kódu a skúste sa s tým hrať, v článku nižšie sú príklady, treba si ich pozrieť na tablete alebo PC, na mobile sa kvôli responsiveness nezarovnajú :)
img {
height: auto;
max-width: 100%;
pointer-events: none;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Staršie verzie Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Neprefixovaná verzia, momentálne
podporované v Chrome, Edge, Opera and Firefox */
}
img[alt~="_gallery"] {
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .5), 0px 0px 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .5), 0px 0px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 3px rgba(0, 0, 0, .5), 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin-bottom: 2%;
}
/* Zarovnávame obrázky len na tablete/pc, nie mobile. */
@media (min-width: 550px) {
img[alt~="_gallery"] {
max-width: 49%;
}
img[alt$=">"] {
float: right;
}
img[alt$="<"] {
float: left;
}
img[alt$="><"] {
display: block;
margin: auto;
float: none;
}
}
/* Vyčistenie po obrázku galérie */
p::after {
content: "";
clear: both;
display: table;
}
Po pridaní môžete takto vkladať obrázky do svojej „galérie“
Toto je kód markdown, ktorý sa transformuje do galérie nižšie, s dvoma medzerami za každým riadkom:
Testovanie s dvoma medzerami po Link to heading
Toto je kód markdown, ktorý sa transformuje do galérie nižšie, bez dvoch medzier za každým riadkom:
Testovanie bez dvoch medzier Link to heading