770: Zrób to sam: Styl formularzy, czyli okienko, w którym możemy zaszaleć cz.1

Oto nasz królik doświadczalny
przed rozpoczęciem eksperymentów

Chociaż za eksperta od smoczych ramek w żadnym wypadku uważać się nie mogę oraz artystycznym okiem nie grzeszę, to jednak od czasu do czasu zdarza mi się eksperymentować z kodowaniem smoczych ramek, wypróbowując coraz ciekawsze kody, które później muszą znosić moi podopieczni. Dziś chciałabym podzielić się z Wami częścią tego, co udało mi się znaleźć w czeluściach sieci, a co może uczynić smocze ramki piękniejszymi i bardziej oryginalnymi. Nie są to epokowe odkrycia, aczkolwiek myślę, że niektórym mogą się przydać moje triki.

Będę omawiać kolejne pojedyncze polecenia, które możemy dodać do różnych okienek ramki, a następnie pokazywać ich efekty. Zazwyczaj będą to drobne, pojedyncze komendy.

Dzisiaj chciałabym się skupić na okienku formularza, jednak jest tego tak dużo, że udało mi się przedstawić zaledwie garść możliwości.

Cień zewnętrzny 

• Lekki cień okienka formularzy 

-moz-box-shadow: 0px 0px 10px #000000;
-webkit-box-shadow: 0px 0px 10px #000000;
box-shadow: 0px 0px 10px #000000;

Tutaj jest ustawiony kolor czarny (#000000), jednak możemy użyć jakiegokolwiek innego koloru. Jeśli cień nam nie działa, to znaczy, że źle coś skopiowaliśmy, dlatego należy być ostrożnym. Najdrobniejsza różnica sprawia, że kod nie jest właściwie interpretowany. 

Efekt 1

• Mocny cień okienka formularzy

-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;

Efekt 2

Różne opcje przesunięcia i rozmazania cienia
Możemy wybrać, w którą stronę nasz cień będzie przesunięty oraz w jakim stopniu zostanie on rozmyty. Oto kilka przykładów, które prezentują różne kombinacji tych wartości.

• Średnio rozmyty cień w prawej i górnej części okienka

-moz-box-shadow: 11px -8px 35px #000000;
-webkit-box-shadow: 11px -8px 35px #000000;
box-shadow: 11px -8px 35px #000000;

Efekt 3

 Jak widać, umieszczenie cienia w górnej części okienka nie jest najlepszym pomysłem, ponieważ nakłada się on na słowo "Treść:" Spróbujmy zatem z dwoma pozostałymi ścianami okienka.

• Mocno rozmyty cień przy lewej i dolnej części okienka

-moz-box-shadow: -14px 21px 75px #000000;-webkit-box-shadow: -14px 21px 75px #000000;box-shadow: -14px 21px 75px #000000;

Efekt 4

•  Słabo rozmyty cień tuż przy prawej i dolnej ścianie okienka

-moz-box-shadow: 5px 8px 11px #000000;
-webkit-box-shadow: 5px 8px 11px #000000;
box-shadow: 5px 8px 11px #000000;

Efekt 5 

•  Bardzo cień skupiony wokół prawej i dolnej ściany 

-webkit-box-shadow: 10px 10px 35px 15px #000000;-moz-box-shadow: 10px 10px 35px 15px #000000;box-shadow: 10px 10px 35px 15px #000000;

Efekt 6

Analizując przykładowo kod box-shadow: 10px 10px 35px 15px #000000; możemy się domyślić, że pierwsza liczba (napisana w pikselach) odpowiada za umiejscowienie cienia w pozycji poziomej (lewo i prawo), drugi zaś w pionowej (góra i dół). Trzeci zaś za rozmazanie (0px kolor nierozmazany, 250 px i więcej - maksymalne rozmazanie). W ostatnim przykładzie pojawia się jeszcze promień rozprzestrzenienia, czyli wielkość naszego cienia, która może być również ujemna. 

Cień wewnętrzny

Chociaż cień zewnętrzny od jakiegoś czasu można dostrzec w ramkach niektórych Hodowców, to z cieniem wewnętrznym jeszcze nigdy się nie spotkałam lub też nie zwróciłam na to uwagi. W każdym bądź razie warto chociaż wiedzieć, że coś takiego istnieje, można to wykorzystać i niekiedy może rzeczywiście się przydać. 

I znowu będę pokazywać różne warianty takiego cienia.

• Cień na lewej i dolnej ścianie okienka

-webkit-box-shadow: inset 50px -50px 25px -45px #000000;
-moz-box-shadow: inset 50px -50px 25px -45px #000000;
box-shadow: inset 50px -50px 25px -45px #000000;

Efekt 7 

• Lekki cień wewnętrzny

-webkit-box-shadow: inset 0px 0px 35px 4px #000000;
-moz-box-shadow: inset 0px 0px 35px 4px #000000;
box-shadow: inset 0px 0px 35px 4px #000000;

Efekt 8 

•  Mocny, "krótki" cień

-webkit-box-shadow: inset 0px 0px 9px 3px #000000;
 -moz-box-shadow: inset 0px 0px 9px 3px #000000;
 box-shadow: inset 0px 0px 9px 3px #000000;

Efekt 9 

• Cień pokrywający niemal całe okienko komentarzy

-webkit-box-shadow: inset 0px 0px 159px 20px #000000;
 -moz-box-shadow: inset 0px 0px 159px 20px #000000;
 box-shadow: inset 0px 0px 159px 20px #000000;

Efekt 10

Poszczególne elementy oznaczają analogicznie te same wartości, co w cieniu zewnętrznym, dochodzi nam tylko magiczne słówko inset.

Manipulacje rozmiarem okienka

• Węższe okienko komentarzy

transform: scale(0.63, 1);
-webkit-transform: scale(0.63, 1);
-moz-transform: scale(0.63, 1);
-o-transform: scale(0.63, 1);
-ms-transform: scale(0.63, 1);

Efekt 11

• Niższe i szersze okienko komentarzy

transform: scale(0.925, 0.856);
-webkit-transform: scale(0.925, 0.856);
-moz-transform: scale(0.925, 0.856);
-o-transform: scale(0.925, 0.856);
-ms-transform: scale(0.925, 0.856);

Efekt 12

• Szersze okienko komentarzy

transform: scale(1.412, 1);
-webkit-transform: scale(1.412, 1);
-moz-transform: scale(1.412, 1);
-o-transform: scale(1.412, 1);
-ms-transform: scale(1.412, 1);

Efekt 13

• Większe okienko komentarzy

transform: scale(1.412, 1.333);-webkit-transform: scale(1.412, 1.333);-moz-transform: scale(1.412, 1.333);-o-transform: scale(1.412, 1.333);-ms-transform: scale(1.412, 1.333);

Efekt 14

Pokazane powyżej efekty zostały użyte za pomocą opcji skalowania, można również w inny sposób uzyskać pożądane przez nas efekty, ale o tym innym razem.

Przesunięcie okienka

Mało osób wie o możliwości przesunięcia okienka komentarzy, a może ona akurat komuś przypaść do gustu, więc pokażę dwa przykłady jej zastosowania. 

• Przesunięcie okienka w prawo

transform: translate(150px, 0px);
-webkit-transform: translate(150px, 0px);
-moz-transform: translate(150px, 0px);
-o-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);

Efekt 15

• Przesunięcie okienka trochę w prawo i mocniej w dół

transform: translate(50px, 100px);
-webkit-transform: translate(50px, 100px);
-moz-transform: translate(50px, 100px);
-o-transform: translate(50px, 100px);
-ms-transform: translate(50px, 100px);

         

Efekt 16

                                               

Warto pamiętać, że zwłaszcza po dodaniu tego drugiego kodu powiększa się rozmiar wyświetlanego okna, czyli nasza ramka 550x550 px może okazać się za mała. Może to naturalnie również okazać się zaletą.

"Wykrzywienie" okienka

Opcja "pochylenia" okienka wydaje mi się dość interesująca, więc pokażę tutaj dwa przykłady jej zastosowania, chociaż w praktyce wpisywanie komentarzy do takiego okienka może nie być wygodne.

• Nachylenie I 

transform: skew(18deg, 1deg) ;-webkit-transform: skew(18deg, 1deg) ;-moz-transform: skew(18deg, 1deg) ;-o-transform: skew(18deg, 1deg) ;-ms-transform: skew(18deg, 1deg) ;

Efekt 17

• Nachylenie II 

transform: skew(2deg, 5deg) ;-webkit-transform: skew(2deg, 5deg) ;-moz-transform: skew(2deg, 5deg) ;-o-transform: skew(2deg, 5deg) ;-ms-transform: skew(2deg, 5deg) ;

Efekt 18

Bonusowe efekty

Na koniec chciałabym pokazać Wam jeszcze dwa, ciekawe efekty. Pierwszy z nich po dodaniu odpowiednich marginesów może okazać się bardzo dobrym rozwiązaniem, zaś drugi potraktujcie raczej jako ciekawostkę.

• Okienko formularzu w kształcie kółka

Następną część tego poradnika poświęcę między innymi różnym rodzajom zaokrąglania krawędzi i manipulowania nimi, na przystawkę pokazuję, jak zrobić idealne koło. 

border-radius: 200px 200px 200px 200px;-moz-border-radius: 200px 200px 200px 200px;-webkit-border-radius: 200px 200px 200px 200px;border: 0px solid #000000;

I w tym momencie okazuje się, że wbrew temu, co znalazłam na pewnej stronce, w naszej ramce nie osiągniemy koła. Możemy jedynie cieszyć się takim efektem:

Efekt 19

• Odwrócone okienko

transform: rotate(180deg) ;
-webkit-transform: rotate(180deg) ;
-moz-transform: rotate(180deg) ;
-o-transform: rotate(180deg) ;
-ms-transform: rotate(180deg) ;

Efekt 20

To już wszystko, co chciałam Wam dziś zaprezentować. Mam nadzieję, że gotowe kody ułatwią osobom mniej pracowitym urozmaicenie ramek i ktoś rzeczywiście je wykorzysta. 

Redaktor Naczelna
Catherinne_