И още един. за да опростим нещата, аз ще предоставя само на необходимите парчета на HTML и CSS. Не очаквайте, че ако копирате материала от статията отведе на инерция има същия ефект, както в следващите демонстрации. Но ако искате да видите пълния код - можете да отидете на CodePen сайт, също в края на статията ще се осигури връзка с изходния код файлове.
Пример проста форма
По-долу е вариант за сигнализиране на потребителя, когато пълненето на формата.
Има три текстови полета, етикети като се използват пълнители. Разбира се, това не е много добро въздействие върху взаимодействие с потребителя, но аз имам в много ситуация, в която главния дизайнер трябва да се забрани използването на видими маркери.
Моето решение на този проблем е пресилено да конвертирате тагове в "изскачащи напомняния", когато потребителят поставя акцент върху полето за въвеждане:
Както може да се види в тази част на HTML не е магия. Единственото необичайно нещо е, че елементът
И тази част от CSS ще проработи всичко:
Първият блок на CSS - това е стил по подразбиране за полета за въвеждане. Стил .form ред притежава абсолютно разположен елемент .label-помощник в непосредствена близост до полето за въвеждане.
Element .input текст prepositioned роднина и Z-индекс приложена към него, защото ние не искаме да се припокрива етикет полето за въвеждане в прехода.
И тук е CSS, който управлява дисплея на етикета при смяна на фокус:
Важното е да се използва псевдо-клас: фокус в комбинация с лост за съседните елементи + (селектори съседни елементи играят важна роля в нашата демонстрация примерите).
Следователно, това, което искаме да се поставят на етикета след полетата за въвеждане, тъй като в противен случай тя няма да работи за избор съседните елементи.
Казано по-просто, когато елементът се изведе на преден план, съседната елемент (таг) става видима, и променя позицията си, така че да бъде над полето за въвеждане, и дава на потребителя намек, тъй като областта на пълнителя, вече не се показват.
Като малка добавка подчертах поле за въвеждане имейл-и, ако има грешка. От полето за въвеждане не поддържа псевдоелементи грешка "Х" се прилага към етикета.
А случаи малко по-сложни за използване
Горният пример набира популярност. Как да разбера, че не съм първият, нито последният човек, който се използва в смисъл да го покажете.
Преходите на сайтовете на една страница
Аз все още играят малко да направите това:
Може би сте забелязали използването на елементи В началото на всяка секция. В CSS, ние ще се гради върху тях, тъй като ние също така трябва да се разчита на съседните елементи за избор (+), за да работи преходни ефекти.
Просто казано, ние ще използваме състояние: проверени ключове, които се активират чрез натискане на съответния етикет, както и с прилежащите елементи за избор, ние ще се промени местоположението си с помощта на прост CSS.
И тук е CSS:
Горното осигурява CSS стайлинг "Buttons", както и скрива ключове, ги анулират и директно взаимодействие.
Елементи стр-етикет и стр-етикет чувствителността, използван за бутони с голям панел, докато .exit-етикет клас Stylize "затваряне" бутон на панела е отворен (отново, маркери стилизирани бутони).
Тук изберете контейнера за панели (участъци) и съдържанието им. Контейнерите имат размер на 50% от общата височина и ширина, която е подобна на съответния пример Codrops.
Форуми се позиционират с помощта на трансформация: превод, вместо да се използва позициониране на върха / ляво / долната / надясно. Това е така, защото по-добре трансформацията въздействие върху производителността, тъй като те не се нуждаят от интензивни и пречертаването, както това се случва в случай на промяна на позицията на елемента.
И тук е най-забавната част, където ние проверяваме дали е бил избран на ключа, и ако това е така:
- .раздел-контейнер преоразмерява до пълна височина и ширина, и се превръща в горния ляв позицията на прозореца на браузъра
- закриване и съдържание на бутона раздел станат видими
- марка, на която се натисне, той става невидим, така че тя вече не е възможно да се кликне върху нея и не обхваща съдържанието на раздела, който току-що беше показан
- секции, които не са избрани, на границата, се полага, което увеличава до 40px размер, стимулиране на ефекта на "намаление" в раздела за фон, който е настроен на цял екран.
Алтернативни ефекти на преход
Въз основа на леко променено оформлението на предишния пример, аз представям още два примера, които следват същата концепция като предишния пример.
Проблемът с тези примери е, че въпреки всичките си прохлада и факта, че те показват колко много неща можете да направите с CSS, всички те са много зле по отношение на достъпността за потребители с увреждания.
С тази бележка, нека да преминем към следващия пример, който е много по-достъпен за потребители с увреждания, но ви позволява да получите подобни резултати.
Промяна на оформлението чрез: мишена
Леко изменение на CSS и маркиране, можете да постигнете същото поведение както в примерите с навигация с помощта на превключвателите, но с помощта на ID и псевдо-клас: целта.
Нека да разгледаме промените в маркирането:
Вместо да използвате превключватели и съседните елементи, сега се използва идентификатора на всеки един от елементите на контейнера. Вместо това, преминете на ролята на "бутони" игра свързва котва, че много по-семантично правилен.
Тук е CSS, който е преминал през много промени:
Ето, аз донесе само CSS кода, в която са били направени повечето от промените, но като се сравнят предходната и текущата Например, можем да видим, че промените са заинтересовани само селектори.
Селектори марки са заменени от използването на HREF атрибут, вместо за атрибут. и ние трябва да се откаже от използването на ключове.
Тъй като сега се използват: цел да се отнася до различните секции, селектори: проверява + са заменени от съответните селектори: мишена. Ако по-рано, че е възможно да се декларира една единствена селектор: проверява + за всички варианти, използвайте инструмента за избор: мишена изисква тя дублира за всеки URI.
Необходимостта да се напише номера на селектори, разбира се, по-малко от изпълнението с ключове. Но аз бих се отбележи, че този вариант е по-правилно от гледна точка на семантиката на.
В края на
До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!
Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!
Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.
Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!
Свързани статии