Кнопка или ссылка?

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

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

css-live.ru - Сообщество, говорящее на языках HTML, CSS и JavaScript

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

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

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

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

Проблемы с форумом

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

Контекстное меню в Firefox

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

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

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

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

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

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

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

Влад Мержевич

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

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