5 красивых текстовых эффектов на CSS3

27 мая 2011 года, Размещено в категории: HTML / CSS

Здравствуйте, сегодня я хочу поделиться с вами красивыми техниками использования 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>
    <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>
 
    <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;
}
<body>
<div id="insetBgd">
	<h1 class="insetType">Inset Typography</h1>
</div>
</body>

3D текст

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);
}
<body>
<div>
	<h1>Cospi</h1>
</div>
</body>

Neon Lights

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;
}
<body>
<div>
	<h1>Neon Lights</h1>
</div>
</body>

На этом всё, спасибо за внимание.



Интересно будет почитать:



  1. ZeroXor Сказал:
    27 мая 2011

    Кстати, о темном дизайне. А точнее, о «темной» теме операционной системы. У меня стоит именно такая. И что интересно, многие блогеры не задают принудительную контрастность тона и фона в формах комментариев. То есть задают, например, белый цвет фона — и считают, что все хорошо. Хорошо, да, если тема ОС у пользователя светлая, а значит настроена на белый фон и черные буквы по умолчанию. А вот мне приходится видеть белый фон (который был задан разработчиком) и белые буквы (цвет которых разработчик темы для сайта указать не потрудился, а ОС автоматически ставит черный фон и белые буквы, если не определено другое). Кстати, этот блог (что редкость) подобным не грешит, поэтому пишу коммент с большим удовольствием. :)

    Ответить
  2. Артемий Сказал:
    25 июня 2011

    Охуенчик эффекты.
    Коспиану плюсую люто.

    Ответить
  3. pomosh Сказал:
    30 июня 2011

    Большое спасибо за стили, вопрос такой как будет отображаться градиент в опере?

    Ответить
    • Webchester Сказал:
      30 июня 2011

      В последних версиях отображается нормально.

      Ответить
  4. Дмитрий Сказал:
    19 июля 2011

    Обалденные эффекты обязательно затестю

    Ответить
  5. vadimts Сказал:
    19 апреля 2012

    Ещё давай! Мало.. 3D текст хорош

    Ответить

Прокомментировать

Метки: ,