Narzędzia CSS3
Od momentu kiedy zacząłem wykorzystywać CSS3 przy kodowaniu projektów graficznych, praca ta stała się dla mnie o wiele przyjemniejsza. Na fali ogromnej popularności powstało wiele ciekawych narzędzi i generatorów, które znacznie usprawniają pracę z nowymi funkcjami dostępnymi od wersji trzeciej. W tym artykule podzielę się narzędziami, które najczęściej wykorzystuje w swojej pracy i które uważam obecnie za najbardziej przydatne.
CSS3 Generator
Jedno z najlepszych obecnie narzędzi, które w bardzo prosty sposób pozwala tworzyć gotowe fragmenty kodu CSS3. Wystarczy tylko wybrać interesującą nas właściwość i wypełnić pojawiający się formularz. Otrzymamy podgląd działania naszych parametrów oraz interesujący nas kod CSS3. Do wyboru mamy praktycznie wszystkie najpopularniejsze właściwości:
- border-radius,
- box-shadow,
- text-shadow,
- rgba,
- columns-gap i coumn-count,
i kilka innych, które polecam przeglądnąć. Brakuje tylko gradientów, ale jedynym powodem, dlaczego nie dodano ich do tej strony jest to, iż ktoś już stworzył rewelacyjne wręcz narzędzie do ich generowania.
Ultimate CSS Gradient Generator
Doskonałe narzędzie pozwalające stworzyć wielostopniowe gradienty, działaniem przypominające ustawianie gradientów w produktach Adobe. Generowany kod uwzględnia praktycznie wszystkie przeglądarki w tym częściowo IE. Dodatkowo mamy dostępną bazę predefiniowanych gradientów, które możemy wykorzystać w swoich projektach.
Czytaj dalej...Szablon artykułu w HTML
Kodowanie HTML to nie tylko odpowiednie pocięcie projektu graficznego, ale także przygotowanie i ostylowanie treści serwisu. Zainspirowany bardzo ciekawą stroną HTML ipsum i występującym tam elementem zwanym „Kitchen sink”, przygotowałem sobie pewnego rodzaju szablon HTML dla treści na stronie. Podstawowym założeniem było zamieszczenie w artykule jak najwięcej przydatnych znaczników HTML, i tak w kodzie znalazły się:
- nagłówki od h1 do h6
- elementy wyróżniające strong i em
- wygląd linków
- trzy rodzaje list ul i ol wraz z zagnieżdżeniami, oraz listę definicji
- obrazki, jedne większy na całą szerokość tekstu, oraz dwa mniejsze do opływania tekstu
- tabela
- cytat, indeks górny i dolny
- znacznik code i pre
Poniżej przedstawiam kod. Mam nadzieję, że się Wam przyda:
Czytaj dalej...Podstawy CSS3
CSS3 to najnowsza wersja kaskadowych styli stosowanych przy kodowaniu projektów stron internetowych. Upowszechnienia tej wersji oczekiwało wielu webdeveloperów na całym świecie, a jest to związane z bardzo ciekawymi rozwiązaniami, które małym wysiłkiem mogą znacząco wpłynąć na jakość i szybkość kodowania stron internetowych. Zapraszam do zapoznania się z podstawowymi funkcjami jak zaokrąglanie rogów, cienie, gradienty, przezroczystość, a także wielokolumnowe teksty na stronie www.
Informacje wstępne
Przede wszystkim, wykorzystywanie CSS3 nie jest zależne od żadnych specjalnych nagłówków, czy oznaczeń jak to miało miejsce np. w HTML5. Po prostu wystarczy zacząć pisać nowe style w tym samym pliku css, który wykorzystywaliśmy do tej pory.
Zanim przejdziemy do opisywania konkretnych funkcji CSS3, należy wiedzieć, iż na chwilę obecną w większości właściwości wymagane jest używanie prefiksów dla konkretnych silników przeglądarek i tak dostępne mamy:
- -moz- dla Firefox
- -webkit- dla Chroma i Safari
- -o- dla Opery
- -ms- dla Internet Explorer 9
Z praktycznego punktu widzenia najczęściej w przykładach podaje się prefiksy –moz- oraz –webkit-, dla zachowania przyszłej kompatybilności warto również dodawać właściwości bez prefiksów. Poniżej przykład funkcji CSS3 odpowiedzialnych za zaokrąglenie rogów o promieniu 5px:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;Poniżej chciałbym przedstawić moim zdaniem najprostsze, ale również najciekawsze właściwości CSS3, które warto wykorzystywać w swoich projektach. Zapraszam również na stronę z przykładami styli CSS3 omawianymi w tym artykule.
Zaokrąglenie rogów
Chyba najbardziej znaną funkcją CSS3 jest zaokrąglanie rogów. W erze web 2.0 na równi z cieniami i gradientami najczęściej wykorzystywany sposób zwiększania jakości projektów graficznych. Do tej pory było to jednak okupione dosyć wysoką ceną kodowania zaokrąglonych elementów. Technik było mnóstwo, ale wszystkie sprawiały pewne mniejsze lub większe problemy. Dzięki CSS3 możemy zaokrąglić rogi naszych elementów przy pomocy prostej definicji:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;Możemy dla każdej strony ustalić osobne style poprzez np. kolejne komendy: border-top-right-radius, border-top-left-radius itp.
Dla ułatwienia polecam jednak korzystać ze skróconego zapisu, jest prostszy i przysparza mniej problemów:
-moz-border-radius: 30px 30px 10px 10px;
-webkit-border-radius: 30px 30px 10px 10px;
border-radius: 30px 30px 10px 10px;Jak wieść niesie na Tweeterze zarówno silniki Gecko (FireFox4) jak i Webkit (Safari, Chrome) oznaczają funkcje border-radius jako zakończoną i tym samym umożliwiają korzystanie z tych funkcji bez prefiksów -moz- oraz -webkit-.
Czytaj dalej...W3C prezentuje logo HTML5
HTML5 to już nie tylko technologia,ale pełnoprawny produkt konsorcjum W3C, który doczekał się swojego logo. W tej chwili nie jest ono nieoficjalne, końcowe ogłoszenie ma nastąpić w pierwszej połowie 2011 roku. Wielu może spytać czy otwarta technologia potrzebuje w ogóle logo? Moim zdaniem tak i jest to bardzo dobry ruch ze strony W3C w celu promocji i popularyzacji HTML5. Pytanie tylko czy nie za wcześnie? HTML5 jest dopiero we wczesnej fazie projektowej autorzy sami ciągle powtarzają, że możliwa jest nawet całkowita zmiana pewnych rozwiązań bez zachowanie kompatybilności wsteczniej. W3C zdecydowało się opublikować logo, więc warto o nim napisać kilka zdań.
Logo HTML5 zostało stworzone przez studio Ocupop i w zamyśle ma reprezentować całą grupę technologii powiązanych z HTML5: CSS, SVG, WOFF. Na stronie firmy znajduje się ciekawe Case Study na temat tego projektu. W moim odczuciu logo jest bardzo dobre, proste i nowoczesne. Zostało zaprojektowane z myślą o niewielkich emblematach oznaczających i promujących strony stworzone w HTML5.
Czytaj dalej...Wstęp do HTML5
W styczniu 2008 roku organizacja W3C opublikowała pierwsze zarysy kolejnej wersji popularnego języka HTML, będącego podstawą do tworzenia stron i aplikacji internetowych. Mam koniec roku 2010, a język ten jest ciągle w fazie tworzenia. Istotne jest jednak to, że praktycznie wszystkie liczące się firmy tworzące silniki przeglądarek internetowych, poważnie zainteresowały się tym projektem. Obecnie większość nowych przeglądarek posiada wsparcie dla HTML5, oraz co jest rzeczą bez precedensu Microsoft, ze swoim nowym IE w wersji 9, również zamierza dołączyć do czołówki, zarówno pod kątem omawianej w tym artykule technologii, jak i wsparciem dla większości możliwości CSS3. Jeżeli jeszcze nie zapoznałeś się z HTML5, to zachęcam do dalszej lektury tego artykułu.
DOCTYPE
Chyba każda początkująca osoba w języku HTML spotkała się z problemem doboru DOCTYPE. Wszyscy zastanawiali się, który lepszy Strict czy Transitional, którego używają liderzy Front-endu HTML 4.0 czy XHTML 1.0. Na szczęście wraz z HTML5 problem całkowicie znika, a obecnie ogranicza się tylko do prostego:
<!DOCTYPE html>a więc najprostsza struktura naszego pliku wygląda teraz tak:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta content="Krzysztof Bachula">
<title>Wstęp do HTML5</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!—Tu kod HTML -->
</body>
</html>Nowe elementy języka HTML5
Wraz z pojawieniem się wersji 5 pojawiło się sporo nowych tagów HTML. Z założenia mają one poprawić semantykę kodu, czy to się udało pozostawiam wam do oceny. Poniżej opisze kilka najważniejszych tagów pojawiającej się od wersji 5:
- <section> – opisuje część dokumentu lub aplikacji. Taka jest definicja, a gdzie go stosować tego najwyraźniej nie wie nikt. Na początku programiści używali go w zastępstwie div’ów, ale organizacja W3C w dokumentacji wydała oświadczenie, że nie taka była intencja tego tagu. Obecnie trwają zażyłe dyskusje na temat <section>, polecam śledzić temat, a na razie używać go z dużą dozą nieufności. Drobna lektura na powyższy temat:
- http://www.smashingmagazine.com/2010/11/10/learning-to-love-html5/
- http://html5doctor.com/the-section-element/
- <article> - opisuje artykuł lub część treści np: wpis na blogu, komentarz itp.
- <nav> - część dokumentu odpowiedzialna za nawigacje po stronie.
- <header> - opisuje nagłówki, nie tylko całej strony, ale także na przykład wstęp do artykułu
- <footer> - opisuje stopkę dokumentu i podobnie jak w przypadku header nie odnosi się wyłącznie do całej strony, ale także do poszczególnych jej część. Tym sposobem możemy oznaczyć stopkę artykułu z informacjami o autorze itp.
- <aside> - opisuje treść poboczną, czyli zawartość kolumny bocznej, np. podobne posty, reklamę itp.
- <video> i <audio> - tagi pozwalające na łatwiejsze dodawanie mediów do swojej strony.
Pełna lista nowych elementów jest dostępna na stronie W3C, polecam przynajmniej pobieżnie przeglądnąć jej zawartość.
Czytaj dalej...
