735 Вы наверное, уже знакомы с CSS3 и вам не нужны громадные руководства по нему, поэтому в этой книге собраны простые практические советы «приготовления» CSS. Просто скопируйте нужный код к себе в дизайн, немного его подправьте и результат на лицо.
И так, все, что мы можем предложить на сегодняшний день, это 7 полезных простых CSS трюков, которые вы можете просто скопировать в свой проект. Но помните, что не все браузеры поддерживают CSS3.
1. Letterpress (Высокая печать)
Чтобы получить эффект «вдавленного» текста на CSS, понадобятся три цвета: один для фона и его два оттенка, светлый и темный.
В начале, заполняем текст темным оттенком цвета фона. Затем добавляем на CSS3 тень для текста со светлым оттенком цвета фона. Это и дает эффект вдавленности.
HTML
|
1 2 3 4 5 |
<body> <div id="container"> <p>pressed</p> </div> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
body { background: #222222; color: #131313; font-size: 200px; } #container p { text-align: center; text-transform: uppercase; text-shadow: #2c2c2c 3px 3px 5px; } |
2. Small Caps (Капитель)
Согласно википедии...
Капите́ль (лат. capitellum «головка») — начертание в гарнитуре, в которой строчные знаки выглядят, как уменьшенные прописные.
Следует различать капитель и просто уменьшенные прописные буквы. Капительные буквы несколько выше строчных и имеют, как правило, чуть расширенные пропорции. Замена истинной капители уменьшенными заглавными буквами приводит к тому, что строчные буквы кажутся светлее заглавных. Тем не менее, в кириллической типографике это довольно часто применяется.
Чтобы получить такой эффект, просто используйте свойство CSS font-variant: small-caps;!
И просто, для удовольствия, мы использовали еще и свойство text-transform: uppercase;.
HTML
|
1 2 3 4 5 6 7 |
<body> <div id="container"> <p>Small Caps</p> </div> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body { background: #2c2b2b; color: #131313; font-size: 200px; } #container p { text-align: center; text-transform: uppercase; text-shadow: #363535 3px 3px 5px; font-variant: small-caps; } |
3. CSS Coupon (купон)
Этот эффект будет полезен для интернет-магазинов, которые проводят акции, распродажи, предлагают онлайн-купоны и т.д. Типичный бордюр, который вы видите на большинстве сайтов, является просто сплошной линией, но как альтернативу, вы можете сделать линию пунктирной или штриховой.
В комбинации с закругленными углами и свойством box-shadow, вы получите милый купон, выполненный полностью на CSS.
HTML
|
1 2 3 4 5 6 7 |
<body> <div id="container"> <h2>$10 Off</h2> </div> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
body { background: #21303b; color: #000; } h2 { font-size: 80px; line-height: 70px; font-family: Helvetica, sans-serif; font-weight: bold; text-align: center; text-transform: uppercase; } #container { background-color: white; height: 200px; width: 400px; margin: 100px auto; border: 3px dashed #21303b; /*shadow*/ -webkit-box-shadow: 10px 10px 10px #000; -moz-box-shadow: 10px 10px 10px #000; box-shadow: 10px 10px 10px #000; /*rounded corners*/ -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } |
4. Stitched (эффект вышивки)
Хотя мы уже затронули тему пунктирных линий, но есть еще один эффект для линий — эффект вышивки. Его можно получить альтернативным методом, не через бордюры, а через свойство outline. Для того, чтобы бордюр был внутри элемента, зададим отрицательное значение для outline-offset.
HTML
|
1 2 3 4 5 6 7 |
<body> <div id="container"> <h2>Stitched</h2> </div> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
body { background: #21303b; color: #fff; } h2 { font-size: 70px; line-height: 190px; font-family: Helvetica, sans-serif; font-weight: bold; text-align: center; } #container { /*stitching*/ outline: 1px dashed #98abb9; outline-offset: -5px; background-color: #556068; height: 200px; width: 400px; margin: 100px auto; /*shadow*/ -webkit-box-shadow: 2px 2px 2px #000; -moz-box-shadow: 2px 2px 2px #000; box-shadow: 2px 2px 2px #000; } |
5. Gloss (блеск)
Это один из самых популярных эффектов в web 2.0. Ранее, чтобы его реализовать, требовалось изображение, сейчас, все можно выполнить на CSS с помощью градиентов, теней, закругленных углов.
Так как градиенты трудно создавать в уме, поэтому, рекомендуем воспользоваться онлайн-сервисом или чем-нибудь подобным, чтобы автоматизировать процесс создания.
HTML
|
1 2 3 4 5 6 7 |
<body> <div id="container"> <h2>Gloss</h2> </div> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
body { background: #21303b; color: #fff; } h2 { font-size: 120px; line-height: 190px; font-family: Helvetica, sans-serif; font-weight: bold; text-align: center; text-shadow: rgba(0, 0, 0, .3) 5px 5px 5px; } #container { /*gradient*/ background: #666666; /* old browsers */ background: -moz-linear-gradient(top, #666666 4%, #545454 50%, #3A3A3A 51%, #131313 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(4%,#666666), color-stop(50%,#545454), color-stop(51%,#3A3A3A), color-stop(100%,#131313)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#131313',GradientType=0 ); /* ie */ /*box styles*/ height: 200px; width: 400px; margin: 100px auto; /*shadow*/ -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, .3); -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, .3); box-shadow: 5px 5px 5px rgba(0, 0, 0, .3); /*corners*/ -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } |
6. Stroked Text (обводка текста) и @font-face
В этом примере использовано два трюка в одном! Это обводка текста и добавление пользовательских шрифтов для всех современных браузеров, использующих @font-face.
HTML
|
1 2 3 4 5 6 7 |
<body> <div id="container"> <h2>Jurassic</h2> </div> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/*Fonts*/ @font-face { font-family: 'JungleFeverRegular'; src: url('JungleFever-webfont.eot'); src: local('☺'), url('JungleFever-webfont.woff') format('woff'), url('JungleFever-webfont.ttf') format('truetype'), url('JungleFever-webfont.svg#webfontBlD2f3Gz') format('svg'); font-weight: normal; font-style: normal; } body { background: #222; color: #111; } h2 { font-size: 150px; line-height: 200px; font-family: 'JungleFeverRegular', Helvetica, sans-serif; font-weight: bold; text-align: center; text-shadow: rgba(0, 0, 0, .2) 3px 3px 3px; /*text stroke*/ -webkit-text-stroke: 2px #fff473; } |
7. Double Stroked Text (двойная обводка текста)
В данном трюке использованы и тени для текста и свойство обводки с альфа-прозрачностью. Смотрите, что получилось.
HTML
|
1 2 3 4 5 6 7 |
<body> <div id="container"> <h2>Lobster</h2> </div> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/*Fonts*/ @font-face { font-family: 'Lobster13Regular'; src: url('Lobster_1.3-webfont.eot'); src: local('☺'), url('Lobster_1.3-webfont.woff') format('woff'), url('Lobster_1.3-webfont.ttf') format('truetype'), url('Lobster_1.3-webfont.svg#webfontcOtP3oQb') format('svg'); font-weight: normal; font-style: normal; } body { background: #731e1e; color: #fff; } h2 { font-size: 220px; line-height: 220px; font-family: 'Lobster13Regular', Helvetica, sans-serif; font-weight: bold; text-align: center; text-shadow: rgba(0, 0, 0, .2) 3px 3px 3px; /*text stroke*/ -webkit-text-stroke: 4px rgba(0, 0, 0, .6); } |
Заключение
Если у вас есть замечания или предложения по доработке данных сниппетов, в т.ч. и по кроссбраузерности, оставляйте сообщения, мы обязательно их рассмотрим.
вы бы лучше создали сайт на котором есть все для переносимости веб дизайна на CSS на любую версию любого браузера!!!
а ни фигнёй занимались !!!
Нафига нужны все эти эффекты если самый популярный да и к томуже самый говняный из браузеров не понимает всё то что вы сейчас показывали!!!
хорошо хоть ms не придумала свой язык интерфейсной разметки.
На браузере так оторвались что все веб дизайнеры мира мучаются !
Артем, все для переносимости веб-дизайна на любую версию любого браузера называется кроссбраузерной версткой.
К вашему сведению, изучение и работа с CSS3 также необходима, как и с CSS2.1.
И это нормально и в этом нет ничего плохого, так как те браузеры, что не могут показать CSS3 код уже давно выходят из обращения.
На сайте есть статьи, посвященные техникам работ совместимости CSS3 с «говянным» браузером.
Что касается самой верстки, то здесь одной статьей не опишешь, как правильно верстать. Ждите или цикл статей на эту тему или FAQ.
Хорошая статья. Вполне актуально. Давно ищу нечто подобное. Спасибо.
Зы, также давно заметил, кстати, что количество восклицательных знаков в сообщениях обратно пропорционально IQ.
Зызы, я не мог этого не написать %)