Сейчас после прочтения множества мануалов и уроков по CSS3, вы начинаете все больше использовать CSS3 в своих проектах. Все, что вам не хватает — это готовые примеры, готовые реализации. Именно этим мы сегодня займемся — изучим несколько простых, но при этом эффектных трюков по работе с текстом в CSS3. Все эти трюки настолько просто, что вы можете с легкостью скопировать приведенный код и использовать в своем проекте. Но не забывайте о том, что старые браузеры не будут поддерживать большинство из них. Так посоветуйте вашим пользователям обновить браузеры и лучше пусть это будут webkit браузеры 😉
Если вы еще не знакомы с CSS3 советую ознакомится с циклом статей CSS3 для начинающих.
Посмотреть демо
Вдавленный текст
Сделать вдавленный текст в CSS3 проще всего. Нам понадобиться 3 цвета: фоновый, цвет для тени, более светлый чем фон и цвет для текста, более темный чем фоновый. Для начала — зальем наш текст цветом, который темнее чем фоновый. Далее используем свойство CSS3 text-shadow с цветом более светлым, чем фон.
HTML
pressed
CSS
body {
background: #222222;
color: #131313;
font-size: 200px;
}
#container p {
text-align: center;
text-transform: uppercase;
text-shadow: #2c2c2c 3px 3px 5px;
}
Small Caps
Эффект, который по-русски звучит как «маленькие заглавные буквы», представляет из себя вот что: все буквы у нас заглавные, но при этом первая буква каждого слова больше чем все остальные. Это эффект, который мы редко встречаем на просторах интернета. Пусть это не совсем CSS3 эффект, но выглядит он достаточно привлекательно.
Для начала зададим тэг small и заключим в его содержимое все буквы кроме первой. Далее пропишем этому тэгу более маленький шрифт в стилях CSS. Однако есть более простой вариант — это использование свойства font-variant: small-caps;. Пожалуй воспользуемся вторым способом.
HTML
Small Caps
CSS
body {
background: #2c2b2b;
color: #131313;
font-size: 200px;
}
#container p {
text-align: center;
text-shadow: #363535 3px 3px 5px;
font-variant: small-caps;
}
Купон с помощью CSS
Этот эффект будет полезен онлайн трейдерам — привлекайте внимание клиентов к скидкам, акциям, распродажам. Теперь для этого не нужно рисовать формы в Photoshop — можно задать все легко и просто с помощью CSS. Обычно для границ купона используют сплошную линию, но мы можем сменить ее на точечную или пунктирную. Добавив немного свойств CSS3 таких как box-shadow и закругленные углы мы получим довольно таки приятный купон:
HTML
$10 Off
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;
}
Эффект джинсовой строчки
Продолжим экспериментировать с границами и снова используем пунктир. Только на этот раз мы будем использовать свойство outline вместо border, а если точнее используем команду outline-offset с отрицательным значением.
HTML
Stitched
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;
}
Глянец
Один из самых популярных и часто используемых эффектов Web 2.0 — это глянец. Только раньше нам требовалось как минимум одно изображение для создания такого эффекта. Сейчас же нам достаточно применить градиентную заливку с помощью CSS3. Создавать градиенты вручную достаточно кропотливое занятие, поэтому рекомендую пользоваться вот такими генераторами http://www.colorzilla.com/gradient-editor/.
HTML
Gloss
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;
}
Обведенный текст и @font-face
А этот эффект будет состоять из двух 😉 Первый эффект — добавление обводки к тексту (будет работать только в webkit браузерах). Второй — добавление любого шрифта с помощью @font-face — работает во всех современных браузерах. Шрифт, который используется в этом примере называется Jungle Fever и загрузить его можно с сайта http://www.fontsquirrel.com/fonts/JungleFever.
HTML
Jurassic
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;
}
Двойная обводка текста
Этот эффект получился в ходе экспериментов для предыдущего эффекта. Оказалось, что если использовать RGBa модель для задания цвета обводки и немного уменьшить прозрачность, то можно получить эффект двойной обводки.
HTML
Lobster
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);
}
Посмотреть демо
2 комментария для “7”