Witam w 12 wpisie z serii zrób to sam.

Jak zwykle skupiam się głównie na robieniu magii w czystym CSS. Dziś na tapetę wezmę wiadomość wysuwaną z góry ekranu, która przesunie nam zawartość w dół podczas otwarcia lub w górę podczas zamknięcia. Taki mechanizm może przydać się na przykład do wyświetlania informacji o newsletterze czy też o używaniu plików cookies oraz wielu innych.

Zdaję sobie sprawę, że prawie wszystko można zrobić na wiele sposobów i jeśli znacie inne zapraszam do podzielenia się w komentarzach!

No to jazda, jako nasz włącznik użyjemy sobie checkboxa oraz jego labelki (spokojnie można to zastąpić jakimś buttonem i odrobiną JSa). Na podstawie stanu checkboxa będziemy zmieniać właściwości naszej wysuwanej wiadomości oraz zawartości strony poniżej

Czyli potrzebujemy checkboxa, labelki i dwóch divów:

 

[code]
<input type="checkbox" name="toggle" id="toggle" />
<label for="toggle"></label>

<div class="container">

<h1>Demo wysuwanej wiadomości tylko w CSS, Tutaj umieść resztę strony</h1>

</div>

<div class="message">

Cześć! Znalazłeś mnie

</div>

[/code]

Div container no miejsce gdzie trzymamy resztę naszej strony – jego będziemy przesuwać w dół. Message to nasza… Wiadomość ;)
Czas dodać trochę stylu.

[code]
.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
padding:5em 3em;
h1 {
font-size:40px;
font-weight:bold;
color:#191919;
}
}
[/code]

Stylowanie container jest bardzo minimalistyczne ;) dodajemy paddingi żeby lepiej się wyświetlało oraz definiujemy jak ma się zachowywać animacja marginesu na podstawie krzywej beziera. Może właśnie o tym po co ona jest i jak sobie ją definiować będzie #13 DIY.

Teraz stylujemy message:

[code]
.message {
background:#181818;
color:#FFF;
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: 50px;
padding: 20px 3em;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
p{
color:#FFF;
font-size: 14px;
}
}
[/code]

Wiadomość będzie w normalnym stanie schowana więc „top” ustawiamy na ujemną wartość równą wysokości tego kontenera, podobnie jak wcześniej definiujemy sobie jak ma wyglądać przejście dla wartości „top”.

Pozostało nam jeszcze dodanie stylu dla naszego przycisku oraz dodanie drugich stanów dla naszego .message i .container. W momencie gdy przycisk jest wciśnięty przesuwamy oba w dół czyli możemy użyć stanu „:checked” naszego checkboxa (dokładnie wykorzystywanie stanów checkboxów i radiobuttonów opisałem tutaj). Jeśli nasz przycisko-checkbox jest zaznaczony to podmieniamy sobie także jego tekst poprzez wartość w content

[code]
#toggle {
position:absolute;
appearance:none;
cursor:pointer;
left:-100%;
top:-100%;
&+label {
position:absolute;
cursor:pointer;
padding:10px;
background: #3cbabe;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
margin:20px 50px;
transition:all 500ms ease;
&:after {
content:"Otwórz"
}
}
&:checked{
&~.message {
top: 0;
}
&~.container {
margin-top: 50px;
}
&+label {
background:#dd6149;
&:after{
content:"Zamknij"
}
}
}
}
[/code]

Reasumując:
Stworzyliśmy sobie checkboxa a na podstawie jego stanu stylujemy dwa kontenery: wiadomości i reszty strony.

Jeśli jeszcze nie widziałeś wcześniejszych odcinków DIY zapraszam pod ten właśnie tag. Jeśli masz pomysł na to co mogłoby się znaleźć w kolejnym wpisie z serii DIY to daj mi znać w komentarzach poniżej.

TEMATY:
Najświeższe artykuły