Rozpocznij pracę z HTML5 / CSS3: porady, prezentacje i kodowanie próbek

HTML5 zyskuje coraz większą popularność i zaczyna ewolucję całego interfejsu internetowego. Nawet niektórzy twórcy stron internetowych podali, że elementy HTM5 i efekty wizualne są porównywalne z Flashem. Nowy styl skryptowania jest łatwy do zrozumienia, a możliwości ulepszania interfejsu internetowego są nieograniczone. Jak interesujące jest to HTML5?


Ten artykuł ma na celu dać czytelnikom wgląd w to, co powinieneś wiedzieć o HTML5 i, co najważniejsze, kilka wskazówek & sztuczki tworzenia lekkich, atrakcyjnych i interaktywnych stron HTML5.

1. Podstawowe w HTML5

HTML5

Zanim zaczniemy ten temat w HTML5, dobrze jest najpierw sprawdzić bieżącą przeglądarkę. Ponieważ wiele przeglądarek jest nadal w trybie programowania (ulepszenie w celu dostosowania do HTML5), niektóre wymienione tu funkcje mogą nie być obsługiwane.

Oto krótkie wskazówki, jak to sprawdzić kompatybilność z przeglądarką.

Aby dowiedzieć się więcej o ograniczeniach określonych przeglądarek, możesz się do nich odwołać tutaj.

2. Efekty tekstowe – Dodawanie efektu cienia i zaawansowanego efektu tekstowego w HTML5

Efekty tekstowe w HTML5

Podstawowy efekt cienia na tekście

Jest to najprostszy kod napisowy, który przekształca zwykły nagłówek w fajnie wyglądający tekst. Nigdy nie lekceważ efektu cienia. Aby stworzyć podobny efekt, projektant musi przejść wiele etapów edycji obrazu w Photoshopie. A teraz wystarczy tylko jedna linia kodu. Odległość cienia, kolor można zmienić na zawartość serca.

Próbka kodująca

#shadow h1 {
cień tekstu: 0px 1px 1px rgba (0,0,0, .2);
}

Tekst z wyprzedzeniem podobny do ognia

Następna rada to pokazanie, w jaki sposób można dostosować kodowanie HTML5 do jeszcze fajniejszego tekstu. Jeśli wystarczająco eksperymentujesz lub znajdziesz inne przykłady, możliwości dostosowywania efektów są nieograniczone. Uwaga: ten przykład nie jest tworzony przez żadne oprogramowanie do edycji obrazów. Tylko proste kody w HTML5.

Próbka kodująca

#fire h1 {
wyrównanie tekstu: środek;
margines: 200px auto;
rodzina czcionek: "League-Gothic", Kurier;
rozmiar czcionki: 200px; transformacja tekstu: wielkie litery;
kolor: #fff;
cień tekstu: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 979016, 10px 80px # 451b0e;
}

Inny świetny przykład: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Zaokrąglony narożnik w HTML5

Zaokrąglony narożnik w HTML5

Stylowanie układu strony w HTML5 nigdy nie było tak łatwe od czasu wprowadzenia CSS. A teraz możesz mieć nawet zaokrąglone rogi elementów układu! Wyobraź to sobie; nigdy więcej tnącego obrazu tła, żadnych bałaganiarskich fragmentów obrazu. Spowoduje to wiele okrzyków dla projektantów stron internetowych.

Próbka kodująca

div {
obramowanie: stały 2px # 434343;
wypełnienie: 10 pikseli;
tło: # e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
szerokość: 500px;
}

Uwaga: Moz oznacza Mozillę, a webkit jest dla Safari i Chrome.

Inny świetny przykład: http://fjd1.com/roundcorner.html

4. Skalowalna grafika wektorowa (SVG) w HTML5

Samouczki, przewodnik i próbki HTML 5

Skalowalna grafika wektorowa lub powszechnie znana jako (SVG) to dwuwymiarowa grafika wektorowa zdefiniowana w plikach tekstowych XML. Innymi słowy, ponieważ ich DNA opiera się na pliku tekstowym XML, można je tworzyć lub edytować na platformie internetowej. Co oznacza również, że można łatwo skalować, a wyszukiwarki są w stanie odczytać i zrozumieć obraz.

Przykładowy kod

Inne świetne przykłady:

5. Osadzanie pliku filmu w HTML5

Wideo w HTML5

Oto kolejna interesująca część prezentująca możliwości HTML5. Wiele filmów online jest zazwyczaj prezentowanych użytkownikowi w postaci Flasha. Do niedawna osadzanie wideo w HTML5 powoli nabierało tempa (YouTube jest dobrym przykładem), a Flash powoli traci atrakcyjność. Dlaczego to jest takie? Użytkownicy mobilni. Jeśli chcesz, aby Twój film mógł być odtwarzany zarówno na telefonie iPhone, jak i telefonie z Androidem, HTML5 jest sposobem na przejście do przodu.

Aby osadzić wideo, musisz wiedzieć, że istnieją obecnie 3 formaty obsługiwane przez różne przeglądarki; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Przykładowy kod

Inny świetny przykład: https://www.html5rocks.com/en/tutorials/video/basics/

6. Prezentacja slajdów w HTML5

Samouczki, przewodnik i próbki HTML 5

Powerpoint to synonim nazwy skojarzonej z prezentacją slajdów. Ale po co ograniczać się do prezentacji offline, w której można tworzyć slajdy przeznaczone dla odbiorców internetowych? HTML5 przyszedł na ratunek, tworząc bardzo wydajne slajdy prezentacji wraz z menu przejścia i menu nawigacji. Najlepsze jest to, że możesz nawet zastosować transformację 3D do swojej prezentacji.

Przykładowy kod

przed {
przejście: łatwość wprowadzania wszystkich 1;
}

pre: hover {
kolor tła: # F2F5FE;
kolor obramowania: czarny;
}

div {
transformacja: rotate3d (1,1,0, 45 stopni);
}

Inne świetne przykłady:

7. Treść edytowalna w HTML5

Samouczki, przewodnik i próbki HTML 5

Tekst statyczny jest tak oldschoolowy w czasach, w których światem rządzą elastyczność i dynamika. W HTML5 możesz zdefiniować obszar tekstowy, który będzie edytowalny przez użytkownika bez edytora tekstu.

Przykładowy kod

Ta treść jest edytowalna!

Inny świetny przykład: http://html5demos.com/contentitable

8. Interaktywne płótno internetowe w HTML5

Samouczki, przewodnik i próbki HTML 5

Oprócz SVG w HTML5 płótno to kolejna najlepsza rzecz, jaka kiedykolwiek wydarzyła się w Internecie. Płótno umożliwia renderowanie kształtów 2-wymiarowych, które przenoszą interaktywność na cały poziom bez pomocy Flasha.

Warto jednak wspomnieć tutaj o prostym kodowaniu w HTML5, które tworzy niesamowitą interakcję animacji.

Inny świetny przykład: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Przeciągnij i upuść w HTML5

Samouczki, przewodnik i próbki HTML 5

Przeciągnij i upuść (czasami znany jako DnD) to kolejna fajna funkcja dostępna w HTML5. Świetnym przykładem może być wdrożenie przez Google w ich Gmailu. Jeśli korzystasz z dowolnej przeglądarki obsługującej HTML5, możesz po prostu przeciągnąć plik z komputera i upuścić w oknie tworzenia wiadomości. Zostanie on automatycznie dodany jako załącznik. Jakie to jest świetne?

Przykładowy kod (natywny DnD)

document.addEventListener („dragstart”, funkcja (zdarzenie) {
event.dataTransfer.setData („tekst”, „tekst niestandardowy”);
event.dataTransfer.effectAllowed = ‘copy’;
}, fałszywe);

Inny świetny przykład: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Wykres danych w czystym CSS w HTML5

Samouczki, przewodnik i próbki HTML 5

Przed wersją HTML5 niemożliwe jest również stworzenie prezentowalnego wykresu za pomocą kodowania w HTML. Ponadto zmiana wartości danych i odzwierciedlenie ich na wykresie nie jest prostym zadaniem. Znowu HTML5 na ratunek. Razem z CSS możesz stworzyć absolutnie piękny wykres, który zawstydzi Microsoft Excel. Kody są proste, a wszystko, co musisz zrobić, to poświęcić czas na dostosowanie idealnego koloru i efektu do wykresu.

Inny świetny przykład: http://cssglobe.com/pure-css-data-chart/

Nie mogę uzyskać wystarczającej ilości HTML 5?

Tak jak my! Oto więcej na ten temat, sprawdź je.

* 30 bardzo fajnych przykładów stron HTML 5
* Rozpoczęcie pracy z HTML 5
* Musisz przeczytać samouczki HTML 5 w 2012 roku
* Naucz się HTML 5: 10 lekcji, które musisz przeczytać

Sprawdź także  ten kurs awarii HTML 5 autorstwa Robina Nixona. Robin Nixon jest autorem Learning PHP, MySQL i JavaScript; kurs obejmuje prawie wszystko, co początkujący powinien wiedzieć w HTML5 – w tym podstawowe kodowanie HTML, płótno HTML5 do rysowania, geolokalizację, przechowywanie lokalne, a także audio i wideo HTML5.

Oryginalny artykuł został po raz pierwszy opublikowany w dniu Blog WHSR; jest teraz zarządzany i aktualizowany przez personel BuildThis.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map