Произвольные элементы DOM как фон сайта

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

В этой статье, автор расскажет, как сделать полноценный фон сайта из блочного элемента, в котором может содержаться картинка, несколько картинок, SVG и <canvas>. Это позволяется производить над фоном любые манипуляции в плане HTML/CSS, добавлять JavaScript (jQuery) эффекты и многое другое.

Красивые градиентные кнопки без картинок для всех браузеров

Всем привет!

Сегодня мы посмотрим как с помощью CSS3 без картинок сделать вот такие отличные кнопки. Для этого мы будет использовать следующие свойства: RGBA цвета, box-shadow, text-shadow и border-radius. Разметка и стили сделаны с использованием принципа graceful degradation, так что пользователи, браузеры которых не поддерживают указанные технологии, увидят кнопки в нормальном, но не таком хорошем качестве.

Рассматриваемые кнопки имеют три состояния (обычное, наведение и нажатие), их можно масштабировать и изменять пропорции.

Данная статья — перевод статьи «Cross-browser CSS gradient buttons».

HTML5 видеоплееры

Привет!

Сегодня статья посвящена HTML5 видеоплеерам. Мы рассмотрим десять решений для кроссплатформенного показа видео на сайтах.

Все рассмотренные HTML5 плееры умеют использовать не только HTML5, но подключать флеш версии тогда, когда это необходимо. Почти все из них бесплатные, и подходят для коммерческого использования.

Разработка веб-приложений для iPad, iPhone и iPod

Всем привет! У меня хорошая новость - авторы временно.нет постепенно просыпаются после летнего отдыха. За это время мы много сделали и многому научились. Пришло время делиться этими знаниями с нашими дорогими читателями.

Сегодня я хочу сделать краткий обзор того, что позволяет делать мобильный сафари на айДевайсах, какие инструменты есть в руках у веб-разработчиков и как эти инструменты применять.

Кросс-браузерный @font-face

Всем привет!

Сейчас все больше разработчиков начинают внедрять собственные шрифты в дизайн сайтов. Весной я написал статью о том, как с помощью различных библиотек (JS, Flash) можно использовать сторонние шрифты на сайтах.

Сегодня же я хочу рассказать о свойстве CSS @font-face, с помощью которого легче и удобнее всего использовать произвольный шрифт на сайте. Но есть одно «но», которое предстоит решить — разные браузеры требуют разные форматы шрифтовых файлов.

Оптимизация CSS для ускорения обработки браузерами

Всем привет.

Сегодня хочу поговорить о том, как браузеры обрабатывают правила CSS и как писать эти самые правила так, чтобы страница рендерилась быстрее.

Наверное, самый яркий пример тормозов, которые может вызвать CSS, это когда страница «дергается» при прокрутке в Ослике — это обычно связано с использованием :hover не у элементов <a>.

@-правила в CSS

Привет,

Сегодня у нас небольшая заметка (основанная на статье «Demystifying CSS At-Rules»), в которой речь пойдет о применении в CSS правил, содержащих в себе символ «@».

В статье будут рассмотрены правила @import, @media, @charset и популярный сейчас @font-face, который позволяет использовать собственные шрифты на страницах сайта (про сторонние шрифты у нас уже была статья «Как использовать любой шрифт на сайте»).

Всегда используйте :hover вместе с :focus

Мне очень понравилась Пашина статья о псевдоклассах. =) Специально по такому случаю в закромах была недавняя заметка с 456bereastreet.

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

Мы рассмотрим типы проблем и в итоге узнаем что делать, чтобы избежать их.

Псевдоклассы в CSS

Ну кто из нас не знает, что такое псевдоселекторы (или псевдоклассы) в CSS? Да-да, это то, что обычно пишут после селектора через двоеточие. Самые известные псевдоклассы это :link, :hover, :visited и :active.

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

В общем, тема псевдоселекторов еще не обсуждалась на нашем сайте, так что самое время приступить ;-)

Делаем более понятные и удобные файлы стилей

Привет,

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

Итак, поехали!