Модель логотипа в 3D при помощи CSS

рейтинг 1.0 из 5

Теперь вы можете создать графический дизайн, где знаки можно вывести в 3D, также настроить под логотип сайта, так как все создано на CSS3. Думаю многие задавались вопросом, как можно все сделать на чистых стилях, без применение фотошоп, что сейчас все уже выстроено, где веб мастеру остается поставить свой оттенок, так как по умолчанию идет в черно белой палитре. 

Безусловно можно найти множество уроков, но здесь уже все сделано, также предоставлено Demo, что можно изначально посмотреть. Но а где вы хотите поставить, то вам решать, так как можно выставить один класс и вы кардинально измените графику, которая будет ярче, чем остальные знаки. 

HTML 
 

Код
 
<code><h1 class="zotredsavum">CSSAVE.AT.UA</h1></code>


CSS 

Код

 
h1 { 
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 

  font-size: 73px; 

  padding: 65px 47px; 

  text-align: center; 

  text-transform: uppercase; 

  text-rendering: optimizeLegibility; 


.zotredsavum { 

  color: #e0dfdc; 

  letter-spacing: .1em; 

  text-shadow: 0 -1px 0 #fff, 0 1px 0 #2b2a2a, 0 2px 0 #252424, 0 3px 0 #232222, 0 4px 0 #2f2e2e, 0 5px 0 #1b1919, 0 6px 0 #2b2929, 0 7px 0 #272626, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #2f2d2d, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 14px 0 #121212, 0 19px 28px rgba(19, 18, 18, 0.9); 

}

 


  • Дата: 10.04.2018, 23:20
  • Просмотры: 73
  • Отзывы: 0
Автор материала
...
...
...
...
Поделиться в социальных сетях

Правила публикации комментариев:
1. Запрещено оскорблять, унижать в грубой форме других пользователей.
2. Мат и грубые слова запрещены, даже в скрытой форме, для этого существуют масса слов которые заменяют мат.
3. Запрещено писать ссылки на другие сайты (За исключением официальных сайтов uCoz, например: blog.uсoz.ru)
4. Запрещено флудить и спамить, предлогать услуги (например: рипы, адаптации, помогу с установкой и т.д. )

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