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

Для начала подготовим изображения. Нам потребуется две картинки соответствующие разному статусу чекбокса — когда он включен и выключен (рис. 1).

Рис. 1. Вверху чекбокс выключен, внизу он включен

Создание хорошего CSS-макета начинается с определения размеров всех элементов добавляемых в веб-приложение. Одной из очень запрашиваемых функций является возможность указывать размеры, используя сочетания разных единиц измерений. Например, хорошо было бы иметь возможность резервировать 50% от площади плюс пустое фиксированное значение, скажем, 10 пикселов. Так вы можете сделать это прямо сейчас используя свойство calc(). Эту функцию можно использовать с любым значением или числом, так что вы можете указывать её для позиционирования или вычисления цвета rgb(), поэтому calc() имеет множество замечательных применений в стилях.

Поддержка браузерами возможностей CSS3 и в связи с этим активное использование в веб-дизайне градиентов, теней и скруглений привело к тому, что стала размываться чёткая грань между встроенными элементами интерфейса и «нарисованными». На деле пользователю должно быть всё равно, что перед ним, ссылка или кнопка, пусть даже они выглядят абсолютно одинаково, ведь на то и другое можно щёлкнуть. В действительности же, неверное использование одного элемента взамен другого может привести к нарушению понимания логики сайта. Иными словами, посетителю сайта пользоваться им станет неудобно и некомфортно.

Давайте сделаем ссылку и кнопку, оформим их одинаково и посмотрим, чем же они различаются между собой кроме оформления. В примере 1 я вставил в код тег <a> и <button> и применил к ним стилевой класс design, при этом постарался убрать различия, чтобы эти два элемента выглядели похожими друг на друга как близнецы.

Здравствуйте, дорогие веб-разработчики!

В этом анонсе я хочу познакомить вас с нашим развивающимся сайтом и сообществом - css-live.ru.

Как зарождалась идея

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

Форум вновь доступен, все неприятности устранены.

Форум пока не работает из-за некоторых проблем с хостингом. Они решаются и в ближайшее время форум заработает вновь.

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

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

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

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

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

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

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

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