Панель навигации в стиле Windows 8 на CSS
Панель навигации в стиле Windows 8 на чистом CSS3 (иконки base 64) с эффектом transition
Код CSS
Панель навигации в стиле 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;
}
base 64