Блог



Всплывающая подсказка на CSS

В HTML уже есть глобальный атрибут title, который можно добавить к любому элементу веб-страницы. Наличие этого атрибута добавляет всплывающую подсказку, которая появляется при наведении курсора мыши на элемент. Шрифт текста, размер подсказки и её вид в целом зависит от операционной системы и не может быть изменён с помощью стилей. К тому же многих разработчиков не устраивает, что такая подсказка довольно быстро исчезает. Это заставляет искать способы сделать свою всплывающую подсказку, которая была бы оформлена желаемым образом. Конечно, самый универсальный способ заключается в использовании JavaScript, но в некоторых случаях вполне достаточно обойтись и одним CSS.

Иконка рядом с внешними ссылками

Пару недель назад я открыл код JSFiddle от CSS Wizardry в моём браузере. Я продолжаю думать об этом, потому что до этого получил от кого-то письмо, где по сути спрашивали то же самое, и эта идея застряла у меня в голове. Они хотели вставить иконку рядом со ссылкой и использовать для этого только CSS. К сожалению, я не нашел способа сделать именно так, но с помощью некоторого jQuery мы можем добиться результата довольно легко.

Картинка вместо чекбокса

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

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

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

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

CSS-макет становится умнее с calc()

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

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

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

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

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

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

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

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

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

Форум заработал

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

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

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

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

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

Создание минималистского плеера 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 рублей).

Рецепты CSS

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

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

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

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

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

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

Страницы

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.