CSS harmonike se naširoko koriste za proširive i sklopive izbornike, isječke, slike, videozapise, često postavljana pitanja, popise i izvatke članaka. Možete ih jednostavno izraditi koristeći HTML, CSS i JavaScript (ili jQuery). Stvaranje harmonika samo za CSS pomalo je zahtjevan zadatak, ali je od velike pomoći u okruženjima s onemogućenim JavaScriptom.

U ovom ćete vodiču naučiti korak-po-korak pristup stvaranju harmonike samo za CSS.

Izrada osnovne harmonike samo pomoću HTML-a

Ako vam je prioritet stvaranje pristupačne harmonike pomoću HTML-a, i oznake su pravi način. Neće biti važno koji programski jezik koristite, harmonika samo za HTML ostat će netaknuta. Stvoriti označite kao roditelj i unesite pitanje u a označiti. Napišite opisni odgovor unutar a označiti. Iterirajte proces za bilo koji broj često postavljanih pitanja.

FAQ 1



Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione adipisci illum error, hic expedita numquam impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!









instagram viewer



FAQ 2



Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate insecantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque voluptates consequatur. 






FAQ 3



Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi, minus placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi sapiente saepe sequi at eligendi hic reprehenderit repellendus quos!

Stiliziranje harmonike

Harmoniku možete oblikovati podešavanjem boja pozadine, granica-radijus, margina, padding, itd.

tijelo {
 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 max-širina: 30rem;
 margina: 1,5rem auto;
}
Sažetak {
 font-weight: 600;
 boja: rgb (255, 255, 255);
 boja pozadine: rgb (7, 185, 255);
 padding: 1,2rem;
 margina-dno: 1,2rem;
 granica-radijus: 0,5rem;
 kursor: pokazivač;
}

Izlaz:

Jedino ograničenje je da nećete imati kontrolu nad svakim dijelom koda. HTML struktura se može mijenjati, ali ne možete stvoriti prilagođenu harmoniku. Stoga, napravimo prilagođeni odjeljak s čestim pitanjima koristeći napredni CSS.

Izgradite svoj prilagođeni odjeljak s čestim pitanjima

Postoje dvije popularne metode za stvaranje prilagođene harmonike samo za CSS. Možete koristiti potvrdne okvire ili radio gumbe; objasnit ćemo obje metode.

Korištenje metode potvrdnog okvira

Metoda potvrdnog okvira koristi potvrdni okvir kao tip unosa. Kad god korisnik odabere karticu, označi potvrdni okvir i ona se otvori. Možete otvoriti više kartica istovremeno pomoću metode potvrdnog okvira, slično kao što možete označiti više od jednog potvrdnog okvira unutar HTML obrazac.

HTML

Prilagođeni CSS samo harmonika (FAQ)

Korištenje metode potvrdnog okvira






Kako napraviti prilagođenu harmoniku koristeći samo CSS?


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit
 pretpostavljanda a, nesciunt eum nobis eaque, exercitationem differentio alias ullam quia. Corrupti beatae
 necessitatibus nihil.









Kako promijeniti visinu pseudoelemenata?


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia volptatibus
 ducimus exceptionuri doloribus aliquam ipsum vel, optužba quo nemo expedita esse eos libero incidunt
 reprehenderit facere ex hic ipsa odit in! Eveniet.

Općenito CSS

Primijenite osnovni CSS na tijelo.

tijelo {
 boja: #502c2c;
 pozadina: #f1edec;
 padding: 1,2rem;
 obitelj fontova: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 max-širina: 45rem;
 margina: 0 auto;
 veličina fonta: 1,2rem;
}

Stiliziranje harmonike

Prvo sakrijte potvrdne okvire izmjenom unosa.

/* Skrivanje potvrdnih okvira ili radio gumba*/
unos {
 pozicija: apsolutna;
 neprozirnost: 0;
 z-indeks: -1;
}

Sada, stilizirajte harmoniku. Možete dodati::nakon pseudo-element za + znak. Možete se pozvati na a Referentni grafikon karakternog entiteta i koristite bilo koji Kalkulator pretvorbe entiteta da biste pronašli CSS vrijednost numeričke vrijednosti. Ovdje je CSS vrijednost + je \002B.

/* Stilovi harmonike */
.Pitanja {
 boja: #ffe3e3;
 margina-dno: 3rem;
}
.faq-label {
 veličina fonta: 1.5rem;
 zaslon: flex;
 align-items: centar;
 opravdati-sadržaj: prostor-između;
 padding: 1em;
 pozadina: #b61818;
 font-weight: bold;
 kursor: pokazivač;
 korisnički odabir: nema;
}
.faq-label:: nakon {
 sadržaj: '\002B';
 podstava: 0,51 rem;
 transformirati: mjerilo (1,8);
 poravnavanje teksta: središte;
 prijelaz: sve 0,35s;
}
.faq-content {
 max-visina: 0;
 padding: 0 1em;
 boja: #2c3e50;
 pozadina: bijela;
 prijelaz: sve 0,35s;
 prikaz: nema;
}

Sada, dodajmo funkcionalnost harmonici pomoću susjedni i selektori atributa. Ovdje, \2013 je CSS vrijednost za –, brojčana vrijednost koja predstavlja –.

unos: označeno + .faq-label {
 pozadina: #8f1414;
}
input: checked + .faq-label:: after {
 sadržaj: '\2013';
 transformirati: mjerilo (1,5);
}
ulaz: provjereno ~ .faq-content {
 max-visina: 100vh;
 padding: 1em;
 zaslon: blok;
 prijelaz: sve 0,35s;
}

Izlaz:

Korištenje metode radio gumba

Metoda radio gumba ima postavljenu vrstu unosa radio. Kad god korisnik klikne na karticu, otvara se skriveni radio gumb koji odgovara toj kartici. Kada kliknete na sljedeću karticu, prethodna se kartica odmah zatvara. Pomoću metode radio gumba možete otvoriti samo jednu karticu.

HTML

Prilagođeni CSS samo harmonika (FAQ)

Korištenje metode Radio Button






Kako stvoriti harmoniku metodom Radio Button?


 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus corrupti libero hic aspernatur quibusdam dolores perferendis, officiis odio repellendus.









Kako stvoriti prilagođenu harmoniku koristeći samo CSS?


 Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur possimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperiores, quasi beatae quos deleniti.









Što znači stil harmonike?


 Laudantium quibusdam laboriosam hic omnis quas ullam commodi rem. Architecto ut laborum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officiis voluptas? Vel, ne!









Zatvori sve ×

CSS

Kopirajte gornji CSS metode potvrdnog okvira jer se obje metode razlikuju samo od strukturalne točke gledišta. Možda ćete primijetiti da je jedna kartica otvorena cijelo vrijeme. To se događa zato što ne možete poništiti označavanje radio gumba poput potvrdnih okvira. Da biste to postigli, dodajte CSS kod u nastavku na radio gumb "Zatvori sve" bez ikakvog opisa.

/* Zatvaranje svih */
.faq-label {
 položaj: relativan;
}
.faq-close {
 zaslon: inline-block;
 padding: 1rem;
 veličina fonta: 1rem;
 pozadina: #b61818;
 kursor: pokazivač;
 pozicija: apsolutna;
 lijevo: 64rem;
}

Izlaz:

Nastavite eksperimentirati i dodajte animacije

Iza harmonika postoji jednostavna logika: kada kliknete na izbornik, pojavit će se njegov skriveni sadržaj. Budući da sada znate stvoriti harmoniku, krajnje je vrijeme da implementirate i eksperimentirate sa svojim učenjem. Možete izraditi vodoravne harmonike kako biste poboljšali dizajn, posebno kada prikazujete slike. Eksperimentirajte s kodom prilagođavanjem efekta prijelaza pomoću animacija ključnih kadrova.

Naincy Mourya (Objavljeno 16 članaka)

Naincy je specijalizirana za izgradnju web-mjesta s visokom brzinom odziva i učinkovite strategije sadržaja zajedno s web-kopijama. Ona je slobodna tehnička spisateljica koja pažljivo prati trendove tehnologije.

Više od Naincy Mourya