Вы наверное, уже знакомы с CSS3 и вам не нужны громадные руководства по нему, поэтому в этой книге собраны простые практические советы «приготовления» CSS. Просто скопируйте нужный код к себе в дизайн, немного его подправьте и результат на лицо.
И так, все, что мы можем предложить на сегодняшний день, это 7 полезных простых CSS трюков, которые вы можете просто скопировать в свой проект. Но помните, что не все браузеры поддерживают CSS3.
1. Letterpress (Высокая печать)
Чтобы получить эффект «вдавленного» текста на CSS, понадобятся три цвета: один для фона и его два оттенка, светлый и темный.
В начале, заполняем текст темным оттенком цвета фона. Затем добавляем на CSS3 тень для текста со светлым оттенком цвета фона. Это и дает эффект вдавленности.
HTML
<body>
<div id="container">
<p>pressed</p>
</div>
</body>
CSS
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
<body>
<div id="container">
<p>Small Caps</p>
</div>
</body>
CSS
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
<body>
<div id="container">
<h2>$10 Off</h2>
</div>
</body>
CSS
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
<body>
<div id="container">
<h2>Stitched</h2>
</div>
</body>
CSS
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 с помощью градиентов, теней, закругленных углов.
Так как градиенты трудно создавать в уме, поэтому, рекомендуем воспользоваться онлайн-сервисом Ultimate CSS Gradient Generator или чем-нибудь подобным, чтобы автоматизировать процесс создания.
HTML
<body>
<div id="container">
<h2>Gloss</h2>
</div>
</body>
CSS
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
<body>
<div id="container">
<h2>Jurassic</h2>
</div>
</body>
CSS
/*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
<body>
<div id="container">
<h2>Lobster</h2>
</div>
</body>
CSS
/*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);
}
Источник: designshack.co.uk
И так, все, что мы можем предложить на сегодняшний день, это 7 полезных простых CSS трюков, которые вы можете просто скопировать в свой проект. Но помните, что не все браузеры поддерживают CSS3.
1. Letterpress (Высокая печать)
Чтобы получить эффект «вдавленного» текста на CSS, понадобятся три цвета: один для фона и его два оттенка, светлый и темный.
В начале, заполняем текст темным оттенком цвета фона. Затем добавляем на CSS3 тень для текста со светлым оттенком цвета фона. Это и дает эффект вдавленности.
HTML
<body>
<div id="container">
<p>pressed</p>
</div>
</body>
CSS
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;
<body>
<div id="container">
<p>Small Caps</p>
</div>
</body>
CSS
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
<body>
<div id="container">
<h2>$10 Off</h2>
</div>
</body>
CSS
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
<body>
<div id="container">
<h2>Stitched</h2>
</div>
</body>
CSS
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 с помощью градиентов, теней, закругленных углов.
Так как градиенты трудно создавать в уме, поэтому, рекомендуем воспользоваться онлайн-сервисом Ultimate CSS Gradient Generator или чем-нибудь подобным, чтобы автоматизировать процесс создания.
HTML
<body>
<div id="container">
<h2>Gloss</h2>
</div>
</body>
CSS
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
<body>
<div id="container">
<h2>Jurassic</h2>
</div>
</body>
CSS
/*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
<body>
<div id="container">
<h2>Lobster</h2>
</div>
</body>
CSS
/*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);
}
Источник: designshack.co.uk
Комментариев нет:
Отправить комментарий