Share
En av de mest kraftige og underutiliserte CSS-valgene er den generelle søskenkombinatoren: ~. I de kommende opplæringene vil jeg gå over forskjellige måter å bruke ~ å skape komponenter som ikke bare er visuelt tiltalende, men også funksjonelle og nyttige. Denne opplæringen vil dekke formelementer; radio, avkrysningsboks og vanlige innganger.
Vi lærer mye: moderne CSS selectors, the Kommer til å endres eiendom, SVGs hjerneslag egenskaper, inngangsstatus og mye mer!
En rask ansvarsfraskrivelse: Disse CSS-effektene kan eller ikke fungerer i eldre nettlesere. Jeg har testet dem i de nyeste versjonene av Chrome, Firefox og Safari..
Jeg bruker Haml (en HTML-kompilator) og Sass (en CSS preprocessor) for å øke hastigheten på kodingsprosessen! Demoene vil bruke Haml mens en hvilken som helst inline kode vil bruke vanlig HTML.
Jeg vil også bruke den fantastiske AutoPrefixeren i stedet for leverandørprefikser. Hvis du bruker CodePen, må du gå til pennens innstillinger, klikke på CSS og velge AutoPrefixer.
Velg AutoPrefixer i penninnstillingeneVi starter med en av de mest grunnleggende formelementene: radioinngangen. Det er to hoved visuelle tilstander (kontrollert og ukontrollert), samt to mellomliggende stater (svinger og klikk / aktiv-klikk er like i utseende som kontrollert).
Det første trinnet er å sette opp vår HTML. Du trenger en hovedbeholder og en indre beholder med to barn: a div som inneholder inngangs- og visuelle elementer og a merkelapp for inngangen. Jeg liker å bruke en fieldset for den ytre beholderen. Pass på at du legger til en ID for innspillet som samsvarer med til attributt på etiketten.
Det neste trinnet er å skjule standardinngangen, legge til noen grunnleggende visuell styling, og skjul de ekstra elementene som bare vil vises når radioinngangen er valgt. Tanken er å gjøre innspillingen usynlig, men plasser den på topp av de visuelle elementene, slik at klikk på radioinngangen ser ut som å klikke på det visuelle radioalternativet. Vi kan gjøre dette ved å sette inn stilling: relativ til .svg og posisjon: absolutt til inngangen, og deretter skjule inngangen.
Merk: Du kan formatere dette på en hvilken som helst måte du velger. Jeg valgte en grunnleggende sirkelstil som etterligner standardradio, bortsett fra at den er flattere.
Vi stiller inn noen fargevariabler ved hjelp av Sass; et par grå farger og en lyseblå for den valgte radioen. Vi vil også sette en variabel $ p for standardinnstillingen 12px er et fint nummer fordi det er delbart med et stort antall forskjellige tall (1, 2, 3, 4, 6).
Jeg legger hovedvariablene inn i embedet direkte, men ytterligere styling kan bli funnet her eller ved å klikke til CodePen-siden, klikke på innstillinger i øverste høyre hjørne, og klikk på CSS fanen for å vise flere stilark.
Vi har gjort den første sirkelen en lysegrå og den andre den lyseblå, og så skjult den andre ved å sette inn transformere: skala (0). Senere animerer vi sirkelen tilbake, så det er viktig å sette skalaen nå.
Etter å ha satt opp alt dette, må vi bestemme visuelle stiler for hver stat. For dette eksempelet bestemte jeg meg for at den svarte sirkelen på svinger skulle slå en lyseblå; På klikk, den blå sirkelen skalerer seg og den grå bakgrunnen blir hvit, og forblir på den måten for den valgte tilstanden. Den eneste måten å fjerne den kontrollerte tilstanden fra en radio er å klikke på en annen radio, i så fall blått og hvitt skal bare falle bort.
Vi setter fargene opp først, så animer etter at alle statene har farger. Dette er hvor tilde ~ kommer til nytte. Denne generelle søskenvelgeren (den søskenkombinator) vil velge det andre elementet så lenge det foregår av det første elementet et sted, og de deler en felles forelder. Vi bruker inngang: hover ~ div for å velge det visuelle elementet når inngangen er svevet over.
Prøv å klikke på den første radioen, så den andre - du bør tydeligvis kunne se hover og aktive / sjekket tilstand.
Det siste trinnet er å sette opp animasjonene for hver stat. Nøkkelen til å animere alle disse forskjellige tilstandene er å angi de ukontrollerte overgangene som standard og angi de kryssede overgangene når inngangen klikkes. Jeg bruker en ny CSS-eiendom som kalles Kommer til å endres for å la nettleseren vite hvilke egenskaper jeg skal animere.
Du kan også lage denne egendefinerte radioinngangen uten å bruke en SVG. Oppsettet er likt:
CSS er nesten nøyaktig det samme, bortsett fra med litt mer styling for de to div elementer som har erstattet SVG-kretsene. I dette tilfellet bruker vi n'te-av-type (n) å velge de forskjellige div elementene, slik at vi ikke trenger å gi dem en klasse i HTML.
Med SVG-versjonen er det mer markup men mindre styling; med HTML-versjonen, er det den andre veien. Resultatene ser identiske ut, så prøv hvilken som passer dine kodingspreferanser!
Det neste skjemaelementet som vi vil tilpasse er i boksen. Dens tilstander ligner på radioinngangen: To hovedvisuelle tilstander (kontrollert og ukontrollert) og to mellomliggende stater (svever og klikk / aktiv).
Oppsettet ser mye ut som radioinngangen, men bruker linjer til å danne avmerkingen i stedet for sirkler.
Linjene i den første gruppen vil ha en lys grå farge og vil ikke bli animert; linjene i den andre gruppen vil animere inn når inngangen klikkes.
Det er også en ekstra div element; Vi bruker dette til å skape en klikk-effekt der den lyseblå ekspanderer i bakgrunnen. For å få effekten til å virke, må div være en blå sirkel med større bredde og høyde enn selve boksen, og ytterbeholderen må ha overløp: skjult; sett slik at sirkelens kanter ikke vises. Den runde div skulle ha transformere: skala (0) sett, ligner på radioen.
Dimensjonene i boksboksen (til venstre) og sirkeldimensjonene (høyre)Formater dette igjen i henhold til dine preferanser. Jeg bestemte meg for å rundt kantene i ruten, så vel som alle hjørnene.
Det neste trinnet er å forberede animasjonene. Effektene ligner på radioen, bortsett fra at i stedet for en sirkel som utvides, trekker ruten seg inn. For denne animasjonen må vi bruke slag-dashoffset på SVG linjene.
For å animere slag-dashoffset, Vi trenger lengden på hver linje. Jeg opprettet et verktøy på CodePen for å beregne lengdene, men hvis du bruker merket jeg allerede har opprettet, er den kortere linjelengden 6,708 og jo lenger er 14,873. Vi bruker denne verdien til å angi begge slag-dashoffset og slag-dasharray. Dette er bare nødvendig for det første merket (det andre settet med linjer vises som standard i ukontrollert tilstand).
Når inngangen klikkes, setter vi inn slag-dashoffset til 0, hvilken (med en overgang) vil se ut som linjen er "trukket". Vi må også legge til i de andre tilstandsendringene fra den egendefinerte radioen, inkludert bakgrunnsendringene på svinger og sirkelskalaen på klikk.
Det siste trinnet er å legge til i alle overgangene. Igjen, vil vi sette de ukontrollerte overgangene som standard og sette de merkede overgangene på klikk. På samme måte som sirkelen fading for radioen, vil vi få avkryssingsfeltet uttoning når det ikke er merket.
Du kan også få samme effekt med noen div-elementer i stedet for å bruke en SVG; Markeringen er enklere, men ikke så tydelig avgrenset. Den første tomme div er den ekspanderende blå sirkelen, den andre er standardmerket og den tredje er merket som animerer når det klikkes.
Vi skal bruke :før og :etter Som hver del av ruten, som forenkler oppmerkningen, ellers ville du trenge fire tomme elementer eller mer for å lage de to merkene. Vi må posisjonere linjene manuelt og rotere dem på plass, men du kan bruke en enkelt transformasjon til både å rotere og tegne dem inn.
Du kan også bruke et merketegn i stedet for roterende div-elementer! Det er ikke helt det samme som de to andre visuelt, men det fungerer like bra.
Merk: Du trenger bare HTML-symbolet i de to siste div-elementene, men i demoen under har jeg tatt det med i alle tre divene slik at jeg kan inkludere det i gjentatt sløyfe.
Siden vi ikke kan tegne symbolet, blinker den hvite versjonen inn og ut på klikk. Sjekk ut alle tre versjonene nedenfor!
Den siste delen av denne opplæringen er den vanlige tekstinngangen. Jeg har tatt inspirasjon fra Googles materialinnganger. Disse inngangene har noen forskjellige tilstander: standard, aktiv / fokus (når blinkende markør er synlig), og en subtile svinger.
Oppsettet er enda mer minimalt enn de to foregående innstillingsformatene. Vi har et feltsett, inngangen, en etikett og et div-element for grensen.
Det neste trinnet er styling av inngangen. Vi vil ikke gjemme innspillingen denne gangen siden vi trenger det for å vise verdien. Vi lager også en etikett som beveger seg opp og ned når vi fokuserer på inngangen. For å gjøre dette arbeidet må vi plassere etiketten nøyaktig på toppen av inngangen. Den div grensen vil ha en :etter pseudoelement som trekker på toppen av grensen når inngangen klikkes; vi legger en skala (0) på pseudoelementet for å forberede det til animasjon.
Hvis du prøver å klikke på demo-inngangen over og begynner å skrive, vil du legge merke til at teksten skriver ut på toppen av etiketten. Vi vil animere etiketten for å krympe og oversette opp på klikk. Du kan bruke helt forvandler for å forhindre repainting, istedenfor å bruke skriftstørrelse som jeg gjorde, men jeg fant det å bruke det så vel som translateY ga meg en mye mer presis utseende animasjon. Vi fjerner også skalaen på div's :etter å lage tegneanimasjonen.
Nå, hvis du prøver å klikke på demo-inngangen over og begynner å skrive igjen, krympes etiketten og beveger seg jevnt opp, men hvis du forlater den skrevne teksten i innspillingen og klikker utenfor, flytter etiketten ned igjen og hindrer inngangen. Vi kunne bruke JavaScript for å hindre denne oppførselen, men vi kan også bruke en CSS-inntastingsstatus som heter :gyldig.
Vi kan enten legge til nødvendig som et tomt attributt til vårt innspill i HTML eller legge til : required => true til våre inntaksattributter i Haml. Så legger vi til :gyldig til :fokus eiendommer i vår Sass / CSS. Dette legger til en ekstra visuell tilstand til vårt innspill, og siden det er en enkel tekstinnføring, er den eneste gyldige tilstanden når det er lagt inn tekst.
Merk: Bruk av en annen type innspill, for eksempel en e-postinngang, vil føre til at denne oppførselen bryter, da e-postinnganger har forskjellige gyldighetskrav.
Hvis du vil lage dine egne innganger ved hjelp av disse teknikkene, men du trenger mer visuell inspirasjon, sjekk ut UI-kittene som er tilgjengelige med et Envato Elements-abonnement:
UI-sett på Envato ElementsDet finnes dusinvis av forskjellige måter å utnytte den generelle søskenvelgeren som er visuell, funksjonell eller begge deler. Det gir en kraftig måte å tilpasse komponenter uten å måtte bruke mer enn bare CSS og HTML. Vi har dekket tre ulike typer formelementer i denne opplæringen; I det neste vil vi utforske menyer og navigasjon. Ta gjerne en kommentar nedenfor hvis du har spørsmål eller tilbakemelding!
Accentsconagua