Sztuczki CSS - animowane przeźrocze z opisem na zdjęciu
Dobra, dziś kolejna prosta i banalna sztuczka CSS. Otóż od czasu do czasu zdarzy nam się potrzeba wyświetlania kilku zdjęć, które będą linkami do newsów czy produktów. Takie zdjęcie oczywiście powinno mieć tytuł i jakiś krótki opis, żeby użytkownik wiedział w co klika. Niestety w większości przypadków grafik dostarczy nam piękny layout w którym równiutko pod zdjęciem będą widniały 3 napisy “Lorem Ipsum”. Jednak projekt projektem, a życie życiem. Pewnie klient pierwsze co zrobi to wpisze w któregoś newsa jakiś baaaardzo długi tytuł newsa i cały layout będzie wyglądał dziwacznie. Jak sobie z tym poradzić?

Oczywiście nie będzie problemu kiedy nasz grafik przewidzi taką sytuację, ale nie czarujmy się, większość amatorów, grafików ma takie pojęcie o web designe jak ja o balecie. Do tej pory rzadko kiedy spotyka się w polskich firmach rozróżnienie między designerem a web designerem. Coś co wyglądałoby pięknie jako plakat, niekoniecznie sprawdzi się na stronie internetowej. Ale co się dziwić jak dalej po świecie chodzą ludzie którzy tytułują się “informatykami”. Jednak to przemyślenie na osobny wpis, skupmy się na problemie.


Designe od grafika będzie wyglądał pewnie tak:




Praktyczna implementacja
kiedy klient zacznie wpisywać newsy będzie wyglądać tak:




Powstaje nam mało sympatyczna dziura psująca spójny odbiór stronki. Przy większej ilości produktów / newsów efekt bedzie się nasiłał. Co wtedy należy zrobić? Wyjścia są dwa.

Pierwsze to iść do grafika i spróbować mu wytłumaczyć że zjebał sprawę nie przewidując tego co się stanie kiedy klient wpisze dłuższy tytuł. Nie polecam go bo jedyne co dostaniecie spowrotem w przypadku 90% tych pseudo artystów to info że użyliście złej czcionki. Jak to ma sie do tematu? Nie wiem i Wam też nie polecam wgłębiać się w umysły i świat grafików - oczywiście zaznaczam że nie piszę tutaj o wszystkich, ale z doświadczenia wiem że 90% z nich tak właśnie reaguje, a pozostałe 10% to prawdziwi profesjonaliści którzy zadali sobie trochę trudu i nauczyli się jaka jest różnica w projektowaniu stron internetowych i trochę podszkolić z programowania. Tak samo działa to w drugą stronę i uważam że programiści powinni szkolić się z takich pojęć jak UI czy UX o samej estetyce nie wspominając, ale jak już wspomniałem to temat na osobny wpis. Drugim wyjściem jest zaproponowanie lepszego rozwiązania. Możemy nałożyć opis na zdjęcie po najechaniu na nie i ten efekt chcę Wam dziś pokazać. Jak to zrobić?


Kod:

<!-- START produkt 1 -->
<DIV class="box" style="background-image:url('news1.jpg');">
   <DIV class="boxShutter"></DIV>
   <DIV class="boxText">
      Zdjęcie łabędzia
<DIV class="boxText2"> Mazury, Polska, 2016 </DIV> </DIV> </DIV> <!-- END produkt 1 --> <!-- START produkt 2 --> <DIV class="box" style="background-image:url('news2.jpg');"> <DIV class="boxShutter"></DIV> <DIV class="boxText"> Parada <DIV class="boxText2"> Bruksela, Belgia, 2015 </DIV> </DIV> </DIV> <!-- END produkt 2 --> <!-- START produkt 3 --> <DIV class="box" style="background-image:url('news3.jpg');"> <DIV class="boxShutter"></DIV> <DIV class="boxText"> Karkóweczka na grila przygotowana na imprezę firmową wraz ze znajomymi. Zagryzaliśmy to pieczonymi ziemniaczkami i popijaliśmy dobrą whisky. <DIV class="boxText2"> Katowice, Polska, 2015 </DIV> </DIV> </DIV> <!-- END produkt 3 --> <STYLE> .box{ margin:10px; height:220px; width:280px; max-width:100%; float:left; overflow:hidden; background-position: center center background-repeat:no-repeat; /*zdjęcie*/ background-size: cover; /*upewniamy się że zdjęcie zakrywa cały box*/ position:relative; /*sprawiamy że box stanie się punktem odniesienia*/ } .boxShutter{ position:absolute; bottom:-100%; left:0px; width:100%; height:100%; /*ta i poprzednie linijki to ustawienie aby nasze przeźrocze pokryło obrazek*/ background:rgba(40, 40, 40, 0.8); -webkit-transition: all 1000ms ease; /*czas animacji - 1 sekunda */ -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } .boxText{ position:absolute; bottom:-200%; left:3%; width:94%; color:#fff; font-size:14px; letter-spacing:2px; opacity:0; -webkit-transition: all 1500ms ease; /*czas animacji - 1,5 sekundy */ -moz-transition: all 1500ms ease; -ms-transition: all 1500ms ease; -o-transition: all 1500ms ease; transition: all 1500ms ease; } .boxText2{ font-weight:lighter; font-size:13px; color:#ddd; border-top:1px solid #777; padding-top:3px; letter-spacing:1px; font-style:italic; text-align:right; } .box:hover .boxShutter{ bottom:0px; /*pozycja końcowa po najechaniu*/ } .box:hover .boxText{ bottom:5%; /*pozycja końcowa po najechaniu*/ opacity:1; } </STYLE>


Wynik:

 
Zdjęcie łabędzia
Mazury, Polska, 2016
 
Parada
Bruksela, Belgia, 2015
 
Karkóweczka na grila przygotowana na imprezę firmową wraz ze znajomymi. Zagryzaliśmy to pieczonymi ziemniaczkami i popijaliśmy dobrą whisky.
Katowice, Polska, 2015
 


Konkluzja:

Prawda że dużo estetyczniej? Rozwiązania jak i sam kod posiadają oczywiście jeszcze pewne ograniczenia (nie możemy wypisać całego Pana Tadeusza w opisie więc trzeba ograniczyć ilość znaków) oraz niedociągnięcia (trzeba przewidzieć zachowanie na urządzeniach mobilnych) ale mam nadzieję że uda Wam się wykorzystać tą sztuczkę w Waszych projektach. Powodzenia :)

Piątek, 14 Kwiecień 2017
Wróć do bloga