Gdzie wykorzystać ten przykład?
Portfolio, usługi i listy artykułów. Wariant „Karty interaktywne: obrys kreskowany” możesz dopasować do kolorów i treści swojej strony.
Jak działa ten efekt?
Stan hover lub focus zmienia kartę i jej elementy. CSS steruje cieniem, transformacją, obrysem lub widocznością dodatkowej warstwy.
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ę?
Nie chowaj kluczowej informacji wyłącznie pod hover. Użytkownik telefonu również musi mieć dostęp do opisu i odnośnika.
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: Karty interaktywne: obrys kreskowany
HTML
<div class="effect"><a class="hover-card" href="#card-result"><span class="visual" aria-hidden="true">✳</span><span class="label">ODKRYJ WIĘCEJ</span><h2>Karty interaktywne</h2><p>Mały detal. Wyraźna różnica.</p><strong>Zobacz projekt ↗</strong></a><p id="card-result">Miejsce na opis Twojego projektu.</p></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}.hover-card{position:relative;display:block;width:min(330px,100%);margin:auto;padding:28px;background:white;border:1px solid #dae3ce;border-radius:12px;text-align:left;color:#2e3c24;text-decoration:none;overflow:hidden;transition:all .4s}.hover-card .visual{display:block;font-size:45px;color:#e95b30;transition:transform .5s;line-height:1;margin-bottom:22px}.hover-card h2{font-size:26px}.hover-card p{transition:all .35s}.hover-card strong{font-size:12px;color:#e95b30}.hover-card .label{display:block;font:9px monospace;letter-spacing:2px;color:#e95b30;margin-bottom:14px;transition:.35s}.hover-card:hover,.hover-card:focus-visible{outline:2px dashed #e95b30;outline-offset:6px}#card-result{opacity:0}#card-result:target{opacity:1}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}