Закрыть   X

  •    
  •    
Печать

Панель навигации в стиле Windows 8 на CSS

Автор: Алексей Елизаров.

 Панель навигации в стиле Windows 8 на чистом CSS3 (иконки base 64) с эффектом transition 




Просмотр Скачать

Панель навигации в стиле Windows 8 с изпользованием только CSS3. Все иконки с использованием base 64. Цвета Windows 8. Все параметры можно изменить.

Код HTML

<a href="#"><div class="primer"><div class="home"></div></div></a>
<a href="#"><div class="primer1"><div class="tree"></div></div></a>
<a href="#"><div class="primer2"><div class="enter"></div></div></a>

Код CSS
.home
{
margin:32%;
height:32px;
wight:32px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABu0lEQVRYR+2V4U3DQAyF0wlgA7IBbABsQCegTABMQJkAmACYADag3QA2KBuUCcBfdIeM49S5VMCfWDpFXM/287OfmVT/bJMt8u+K703yv5TvekisoQAOJNm9HL7Yq5yz9C3CMQTASUoOA9pgABDPJQhKAdxK8PMgAW9oSS/rC4Bqn+Qc9YpaVQt5N5UTzkUfAPT5RY6lHCy50jyMtiXH0VxEAC4kgBf8Xe6ZBYYPAyRV7zgMEeOui7kuAFliM8dxmZJbevFhAA8dn4fEVqslHgArMR3vWv6Yp4uuPcDvVw4IV6oWQJfEPiQgbGSJRXuAOFRtW9KSqgbQJbG3RPkqVQUQ5sLbAwwlibE6Ad532PiWKgAIxJRTlbVHuWCIQL5pLrQfAPJqxodkp07shdxNAUBwb3rZarmaTXPhxG6t5pk8YnVbWwPg09xaieHsUe4l1ncUpltCEczQnn5kAWiJ9aU8AmJb8kOqGoCWWCnlEQgrwbk4NFLNMwDNWWJDKY9A2JY0UgVALWelvO1MRIFLf9fSr71N+JcAmhZYGwFEDET/wov8h7RgBDAyMDLw6wyU7vat3kfVbBW8j/MX4JlyLSqUtBwAAAAASUVORK5CYII=) no-repeat;

}

.enter
{
margin:32%;
height:32px;
wight:32px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA9ElEQVRYR+2WbQ7CMAiG3c08ip5Ej6I30ZMpLOnCCC0fKcwfNmmWpcD7DGjX5aSPj24St1gMrj8DYIEdfc8ZFm8w8bkNS9CWAYutBCAKN0NL0CjAUDgTwCScCeBq2owSpAM8IH2XQbunA6AAQlw7ENMBuE4T6EGUASCYBBEGcDmStHAIVxy6C1yOrC4UwhVnFsCT7IxyACqOiQkDDLb2bokKcPFSAEk8BYD/DfG9J14CcPhRrPXK9Cb0Xkj+AGkZ0GofWvfciEICmpMFQIvRuy9ofm8wuB8BsArDfCFhJcBOuKWnAkAUrgAYCmcCYG23Gmud+AW1505HOS98GAAAAABJRU5ErkJggg==) no-repeat;

}

.tree
{
margin:32%;
height:32px;
wight:32px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA4klEQVRYR2NkGGDAOMD2M5DjgAago+txOLwRKA6SJxqQ44D/BEwnyUySFEMthjkAXS8ucbzuHXXAkA4BXHFLkqdIUgy1ccCzIczn6NmRHM+QVRCNOoCmIRAAND0fiB2ILsxJU3gAqHwiEG+AaUNOOCDL15NmHtmqA2GOQHbABaCgPtlGkqbxICyUkR1AqJYjzQrCqsF243MAoXxNajmAVf2oA0ZDYFCEAKnVK1XVg0KAUP7H1fgktkGC13xkBxDbyiW1VYxX/agDBlUIUCVRodUvIDMJJkKqZiughSDzkAFe8wEec1Ub6rX/nwAAAABJRU5ErkJggg==) no-repeat;

}

.primer 
{

padding:15px;
width:90px;
height:90px;
margin:10px;
color: #fff;

-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
box-shadow:1px 1px 10px #ccc;
float:left;
}

.primer:hover
{
background-color: #d9522c;
 border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);

width:90px;
height:90px;
box-shadow:1px 5px 10px #ccc;
}

.primer1 
{

padding:15px;
width:90px;
height:90px;
margin:10px;
color: #fff;

-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
box-shadow:1px 1px 10px #ccc;
float:left;
}

.primer1:hover
{
background-color: #0099ab;
 border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);

width:90px;
height:90px;
box-shadow:1px 5px 10px #ccc;
}

.primer2 
{

padding:15px;
width:90px;
height:90px;
margin:10px;
color: #fff;
-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
box-shadow:1px 1px 10px #ccc;
float:left;
}

.primer2:hover
{
background-color: #ae193e;
 border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);

width:90px;
height:90px;
box-shadow:1px 5px 10px #ccc;
}

© 2018 cssprofi.ru.Алексей Елизаров. Все права защищены
cssprofi.ru - запрещено использование материалов сайта без согласия его автора и обратной ссылки