Создание 3D текста на CSS

Сразу скажу, что этот эффект будет поддерживаться только теми браузерами, которые поддерживают параметр CSS text-shadow. Используя всего несколько строчек CSS, можно сделать сайт красивее. Кстати, лучше всего использовать этот эффект в оригинальном блоке. На официальном сайте одного известного браузера я видел что-то подобное. Думаю, стоит воспользоваться приведенным для примера кодом cоздания 3D текста на CSS, чтобы не мучиться с созданием теней. 

CSS 

Code

h1 {
  margin: 0;
  color: #fff;
  text-align: center;
  font: bold 25px Georgia, Helvetica, Arial, sans-serif;
  text-shadow: 0 1px 0 #cccccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbbbbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaaaaa,
  0 6px 1px rgba(0, 0, 0, 0.1),
  0 0 5px rgba(0, 0, 0, 0.1),
  0 1px 3px rgba(0, 0, 0, 0.3),
  0 3px 5px rgba(0, 0, 0, 0.2),
  0 5px 10px rgba(0, 0, 0, 0.25),
  0 10px 10px rgba(0, 0, 0, 0.2),
  0 20px 20px rgba(0, 0, 0, 0.15);
  }  


А нужный текст просто заключаем в нужный тег, в данном примере между <h1> и </h1>.

  • FalleN

  • 11263

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!