Autorem narzędzia jest producent programu ‘Style Master’ – firma ‘westciv’. Style Master powstał już w 1998 roku i był podobno pierwszym edytorem CSS. Sprzedawany jest do tej pory o czym można przeczytać na stronie firmy….

Ale do rzeczy. Narzędzie, które chcę polecić znajduje się tu: http://westciv.com/tools/shadows/. (Świadomie podaje link do konkretnej wizualizacji bo strona główna może nie przyciągnąć tak uwagi).

Oprócz podlinkowanej wizualizacji cieniowania tekstu, znajdują się tam narzędzia do wizualizacji cieniowania box’ów/kontenerów, gradientów (linear i radial), transformacji (przesunięcie, skalowanie, obrót, pochylenie) i text-stroke.

Polecam uwadze, narzędzie jest wykonane bardzo starannie, ładnie i efektownie, włącznie z przesuwanymi suwakami i oknem wyboru koloru. Kilka ruchów i już wiadomo o co chodzi, a oprócz wizualizacji, dostajemy także gotowy kod dla mozilli lub webkit’a (chrome), który już nie tak trudno przerobić na inne przeglądarki lub na CSS3 jak będzie już gotowy i obsługiwany.

Zobaczmy jakie jeszcze przydatne rzeczy możemy znaleźć w nowym CSS.

Fonty

Czy miałeś kiedyś sytuację, że klient dla którego robiłeś stronę upierał się, że chce taki, a nie inny font na stronie i tłumaczenie mu, że to nie jest taka prosta sprawa aby ustawić dowolny font na stronie html, nie przynosiło żadnych rezultatów? Ja miałem. Klient na szczęście dał się w końcu przekonać ale zanim to nastąpiło musiałem przekopać się przez setki stron internetowych szukając rozwiązania. (na marginesie – są rozwiązania pozwalające na ‘wgranie’ na stronę własnej czcionki ale nie są one takie hop-siup) .

Począwszy od CSS3 nie powinno już być kłopotów z ustawieniem dowolnej czcionki na stronie. CSS3 oferuje bowiem regułę @font-face pozwalającą ‘wgrać’ plik z czcionkami. Wygląda to tak:

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

Po użyciu takiej reguły, postępujemy już normalnie ustawiając nazwę naszego fontu, czyli np:

h3 {font-family:Delicious}

Kilka kolumn w jednym divie (multi-column)

cSS3 oferuje nam trzy selektory do wielokolumnowego łamania tekstu.

column-count: 3;
column-gap: 1em;
column-rule: 1px solid black;

column-count określa liczbę kolumn
column-gap określa margines kolumny
column-rule określa jak ma wyglądać rozdzielenie kolumn

Powyższy styl wyświetli coś takiego (Najnowszy Chrome i FF wyświetlają kolumny, użytkownicy IE i Opery prawdopodobnie nie zobaczą efektu podziału na kolumny):

I ostatnia nowość w CSS3 na teraz:

Resizing

Resizing to możliwość zmiany wielkości elementów na stronie przez użytkownika. Poniższy przykład działa jedynie w najnowszym Chromie. Info dla tych, którzy nie widzą efektu. Poniższy box można rozciągać we wszystkie strony, ciągnąc za prawy dolny róg.

Kod tego stylu jest następujący:

width: 200px; height: 100px; border: 1px solid; resize: both; overflow: auto;

selector resize może przyjmować wartości both, horizontal i vertical. Można dodać także ograniczenia dolne min-width i min-height oraz górne max-width i max-height

I na koniec jeszcze przypomnienie, że w powyższym tekście wykorzystałem przykłady z http://www.css3.info/preview/

Ciąg dalszy ‘Co Nowego w CSS3′ nastąpi …

Poniżej mały wstęp do nowości w CSS3 z przykładami. Na razie tylko przedstawiam pokaz możliwości nowego standardu (widoczny dla tych, którzy mają przeglądarki z zaimplementowaną obsługą przedstawianych właściwości). W następnych wpisach na tym blogu postaram się zając dokładniej każdą z omawianych, nowych funkcji CSS3.

Co nas czeka w CSS3

Poniżej wykorzystałem przykłady z www.css3.info. Niektóre przykłady są ‘podrasowane’ pod FF 3.6 (obecnie najnowszy), tam gdzie nie działa standardowy CSS3 dodany jest prefix -moz, np. -moz-box-shadow. Ergo, najlepiej oglądać tą stronę pod Fire Fox’em. Uwaga. Większość przykładów nie będzie działać pod IE z wersją 8 włącznie.

Ramki (Borders)

‘Gradientowe’ kolorowe ramki, podajemy kolor dla każdej ‘warstwy’ ramki

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

Przykład kolorowej ramki:

Graficzne ramki (border-image)
Jako obramowanie do elementów możemy wykorzystać grafiki. Przykład można znaleźć tu: Border image CSS3

Zaokrąglone ramki (border-radius)

W końcu skończy się męka z popularnym zaokrąglaniem ramek . Poniższy przykład jest trochę oszukany, wykorzystuje prefiksy przeglądarek ‘-moz-border-radius:5px;-webkit-border-radius:5px;…’, w CSS3 powinno działać po prostu ‘border-radius’

Cieniowanie (Box-Shadow)

<div style="border-shadow:10px 10px 0px #909090;-moz-box-shadow: 10px 10px 0px #909090;background:black;color:white;padding:10px;border-radius:5px;-moz-border-radius:5px">Lorem Ipsum</div>

Kolory (colors)

kolory HSL (Hue, Saturation, Luminance) i HSLA

Z nadejściem CSS3 kolory będzie można podawać we współrzędnych HSL czyli Hue, Saturation, Luminance (Barwa,Nasycenie,Luminacja) i HSLA (A jak alpha-przezroczystość)

Przykład:
<div style="background-color: hsl(0,100%, 50%);"></div>
<div style="background-color: hsla(120,100%, 50%, 0.4);"></div>

kolory RGBA

Do istniejącej już w poprzednich wersjach możliwości podawanie koloru we współrzędnych RGB dojdzie możliwość podawania dodawania przezroczystości

<div style="background: rgba(255, 0, 0, 0.2);"></div>

Przezroczystość

Parametr określający przezroczystość stanie się standardem. Do tej pory przeglądarki implementowały go po swojemu.

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div>

Tekst (Text)

Cieniowanie tekstu (text-shadow)

Bardzo efektowna właściwość. Ten przykład powinien być widoczny pod FF 3.6, Chrome 4.1 i Operą 10.1 (pod IE najnowszym nie działa)

<div style="font-size:20px;text-shadow: 2px 2px 2px #000;">Lorem Ipsum</div>

To na razie tyle nowości, oczywiście podane powyżej przykłady to tylko niewielka część możliwości CSS3 – więcej postaram się pokazać w następnych wpisach. Możecie także spodziewać się rozwinięcia informacji o poszczególnych nowościach CSS3 włącznie z moimi testami, bo jak pisałem na wstępie, przyglądam się temu standardowi bacznie.

Edycja: Część druga przeglądu nowości CSS3 znajduje się tu: Co Nowego w CSS3 cz.2