Початок роботи з HTML5 / CSS3: Поради, вітрини та зразки кодування

HTML5 набирає все більшої популярності і починає еволюціонувати весь веб-інтерфейс. Навіть деякі веб-розробники цитують, що елементи HTM5 та візуальні ефекти порівнянні з Flash. Новий стиль сценарію легко зрозуміти, а можливості покращення веб-інтерфейсу безмежні. Тож наскільки цікавий цей HTML5?


Ця стаття покликана дати читачам зрозуміти, що вам слід знати про HTML5 та, головне, кілька порад & прийоми створення легких, привабливих та інтерактивних сторінок HTML5.

1. Основні в HTML5

HTML5

Перш ніж розпочати цю тему в HTML5, буде добре перевірити свій поточний браузер. Оскільки багато браузерів досі перебувають у режимі розробки (удосконалення для розміщення HTML5), деякі функції, згадані тут, можуть не підтримувати.

Ось короткі поради, щоб перевірити своє сумісність браузера.

Щоб далі зрозуміти обмеження певного браузера, ви можете посилатися на тут.

2. Текстові ефекти – Додавання тіньового та попереднього текстового ефекту в HTML5

Текстові ефекти в HTML5

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

Це найпростіший штриховий код, який перетворює ваш звичайний заголовок у текст класного вигляду. Ніколи не варто недооцінювати ефект тіні. Для створення подібного вигляду ефекту потрібно веб-дизайнеру пройти кілька етапів редагування зображень у Photoshop. А тепер все, що потрібно, – це лише один рядок коду. Відстань тіні, колір можна змінити відповідно до вмісту серця.

Зразок кодування

#shadow h1 {
текст-тінь: 0px 1px 1px rgba (0,0,0, .2);
}

Текст про попередній вогнеподібний ефект

Наступна порада – продемонструвати вам, як кодування HTML5 можна перетворити на ще більш крутий текст. Якщо експериментувати достатньо, або знаходити інші приклади, можливості налаштування ефектів нескінченні. Примітка. Цей приклад не створено жодним програмним забезпеченням для редагування зображень. Просто прості коди в HTML5.

Зразок кодування

# вогонь h1 {
вирівнювання тексту: центр;
маржа: 200px авто;
сімейство шрифтів: "Ліга-готика", Кур’єр;
розмір шрифту: 200px; перетворення тексту: великі літери;
колір: #fff;
текст-тінь: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10p 80px # 451b0e;
}

Інший чудовий приклад: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Закруглений кут у HTML5

Закруглений кут у HTML5

Створення макета веб-сторінки в HTML5 ніколи не було таким простим з моменту запровадження CSS. А тепер у вас можуть бути навіть закруглені кути елементів компонування! Уявіть це; не більше нарізання фонового зображення, не більше брудних фрагментів зображення. Це принесе багато привіт веб-дизайнерам там.

Зразок кодування

div {
облямівка: 2px суцільний # 434343;
підкладка: 10px;
фон: # e3e3e3;
-моз-кордон-радіус: 10 пікселів;
-webkit-border-radius: 10px;
ширина: 500px;
}

Примітка: Moz означає Mozilla, а webkit – для Safari та Chrome.

Інший чудовий приклад: http://fjd1.com/roundcorner.html

4. Масштабована векторна графіка (SVG) у HTML5

Підручники, посібник та зразки HTML 5

Масштабована векторна графіка або загальновідома назва (SVG) – це двовимірна векторна графіка, яка визначена в текстових файлах XML. Іншими словами, оскільки їх ДНК заснована на текстовому файлі XML, їх можна створити або редагувати на веб-платформі. Що також означає, що масштаб може бути легко, а пошукові системи здатні читати та розуміти зображення.

Зразок коду

Інші чудові приклади:

5. Вставлення файлу фільму в HTML5

Відео в HTML5

Ось ще одна цікава частина, яка демонструє можливості HTML5. Багато відео в Інтернеті зазвичай представлені веб-користувачеві у вигляді Flash. До недавнього часу вбудовування відео в HTML5 повільно набирає обертів (YouTube – хороший приклад), а Flash повільно втрачає свою привабливість. Чому це так? Мобільні користувачі. Якщо ви хочете, щоб ваше відео могло відтворюватися як на телефонах iPhone, так і на Android, HTML5 – це спосіб рухатися вперед.

Щоб вставити відео, вам потрібно знати, що зараз три формати підтримуються різними браузерами; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Зразок коду

Інший чудовий приклад: https://www.html5rocks.com/uk/tutorials/video/basics/

6. Презентація слайдів у HTML5

Підручники, посібник та зразки HTML 5

Powerpoint був асоційованою назвою синоніму з презентацією слайдів. Але навіщо обмежуватись офлайн-презентацією, де можна створювати слайди, призначені для веб-аудиторії? HTML5 прийшов на допомогу в створенні значно потужних слайдів презентації, доповнених переходом та меню навігації. Найкраще – ви навіть можете застосувати 3D-трансформацію до своєї презентації.

Зразок коду

до {
перехід: всі 1s простота входу;
}

попередньо: навести курсор {
колір фону: # F2F5FE;
бордюрний колір: чорний;
}

div {
перетворення: rotate3d (1,1,0, 45deg);
}

Інші чудові приклади:

7. Вміст, що можна редагувати в HTML5

Підручники, посібник та зразки HTML 5

Статичний текст є такою старої школою в епоху, коли гнучкість та динаміка керують світом. У HTML5 ви можете визначити текстову область, яку вона редагує веб-користувач без редактора тексту.

Зразок коду

Цей вміст можна редагувати!

Інший чудовий приклад: http://html5demos.com/contenteditable

8. Інтерактивне веб-полотно в HTML5

Підручники, посібник та зразки HTML 5

Окрім SVG у HTML5, полотно – це найкраще, що коли-небудь траплялося в Інтернеті. Полотно дозволяє відтворювати 2-х розмірні фігури, які виводять інтерактивність на цілий рівень без допомоги Flash.

Тим не менш, тут слід згадати просте кодування в HTML5, яке створює дивовижну взаємодію з анімацією.

Інший чудовий приклад: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Перетягування в HTML5

Підручники, посібник та зразки HTML 5

Перетягування (іноді відоме як DnD) – ще одна цікава функція, доступна для HTML5. Чудовим прикладом може бути впровадження Google у своєму Gmail. Якщо ви користуєтесь будь-яким із підтримуваних веб-переглядачів HTML5, ви можете просто перетягнути файл зі свого комп’ютера та перейти до вікна створення повідомлення. Він буде автоматично додаватися як додаток. Як це круто?

Приклад коду (рідний DnD)

document.addEventListener (‘dragstart’, функція (подія) {
event.dataTransfer.setData (‘текст’, ‘Індивідуальний текст’);
event.dataTransfer.effectAllowed = ‘копія’;
}, помилковий);

Інший чудовий приклад: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Чиста діаграма даних CSS у HTML5

Підручники, посібник та зразки HTML 5

Перед HTML5 також неможливо створити презентабельну діаграму, просто використовуючи кодування в HTML. Крім того, змінити значення даних та відобразити їх на графіку не є простим завданням. І знову HTML5 на допомогу. Разом з CSS ви можете створити абсолютно гарну діаграму, яка змушує Microsoft Excel принизити ганьбу. Коди прості, і все, що вам потрібно зробити – це витратити час на налаштування ідеального кольору та ефекту для вашої діаграми.

Інший чудовий приклад: http://cssglobe.com/pure-css-data-chart/

Неможливо отримати HTML 5?

Так і ми! Ось більше по темі, перейдіть на їхню перевірку.

* 30 дуже класних прикладів веб-сайтів HTML 5
* Початок роботи з HTML 5
* Потрібно прочитати HTML 5 Підручники 2012 року
* Дізнайтеся HTML 5: 10 Потрібно прочитати уроки

Також перевірити  цей курс зриву HTML 5 від Робіна Ніксона. Робін Ніксон є автором Learning PHP, MySQL та JavaScript; Курс охоплює майже все, що повинен знати новачок у HTML5 – включаючи основне кодування HTML, полотно HTML5 для малювання, геолокацію, локальне зберігання, а також аудіо та відео HTML5.

Оригінальна стаття вперше опублікована о Блог WHSR; його тепер керують та оновлюють співробітники 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