Dzisiejszy wpis nie jest kierowany wyłącznie do koneserów sztuki, bo chyba każdy zawieszając na ścianie zdjęcie z wakacji stara się dobrać do niego jak najoryginalniejszą i gustowną zarazem ramkę. Szukamy swego rodzaju "cutting edge" ramki, która w idealny sposób "odetnie" zdjęcie od ściany.
Żeby ramka nie była pusta.
<div class="frame">
Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany
</div>
Będziemy potrzebować też prostej ramki, której nie utworzymy z właściwości border na elemencie .frame, ale na pseudoelemencie :before. Dlaczego? Ponieważ musimy umieścić ją na warstwie pod elementem .frame. Będziemy "animować" ją w taki sposób, który byłby niemożliwy przy zastosowaniu tejże właściwości bezpośrednio na elemencie. Ściślej rzecz biorąc między warstwą tekstu, a ramką będzie jeszcze inna warstwa, który zależnie od animacji będzie przykrywać naszą ramkę (najniższą warstwę). Ta pośrednia warstwa będzie mieć kolor tła, więc efekt będzie taki, jakby to ramka się animowała. W każdym z poniższych efektów możesz zobaczyć animację warstwy przykrywającej po kliknięciu na element.
body {
background: #fff;
}
.frame {
width: 200px;
height: 200px;
position: relative;
}
.frame:before,
.frame:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -2;
}
.frame:before {
border: 1px solid #000;
left: -1px;
top: -1px;
}
.frame:after {
background: #fff;
z-index: -1;
}
Przedpokój.
Zacznijmy więc dopieszczać ramki. W przypadku pierwszej animacji warstwę pośrednią będzie domyślnie stanowić obrócony o 45 stopni kwadrat, który przy najechaniu myszą będzie się powiększał. W ten sposób jego narożniki będą stopniowo przykrywać coraz większe obszary ramki. Najlepiej to zobaczyć:
+
.frame:after {
/* poprzednie właściwości
+ poniższe
*/
transform: rotate(45deg) scale(0.7);
transition: all 1s ease;
}
.frame:hover:after {
transform: rotate(45deg) scale(1.3);
}
Kuchnia.
Teraz delikatna modyfikacja. Warstwa przykrywająca ramkę domyślnie nie będzie obrócona, dopiero w trakcie najechania będzie dodany efekt rotacji. Dodatkowo płaszczyzna będzie zmieniać swój rozmiar.
+
.frame:after {
/* poprzednie właściwości
+ poniższe
*/
transform: scale(0.7);
transition: all 1s linear;
}
.frame:hover:after {
/* skalujemy do rozmiaru trochę większego
niż przekątna kwadratu (sqrt(1*1+1*1)),
aby przykryć go w całości
*/
transform: rotate(45deg) scale(1.43);
}
Pokój gościnny.
I ostatnia ramka. Tu elementem przykrywającym będzie płaszczyzna o wysokości przekątnej kwadratu, szerokości początkowej 1px i ustawiona w osi z przekątną. Rotacja i skala w osi Y nie zmienia się. Skala 1.43 to nic innego jak powiększenie długości kreski do długości przekątnej (sqrt(2)), ale ponieważ skala 1.4142 nie jest zbyt dokładna - nie przykrywa narożników ramki, to jest nadana minimalnie większa. Aby jednak kreska nie wymazała narożników przed najechaniem myszą, nadajemy jej opacity:0, a zaraz na starcie znieniamy na 1. A dlaczego nadajemy opacity z transition, a nie bez? Bo dzięki temu możemy nadać opóźnienie przy zjechaniu myszą i kreska nie znika od razu. Bez transition nie zrobilibśmy tego. Animacja będzie polegać na rozszerzaniu kreski od 1px od szerokości przekątnej, tak jakbyśmy rozgarniali piasek dłońmi na lewo i prawo. Zresztą zobacz sam.
+
.frame:after {
width: 1px;
left: 50%;
background: #fff;
z-index: -1;
transition: transform 1s ease 0s, opacity 0s 1s;
opacity: 0;
transform: rotate(45deg) scaleY(1.43);
}
.frame:hover:after {
opacity: 1;
transition-delay: 0s, 0s;
transform: rotate(45deg) scaleX(286) scaleY(1.43);
}
Powyższe efekty nie są uniwersalne, bo trzeba zauważyć, że element pokrywajacy może wychodzić poza ramkę (tu pomoże overflow:hidden na elemencie .frame), a jeśli nawet nie będzie wychodzić, to zastosowanie przezroczystego tła jest niemożliwe (bo będzie widać płaszczyznę przykrywającą), ale przecież nie bezużyteczne.
Mając przystrojone ściany w trzech pomieszczeniach, zachęcam Cię do własnych pomysłów na przyozdobienie pozostałych lokalizacji.