Co Nowego w CSS3 część 2
W poprzednim wpisie Nowości w CSS3 przedstawiłem kilka nowych właściwości kolejnej wersji kaskadowych arkuszy stylu, pisałem między innymi o zaokrąglonych rogach, ramkach graficznych i gradientowych, cieniowaniu tekstu i cieniowaniu box’ów, kolorach we współrzędnych hsla i rgba, przezroczystości. W tym wpisie kontynuuje szybki przegląd nowości w CSS3. Jak pisałem poprzednio, teraz tylko sygnalizuje nowe cechy CSS, później postaram się opisać je dokładniej.
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 …
Nowości w CSS3
[...] Edycja: Część druga przeglądu nowości CSS3 znajduje się tu: Co Nowego w CSS3 cz.2 [...]