Начало работы с 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.

Пример кодирования

#fire h1 {
выравнивание текста: по центру;
поле: 200px авто;
семейство шрифтов: "Лига-готическом", Courier;
размер шрифта: 200 пикселей; преобразование текста: верхний регистр;
цвет: #fff;
Текстовая тень: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10pp 80px # 451b0e;
}

Другой отличный пример: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Закругленный угол в HTML5

Закругленный угол в HTML5

Стилизовать макет веб-страницы в HTML5 еще никогда не было так просто с момента появления CSS. И теперь вы можете даже закруглить углы своих элементов макета! Вообразите это; не нужно больше нарезать фоновое изображение, не нужно больше грязных фрагментов изображения. Это принесет много радости веб-дизайнерам.

Пример кодирования

div {
граница: 2px solid # 434343;
отступы: 10 пикселей;
фон: # e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
ширина: 500 пикселей;
}

Примечание: 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 – это путь для продвижения вперед.

Чтобы встроить видео, вам нужно знать, что в настоящее время существует 3 формата, поддерживаемых различными браузерами; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Образец кода

Другой отличный пример: https://www.html5rocks.com/en/tutorials/video/basics/

6. Слайд-презентация в HTML5

Учебники по HTML 5, руководство и примеры

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

Образец кода

до {
переход: все 1с easy-inout;
}

pre: hover {
цвет фона: # F2F5FE;
цвет бордюра: черный;
}

div {
преобразование: rotate3d (1,1,0, 45 градусов);
}

Другие отличные примеры:

7. Редактируемый контент в HTML5

Учебники по HTML 5, руководство и примеры

Статический текст настолько стар, что в эпоху, когда гибкость и динамичность правят миром. В HTML5 вы можете определить текстовую область, сделавшую ее редактируемой пользователем без текстового редактора..

Образец кода

Этот контент редактируемый!

Другой отличный пример: http://html5demos.com/contenteditable

8. Интерактивный веб-холст в HTML5

Учебники по HTML 5, руководство и примеры

Помимо SVG в HTML5, canvas – следующая лучшая вещь, которая когда-либо случалась с сетью. Canvas позволяет отображать двухмерные фигуры, которые выводят интерактивность на весь уровень без помощи 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 (‘text’, ‘Customized text’);
event.dataTransfer.effectAllowed = ‘copy’;
}, ложный);

Другой отличный пример: 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 Робин Никсон. Робин Никсон – автор «Изучения 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