Полезные сервисы и шпаргалка по HTML5 и CSS3

Всем привет! Похоже, что HTML 5 и CSS 3 завладел умами вебмастеров. Вот только до полной их интеграции очень далеко. Доля устаревших браузеров слишком велика. Да и в новых браузерах реализовано далеко не всё. Похоже, что HTML 5 и CSS 3 оказались слишком радикальными новинками. По крайней мере, Рунету понадобится ещё лет 10 пока оно всё сможет прижиться на наших сайтах. Тем не менее, уже сейчас надо браться за ум и начинать изучения современные стандарты.

Полезные сервисы и шпаргалка по HTML5 и CSS3

В данном посте я хочу предложить вам подборку сервисов, которые наглядно продемонстрируют возможности HTML 5 и CSS 3, а также будут полезны для тех, кто желает разобраться с новыми стандартами. Уточню. Приступим?

В HTML 5 и CSS 3 появилось достаточно много нового и интересного. Начиная с новых элементов и свойст, заканчивая canvas (с англ. холст) элементами, которые предназначены для создания растрового изображения при помощи JavaScript. Чтобы сразу вдохновить вас должным образом, предлагаю начать с сайта The Expressive Web разработанный (как я понимаю) компанией Adobe.

The Expressive Web - возможности HTML5 и CSS3

Здесь вы найдёте следующие примеры: CSS3 Animations. CSS3 Gradients, CSS3 Media Queries, CSS3 Shadows, CSS3 Transitions, CSS3 Web Fonts, HTML5 Audio, HTML5 Canvas, HTML5 Forms, HTML5 Viseo и Web Storage

Если же вам интересно получить всё и сразу, то я рекомендую обратить внимание на такой сервис как CodePen. Здесь собраны образцы многих готовых решений. Причём все они разбиты на три основные составляющие: HTML, CSS и JavaScript.

CodePen - готовые решения HTML5 и CSS3

Причём вы сможете сразу вносить и изменения в код примера, наблюдая результат. Думаю, что такой подход к изучению не лишён смысла. Как говориться: совместите приятное с полезным.

Ну а теперь давайте перейдём к чему-то более основательному. В частности к генератору HTML 5 кода. В Интернете достаточно много мануалов, но вот готовые и автоматические решения попадаются не очень часто. Поэтому советую взять на заметку такой сервис как Generate a HTML5 Framework with SwitchToHTML5. Найти его можно тут.

Generate a HTML5 Framework with SwitchToHTML5 - генератор веб-документа в формате HTML 5

По крайней мере, структуру веб-документа вы сможете построить достаточно легко. Останется только придать ему нужный вид. И вот в этом вам смогут помочь сразу два генератора CSS 3. А начну я конечно с CSS3 Generator, которым давно и активно пользуюсь.

CSS3 Generator - генератор фишек CSS3

Он позволяет сгенерировать код всех наиболее интересных фишек CSS3. В частности: закруглённые уголки, тень у блока или текста, RGB цвет с прозрачностью фона и текста, подключение шрифта, авто-разбиение текста на колонки, изменение размеров текстовых полей и многое другое.

Ну а второй генератор предназначен для работы с градиентами, которые в CSS3 могут состоять не только из двух цветов. Всё это делает такой замечательный генератор как Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator - генератор эфекта градиента CSS3

Следует отметить, что его интерфейс многое позаимствовал из Photoshop. Потому проблем, как такой, возникнуть недолжно. К тому же здесь поддерживается кросбраузерность даже со старыми версиями Internet Explorer, где как известно очень давно используется filter.

Ну а теперь копнём ещё глубже. В частности, если вы планируете плотно работать с HTML 5 и CSS 3, вам будет не лишним иметь под рукой краткие шпоргалки. Так прекрасные шпоргалки по HTML 5 (правда, на английском языке) я нашёл на сайте InMotion Hosting. Первая из них, содержит теги HTML 5.

шпаргалка тегов HTML5

Вторая - атрибуты обработки событий.

шпаргалка атрибутов обработки событий HTML5

Ну а третья – сведения о поддержки тех или иных новинок HTML 5 разными браузерами.

шпаргалка кросбраузерности элементов HTML5, поддержка HTML5 в браузерах

К слову, раз уж мы заговорили о кросбраузерности, а именно о ней мы и заговорили, то здесь будет не лишним упомянуть о такой штуке как html5shim. Эта JavaScript библиотека решает проблему с таким убогим, но популярным, браузером как Internet Explorer. Подключите её должным образом, и всё будет путём.

А вот шпаргалку по CSS3 я выбрал не сразу. В основном они даются в виде PDF, а мне хотелось картинку. Таковая нашлась на блоге GoSquared. Пользуйтесь!

шпаргалка CSS3

На этом у меня всё. Надеюсь, мой пост был вам полезен. Удачи!

С уважением, Константин


Коротакая ссылка: http://goo.gl/SwWyU

Видео на закуску: RSPCA - Simon's Sister's Dog 'Fed Up'

Twitter Facebook ВКонтакте Одноклассники Google+

7 комментариев:

нерадивый бухгалтер
Вот этот пост точно не для пятничного послеобеденного прочтения, понятно, что ничего не понятно))
Константин Кирилюк
2нерадивый бухгалтер: ну, вам как бухгалтеру, конечно это всё муть. Ничего, следующую неделю начну с чего-то попроще, например с горячих клавиш в Windows, пост уже пишется :)
нерадивый бухгалтер
Ага нам бы чего попроще да полегче))
Горячими клавиашами пользуюсь постоянно, но может узнаю и чего нового)
Вадим
Видел реализацию на Wolfenstein на HTML5, точно не знаю, на пятом HTML она ли была, но было интересно поиграть. Да и интересно, они смогут на воксельной графике все это продумать, Воксэлстейн вроде бы игра называлась
Константин Кирилюк
2Вадим: да, сейчас всё идёт к тому, что появится какая-то альтернатива Flash, но думаю что это будет нечто более продвинутое.
Влад
Да, нам еще до Html 5 далеко, и со всех браузеров его только поддерживает google chrome. Печально:(
Константин Кирилюк
Влад, на мой взгляд, больше всего реализовано из HTML 5 именно в браузере Opera, но что-то есть и у других. Больше всех отстает IE, а точнее ситуация сложна из-за того, что люди пользуются его старыми версиями имхо.
Отправить комментарий