postPR.ru » Облако тегов » CSS3 для начинающих

    Дешевый хостинг



 
Назад Вперед

Индивидуальный стиль каждой кнопке навигации при помощи псевдокласса

Автор: anutka0306 | Дата: 7-05-2014 в 21:00 | Просмотров: 166 | Комментариев: 0



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

Категория: Песочница

 

Введение в CSS

Автор: alex1874 | Дата: 28-11-2013 в 06:32 | Просмотров: 386 | Комментариев: 0



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

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

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

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

Категория: Создание и разработка

 

Чекбоксы в стиле Star Wars на чистом CSS

Автор: n1dev | Дата: 30-05-2013 в 17:24 | Просмотров: 224 | Комментариев: 0



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

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

Категория: Дизайн и креатив

 

Фреймворк BonBon. Кнопки на CSS за 2 минуты

Автор: GerinG | Дата: 27-01-2012 в 15:05 | Просмотров: 556 | Комментариев: 0



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

Категория: Создание и разработка

 

Как сделать всплывающие подсказки на CSS3?

Автор: GerinG | Дата: 29-09-2011 в 12:48 | Просмотров: 948 | Комментариев: 0



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

Категория: Создание и разработка

 

Градиенты CSS3. Полное руководство

Автор: GerinG | Дата: 21-09-2011 в 11:11 | Просмотров: 877 | Комментариев: 0



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

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

Категория: Создание и разработка

 

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

Автор: Ma3oBblu | Дата: 16-05-2011 в 16:06 | Просмотров: 764 | Комментариев: 0



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

Категория: Создание и разработка

 

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

Автор: Ma3oBblu | Дата: 12-05-2011 в 16:14 | Просмотров: 913 | Комментариев: 0



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

Категория: Создание и разработка

 

CSS3 для начинающих. Часть 5.2. Боксы на CSS

Автор: Ma3oBblu | Дата: 4-05-2011 в 13:06 | Просмотров: 1265 | Комментариев: 0



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

Категория: Создание и разработка

 

CSS3 для начинающих. Часть 5.1. Drop-shadow – простые примеры

Автор: Ma3oBblu | Дата: 1-05-2011 в 20:54 | Просмотров: 775 | Комментариев: 0



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

Категория: Создание и разработка

 

CSS3 для начинающих. Часть 4.2. 3D ленты.

Автор: Ma3oBblu | Дата: 29-04-2011 в 20:37 | Просмотров: 1097 | Комментариев: 0



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

Категория: Создание и разработка

 
Назад Вперед