Панель навигации в стиле 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; }