Меняем фоновый цвет страницы с помощью CSS3

Сегодня рассмотрим замечательную возможность. Называется она CSS анимация с помощью keyframe'ов (ключевые кадры). К сожалению, на данный момент мы имеем очень скудную поддержку браузерами данного...
Сегодня рассмотрим замечательную возможность. Называется она CSS анимация с помощью keyframe'ов (ключевые кадры). К сожалению, на данный момент мы имеем очень скудную поддержку браузерами данного вида анимации. Но наш любимый Google Chrome и его брат Safari отлично обрабатывают этот вид анимации. Ниже в статье мы создадим веб страницу, на которой фоновый цвет будет изменяться с течением времени с помощью ключевых кадров. Интересно? Тогда идем дальше. (далее…)

CSS3 для начинающих. Часть 6.2. Кнопки в стиле BonBon

После продолжительного перерыва продолжим изучать CSS3. Сегодня речь пойдет о том как создать кнопки в стиле BonBon (конфетки такие вкусные) на CSS3. Кнопки будут разных...
После продолжительного перерыва продолжим изучать CSS3. Сегодня речь пойдет о том как создать кнопки в стиле BonBon (конфетки такие вкусные) на CSS3. Кнопки будут разных размеров, цветов, форм и т.д. Но при всем этом они имеют достаточно минималистичный дизайн, что позволяет использовать их почти на всех сайтах. Напоминаю, что это статья из цикла CSS3 для начинающих. А примеры можно посмотреть на демо сайте http://css3demos.rusdigi.org. (далее…)

7 простых эффектов для текста с использованием CSS3

Сейчас после прочтения множества мануалов и уроков по CSS3, вы начинаете все больше использовать CSS3 в своих проектах. Все, что вам не хватает - это...
Сейчас после прочтения множества мануалов и уроков по CSS3, вы начинаете все больше использовать CSS3 в своих проектах. Все, что вам не хватает - это готовые примеры, готовые реализации. Именно этим мы сегодня займемся - изучим несколько простых, но при этом эффектных трюков по работе с текстом в CSS3. Все эти трюки настолько просто, что вы можете с легкостью скопировать приведенный код и использовать в своем проекте. Но не забывайте о том, что старые браузеры не будут поддерживать большинство из них. Так посоветуйте вашим пользователям обновить браузеры и лучше пусть это будут webkit браузеры ;) (далее…)

CSS3 для начинающих. Часть 6.1. Кнопки на CSS3

Очередная статья из цикла CSS3 для начинающих. Речь сегодня пойдет о кнопках. Мы привыкли, что кнопка - это набор картинок. Первая картинка создается для кнопки...
Очередная статья из цикла CSS3 для начинающих. Речь сегодня пойдет о кнопках. Мы привыкли, что кнопка - это набор картинок. Первая картинка создается для кнопки в спокойном состоянии, вторая для состояния когда курсор мыши наведен на кнопку и третья - при нажатии на кнопку. Таким образом для каждой кнопки приходиться рисовать 3 картинки. С развитием и внедрением CSS3 мы можем избавиться от всего этого и делать кнопки легко и непринужденно, используя только стили CSS. Сегодня мы займемся созданием простых кнопок разного размера и цвета. (далее…)

Панель трендов с помощью CSS и jQuery

Хочу сегодня поделиться с вами интересной задумкой. На многих англоязычных порталах, частенько присутствует так называемая панель трендов. Обычно это однострочная панель прилепленная к низу экрана,...
Хочу сегодня поделиться с вами интересной задумкой. На многих англоязычных порталах, частенько присутствует так называемая панель трендов. Обычно это однострочная панель прилепленная к низу экрана, на которой создатели портала анонсируют популярные статьи. Панель достаточно хорошо привлекает внимание и соответственно вы можете перенаправить трафик со всего сайта в нужное вам русло. Существует множество плагинов для Wordpress, которые позволяют сделать что-то подобное. Но нам всегда интересен чистый легкий код. Так же мы будем использовать свойство opacity для того, чтобы панель становилась ярче при наведении на нее курсора мыши. (далее…)

6 сокращений в CSS, о которых должен знать каждый

Недавно появилось желание привести CSS файлы в порядок - избавиться от ненужного кода, использовать сокращения вместо описания. Таким образом мы можем уменьшить размер файлов css...
Недавно появилось желание привести CSS файлы в порядок - избавиться от ненужного кода, использовать сокращения вместо описания. Таким образом мы можем уменьшить размер файлов css и ускорить загрузку сайта в целом. Сегодня мы начнем с самых распространенных сокращений в CSS: фон (background), отступы (margin & padding), границы (border), шрифты (font), стили списков (list) и затемнение (transition). (далее…)

Взрывной логотип с помощью CSS3 и MooTools или jQuery

Сегодня я хотел бы перевести очень интересную статью Дэвида Волша (DavidWalsh). Речь в этой статье пойдет о создании логотипа, который при наведении курсора мыши будет...
Сегодня я хотел бы перевести очень интересную статью Дэвида Волша (DavidWalsh). Речь в этой статье пойдет о создании логотипа, который при наведении курсора мыши будет разлетаться на мелкие кусочки. Есть два варианта реализации - CSS3+jQuery и CSS3+MooTools. Отличие лишь в использовании разных Java библиотек. Давайте разберемся как сделать взрывной логотип. Хочется сразу оговориться - данный эффект будет работать в браузерах Chrome, Safari и Firefox. Остальные пользователи увидят обычный логотип. (далее…)

Плавающая панель на чистом CSS.

Сегодня речь пойдет о новом способе реализовать плавающую панель. Суть состоит в том, чтобы сделать ее используя только CSS, отказавшись тем самым от JavaScript. В...
Сегодня речь пойдет о новом способе реализовать плавающую панель. Суть состоит в том, чтобы сделать ее используя только CSS, отказавшись тем самым от JavaScript. В примере я дам лишь заготовку. Остальное зависит от вас. Панель можно использовать для показа счетчиков feedburner и твиттера, либо показывать на ней кнопки социальных сетей, либо сделать компактную и удобную форму обратной связи. Реализация достаточно проста и применима на любом сайте. (далее…)

CSS3 для начинающих. Часть 2. Бэкграунды (фоны) и границы

Сегодня вторая часть курса CSS3 для начинающих. Речь сегодня пойдет об оформлении фонов и границ с помощью CSS3. Вы узнаете как создавать закругленные границы, закругленные...
Сегодня вторая часть курса CSS3 для начинающих. Речь сегодня пойдет об оформлении фонов и границ с помощью CSS3. Вы узнаете как создавать закругленные границы, закругленные границы с картинкой. На конкретных примерах вы сможете увидеть реализации данных свойств. (далее…)

CSS3 для начинающих. Часть 1. Введение в CSS3. Основные понятия

Сегодня первый пост из серии CSS3 для начинающих. Пост носит ознакомительный характер и призван познакомит новичков с самой идеей разработки и применения CSS3. Будут даны...
Сегодня первый пост из серии CSS3 для начинающих. Пост носит ознакомительный характер и призван познакомит новичков с самой идеей разработки и применения CSS3. Будут даны основные понятия, показаны некоторые примеры реализации отдельных свойств. (далее…)