Пока вебмастера спорят о браузерах и стандартах, WebKit занимается делом :) На этой неделе разработчики CSS3 представили новое свойство, названное background-clip:text, которое позволяет наложить любой фон/изображение на текст, границы и даже тень, при этом не перекрывая их, а реализуя нечто похожее на функцию наложения "маски" в Photoshop.

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

Это вообще можно реализовать без JS ?
Как избежать эффект пропадающего фона при наведении на кнопку?
Сколько картинок мне нужно для 1 кнопки?
Можно ли сделать кнопку не фиксированной ширины?
Можно ли обойтись без CSS-фильтров?

Думаю каждый из вас сталкивался с этими вопросами. Давайте раз и навсегда разберемся с ними.

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

Большинство дизайнов ориентировано на использование фиксированных значений при верстке: ширина и высота блоков, размер шрифта. Это позволяет сверстанному шаблону «не разваливаться» при изменении масштабов просмотра и сохранять свойство кроссбраузерности. Однако в этом есть один большой минус – при большом разрешении экрана маленькие фиксированные блоки теряются на большой площади и остаются незамеченными. Тут даже не спасет «резиновая» верстка, т.к. сайт будет выглядеть еще более нечитабельным, например на 19” мониторах при разрешении большем 1280 по ширине. Для меня это актуально, т.к. на ноутбуке 17” с разрешением 1400х800 просматривать «резиновый» сайт очень неудобно. …

Блуждая по сети, я не раз видела самые удивительные решения, основанные на применении CSS. И с каждым разом все больше верится, что возможности CSS безграничны :)
Сегодня я увидела вот такую картинку:

Правда интересный эффект? Давайте попробуем раскрыть секрет его реализации.

Визуализация данных графиков, диаграмм в основном решается с помощью флэш и некоторых языков программирования. Являются ли эти способы единственными? Давайте попробуем реализовать эту задачу с помощью CSS.
Предисловие
В этом примере я не буду использовать ни JavaScript, ни любые другие языки. Все, что мне нужно это хорошая разметка и код CSS.
Таким образом, наша цель состоит в том, чтобы представить данные таблицы в виде диаграммы. Можно отметить, что данные диаграммы – это объект из 2х элементов, непосредственно зависимых друг от друга. Поэтому, лучшим решением в отношении структуры и семантики будет использование списков определений.
Почему? …