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

Ponownie asystować mi będzie Rosalia, która w międzyczasie
zdążyła podrosnąć do poziomu 1184. :>

Jakiś czas temu pokazałam Wam, jak kilkanaście przykładów cienia wewnętrznego oraz zewnętrznego w stylu formularzy. Dowiedzieliście się, jak można w ciekawy sposób wykorzystać komendę skalowania oraz jak przesunąć położenie okienka. Na koniec pierwszej części tego poradnika pokazałam jak "nachylić" to okienko, zaokrąglić oraz odwrócić. Dwadzieścia gotowych efektów do skopiowania do ramek Waszych gadzin znajdziecie tutaj. Zachęcam wszystkich do zapoznania się najpierw z tamtym artykułem, a dopiero później do rozpoczęcia lektury jego drugiej części.

Dziś będziemy kontynuować przygodę z okienkiem komentarzy. Nie wiem, czy uda mi się pokazać tak dużo przykładów, jak ostatnio, ale postaram się, aby były one interesujące, a przede wszystkim - przydatne. Nic, tylko skopiować i sprawić przyjemność naszemu podopiecznemu.

A teraz czas na sprawdzenie, jakie różne kształty może przybrać okienko, w którym odwiedzający ramkę będą wpisywać komentarze.

Kształt formularza

Efekt 21

Poniższy kod, jak każdy kolejny wklejamy do ostatniego okienka w zaawansowanej edycji smoczej ramki. Pamiętajmy, aby skopiować go dokładnie - tutaj kluczową rolę odgrywa nawet znak ";" na końcu każdej linijki. 

-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;

Efekt 21

Efekt 22

Tym razem zaokrąglenie wszystkich rogów będzie minimalne. Maksymalne można zobaczyć w efekcie 19, znajdującym się w pierwszej części poradnika.

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Efekt 22

Efekt 23

W tym i następnym przykładzie pobawimy się mocnym zaokrąglaniem przeciwnych rogów naszego okienka.

-webkit-border-radius: 99px 20px 99px 0px;
-moz-border-radius: 99px 20px 99px 0px;
border-radius: 99px 20px 99px 0px;

Efekt 23

Efekt 24

A teraz na odwrót...

-webkit-border-radius: 0px 99px 0px 99px;-moz-border-radius: 0px 99px 0px 99px;border-radius: 0px 99px 0px 99px;

Efekt 24

Efekt 25
Skoro podstawy już za nami, czas na różne kombinacje siły zaokrąglenia poszczególnych rogów. Zacznijmy od czegoś takiego:

-webkit-border-radius: 0px 99px 90px 99px; -moz-border-radius: 0px 99px 90px 99px; border-radius: 0px 99px 90px 99px;

Efekt 25

Efekt 26
A jak wyglądałoby zaokrąglenie wyłącznie dolnych rogów?

-webkit-border-radius: 0px 0px 99px 99px;
 -moz-border-radius: 0px 0px 99px 99px;
 border-radius: 0px 0px 99px 99px;

Efekt 26

Efekt 27
A coś subtelniejszego?

-webkit-border-radius: 0px 0px 40px 40px;-moz-border-radius: 0px 0px 40px 40px;
border-radius: 0px 0px 40px 40px;

Efekt 27

Efekt 28
Kombinujemy dalej.

-webkit-border-radius: 0px 5px 50px 5px;-moz-border-radius: 0px 5px 50px 5px;border-radius: 0px 5px 50px 5px;

Efekt 28

Efekt 29
A może coś takiego komuś się spodoba?

-webkit-border-radius: 20px 40px 40px 20px; -moz-border-radius: 20px 40px 40px 20px; border-radius: 20px 40px 40px 20px;

Efekt 29

Efekt 30
Dla osób, które wolą jednak subtelniejsze zmiany, może nadać się jeszcze coś takiego.

border-radius: 15px 0px 15px 0px; -webkit-border-radius: 15px 0px 15px 0px; -moz-border-radius: 15px 0px 15px;

Efekt 30 

Efekt 31
I jeszcze oczywiście efekt odwrotny do 30.

border-radius: 0px 15px 0px 15px;-webkit-border-radius: 0px 15px 0px 15px;-moz-border-radius: 0px 15px 0px 15px;

Efekt 31

Efekt 32
To już ostatni efekt kształtu, jaki chcę Wam dziś zaproponować.

border-radius: 20px 50px 20px 50px;-webkit-border-radius: 20px 50px 20px 50px;
-moz-border-radius: 20px 50px 20px 50px;

Efekt 32

 Bonusowy efekt

Efekt 33

Na zaostrzenie smaczku przed kolejnym odcinkiem chciałabym pokazać, jak można manipulować wielkością ramki, tym razem zmieniając jej rozmiary. Warto zwrócić uwagę na to, co dzieje się wtedy z okienkiem "OK".

min-width: 350px;min-height: 100px;

Efekt 33

Oczywiście te wartości mogą mieć dowolnie przez nas wybraną wartość, niekoniecznie taką, jaką tu podałam. Nie bójcie się kombinować i próbować nowych rzeczy.

Redaktor Naczelna
Catherinne_

Kiedy kolejny odcinek? Najprawdopodobniej wtedy, gry któryś z redaktorów zawali i nie odda na czas swojego artykułu, a coś będzie trzeba opublikować w iNWD.  :> W żadnym wypadku ich do tego nie zachęcajcie!