Как да направите чиста плъзгача CSS3, без да прави Script

Предишен ◈ Следващото

Между другото, когато сме готови, можете също напълно прави в CSS адаптивна плъзгач, просто необходимост от промяна на ширината от главния контейнер до макс ширина и правилното изображение.

Определяне на снимките

За да започнете, нека да тичам, не е най-трудната задача - да се намери снимките онлайн, което ще се използва като пързалки. Да кажем, нека да бъде животни. Намерих три снимки (в нашия слайдер ще бъде много прост три слайд): лъв, тигър и пантера. Необходимо е да ги доведе до желания размер.

В съответствие с това е необходимо да се определи какъв ще бъде размерът на плъзгача. Например, 500 пиксела в ширина и 350 във височина. По-късно, ние ще го запише в стил, сега само се планира.

Започваме с основния план

Е, на снимката е избран и подготвен, има мини-план в ума, ние започваме с един прост HTML-код:

Как да направите чиста плъзгача CSS3, без да прави Script

Практически курс по адаптивно оформление Кацане от нулата!

Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни

Нека това да бъде основната опаковка, която ще се основава на нашия бъдещ плъзгача и бутони, за да ги контролират. Останалата част от оформлението, което ще покаже, че е необходимо да се добавят към него.

Ние сме създали три радио бутони, един от които ще бъдат проверявани по подразбиране. Всеки от тях получава уникален идентификационен номер. Малко по-късно, ние добавяме към него подписването.

Можете също така трябва да добавите маркиране за пързалка блокове:

Както можете да видите, те попадат в отделен контейнер.

В отделна единица, създадена от три т.нар подписи на тези бутони, но в този случай те ще ни служи за друг.

С помощта на атрибута за всеки подпис свързват с един от бутоните, това ще ни позволи да ги направи добре. Не бутоните за избор, защото те, за съжаление, не работят стилове и етикети. Bundle ви позволява да направите така, че когато кликнете върху бутона за избор, което е много полезно за нас подписът се избира автоматично и.

Ние започваме всичко оформена в CSS

Първо трябва да определите формата за цялостното контейнера.

Така че ние правим от размера на предварително планираните за него, и да даде малко пространство от горе и относително позициониране към вътрешността на контейнера всички елементи могат да бъдат позиционирани абсолютно.

Следващата стъпка от бутоните за скриване на страница, ние все още се направи тях не може и не трябва използването на тях.

Следващата стъпка - ние правим самия блок плъзгача и съдържанието му - пързалки.

Чрез определянето на ширината и височината на стойност сме наследили практика показва, че браузърът ще вземе стойностите от уреда обвивка. По този начин, ще се предлага с ширина 500 и височина 350 пиксела, тъй като ние се нуждаем.

На следващо място, посочете всеки слайд в фоновото изображение. Тъй като тя съдържа прозрачност, тогава ние няма да видите никакви промени, все още. Въпреки това, ако промените непрозрачността от 0 до 1, можем да видим нашия пантера като фон, нека да се върнем на прозрачността на 0.

Ние правим подпис (и в действителност, нашите ключове)

Първо трябва да ги подредите приблизително в средата. Направих това с помощта на абсолютно позициониране и негативен външен отстъп. Има обикновено центриране използване абсолютно позициониране: оставени комплект координати: 50%, след което да отрицателен вдлъбнатина оставени от половината от ширината на елемента.

Тези правила стилизирам нашия етикет, и с помощта на псевдо-ние ще създаде рамката за бутоните и ги spozitsioniruem.

Практически курс по адаптивно оформление Кацане от нулата!

Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни

Също добавя закръгляване 20%. Сега ще видите само три зелени квадрати сега остава да се направи така, че когато кликнете върху тях те промениха стила. За да осъществи всичко това, тук са магията имаме нужда от селектори:

Но това не се случва. По подразбиране, нашите етикети (квадрати) и бяло и те не са видими, само зелената рамка. Тези селектори като че ли казват на браузъра: ако бутона # точка 1 е избран от потребителя, да променят стила на етикета на номер 1, ако # избрана Point2, прилага стила на втория етикета. Аз разбирам, че може да ви е трудно да се разбере всичко това, ако сте начинаещ. В този пример, две псевдо използва, и символът

който ви позволява да изберете елементите, освен тези, показани му от селектора. Няколко прости примери за вас, за да стане ясно:

р - избира всички точки, които са след Divs на маркиране.

т - всички елементи с клас на т, които са в маркиране да приключи в рамките на идентификатора на блок. Тези, които са в предната част на това устройство няма да бъде избран.

Мисля, че сега сте станали ясни. Но псевдо-: проверен е едно от нововъведенията и CSS3 ви позволява да прилагате стилове, в зависимост от това дали е избран радио бутона или отметка или не.

Така че, с обяснението, че е всичко, защото сега е най-важното нещо, за да стане всичко в крайна сметка печелят! Добави следващите магически селектори:

Тук ние виждаме използването на: проверени и

отново, но както вече обясних им, можете да се досетите, което тези селектори. Но, в действителност, това, което се дава команда към браузъра, когато човек избира първия бутон, за да се вижда съответната снимка. Както можете да видите, ние променяме Z-индекс, т.е. броят на слоя, както и премахване на пълна прозрачност, заменяйки я с пълна непрозрачност.

Тъй като ние имаме сте се регистрирали с CSS за всеки слайд фоновото изображение, сега те ще бъдат заместени и да станат видими. Автоматично при зареждането на страницата на плъзгача се появяват лъв, когато щракнете върху втория бутон - тигър, когато щракнете върху третата - пантера. Нашата плъзгач работи безотказно!

Същият отказ от отговорност

В началото казах, че с навлизането на CSS3 плъзгач може да се направи само от тази технология, без използването на скриптове, но с известни резерви. Така че, както знаете, ние сме създали плъзгача няма да се включи сам пързалки, това е възможно само докато някой кликне върху бутоните. Да, трябва да се считат за такива ограничения.

Добавяне на ефекти и допълнителни предметни стъкла

По този начин, можете да добавите неограничен брой нови слайдове. За да направите това, трябва само да се добави:

нов подпис (етикет)

нови пързалки и снимки към него

Плюс това, не забравяйте да добавите нов селектор на стилове. Също така бих искал да кажа, че в тази статия, ние осъществихме много прост слайдер. Без излишни украшения, както се казва.

Добавете ефекти всъщност не са много трудни. Просто добавете плавен преход към слайдовете, а желаната реализация.

Сега снимките са наклонени под 55 градуса и се прилагат към цвета на началото на 90 градуса. Но поради факта, че по подразбиране, скрити слайдове, ние просто не виждам. И това е необходимо, но ще видим премахване на тези ефекти, когато ще се включи пързалки. Тъй като има предвид плавен преход, ефектите отмяна ще се случи плавно, и ще видим как снимки povrachivayutsya към нормалното, и да виждат цветове преливане.

Схващате ли? Попитахме ефекта от невидимо изображение, а когато те се появят ние имаме време, за да забележите, че ефектът от отмяната. Тук съм, разбира се, не е използвал цялата необходима продавач версия префикси всичко, за да работят в по-стари браузъри, но това е само в името на спестяване на пространство и време. Като цяло, добавянето на тези ефекти, аз направих точно в името на един пример, в действителност, можем да добавим тяхното въздействие, което искате.

Може би това да завърша тази статия. Ние сме направени слайдер с красива повратна на нови фото ефекти. Разбира се, че има очевидни недостатъци, но това е слайдер на чист CSS3. Е, да разберете повече за тази технология можете от нашия курс, там можете да по-добре се справят с новите селектори.

Практически курс по адаптивно оформление Кацане от нулата!

Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни

Най-IT новини и уеб разработки на нашия канал Телеграма