Меню сайта с красивой анимацией на CSS

рейтинг 1.0 из 5

Навигация вертикальном виде, которая полностью создана на стилях, где также присутствует уникальный эффект, что производится при наведении. На простом сайте, это как софт портал или кино сайт, не думаю, что будет отличным решением. Его безусловно создавали для современных площадок, где палитра цвета не главная, так как она быстро изменяется веб мастеров. Здесь больше всего на сам эффект сделано, что реально привлекает своей значимостью и безусловно анимацией. Можно поставить как в блок или найти другой элемент и задействовать в совершенно другой функций. 

HTML-списки - это ресурс широко используемый веб-дизайнерами и разработчиками, а также блогерами, но по правде говоря, по умолчанию они склонны к довольно недоеданию при разработке. В этом посте вы увидите один такой список на CSS, делая ему гораздо более современный вид. Преимущество всего этого заключается в том, что вы можете настроить эти стили и создать свои собственные списки с эффектами, о которых вы можете думать. 

HTML 
 

<div class="songalen_zotsabtum">
    <ul>
        <li><a href="http://cssave.at.ua/">CSSAVE.AT.UA 1</a></li>
        <li><a href="http://cssave.at.ua/">CSSAVE.AT.UA 2</a></li>
        <li><a href="http://cssave.at.ua/">CSSAVE.AT.UA 3</a></li>
        <li><a href="#">CSSAVE.AT.UA 4</a></li>
        <li><a href="#">CSSAVE.AT.UA 5</a></li>
         <li><a href="#">CSSAVE.AT.UA 6</a></li>
        <li><a href="#">CSSAVE.AT.UA 7</a></li>
    </ul>
</div>


CSS 
 

.songalen_zotsabtum ul {  
  list-style:none;  


.songalen_zotsabtum ul li {  
  font-family:Georgia,serif,Times;  
  font-size:17px;  


.songalen_zotsabtum ul li a { 
  display: block; 
  width: 295px; 
  height: 27px; 
  background-color: #1f1c1c; 
  border-left: 4.7px solid #252323; 
  border-right: 4.5px solid #424040; 
  padding-left: 10px; 
  text-decoration: none; 
  color: #e5f2f9; 


.songalen_zotsabtum ul li a:hover { 
  transform: rotate(4deg); 
  box-shadow: 9px 9px 18px #151414; 
  margin-left: 11px; 
}


Как можно заметить, что также присутствуют стили, у кото алимента, на который наводишь клик. 


  • Дата: 23.03.2018, 18:33
  • Просмотры: 80
  • Отзывы: 0
Автор материала
...
...
...
...
Поделиться в социальных сетях

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

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