70-480 – Określanie właściwości tekstu HTML

70-480

Stosowanie stylów do wyglądu tekstu (kolor, pogrubienie, kursywa); stosowanie stylów do czcionki tekstu (format WOFF i funkcja @font-face, rozmiar); stosowanie stylów do wyrównania tekstu, odstępów i wcięć, stosowanie stylów do dzielenia tekstu, stosowanie stylów do cienia tekstu.



Dzisiejszym wpisem rozpoczynam ostatni rozdział materiału przygotowującego do egzaminu 70-480. Będzie to seria sześciu artykułów, które skupiać się będą na wyglądzie tworzonego przez nas HTML. Poznamy możliwości CSS3, elastycznego układu zawartości, animowanego i adaptacyjnego interfejsu użytkownika oraz spojrzymy co nieco na możliwości jQuery.

Jak mówi sam tytuł wpisu – zajmiemy się stylowaniem tekstu, czyli wielkość i kolor czcionki, odstępy, akapity, wyrównanie tekstu oraz rzucanym cieniem. Poniżej znajdzie głównie przykłady z jsfiddle.net. Móc coś przeczytać to jedno, ale od razu zobaczyć i móc eksperymentować to drugie.

CSS i tekst

Kolor czcionki

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Wyrównanie tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dekoracja tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/9/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Transformacja tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/10/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Wcięcie tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/11/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Łącznik tekstu

Łącznik tekstu to nic innego jak kontrolowanie tekstu pod względem łamania wyrazów na końcach linii. Odpowiedzialna jest za to właściwość hyphens.

Z tą funkcjonalnością kompletnie nie radzą sobie przeglądarki ChromeOperahttp://caniuse.com/#feat=css-hyphens

Poniższy przykład należy oglądać na Firefox lub Internet Explorer.

CSS hyphens

Efekt cienia

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/12/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-*

Przejdźmy do wyboru czcionki oraz jej ustawień. W CSS3 wyróżniamy trzy rodziny czcionek:

  • Serif (szeryfowe) – posiadające ozdobniki, np. Times New Roman, Georgia – nadające się do druku, ale ciężko czyta je się na ekranie monitora
  • Sans-serif (bezszeryfowe) – nieposiadające ozdobników, np. Arial, Verdana – gorzej wyglądające po wydruku, ale znacznie bardziej przyjemne w czytaniu na ekranie monitora
  • Monospace – jednakowe szerokości liter, np. Courier New, Lucida Console

font-family

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/14/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W przykładzie widzimy trzy rodziny czcionek. Warto również zauważyć, że właściwość font-family przyjmuje po przecinku kilka wartości dla rodzaju czcionki. Spowodowane jest to tym, że docelowy użytkownik może nie mieć danej czcionki zainstalowanej na swoim komputerze. Sprawdzenie dostępności następuje od lewej, więc w pierwszej kolejności podajemy czcionkę najbardziej przez nas pożądaną, a na końcu generyczną rodzinę czcionek, którą użytkownik na pewno będzie miał u siebie.

font-style

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/17/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-weight

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/21/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-size

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/22/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Warto w tym miejscu zapoznać się wieloma jednostkami rozmiaru czcionki. W tym celu odsyłam do artykułu: CSS Units na w3schools.com.

@font-face

Dzięki właściwości @font-face jesteśmy w stanie zdefiniować własne czcionki lub używać serwisów takich jak Google Fonts, gdzie mamy dostęp do wielu niestandardowych czcionek, które możemy wykorzystać na naszej stronie. Całość jest niezwykle prosta i sprowadza się do zbudowania reguły, która pozwoli nam na użycie zdefiniowanej przez nas nazwy czcionki.

Wyróżniamy przy tym kilka formatów plików czcionek, a każdy obsługiwany jest przez inne przeglądarki:

  • EOT – IE9
  • TTF – przeglądarki mobilne
  • SVG – starsze wersje przeglądarki Safari
  • WOFF – współczesne przeglądarki
  • WOFF2 (nowszy, lepsza kompresja) – najnowsze wersje przeglądarek

Całość sprowadza się do kawałka kodu:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot');
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf')  format('truetype'),
       url('webfont.svg#svgFontName') format('svg');
}

.. oraz późniejszego (przykładowego) użycia:

font-family: 'MyWebFont', sans-serif;
[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/24/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Polecam ponadto zapoznać się ze świetnym artykułem na ten temat: Using @font-face

Roundup #3 – WP-Flex, BrandColors, Derby MVC, trunk8, DbNinja

Roundup #3 - WP-Flex, BrandColors, Derby MVC, trunk8, DbNinja

WP-Flex

W ostatnim czasie pojawia się sporo tego typu szablonów do WordPressa. Mam tutaj na myśli możliwość dopasowywania się do aktualnego rozmiaru okna przeglądarki, poprzez wykorzystanie techniki “responsive design”. Jest to naprawdę bardzo przyjemna droga do prezentacji treści we właściwy sposób na urządzeniach mobilnych oraz desktopach.

WP-Flex – A blank and responsive boilerplate for WordPress


BrandColors

Jest to tak naprawdę katalog, który w swojej pracy docenią szczególnie osoby, które projektują grafikę. Kolekcja zawiera bowiem dokładne dane odnośnie kolorystyki używanej przez wiodące marki i serwisy na rynku.

BrandColors – A Gallery Of Major Brand Color Codes To Get Inspired


Derby MVC

Nie mylić z bazą danych o takiej samej nazwie! Derby MVC to lekki framework oparty o wzorzec MVC i Node.js, który pozwala na budowanie aplikacji działających w czasie rzeczywistym. Interakcja pomiędzy użytkownikami przebiega natychmiastowo, więc możliwe jest tworzenie na przykład narzędzi do pracy nad projektami bezpośrednio w przeglądarce. Myślę też, że tego typu frameworki to przyszłość jeśli chodzi o aplikacje w przeglądarce. Wszystko za sprawą mechanizmów push, które są w stanie wysyłać informacje od serwera do klienta i dynamiczne odświeżanie widoku.

Build Realtime & Collaborative Apps with Derby MVC


trunk8

Jest to rozszerzenie do biblioteki jQuery, a które pozwala – jak sama nazwa wskazuje – na manipulację długością wyświetlanego tekstu. Proste i wygodne w obsłudze narzędzie, które pozwoli zaoszczędzić nieco czasu podczas tworzenia podobnej funkcjonalności na naszej stronie.

trunk8 – A text truncation extension to jQuery


DbNinja

Jest to odpowiednik znanego pewnie wszystkim phpMyAdmin. DbNinja napisane zostało przy użyciu PHP i służy do administracji bazą danych MySQL bezpośrednio z okna przeglądarki. Całość prezentuje się bardzo dobrze i wygląda nieco na odświeżoną wersję wspomnianego phpMyAdmin. Przypomina trochę aplikację na PC, niżeli klienta webowego. Sam używam desktopowego narzędzia jakim jest HeidiSQL – polecam! Naprawdę bardzo ułatwia i przyspiesza pracę.

DbNinja – Web-Based MySQL Manager App With A Desktop-Like Interface


[1], [2], [3], [4], [5]