HTML5 и CSS3 произвели революцию в мире веб-разработок и веб-дизайна, поскольку принесли очень много новых функциональных возможностей и свойств, с которыми уже сейчас необходимо ознакомляться и изучать, что бы поднять свое мастерство на новый уровень.

В данной статье мы рассмотрим некоторые особенности и свойства HTML5 и CSS3, что даст вам возможность лучше узнать HTML5 и CSS3.

HTML5

HTML5 является пятой версией основного языка разметки web-страниц. На сегодня он поддерживается лишь несколькими браузерами, однако, уже в следующем году его использование значительно возрастет. Да, HTML5 будет окончательно завершен лишь к 2014 году, но функциональные возможности, которые доступны уже сейчас достаточный повод для его изучения, ведь они позволят добавить несколько классных элементов на ваш сайт.

Html5

Стив Джобс лихо отказал в использовании Flash для iOS из-за множества багов и его нестабильности, поэтому  изучение  того, как использовать наиболее сложные функции HTML5 должно быть обязательным для тех, кто хочет разрабатывать приложения и iOS-дружественные веб-сайты. С Google и его версией YouTube дружественной к HTML5, много разработчиков и дизайнеров увидели, насколько важным станет новый язык в ближайшем будущем. Тем не менее, не смотря на Firefox, который немного сопротивляется пришествию HTML5, дизайнеры и разработчики все же чувствуют необходимость подстраивать свои базы, когда внедряют новые возможности на веб-сайты.

Основная идея, которую несет в себе HTML5 – это не один сплошной объект, а скорее сборник небольших составляющих, которые, взаимодействуя, создают нечто новаторское и продвинутое. Каждый браузер может поддерживать разные свойства HTML5. И очень важно для тех, кто кодирует сайт, знать какие функции можно использовать для данного браузера, а какие поддерживаются другим.

HTML5 возник в виде надстройки над широко-популярным HTML4. Это значит, что веб-дизайнеру нет необходимости полностью переделывать существующий код, а надо всего лишь усовершенствовать старый. К примеру, формы могут быть обновлены, что бы позволить новым свойствам улучшить встроенный имейл (“ email input”)для тех, кто пользуется мобильными устройствами. Несмотря на то, что пользователи, застрявшие в IE6, все еще будут видеть его как поле для текста, они все равно смогут им пользоваться.

Вот несколько примеров HTML5 в действии:

html5html5html5

html5

Функциональные возможности:

  • Любой HTML5 синтаксис требует, что бы doctype был указан так, что бы браузер мог отображать страницу в стандартном режиме. Хорошо, что заявленный doctype стал проще, по сравнению с предыдущей версией HTML. Сейчас это всего лишь <!DOCTYPE html>
  • Аудио и видео поддержка в HTML5 просто потрясающая. Как только он будет окончательно запущен и все браузеры станут поддерживать HTML5, вы сможете с легкостью добавлять на ваши сайты видео и аудио без внешних плагинов.
  • Редактирование контента значительно упростится. Используя “contenteditable” атрибут, вы сможете быстро и легко изменять ваш текст, добавляя contenteditable=“true” к любому элементу.
  • Сanvas element позволит вам обойти Photoshop в создании 2D изображений, напрямую вставляя их в ваш код.
  • Приложение cache позволяет вам управлять веб-приложениями пока вы офлайн.

Почему его надо использовать:

  • HTML5 загружается гораздо быстрее чем его предшественник, поскольку реализует WebSockets.
  • Приложения для мобильных телефонов будут гораздо доступнее, если будут написаны в HTML5, так как не будет необходимости писать разные приложения для отдельных брендов телефонов, поскольку вы сможете создавать универсальные приложения для всех телефонов.
  • Вы получаете больше свободы и гибкости в создании своего веб-сайта.
  • Видео, аудио, изображения гораздо проще вписывать в код, отпадает необходимость в любом дополнительном софте.
  • Этот язык только развивается и его результатом всегда будут новые, лучшие и более быстрые функциональные возможности, в свете которых старые веб-сайты будут выглядеть устаревшими.
  • HTML5 основан на HTML4, так что старая верстка останется на месте, тогда как вы добавите новые функциональные возможности.
  • HTML5 и CSS3 вместе дадут вам серьезный кредит доверия, как дизайнеру.

CSS 3

Каскадные таблицы стилей (CSS) предлагают увеличить гибкость в презентации контента веб-сайта. Другими словами, они улучшают внешний вид. Даже если CSS3 пока не поддерживается всеми браузерами, он становится все более популярным, потому как что то менять становится гораздо проще. Если раньше пришлось бы для получение такого же эффекта использовать Javascript или создавать разные версии одного изображения с небольшими отличиями.

Единственной преградой использования CSS является необходимость использования фильтров, что бы контролировать отбражение контента в разных браузерах. И даже если Internet Explorer известен своими багами, то CSS может так же неправильно интерпретироваться и Firefox или Chrome. Таким образом, веб-дизайнерам  приходится создавать разные CSS коды для разных браузеров, либо использовать фильтры, обрезая, тем самым, CSS.

CSS3 предлагает несколько восхитительных новых возможностей по улучшению внешнего вида веб-сайта. Хоть эти возможности, может, не столь необходимы для функциональности сайта, однако пользователи всегда ожидают от веб-сайта красивого внешнего вида и легкости в использовании. CSS3 позволяет дизайнерам легко создавать сайты, которые вызывают восхищенные отзывы у пользователей.

Новые классные приемы

Box-shadows – CSS3 дает дизайнеру возможность получить эффект тени без создания нового изображения или использования Javascript плагина. Другая техника позволяет вызывать тень при наведении.

CSS3

Text shadows – предусматривает тень под HTML текстовыми элементами.

CSS3

[php] h1 {
text-shadow: 0px 1px 1px rgba(0,0,0,.2);

}  [/php]

Упрощенное добавление шрифтов (Easier font additions) – что бы добавить новый шрифт достаточно загрузить его на ваш сервер, дать ссылку на файл CSS и создать “font-family”.

Фоны из нескольких изображений (Multiple backgrounds):

[php] body {

background:

url(../images/bottom-left.png) top right fixed no-repeat,

url(../images/bottom-right.png) top left fixed no-repeat,

url(../images/top-left.png) bottom left fixed no-repeat,

url(../images/top-right.png) bottom right fixed no-repeat;

background-color:#ffffff;

} [/php]

Рамка из изображений (Border images) - вместо использования старой одноцветной рамки, CSS3 позволяет подгружать изображения для их использования как рамки.

Уровни прозрачности (Opacity levels) – раньше вы должны были создавать новое изображение или использовать фильтр CSS. Сейчас вам достаточно указать “opacity: 0.5;” или другой желаемый номер для достижения эффекта.

RGBA coloring — вместо использования hex цветов и их запоминания или обращения к посказкам, эта техника позволяет вам указывать необходимое количество красного, зеленого, синего и уровень прозрачности в вашем дизайне и нет надобности в расширениях браузеров. Буковка «A» указывает на канал прозрачности. Вы можете сделать свой цвет полупрозрачным, изменяя значение этого параметра.

Transform – этот код позволяет вам контролировать размер области в наведенном состоянии.

Закругленные углы (Rounded corners) – ранее это требовало усилий, но сейчас вы можете избавляться от острых углов без использования изображений.

CSS3

[php]   div {
border: 2px solid #434343;

padding: 10px;

background: #e3e3e3;

-moz-border-radius: 10px; /* для Mozilla  */

-webkit-border-radius: 10px; /* Safari и Chrome */

border-radius: 10px;

width: 500px;  } [/php]

Выводы и дополнительные материалы

CSS3 объединяет в себе большое количество свойств и синтаксис их написания порой сложен для запоминания. Так вот, чтобы не обременять «свой чердак лишним», как говорил Шерлок Холмс, лучше пользоваться справочными ресурсами и инструментами:

Дополнительные инструменты вы можете найти в нашей статье: 8 полезных он-лайн инструментов для веб-дизайнеров и разработчиков.

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

Источник статьи — http://webdesignledger.com/tips/html5-css3-take-your-design-to-another-level.