Создание минималистского плеера YouTube

Оригинал: http://playground.mobily.pl/tutorials/creating-a-minimalist-youtube-player.html

Перевод: Влад Мержевич

Сегодня я собираюсь показать вам реально классный и минималистский плеер YouTube. Давайте начнём!

Матрица преобразований

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

Построение интерактивной карты с Raphaël

Оригинал: http://playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html

Перевод: Влад Мержевич

Raphaël это мощная библиотека, которая должна упростить работу с векторной графикой в Интернете. Сегодня я научу вас, как создать интерактивную карту с нуля.

С Новым годом!

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

В честь праздника от сайта htmlbook.ru небольшая акция, которая продлится до 15 января. Вы можете одновременно приобрести обновлённый справочник по CSS и книгу Рецепты CSS за полцены (40 рублей).

Масштабирование фона

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

За управление размером отвечает свойство background-size, в качестве значения можно указывать ключевое слово cover, тогда размер изображения будет такой, чтобы его ширина и высота поместились в заданную область (например, окно веб-страницы); ключевое слово contain масштабирует картинку так, чтобы хотя бы одна сторона картинки целиком поместилась в заданную область. Кроме того, допустимо указывать явные размеры по горизонтали или вертикали в процентах или других единицах CSS. На рис. 1 показано изменение размеров изображений при разных значениях background-size. Серым цветом выделен блок размером 280х200 пикселов внутри которого устанавливается фон.

Рецепты CSS

Доступна новая платная цифровая книга «Рецепты CSS» представляющая собой сборник ответов на типовые вопросы по CSS и HTML. Все примеры выполнены на HTML5, активно используется CSS3. Кроме самих рецептов приведены двух и трёхколоночные типовые макеты для вёрстки.

Стоимость 50 рублей, доступны два формата: chm для просмотра в Windows и в виде набора html-файлов для любой платформы.

Рецепты CSS в формате CHM

Рецепты CSS в виде набора HTML-файлов

Мини-конкурс «Сады Семирамиды»

На форуме htmlbook.ru объявлен очередной мини-конкурс по использованию свойств CSS3 для рисования на тему «Сады Семирамиды». Работы принимаются до 14 ноября. Правила конкурса и подробности смотрите в этой теме.

Радиальный градиент

Радиальные по своему принципу похожи на линейные градиенты, но один цвет переходит в другой не вдоль прямой линии, а словно круги по воде вокруг точки. На рис. 1 представлено для сравнения одновременно два разных градиента: радиальный (рис. 1а) и линейный (рис. 1б).

Радиальный градиент Линейный градиент
а б

Рис. 1. Радиальный и линейный градиент

Линейный градиент

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

Скруглённые уголки

Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius. Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.

Полупрозрачный фон

Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространении в разных операционных системах, потому что смотрится стильно и красиво. В веб-дизайне полупрозрачность также применяется и достигается за счёт свойства opacity или формата цвета RGBA, который задаётся для фона.

Несколько фоновых рисунков

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

Тени

Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину.

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

Значения свойства box-shadow

Рис. 1. Значения свойства box-shadow

Декоративные рамки

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

Зачем ты так, Mozilla?

Компания Google со своим браузером Chrome нарушила все общепринятые нормы именования версий программ. Как обычно это происходит. Если изменения достаточно серьёзные, то присваивается мажорная часть, например 2.0 вместо 1.0 или для краткости просто 2, если же обновления были, но не тянут на полноценную версию, тогда повышается минорная часть, например, 2.1 вместо 2.0 и 2.2 вместо 2.1. Браузер Chrome выходит три года, но за это время по нумерации версий переплюнул старичка Opera, которому в несколько раз больше лет. Всё потому, что любое, самое ничтожное с точки зрения пользователей новшество, сразу же вызывает повышение номера версии и вместо 1.1 выходит 2.0, затем 3.0 и т. д.

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

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

Mozilla объявила, что переходит на короткие циклы выпуска программы Firefox, так что в следующем году нас как минимум ожидает версия 12.0. Что это даёт пользователям? Да ничего хорошего. Некоторые дополнения с новой версией перестают работать, другие начинают работать несколько по другому. Широкий разброс версий только сбивает с толку, потому как непонятно, что в действительности реализовано в новой версии из HTML и CSS, а что нет. Разработчики просто не успевают привыкнуть и понять различия, когда следом надвигается уже новая версия.

Пусть переходят хоть на сверхкороткие выпуски и делают новые версии хоть каждую ночь, только чтоб не морочили голову, что это новая версия, тогда как в реальности в ней только пара особенностей появилась. На деле эта всё та же медленная и прожорливая программа, что была год назад, которая должна называться 6.1, а не 7.0. Из Firefox почему-то насильно хотят сделать второй Chrome, забывая, что второй такой браузер не нужен. Мы любим Лисичку не за то, что это Хром, а за то, что под неё есть множество полезных и нужных дополнений и вёрстка проверяется по стандартам.

Страницы