Book1

Поваренная книга CSS3: 7 простых рецептов приготовления

Вы наверное, уже знакомы с CSS3 и вам не нужны громадные руководства по нему, поэтому в этой книге собраны простые практические советы «приготовления» CSS. Просто скопируйте нужный код к себе в дизайн, немного его подправьте и результат на лицо.

И так, все, что мы можем предложить на сегодняшний день, это 7 полезных простых CSS трюков, которые вы можете просто скопировать в свой проект. Но помните, что не все браузеры поддерживают CSS3.

1. Letterpress (Высокая печать)

Чтобы получить эффект «вдавленного» текста на CSS, понадобятся три цвета: один для фона и его два оттенка, светлый и темный.

В начале, заполняем текст темным оттенком цвета фона. Затем добавляем на CSS3 тень для текста со светлым оттенком цвета фона. Это и дает эффект вдавленности.

HTML

CSS

2. Small Caps (Капитель)

Согласно википедии...

Капите́ль (лат. capitellum «головка») — начертание в гарнитуре, в которой строчные знаки выглядят, как уменьшенные прописные.

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

Чтобы получить такой эффект, просто используйте свойство CSS font-variant: small-caps;!

И просто, для удовольствия, мы использовали еще и свойство text-transform: uppercase;.

HTML

CSS

3. CSS Coupon (купон)

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

В комбинации с закругленными углами и свойством box-shadow, вы получите милый купон, выполненный полностью на CSS.

HTML

CSS

4. Stitched (эффект вышивки)

Хотя мы уже затронули тему пунктирных линий, но есть еще один эффект для линий — эффект вышивки. Его можно получить альтернативным методом, не через бордюры, а через свойство outline. Для того, чтобы бордюр был внутри элемента, зададим отрицательное значение для outline-offset.

HTML

CSS

5. Gloss (блеск)

Это один из самых популярных эффектов в web 2.0. Ранее, чтобы его реализовать, требовалось изображение, сейчас, все можно выполнить на CSS с помощью градиентов, теней, закругленных углов.

Так как градиенты трудно создавать в уме, поэтому, рекомендуем воспользоваться онлайн-сервисом Ultimate CSS Gradient Generator или чем-нибудь подобным, чтобы автоматизировать процесс создания.

HTML

CSS

6. Stroked Text (обводка текста) и @font-face

В этом примере использовано два трюка в одном! Это обводка текста и добавление пользовательских шрифтов для всех современных браузеров, использующих @font-face.

HTML

CSS

7. Double Stroked Text (двойная обводка текста)

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

HTML

CSS

Заключение

Если у вас есть замечания или предложения по доработке данных сниппетов, в т.ч. и по кроссбраузерности, оставляйте сообщения, мы обязательно их рассмотрим.


3 комментарий на “Поваренная книга CSS3: 7 простых рецептов приготовления

  1. вы бы лучше создали сайт на котором есть все для переносимости веб дизайна на CSS на любую версию любого браузера!!!

    а ни фигнёй занимались !!!

    Нафига нужны все эти эффекты если самый популярный да и к томуже самый говняный из браузеров не понимает всё то что вы сейчас показывали!!!

    хорошо хоть ms не придумала свой язык интерфейсной разметки.

    На браузере так оторвались что все веб дизайнеры мира мучаются !

    Thumb up 0 Thumb down 0

    • Артем, все для переносимости веб-дизайна на любую версию любого браузера называется кроссбраузерной версткой.

      К вашему сведению, изучение и работа с CSS3 также необходима, как и с CSS2.1.

      И это нормально и в этом нет ничего плохого, так как те браузеры, что не могут показать CSS3 код уже давно выходят из обращения.

      На сайте есть статьи, посвященные техникам работ совместимости CSS3 с «говянным» браузером.

      Что касается самой верстки, то здесь одной статьей не опишешь, как правильно верстать. Ждите или цикл статей на эту тему или FAQ.

      Thumb up 0 Thumb down 0

  2. Хорошая статья. Вполне актуально. Давно ищу нечто подобное. Спасибо.

    Зы, также давно заметил, кстати, что количество восклицательных знаков в сообщениях обратно пропорционально IQ.

    Зызы, я не мог этого не написать %)

    Thumb up 0 Thumb down 0

Оставить комментарий