W tym krótkim poradniku pokażę jak łatwo zaprojektować wklęsłe pola tekstowe, modny element współczesnych projektów stron internetowych. Wszystko zostanie pokazane na przykładzie aplikacji Adobe Photoshop CS3. Najpierw wypełniamy przestrzeń dowolnym kolorem lub gradientem. U mnie będzie to kolor #464646. Następnie tworzymy nową warstwę i wybieramy z przybornika narzędzie do rysowania zaokrąglonych prostokątów.
Zmieniamy kolor na inny, który będzie tłem naszego pola tekstowego i na nowej warstwie obrazka (shift + ctrl + n) rysujemy figurę. Ja wybrałem kolor #322c2c.
Teraz musimy ustawić style. W tym celu w okienku warstw dwa razy szybko klikamy na dopiero co utworzoną warstwę. Otworzy nam się okno dialogowe, gdzie ustawiamy wartości np. w ten sposób:
Aktualnie nasze pole tekstowe wygląda tak:
Teraz wypadałoby je trochę ożywić dodając ładną ikonkę:
I na koniec tekst. U mnie napiszę go Verdaną o wielkości 16px i kolorem #7b7878. Cała praca wygląda tak:
Loading ...
To wszytko można uzyskać w samym CSS bez obrazków (z wyjątkiem postaci).
Ja na Twoim miejscu dopisałbym jeszcze jak to wszystko „wstawić” na stronę, aby odpowiednio działało.
Tutek o kodowaniu layoutów będzie kiedy indziej
Wow, Elektryk, trzeba mieć jaja, żeby korzystać z Photoshopa po polsku. :>
Napisane bardzo przejrzyście. Jaki wynik? Taki, że nawet kompletny laik wszystko zrozumie.
Brawo. Więcej artykułów o Photoshopie.
Głupotą jest projektować formularze w PS, czy innych edytorach grafiki jakiejkolwiek. Takie rzeczy powinno się robić w CSS.