Твит

Сегодня я покажу Вам, как можно придать индивидуальный стиль для каждой кнопки навигации при этом не присваивая каждой кнопке отдельный класс. Сделать это становится возможным при помощи псевдокласса, появившегося в CSS3 – nth-child(). При этом Ваш html-код останется не загроможденным большим количеством классов, а реализация самой задачи становится до смешного простой.
Между прочим, этот прием можно применять не только для кнопок навигации, но также таким образом можно легко стилизовать любое сочетание чередующихся дочерних элементов. Сейчас Вы и сами увидите насколько все просто у нас получится.

Твит

Как я уже говорил в FAQ по HTML, язык гипертекстовой разметки позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.

C помощью каскадных таблиц стилей можно легко поменять любой тег, любой параметр веб-странице, не вмешиваясь в структуру документа.

Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид.

Стили позволяют с помощью всего одного созданного вами действия применить сразу всю группу атрибутов форматирования.

Твит

Фанатеете от “Звёздных войн”?
Или же ты, юный падаван, любишь чубаку?
В любом случае эти чекбоксы в стиле звёздных войн на чистом CSS будут отличным украшением твоего сайта.
В чём фишка?

Никакого javascript
Простые и ясные.
Зелёный световой меч Мастера Йоды
Красный световой меч Дарт Вейдера
Синий световой мечт Оби Ван Кеноби
Фиолетовый световой меч Мейса Винду
Легко изменить цвет
Оптимизированы для webkit. Кросс-браузерная поддержка. IE9+
Открытая лицензия MIT

Твит

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

Твит

Всплывающие подсказки — интересный функционал. С их помощью можно здорово разнообразить нахождение посетителя на сайте, при условии грамотного размещения и качественного оформления подсказки. Обычно их добавляют в случае недостатка места для развернутого описания или когда не хотят этим описанием портить дизайн. Сегодня создадим такие подсказки для посетителя без использования скриптов, только средствами CSS3, причем они будут ещё и слегка анимированными. Код полностью поддерживается только Firefox и Chrome\Safari, но в остальных браузерах тоже работает, только без анимации

Твит

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

«Градиент — вид заливки в компьютерной графике, в которой необходимо задать цвет и прозрачность определённых (ключевых) точек, а цвет и прозрачность остальных точек рассчитываются относительно них по определённым математическим алгоритмам. Таким образом можно получать плавные переходы из одного цвета в другой, задав координаты и цвет начальной и конечной точек.» Википедия

Твит

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

Твит

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

Твит

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

Твит

Хотя сегодня и первомай, продолжаем цикл статей CSS3 для начинающих. Жаль, что погода не задалась – к обеду пошел дождь и выезд на шашлыки отложили. Но ничего. Вместо этого у нас появилась возможность продолжить знакомство с CSS3. Речь пойдет о drop-shadow – свойство CSS3 позволяющее создавать различные тени, без использования изображений. На данный момент поддержка реализована в следующих версиях браузеров: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+.

Твит

Продолжаем изучать CSS3 с циклом статей CSS3 для начинающих. Сегодня продолжение четвертой части. Речь пойдет о создании 3D лент и закладок с помощью CSS3. Напоминаю, что все примеры описываемые в статьях можно лицезреть на специальном демо сайте http://www.css3demos.rusdigi.org.
3D ленты.
Наша задача создать 3D ленты без использования изображений. В этом нам помогут свойства CSS3: box-shadow, border-radius, transform. Но обо всем по порядку.