Съвсем наскоро, Apple.com актуализиран на навигационното меню сайт в горната част на страницата. Това меню ще бъде по-тъмен от предшественика си, в сиво маскировката си, но гледаше много по-добре.
Едно нещо, което веднага ми хвана окото е, че менюто е изложена в изображенията. Ние ще се опитаме да пресъздаде това меню, но с техники CSS3.
И така, ние ви навигационното меню, като уебсайт Apple.com представи, изцяло създаден с помощта на CSS3.
Припомняме, както е посочено в CSS3 на менюто. и браузъра, чрез който можете да го видите трябва да са съвместими WebKit. Ето защо, в Opera и IE меню не може да изглежда като доста като на снимката, но ще продължи да функционира.
Преди да се пристъпи към програмирането CSS, първо покажа няколко техники, които ще бъдат използвани за създаване на желания ефект:
- шрифт - използва същия шрифт като на Apple.com Светъл.
- текстови сянка - изравняваща сянка върху текста, използван в имената на бутоните.
- граничен радиус - заоблени граница се използва от първата и последната точка от менюто, както и в полето за търсене.
- кутия сянка - се използва на няколко места, за да осигури слаб ефект на сянка.
- кутия сянка: вмъкнати - трябва да се създаде вътрешен ефект сянка.
- градиент - наклони се използват по-голямата част от елементите на менюто, така че те ще ви помогне да създадете много генератор CSS3 градиент.
- : Първо дете - това псевдо-елемент се използва за извличане на първия елемент в менюто.
- : Не (: последната дете) - за избор: да не (: последната дете) изключва последния потомък на събитието висене.
- фон изображение: URL (), градиент () - мулти-произход, използвани в низа за търсене, за показване на фона на градиента и Лупи.
- ключови кадри - направени изчезване доброто анимация меню с помощта на ключови кадри.
- Резервен - реципрочна подкрепа е много важна за браузъри, които не поддържат наклони, така че ще се постави щепсела под формата на издаване на имот фон-цвят.
Сега нека видим как изглежда CSS код!
Свързани статии