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

Смяна на квадратчета с помощта на CSS, дизайн и разработка на сайта

Добър ден. 🙂





Този стилен отметка е направено с помощта псевдо: проверени и: не. В същността си, ние се събуди, за да подражават на квадратчето, и в квадратчето става невидим.

Първо трябва да се определи от квадратче, ще се промени. Ако това ще бъде всички квадратчета на сайта, просто трябва да се добавят стилове класа на отметки, които ще бъдат показани в примера. Като цяло, ще трябва квадратче и следва да бъде задължително да имате няколко възможности. Например, имате тук следния код:

Трябва да се усъвършенства и да направи така:

Нека разгледаме необходимите параметри, с цел:

  • клас = провери - добави клас за всички квадратчета, които ще имат този клас бяха променили външния вид.
  • ИД = newchec - добави Haydee, за да се връзвам на етикета на отметка. Така че, ако трябва да изберете само един квадратче, не можете да добавите класа и стил, за да се регистрирате за този много Haydee. Естествено, класа и Haydee може да има никакво име.
  • етикет - на втория ред, който е отговорен за отнемането на знака в нашия отметка. Присъствието му е задължително. Дори и да нямате нужда от етикет, а след това vseravno трябва да добавите етикет, дори и празен.
  • за = newchec - идентификатор елемент, който трябва да бъде да се установи връзка. В нашия случай това е нашата отметка. Как да разберете стойността на трябва да съвпада с този на нашата отметка.

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

Можете да отворите файла и да добавите стил на част от код:

За тези, които знаят, CSS, става ясно след инспекция. Нещо не е трудно тук. За тези, които все още не са съвсем лесно разбира това, малко знак за. Научете CSS, аз не съм тук, аз съм твърде мързеливи, за да рисува всеки параметър, за това е книгата на CSS.

На първо място - да се определят стила за по-старите версии на IE браузър. Ето само малко да достигнем до нивото на стандарт отметката.

Ние правим нашия етикет кликване. Когато движите ръката ще се появи на мястото на стрелката.

След това вече започваме да модернизираме отметка. Ние правим нашите обичайни отметка невидим.

Правим новото позициониране на квадратчетата на нашия етикет

Настройки за показване на Shutdown отметка, когато плъзгачът е в ляво и сив фон.

Това е появата на нашите кръгли плъзгачи.

Цветът на фона, когато плъзгача надясно, т.е., то не е активирана.

настройка Разстояние на плъзгача ще се движат много, когато активирате в квадратчето.

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

Разбира се, можете да промените всичко по свой собствен начин. Чрез опити и грешки, как да се коригира всички вас. Съгласете се, тази отметка е много по-хубав стандарт. Ако сте харесали този метод, надявам се да го използвате и в бъдеще на своята интернет страница. В следващата статия ще покажем как подобен метод за промяна на кръгла радиото.

Това е всичко, благодаря ви за вниманието. 🙂

Ако сте били от полза за работата си, можете да подкрепят сайта :)

Здравейте скъпи приятели

Имате AdBlock инсталирано разширение или други подобни. Добавете сайта си в белия списък, и по този начин да допринесе за vnesesh неговото развитие. Инструкции за това как да деактивирате AdBlock искат този прозорец

Свързани статии

Подкрепете проекта - споделете линка, благодаря!