Teraz chciałabym wam przedstawić zastosowanie wcześniejszej instrukcji do dowolnego gadżetu na blogu. Nasz przykład omówię na ramce popularne posty. A teraz przejdźmy do praktyki.
Każdy gadżet na blogspocie przyjmuje mniej więcej taką formę:
<div class="" id="">
<h2></h2>
<div class="widget-content">jakaś treść</div>
</div>
Jak widzicie, mamy tu dwa divy, jeden włożony w drugi (nasze kochane pudełka), dzięki czemu uzyskanie efektu z poprzedniego postu będzie banalnie proste. Zapiszmy więc uproszczony kod html do gadżetu popularne posty:
<div class="PopularPosts" id="PopularPosts1">
<h2>Popularne</h2>
<div class="widget-content">jakaś treść</div>
</div>
To, na co musimy zwrócić uwagę to przede wszystkim id gadżetu, w naszym przypadku jest to
#PopularPosts1. Więcej nazw id dla poszczególnych ramek na blogu możecie przeczytać na
Tajemniczym Ogrodzie w tym poście:
klik. Zauważcie, że nasz wewnętrzny div nie ma id, ale za to ma nadaną klasę, którą to się posłużymy, aby wykonać nasz efekt. Trzeba tylko dać przeglądarce do zrozumienia, że ma animować nie każdy element z tą klasą (wtedy poruszały by nam się wszystkie gadżety), a jedynie ten w popularnych postach.
#PopularPosts1 .widget-content {}
I mamy tę sprawę załatwioną. W naszym przypadku powyższy kod jest nazwą wewnętrznego diva-pudełka, które będziemy animować. Teraz wystarczy dodać odpowiedni kod css:
#PopularPosts1 .widget-content {
margin-top:50px;
position:absolute;
transition:0.3s;
opacity:0;
visibility:hidden;
}
A teraz nasza reakcja na najechanie kursorem na div wyższy, czyli w naszym przypadku
#PopularPosts1.
#PopularPosts1:hover .widget-content { margin-top:0;
opacity: 1;
visibility: visible;
}
Zauważcie, że nie musimy definiować szerokości obu divów, ponieważ tę automatycznie narzuca nam szerokość kolumn. Mam nadzieję, że z tym wytłumaczeniem będzie wam jeszcze łatwiej wdrażać ten efekt w życie.
Brak komentarzy:
Prześlij komentarz