Wypływanie elementu

Ostatnio bardzo popularny stał się efekt, który polega na płynnym pojawianiu się jakiegoś elementu, kiedy najedziemy myszką na inny. Obecny jest on również na głównym szablonie Wioski (kiedy najedziemy kursorem na kwadraciki wysunie się z góry tekst). A teraz chciałabym przedstawić wam, jak zrobić ten efekt.

Całość opiera się głównie na pseudoselektorze :hover oraz poleceniu transition. Jeżeli mieliście już do czynienia z tymi dwiema rzeczami, zrozumienie tej instrukcji przyjdzie wam jeszcze łatwiej.

A oto efekt, do którego wspólnymi siłami postaramy się dojść.

Tytuł

Tekst, który się pojawia z dołu (nieco jak widmo), ale fajnie wygląda, prawda?

Na początek wygląd htmlu:
<div class="dd" id="d1">
<div class="tytul">Tytuł</div>
<div class="dd" id="d2">Tekst, który się pojawia z dołu (nieco jak widmo), ale fajnie wygląda, prawda?</div>
</div>
Co nie wygląda zbyt efektownie, a mianowicie tak:

Tytuł
Tekst, który się pojawia z dołu (nieco jak widmo), ale fajnie wygląda, prawda?

Powinniśmy się skupić na dwóch divach o id d1 oraz d2, ponieważ to one będą tworzyć ten efekt. Istotne jest, że drugi div jest włożony do tego pierwszego. (Takie dwa pudełka, jedno w drugim.) Dzięki temu będziemy mogli wpływać na drugi div, używając pseudoelementu :hover dla diva pierwszego (będziemy zmieniać wewnętrzne pudełko posługując się zewnętrznym).

Najlepiej powyższy opis wyjaśnią obramowania. Czerwone dla zewnętrznego pudełka, zielone dla tego w środku.

Tytuł

Tekst, który się pojawia z dołu (nieco jak widmo), ale fajnie wygląda, prawda?

A teraz sprawmy, żeby to ładnie wyglądało i zaserwujmy obu divom jakiś zgrabny css.
.dd {width:200px;box-sizing:border-box;}
#d1{margin:0 auto;}
.tytul {background-color:#777;  padding:10px; text-align:center; color:#fff; }
#d2 {color:#777; background-color:#ddd; padding:10px; } Powyższy kod powinien nam wyczarować taki efekt:

Tytuł

Tekst, który się pojawia z dołu (nieco jak widmo), ale fajnie wygląda, prawda?

Wygląd już mamy. Teraz zacznie się prawdziwa zabawa, więc skupcie się mocno. Jak już wcześniej wspomniałam, będziemy zmieniać ustawienia diva numer dwa - tego w środku - przy pomocy :hover dla diva zewnętrznego. Czyli nasz kod, który będzie odpowiadał za akcję (ruch), będzie zaczynał się od:
#d1:hover #d2 {  tu będziemy zmieniać ustawienia wewnętrznego diva  } Zauważcie jednak, że css, który wcześniej dodaliśmy, pokazał nam sytuację, którą chcemy uzyskać właśnie przy pomocy :hover. To oznacza, że normalna pozycja diva wewnętrznego musi być inna. Dodajmy mu więc niezbędny css.
#d2 {
margin-top: 50 px;
position: absolute;
}
#d1:hover #d2 {margin-top:0;} Te polecenia są bardzo istotne. Najpierw omówmy margin-top, ponieważ to właśnie te dwie linijki odpowiadają za przesuwanie się naszego diva i już za chwilę sprawią efekt wypływania. Na razie jednak mamy div przesunięty o 50px w dół (możesz tu wstawić dowolną ilość pikseli, zależy jaki efekt chcesz uzyskać), który po najechaniu myszką na zewnętrzny div przesuwa się ponownie na górę.
Użycie position:absolute sprawia, że zmiana nie wpływa na położenie pozostałej treści. Gdybyśmy tego nie zastosowali, wraz z przesunięciem diva drugiego przesunęłoby się wszystko, co było pod nim (u nas byłaby to zdecydowania większość treści tej instrukcji). Uwierzcie mi na słowo, to nie wygląda dobrze. Zastosujmy jeszcze magiczne transition, które da nam oczekiwany przez wszystkich efekt animacji.
#d2{transition:0.3s;} Dodanie powyższych elementów powoduje nam powstanie czegoś takiego.

Tytuł

Tekst, który się pojawia z dołu (nieco jak widmo), ale fajnie wygląda, prawda?

Nie sądzicie, że to już wygląda całkiem nieźle? Teraz nie pozostało nam nic innego, jak ukrycie naszego diva drugiego, kiedy go widzieć nie potrzebujemy. I oczywiście sprawienie, aby stawał się widoczny, gdy tego chcemy.
#d2 {
opacity:0;
visibility:hidden;
}
#d1:hover  #d2{
opacity:1;
visibility:visible;
} Oto i ostateczne linijki, po dodaniu których otrzymamy taki sam efekt, jak na podglądzie na samym początku posta. Pewnie część osób nieco znających się na cssie zastanowi, dlaczego użyłam zarówno opacity jak i visibility, skoro oba polecania pełnią właściwie tę samą funkcję: odsłaniają lub ukrywają element. Odpowiedź jest prosta: visibility nie może zostać zanimowane. Opacity natomiast może, ale niestety wówczas nasz tekst wyświetlałby się, kiedy kursor wskazałby miejsce pod naszym tytułem i właśnie temu ma zapobiec visibility.

Obawiam się, że coś więcej na ten temat można poczytać tylko po angielsku. Jeżeli ktoś byłby chętny, zapraszam do wpisania w google tooltip using css only.

Na koniec jeszcze cały kod css razem:
.dd {width:200px;box-sizing:border-box;}
#d1{margin:0 auto;}
#d2 {color:#777; background-color:#ddd; padding:10px; position:absolute; margin-top:50px; opacity:0; visibility:hidden; z-index:2; transition:0.3s; }
#d1:hover #d2 { margin-top:0; opacity:1; visibility:visible;}
.tytul { background-color:#777; border-bottom:#333; padding:10px; text-align:center; color:#fff; } Część druga instrukcji, gdzie jest wyjaśnione, jak zastosować efekt dla ramek w blogerze: pokazana na przykładzie widgetu Popularne posty.