{"id":92187,"date":"2022-10-12T18:40:23","date_gmt":"2022-10-12T23:40:23","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/hur-man-gor-ett-dragspel-med-html-och-css\/"},"modified":"2022-10-12T18:40:23","modified_gmt":"2022-10-12T23:40:23","slug":"hur-man-gor-ett-dragspel-med-html-och-css","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/hur-man-gor-ett-dragspel-med-html-och-css\/","title":{"rendered":"Hur man g\u00f6r ett dragspel med HTML och CSS"},"content":{"rendered":"
\n

CSS-dragspel anv\u00e4nds ofta f\u00f6r expanderbara och hopf\u00e4llbara menyer, utdrag, bilder, videor, vanliga fr\u00e5gor, listor och artikelutdrag. Du kan enkelt skapa dem med HTML, CSS och JavaScript (eller jQuery). Att skapa dragspel endast f\u00f6r CSS \u00e4r lite av en utmanande uppgift, men det \u00e4r v\u00e4ldigt anv\u00e4ndbart i JavaScript-inaktiverade milj\u00f6er.<\/p>\n

I den h\u00e4r guiden kommer du att l\u00e4ra dig ett steg-f\u00f6r-steg tillv\u00e4gag\u00e5ngss\u00e4tt f\u00f6r att skapa ett endast CSS-dragspel.<\/p>\n

<\/span> Bygga grundl\u00e4ggande dragspel endast med HTML<\/span><\/h2>\n

Om din prioritet \u00e4r att skapa ett tillg\u00e4ngligt dragspel med HTML, <\/strong> och <\/strong> taggar \u00e4r v\u00e4gen att g\u00e5. Det spelar ingen roll vilket programmeringsspr\u00e5k du anv\u00e4nder, det endast HTML-dragspelet f\u00f6rblir intakt. Skapa en <\/strong> tagga som f\u00f6r\u00e4lder och skriv in fr\u00e5gan i en <\/strong> m\u00e4rka. Skriv ett beskrivande svar i a <\/p>\n

m\u00e4rka. Iterera processen f\u00f6r valfritt antal vanliga fr\u00e5gor.<\/p>\n

<head> <link rel=\"stylesheet\" href=\"https:\/\/ipotek.net\/hur-man-gor-ett-dragspel-med-html-och-css\/[path to CSS file]\" \/><\/head><body><details open><summary>FAQ 1<\/summary><div class=\"description\"><p>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!<\/p><\/div><\/details><details><summary>FAQ 2<\/summary><div class=\"description\"><p>Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in accusantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque voluptates consequatur. <\/p><\/div><\/details><details><summary>FAQ 3<\/summary><div class=\"description\"><p>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!<\/p><\/div><\/details>
<\/body><\/p><\/pre>\n
<\/span>  Styling av dragspelet<\/span><\/h2>\n
Du kan styla dragspelet genom att justera bakgrundsf\u00e4rg<\/strong>, gr\u00e4nsradie<\/strong>, marginal<\/strong>, stoppning<\/strong>, etc.<\/p>\n
body {font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;max-width: 30rem;margin: 1.5rem auto;}
summary {font-weight: 600;color: rgb(255, 255, 255);background-color: rgb(7, 185, 255);padding: 1.2rem;margin-bottom: 1.2rem;border-radius: 0.5rem;cursor: pointer;}<\/p><\/pre>\n
Produktion:<\/strong><\/p>\n
\n<\/figure>\n
  Den enda begr\u00e4nsningen \u00e4r att du inte kommer att ha kontroll \u00f6ver varje del av koden.  HTML-strukturen kan \u00e4ndras, men du kan inte skapa ett anpassat dragspel.  L\u00e5t oss d\u00e4rf\u00f6r bygga en anpassad FAQ-sektion med hj\u00e4lp av avancerad CSS.<\/p>\n
<\/span>  Bygg din anpassade FAQ-sektion<\/span><\/h2>\n
Det finns tv\u00e5 popul\u00e4ra metoder f\u00f6r att skapa ett anpassat dragspel endast f\u00f6r CSS.  Du kan antingen anv\u00e4nda kryssrutor eller alternativknappar;  vi kommer att f\u00f6rklara b\u00e5da metoderna.<\/p>\n
<\/span>Anv\u00e4nda kryssrutemetoden<\/span><\/h3>\n
Checkbox-metoden anv\u00e4nder kryssruta<\/strong> som ing\u00e5ngstyp.  N\u00e4rhelst en anv\u00e4ndare v\u00e4ljer en flik markerar de kryssrutan och den \u00f6ppnas.  Du kan \u00f6ppna flera flikar samtidigt med hj\u00e4lp av kryssrutemetoden, liknande hur du kan markera mer \u00e4n en kryssruta i ett HTML-formul\u00e4r.<\/p>\n
 HTML<\/strong><\/p>\n
<head> <link rel=\"stylesheet\" href=\"https:\/\/ipotek.net\/hur-man-gor-ett-dragspel-med-html-och-css\/[path to CSS file]\" \/><\/head><body><h1>Custom CSS Only Accordion (FAQ)<\/h1><h2>Using Checkbox method<\/b><\/h2><div class=\"faq-box\"><div class=\"faq\"><input type=\"checkbox\" id=\"faq1\"><label class=\"faq-label\" for=\"faq1\">How to build a custom accordion using CSS only?<\/label><div class=\"faq-content\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipitassumenda a, nesciunt eum nobis eaque, exercitationem distinctio alias ullam quia. Corrupti beataenecessitatibus nihil.<\/div><\/div><div class=\"faq\"><input type=\"checkbox\" id=\"faq2\"><label class=\"faq-label\" for=\"faq2\">How to change the height of pseudo-elements?<\/label><div class=\"faq-content\">Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibusducimus excepturi doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero inciduntreprehenderit facere ex hic ipsa odit in! Eveniet.<\/div><\/div><\/div><\/body><\/pre>\n
Allm\u00e4n CSS<\/strong><\/p>\n
Applicera den grundl\u00e4ggande CSS p\u00e5 kroppen.<\/p>\n
body {color: #502c2c;background: #f1edec;padding: 1.2rem;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;max-width: 45rem;margin: 0 auto;font-size: 1.2rem;}<\/pre>\n
Styling av dragspelet<\/strong><\/p>\n
G\u00f6m f\u00f6rst kryssrutorna genom att \u00e4ndra inmatningen.<\/p>\n
\/* Hiding the checkboxes or radio button*\/<\/em> input {position: absolute;opacity: 0;z-index: -1;}<\/pre>\n
Nu, styla dragspelet.  Du kan l\u00e4gga till en::efter<\/strong> pseudo-element f\u00f6r +<\/strong> skylt.  Du kan h\u00e4nvisa till ett referensdiagram f\u00f6r teckenenhet och anv\u00e4nda valfri entitetsomvandlingskalkylator f\u00f6r att hitta CSS-v\u00e4rdet f\u00f6r ett numeriskt v\u00e4rde.  H\u00e4r \u00e4r CSS-v\u00e4rdet f\u00f6r &#43<\/strong> \u00e4r <\/p>\n<\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n