Анимирани раздели с CSS3 и HTML5
Пример за различни типове преходи между раздели може да видите тук:
Вижте пример за изтегляне
Може да ви хареса последния урок, в който също създадохме красиви раздели - Красиви CSS анимирани раздели.
HTML част
Ще използваме елемент с различни класове за превключване между раздели. И етикетът съдържа името на раздела:
Първото нещо, което трябва да направим, е да скрием останалите раздели с изключение на активния. За да направите това, задайте свойството прозрачност на нула:
Разделите ще изглеждат като елемента, но всъщност ще кликваме върху:
Тъй като не се нуждаем от долна сянка за този елемент, използваме псевдоелемента:after с празна стойност на свойствотоcontent :
Когато даден раздел стане активен, той има свой собствен стил на показване за това. Тя също се качва над другите. Това се прави с помощта на свойствотоz-index :
Така че скриваме всички останали раздели, като зададемopacity: 0. Не можем да използваме свойствотоdisplay: none защото не поддържа ефекти на преход:
Когато направим раздел активен, се задава стойносттаopacity: 1, както и голямz-index :
В тази статия създадохме CSS3 и HTML5 раздели. Те ще работят прекрасно в съвременните браузъри. Различни видове преходи могат да бъдат намерени в примерите по-горе, както и да изтеглите източника и да приложите.
Подобни публикации
Добър ден, кажете на начинаещ в този пример .tabs input.tab-selector-1:checked
.content .content-1, което означава знака "
Здравей Артур. Тилдът означава, че ще бъдат избрани всички елементи с класове ".content .content-1", които следват елементи с класове и псевдоселектора ".tabs input.tab-".селектор-1: отметнато".
Благодаря Юрий за урока и за пояснението. Направих малко по свой начин и вместо текста имам форми в разделите, отначало се оказа такъв боклук, но сега разбрах, че всичко изглежда наред.
Моля те кажи ми. Ако имам различно съдържание на раздела, как мога да направя височината на .content плаваща. Опитах се да го приложа по няколко начина, но нищо не се получи.
Денис, тогава ще трябва да промените малко CSS. Необходимо е да се зададе фон не за един блок (сега белият фон е зададен за блока с класа "content"), в който се намират всичките 4 раздела, а за всеки поотделно в 106-ия ред на файлаstyle.css.
Как да направите директна връзка към определен раздел. Например, така че човек, като щракне върху връзка, да стигне до 3 раздела наведнъж? Анкерите не работят
Николай, активният раздел има атрибутchecked. Може да се задава динамично с jQuery, когато се щракне върху връзката.
Но как да го приложим? Натискане на раздел от връзка. Кажи ми моля те
Добър ден! Има ли някакъв начин разделите да бъдат вложени? Опитах се да копирам кода на раздела с раздели в един от разделите, но когато щракнете върху някой от вложените раздели, всички те изчезват.
Добър ден, Владимир!
Правите всичко както трябва със структурата, но все пак трябва внимателно да промените стиловете, защото един от разделите винаги се вижда, докато останалите са скрити. Поставили сте кода на всички раздели в първия раздел, но не сте променили класовете, така че когато щракнете върху някой от разделите, всичко изчезва. Трябва да напишете нови класове за вътрешни раздели. Също така не забравяйте да промените всички класове в CSS, така че да не се припокриват с имената на основните класове.
В допълнение към тези раздели, сайтът има и следните видове раздели: