Здравствуйте, сегодня я хочу поделиться с вами красивыми техниками использования CSS3, которые помогут вам оформить сайт. Некоторые разработаны лично мною, часть взял у знаменитых гуру вёрстки.
Но перед прочтением этого поста, хочу вам представить очень интерестные посты на одном блоге:
Вдавленный текст
Очень красиво смориться этот текст на сайтах с тёмным дизайном. Такой текст вы могли видеть на многих обложках журналов, даже Adobe в своём логотипе использует его. Только есть одно отличие, все они создавались в Фотошопе, а мы сделаем с вами на html и css3. Основная суть – использовать цвет букв, темнее чем у фона и при подключении text-shadow с более светлыми тонами, мы получим эффект вдавленности.
body {
background: #222222;
color: #131313;
font-size: 50px;
}
#container p {
text-align: center;
text-transform: uppercase;
text-shadow: #2c2c2c 3px 3px 5px;
} |
body {
background: #222222;
color: #131313;
font-size: 50px;
}
#container p {
text-align: center;
text-transform: uppercase;
text-shadow: #2c2c2c 3px 3px 5px;
}
<body>
<div id="container">
<p>COSPI</p>
</div>
</body> |
<body>
<div id="container">
<p>COSPI</p>
</div>
</body>
Градиент
Это не совсем текстовы эффект, но смотриться вполне красиво и может подойти для многих мест на сайте. Градиент работает только в Мозиле.
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 {
/*Градиент*/
background: #666666; /* Для старых браузеров */
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 */
/*Размеры бокса*/
height: 200px;
width: 400px;
margin: 100px auto;
/*Тень*/
-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);
/*Углы*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
} |
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 {
/*Градиент*/
background: #666666; /* Для старых браузеров */
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 */
/*Размеры бокса*/
height: 200px;
width: 400px;
margin: 100px auto;
/*Тень*/
-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);
/*Углы*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
<body>
<div id="container">
<h2>Cospi</h2>
</div>
</body> |
<body>
<div id="container">
<h2>Cospi</h2>
</div>
</body>
Выпуклый текст
#insetBgd {
width: 550px;
height: 100px;
background: -moz-linear-gradient(-90deg,#003471,#448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}
h1.insetType {
padding-left: 50px;
padding-top: 17px;
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
font-size: 50px;
color: #0D4383;
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
} |
#insetBgd {
width: 550px;
height: 100px;
background: -moz-linear-gradient(-90deg,#003471,#448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}
h1.insetType {
padding-left: 50px;
padding-top: 17px;
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
font-size: 50px;
color: #0D4383;
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}
<body>
<div id="insetBgd">
<h1 class="insetType">Inset Typography</h1>
</div>
</body> |
<body>
<div id="insetBgd">
<h1 class="insetType">Inset Typography</h1>
</div>
</body>
3D текст
Красивый 3D текст, оформляеться только при помощи тени.
h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
} |
h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
<body>
<div>
<h1>Cospi</h1>
</div>
</body> |
<body>
<div>
<h1>Cospi</h1>
</div>
</body>
Neon Lights
Неоновое свечение, будет очень не обычно смотреться на сайте, делаеться довольно просто:
h1 {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
} |
h1 {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
}
<body>
<div>
<h1>Neon Lights</h1>
</div>
</body> |
<body>
<div>
<h1>Neon Lights</h1>
</div>
</body>
На этом всё, спасибо за внимание.
Интересно будет почитать:
6 лет назад
Кстати, о темном дизайне. А точнее, о «темной» теме операционной системы. У меня стоит именно такая. И что интересно, многие блогеры не задают принудительную контрастность тона и фона в формах комментариев. То есть задают, например, белый цвет фона — и считают, что все хорошо. Хорошо, да, если тема ОС у пользователя светлая, а значит настроена на белый фон и черные буквы по умолчанию. А вот мне приходится видеть белый фон (который был задан разработчиком) и белые буквы (цвет которых разработчик темы для сайта указать не потрудился, а ОС автоматически ставит черный фон и белые буквы, если не определено другое). Кстати, этот блог (что редкость) подобным не грешит, поэтому пишу коммент с большим удовольствием. 🙂
6 лет назад
Охуенчик эффекты.
Коспиану плюсую люто.
6 лет назад
Спасибо за хороший комментарий 🙂
6 лет назад
Большое спасибо за стили, вопрос такой как будет отображаться градиент в опере?
6 лет назад
В последних версиях отображается нормально.
6 лет назад
Обалденные эффекты обязательно затестю
6 лет назад
Ещё давай! Мало.. 3D текст хорош
5 лет назад
Будет, будет ещё 🙂