Gdzie wykorzystać ten przykład?
Przejścia między tłami sąsiednich sekcji. Wariant „Separatory: małe zęby” możesz dopasować do kolorów i treści swojej strony.
Jak działa ten efekt?
Kształt separatora powstaje w CSS lub z wektorowej ilustracji. Umieszczenie go na krawędzi sekcji pozwala połączyć dwa obszary strony.
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ę?
Dopasuj kolor do kolejnej sekcji. Sprawdź pełną szerokość kontenera i ewentualne poziome przewijanie.
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: Separatory: małe zęby
HTML
<div class="effect"><div class="divider-upper"><h2>Separatory</h2><p>Koniec jednej sekcji, początek następnej.</p></div><svg class="divider-svg" viewBox="0 0 1200 200" preserveAspectRatio="none" aria-hidden="true"><path d="M0 50 L60 110 L120 50 L180 110 L240 50 L300 110 L360 50 L420 110 L480 50 L540 110 L600 50 L660 110 L720 50 L780 110 L840 50 L900 110 L960 50 L1020 110 L1080 50 L1140 110 L1200 50 L1200 200 L0 200Z"/></svg><div class="divider-lower">Nowy rozdział.</div></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}.effect{overflow:hidden;border-radius:12px;background:#fff}.divider-upper{padding:35px 20px 10px}.divider-upper h2{font-size:28px}.divider-svg{display:block;width:100%;height:100px;fill:#e95b30;margin-bottom:-1px}.divider-lower{padding:25px;background:#e95b30;color:#fff;font-size:22px;font-weight:bold}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}