Co Nowego w CSS3 część 2

admin — Wed, 31 Mar 2010 21:32:03 +0000

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):

Cras urna metus, aliquam sed, condimentum eget, pellentesque scelerisque, massa. Nullam et est id augue blandit tincidunt. Ut consectetuer, justo eleifend varius facilisis, tortor lorem pharetra nunc, ac sodales purus nunc semper tortor. Integer nec urna. Praesent scelerisque, ipsum nec aliquet volutpat, sem ante sagittis risus, sed condimentum magna libero luctus elit. Donec pede purus, hendrerit non, laoreet vel, porta ut, neque. Cras eu lacus. Pellentesque tempus mattis magna. Nullam id nisl. Quisque dolor lorem, commodo ac, pharetra sed, nonummy nec, nulla. Mauris purus. Suspendisse eget mauris nec justo eleifend vestibulum. Nunc ut eros sed pede pretium congue. Etiam in elit ut nisi ultrices hendrerit. Cras vulputate ultrices quam. Curabitur venenatis. Cras sed nisi.

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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 …

PROGRAMOWANIE i WEBMASTERKA » resizing

Co Nowego w CSS3 część 2

Fonty

Kilka kolumn w jednym divie (multi-column)

Resizing