Gdzie wykorzystać ten przykład?
Zdjęcia w portfolio i kartach realizacji. Wariant „Efekty ilustracji: sepia do koloru” możesz dopasować do kolorów i treści swojej strony.
Jak działa ten efekt?
CSS zmienia sposób prezentacji ilustracji lub jej podpisu. Przykładowy SVG możesz zastąpić własnym obrazem, zachowując selektory.
Jak dodać go na stronę?
- Otwórz przykład w edytorze i podmień tekst oraz kolory.
- HTML wstaw w miejscu, w którym ma pojawić się element.
- CSS przenieś do arkusza stylów swojej strony. Reguły
body z podglądu dopasuj do własnego układu. - Sprawdź działanie na telefonie, klawiaturą i z własną treścią.
Na co zwrócić uwagę?
Wstaw prawidłowy alt i proporcje zdjęcia. Kluczowy opis powinien być dostępny również bez hover.
Co możesz zmienić w konfiguratorze?
Tekst przykładu, Kolor akcentu. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.
Gotowy kod: Efekty ilustracji: sepia do koloru
HTML
<div class="effect"><figure class="media-pack" tabindex="0"><svg viewBox="0 0 500 300" role="img" aria-label="Przykładowa ilustracja gór i słońca"><defs><linearGradient id="sky" x2="1" y2="1"><stop stop-color="#c8dcb0"/><stop offset="1" stop-color="#eef0d9"/></linearGradient></defs><rect width="500" height="300" fill="url(#sky)"/><circle cx="365" cy="75" r="38" fill="#e95b30"/><path d="M0 255 140 80 330 300H0Z" fill="#718b5a"/><path d="M120 300 330 105 500 270V300Z" fill="#a0b781"/><path d="M0 280 Q130 220 250 265 T500 250V300H0Z" fill="#48613a"/></svg><figcaption>Efekty ilustracji</figcaption><span class="media-label">ZOBACZ WIĘCEJ ↗</span></figure></div>
CSS
*{box-sizing:border-box}body{margin:0;padding:35px 24px;background:#f4f5ef;color:#293322;font:15px/1.7 Arial,sans-serif;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #738858;outline-offset:4px}h2,h3,p{margin-top:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.effect{width:100%;max-width:650px;color:#e95b30;text-align:center}.effect *{box-sizing:border-box}.effect button,.effect a{font:inherit}.effect button{cursor:pointer}.effect h2{font-size:clamp(25px,5vw,42px);line-height:1.2;margin:0 0 14px}.effect p{font-size:13px;color:#7c8c6d;margin:10px 0}.effect button:focus-visible,.effect a:focus-visible,.effect input:focus-visible{outline:3px solid #e95b30;outline-offset:5px}.media-pack{position:relative;margin:0 auto;width:min(500px,100%);border-radius:10px;overflow:hidden;transition:.4s;isolation:isolate}.media-pack svg{display:block;width:100%;height:auto;border-radius:inherit;transition:transform .6s,filter .6s,clip-path .6s,box-shadow .6s,outline .6s;filter:sepia(1)}.media-pack:hover svg,.media-pack:focus svg{filter:sepia(0)}.media-pack figcaption{position:absolute;bottom:0;left:0;right:0;color:white;background:#293923b3;padding:16px;font-size:16px;transition:.4s;}.media-label{position:absolute;inset:0;display:none;place-items:center;color:white;font:12px monospace;letter-spacing:2px;background:#e95b3055;opacity:0;transition:.5s}.media-pack:hover figcaption,.media-pack:focus figcaption{transform:none;opacity:1}.media-pack:hover .media-label,.media-pack:focus .media-label{opacity:1}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}