Zaznaczanie, modyfikowanie elementów nie powiązanych ze sobą [CSS]

Kategoria wpisu PHP, HTML, CSS Tagi: , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Dzisiaj pokażę wam jak w bardzo prosty sposób możemy powiązać ze sobą elementy, które nie mają ze sobą nic wspólnego. W większości przypadków kiedy oddziałujemy na dane obiekt są one ze sobą fizycznie powiązane.

Standardowe oddziaływanie na elementy w CSS

Przykładowo element <a> zazwyczaj znajduje się jakimś paragrafie <p> lub <div>. Chcąc go spersonalizować zmieniając odwołamy się więc do rodzica czyli naszego <p> lub <div>.

Na takiej zasadzie zależności obrabiany na stronie jest praktycznie każdy element. Przynajmniej tak to działa „normalnie” w CSS.

A do manipulacji pomiędzy niezależnymi elementami wykorzystuje się JavaScript i inne jego biblioteki. Jednak tak być  nie musi. Obecnie spokojnie niektóre operacje możemy wykonywać z pomocą CSS.

Oczywiście nie są to tak skompilowane operacje jak w JS, ale efekty i tak mogą być wystarczające. A zatem od czego zacząć!

Manipulowanie rodzeństwem

Na początek odsyłam was do wpisu na temat rodzeństwa – czyli elementów znajdujących się na tym samym poziomie. Szczególnie zwróćcie uwagę na „~” (tyldę). Ten znaczek umożliwia nam manipulowanie obiektami znajdującymi po konkretnym obiekcie np:

See the Pen
siblings
by Aura (@Julka85)
on CodePen.

Jak widać na załączonym przykładzie <span> znajdujące się za H4. W przykładzie bardzo istotne by elementy muszą być na tym samym poziomie.

Zmiana wyglądu z radio button

Naszą zabawę zaczniemy od efektu z wykorzystaniem radio button. Zakładam, że każdy z was wie co to jest i jak wygląda radio button:

oraz element label – etykieta

Jak będziecie budować cokolwiek z wykorzystaniem tego pola pamiętajcie, że

  • name – musi być takie same dla całej grupy
  • id – może być różne
  • for odnosi się do id <input> (podobnie jak w likach – kotwice, odnośniki)

np:



 

Jak widać nie musimy klikać w sam radio box wystarczy nam kliknąć w samą etykietę. Oznacza to, że spokojnie możemy ukryć element radio i zostawić samą etykietę.

Zwykłe display:none powinno załatwić sprawę. Pamiętajcie, że ukrywamy tylko 1 typ elementu:

Od tej chwili element radio będzie się zaznaczał, ale nie będzie dla nas widoczny. Przeglądarka interpretując kod CSS ukryje go przed nami.

Następnym korkiem będzie stworzenie elementów, które chcemy zmieniać po kliknięciu w „etykietę”. Przykładowo może to być <div>.  W celu lepszego rozróżnienia <div> powinien otrzymać unikatowe id.

Oczywiście mamy 3 opcje więc elementów też tyle będziemy mieć:

 

See the Pen
Check target
by Aura (@Julka85)
on CodePen.

źródła:Zastan
https://justcss.co.za/css/the-infamous-radio-button-hack/

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *