Започните с ХТМЛ5 / ЦСС3: Савети, излоге и кодирање узорака

ХТМЛ5 добија све већу популарност и почиње еволуизирати читав веб интерфејс. Чак су и неки веб програмери цитирали да су ХТМ5 елементи и визуелни ефекти упоредиви са Фласх-ом. Нови стил скрипта је лако разумети, а могућности унапређења веб интерфејса су неограничене. Па колико је ионако занимљив овај ХТМЛ5?


Овај чланак има за циљ да пружи читаоцима увид у оно што бисте требали знати о ХТМЛ5 и што је најважније неколико савета & трикови за прављење лаких, атрактивних и интерактивних ХТМЛ5 страница.

1. Основни у ХТМЛ5

ХТМЛ5

Пре него што започнемо даље о овој теми у ХТМЛ5, биће добро да прво проверите свој тренутни прегледач. Како је већина прегледача још увек у режиму развоја (унапређење за смештај ХТМЛ5), неке од поменутих функција можда нису подржане.

Ево кратких савета за проверу вашег компатибилност прегледача.

Да бисте даље разумели ограничење одређеног претраживача, можете се обратити овде.

2. Текстуални ефекти – Додавање сенке и напредни ефекат текста у ХТМЛ5

Текстуални ефекти у ХТМЛ5

Основни ефекат сенке на текст

Ово је најједноставнији код низа који ваш уобичајени наслов претвара у текст цоол изгледа. Никада не подцените ефекат сенке. Да бисте створили овај сличан ефекат, потребан је веб дизајнер да прође кроз више корака уређивања слика у Пхотосхопу. А сада је потребно само једну линију кода. Удаљеност сенке, боја могу се променити према садржају вашег срца.

Узорак кодирања

#схадов х1 {
тект-схадов: 0пк 1пк 1пк ргба (0,0,0, .2);
}

Текст о претходном ефекту сличном ватри

Сљедећи савјет ће вам показати како ХТМЛ5 кодирање можете прилагодити тексту који изгледа хладније. Ако довољно експериментишете или пронађете друге примере, могућности прилагођавања ефеката су бескрајне. Напомена: овај пример није креиран ниједан софтвер за уређивање слика. Само обични кодови у ХТМЛ5.

Узорак кодирања

#фире х1 {
поравнавање текста: центар;
маргина: 200пк ауто;
породица фонтова: "Леагуе-Готхиц", Курир;
фонт-сизе: 200пк; трансформација текста: велика слова;
боја: #ффф;
тект-схадов: 0 0 20пк # фефцц9, 10пк -10пк 30пк # феец85, -20пк -20пк 40пк # ффае34, 20пк -40пк 50пк # ец760ц, -20пк -60пк 60пк # цд4606, 0 -80пк 70пк # 973716, 10п 80пк # 451б0е;
}

Други сјајан пример: хттп://мудцу.бе/лабс/ХТМЛ5Роцкс/Тект-Еффецтс.хтмл#спацеаге

3. Заокружени угао у ХТМЛ5

Заобљени угао у ХТМЛ5

Стилски изглед веб странице у ХТМЛ5 никада није био тако једноставан од увођења ЦСС-а. А сада чак можете имати заобљене углове елемената вашег изгледа! Замислите ово; нема више сечења позадинске слике, нема више прљавих фрагмената слике. Ово ће донети много весеља веб дизајнерима.

Узорак кодирања

див {
обруб: 2пк солид # 434343;
паддинг: 10пк;
позадина: # е3е3е3;
-мож-радијус: 10пк;
-веб-граница-радијус: 10пк;
ширина: 500пк;
}

Напомена: Моз значи Мозилла, а вебкит је за Сафари и Цхроме.

Други сјајан пример: хттп://фјд1.цом/роундцорнер.хтмл

4. Скалабилна векторска графика (СВГ) у ХТМЛ5

ХТМЛ 5 туторијали, водич и узорци

Скалабилна векторска графика или опћенито позната као (СВГ) је дводимензионална векторска графика која је дефинисана у КСМЛ текстуалним датотекама. Другим речима, пошто се њихов ДНК заснива на КСМЛ текстуалној датотеци, они се могу креирати или уређивати на веб платформи. Што такође значи, слика се лако може мењати, а претраживачи могу да прочитају и разумеју слику.

Узорак код

Остали сјајни примери:

5. Уметање датотеке филма у ХТМЛ5

Видео у ХТМЛ5

Ево још једног занимљивог дела који приказује могућности ХТМЛ5. Многи видео снимци на мрежи обично се презентирају веб кориснику у облику Фласх-а. Донедавно, уграђивање видео записа у ХТМЛ5 полако добија на значају (ИоуТубе је добар пример), а Фласх полако губи на атрактивности. Зашто је то тако? Корисници мобилних уређаја. Ако желите да се ваш видео може репродуковати и на иПхоне и Андроид телефонима, ХТМЛ5 је начин за напредовање.

Да бисте уградили видео, мораћете знати да постоје тренутно 3 формата подржана од стране различитих претраживача; .мп4 (Х.264 + ААЦ), .огг (Тхеора + Ворбис), .вебм (ВП8 + Ворбис)

Узорак код

Други сјајан пример: хттпс://ввв.хтмл5роцкс.цом/ен/туториалс/видео/басицс/

6. Презентација дијапозитива у ХТМЛ5

ХТМЛ 5 туторијали, водич и узорци

Поверпоинт је синонимно име придружено презентацији дијапозитива. Али зашто се ограничити презентацијом ван мреже где можете креирати слајдове намењене веб публици? ХТМЛ5 нам је помогао у креирању много моћних презентацијских презентација, заједно с прелазним и навигацијским менијем. Најбољи део је што чак можете да примените 3Д трансформацију на своју презентацију.

Узорак код

пре {
прелаз: све лагано убацивање;
}

пре: лебдјети {
позадинска боја: # Ф2Ф5ФЕ;
боја обруба: црна;
}

див {
трансформисање: ротате3д (1,1,0, 45дег);
}

Остали сјајни примери:

7. Садржај који се може уређивати у ХТМЛ5

ХТМЛ 5 туторијали, водич и узорци

Статички текст је тако стара школа у доба у којем флексибилност и динамика владају светом. У ХТМЛ5-у можете да дефинишете текстуалну област коју је веб корисник направио за уређивање без уређивача текста.

Узорак код

Овај садржај је могуће уређивати!

Други сјајан пример: хттп://хтмл5демос.цом/цонтентедитабле

8. Интерактивно Веб Цанвас у ХТМЛ5

ХТМЛ 5 туторијали, водич и узорци

Поред СВГ-а у ХТМЛ5-у, платно је следећа најбоља ствар која се икада догодила на вебу. Платно омогућава рендерисање два димензионална облика који интерактивност доводе на цео ниво без помоћи Фласх-а.

Ипак, овде је вредно споменути једноставно кодирање у ХТМЛ5 који ствара невероватну интеракцију анимације.

Други сјајан пример: хттп://ввв.бестфреевебресоурцес.цом/2010/09/10-бест-хтмл5-цанвас-апплицатионс.хтмл

9. Превуците и испустите у ХТМЛ5

ХТМЛ 5 туторијали, водич и узорци

Превлачење и повлачење (понекад познато као ДнД) је још једна цоол функција која је доступна за ХТМЛ5. Одличан пример би била имплементација од стране Гоогле-а у њиховом Гмаил-у. Ако користите било који од прегледача који подржавају ХТМЛ5, можете једноставно да превучете датотеку с рачунара и паднете на прозор за слање порука. Аутоматски ће се додати као прилог. Како је то кул?

Пример узорка (матични ДнД)

доцумент.аддЕвентЛистенер (‘драгстарт’, функција (догађај) {
евент.датаТрансфер.сетДата (‘текст’, ‘Прилагођени текст’);
евент.датаТрансфер.еффецтАлловед = ‘копирај’;
}, фалсе);

Други сјајан пример: хттп://ввв.хтмл5роцкс.цом/ен/туториалс/днд/басицс/

10. Чисти ЦСС графикон података у ХТМЛ5

ХТМЛ 5 туторијали, водич и узорци

Пре ХТМЛ5-а, такође је немогуће креирати презентативни графикон употребом кодирања у ХТМЛ-у. Штавише, промена вредности података и њихово одражавање на графикону није једноставан задатак. Опет, ХТМЛ5 на спас. Заједно са ЦСС-ом можете да направите апсолутно леп графикон који Мицрософт Екцел срами. Кодови су једноставни, а све што требате учинити је трошити вријеме на прилагођавање савршене боје и ефекта за вашу схему.

Други сјајан пример: хттп://цссглобе.цом/пуре-цсс-дата-цхарт/

Не можете добити довољно ХТМЛ 5?

И ми такође! Ево више о овој теми, погледајте их.

* 30 врло кул примера веб локација ХТМЛ 5
* Увод у ХТМЛ 5
* Морате прочитати ХТМЛ 5 Водичи у 2012
* Научите ХТМЛ 5: 10 морају прочитати лекције

Такође, погледајте  овај курс за рушење ХТМЛ 5 од Робина Никона. Робин Никон је аутор учења ПХП-а, МиСКЛ-а и ЈаваСцрипт-а; курс покрива готово све што новорођенче треба да зна у ХТМЛ5 – укључујући основно ХТМЛ кодирање, ХТМЛ5 платно за цртање, геолокацију, локалну меморију, као и ХТМЛ5 аудио и видео.

Оригинални чланак први пут је објављен на ВХСР Блог; то сада управља и ажурира особље услуге БуилдТхис.ио.

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