File adaptive. File folosind CSS3. Ne facem filele adaptabile

Fileleîn opinia mea, sunt una dintre cele mai bune soluții pentru structurarea tematică a informațiilor, precum și pentru furnizarea compactă a conținutului utilizatorului pe o singură pagină. Astăzi ne vom da seama cum să creăm un astfel de lucru funcțional fără a folosi Javascript folosind doar HTML și CSS3.

Pentru a crea file vom folosi eticheta intrareși selector CSS :verificat. În primul rând, trebuie să creăm marcajul paginii în HTML

Fila Unu Fila doi Fila Trei

Făcând clic pe casetele radio, se vor activa filele corespunzătoare. Primul intrare setați atributul verificat="verificat", aceasta va face ca prima filă să se deschidă în mod implicit. Vom ascunde singuri casetele radio, iar pentru a face clic pe ele vom folosi eticheta eticheta. În bloc .tabs_cont Vom avea blocuri cu file în care va fi plasat conținutul (text, imagini etc.). Până acum totul este simplu.

Să trecem la stilurile CSS

File (poziție: relativă; margine: 0 automat; lățime: 800px; ) .tabs etichetă (culoare: #555; cursor: indicator; afișare: bloc; float: stânga; lățime: 150px; înălțime: 45px; înălțime linie: 45px ; poziție: relativ; sus: 2px; text-align: center; ) .tabs input (poziție: absolut; stânga: -9999px; ) #tab_1:verificat ~ #tab_l1, #tab_2:verificat ~ #tab_l2, #tab_3:verificat ~ #tab_l3 ( fundal: #fff; culoare-chenar: #fff; sus: 0; z-index: 3; ) .tabs_cont ( fundal: #fff; poziție: relativ; z-index: 2; înălțime: 230px; )

Aici folosim stiluri pentru a crea o etichetă eticheta blocați elementul și setați-i dimensiunile, locația și aspectul (puteți seta propriile stiluri pentru fundal și chenare) după cum avem nevoie și, de asemenea, ascundeți intrare folosește poziționarea absolută.

Urmează același selector :verificat despre care am menționat la început. Cu cuvinte simple, dacă o cutie radio cu id #tab_1 selectat/bifat, apoi stilurile sunt aplicate blocului cu id #tab_l1și așa mai departe prin analogie. În cazul nostru, aplicăm stiluri titlului filei selectate. Ei bine, la sfârșit am stabilit stiluri pentru blocul cu conținutul filei.

Următoarea noastră sarcină este să ne asigurăm că filele noastre pot fi schimbate. Pentru a implementa această sarcină, următoarele stiluri:

Tabs_cont > div ( poziție: absolut; stânga: -9999px; sus: 0; opacitate: 0; -moz-transition: opacitate .5s ease-in-out; -webkit-transition: opacitate .5s ease-in-out; tranziție : opacitate .5s ease-in-out; ) #tab_1:verificat ~ .tabs_cont #tab_c1, #tab_2:verificat ~ .tabs_cont #tab_c2, #tab_3:verificat ~ .tabs_cont #tab_c3 ( poziție: static; stânga: 0; opacitate : 1; )

Mai întâi, să ne ascundem toate filele. Cea mai simplă soluție este utilizarea afișaj: niciunul;, dar din moment ce avem nevoie de netezime, căile ușoare nu sunt pentru noi, deci cu ajutorul poziție: absolută; ne mutăm blocurile dincolo de limitele de vizibilitate și chiar facem acest bloc complet transparent folosind proprietatea opacitate: 0;și ridicați treptat această valoare la unu. Proprietatea ne va ajuta să obținem netezime tranziție care este descris după. Apoi din nou folosim selectorul :verificat cu ajutorul cărora facem vizibile blocurile corespunzătoare casetelor radio selectate.

Asta e tot! Lucrând singur cu stilurile, puteți schimba aspectul după gust.

Mai jos puteți descărca sursele.

În continuarea postării anterioare despre elementele de selecție a stilului, aș dori să vă spun cum să o faceți complet file adaptive fără a utiliza javascript, poziționare absolută și hack-uri de legături.

Pentru început, aș dori să spun că nu fac apel la abandonarea javascript-ului doar în favoarea CSS; mai jos va fi prezentată doar una dintre modalitățile de implementare a file-urilor. Există multe situații în care această abordare nu ți se potrivește și în care nu te poți descurca fără JS, dar acum nu este vorba despre asta.

Să înțelegem ce vrem să vedem ca rezultat al lucrării și ce cerințe am propus pentru aceasta:

Lucrați fără JavaScript,
Nu există nicio legătură cu numărul de file (putem folosi un widget pe pagini diferite cu conținut diferit în interior),
Adaptabilitate,
Compatibilitate maximă între browsere și platforme,
Cea mai convenabilă și mai înțeleasă interfață de utilizare,
Nu există restricții privind conținutul intern al filelor, fie că este vorba de text, conținut media sau aspect din interiorul filei.

Vizual ar trebui să arate cam așa:

Înainte de a-ți arăta opțiunea file fără JS, aș dori să vorbesc despre câteva opțiuni de implementare pe care le-am găsit în procesul de rezolvare a acestei probleme.

Opțiunea unu

Persoana care a venit cu această metodă fie a vrut în mod clar să-și bată joc de utilizatori, fie este unul dintre vizitatorii Reddit care a creat acele controale de volum foarte „conveniente”. Această abordare mă face nervos.

Esența metodei este următoarea:

Legăturile sunt folosite ca titluri (butoanele în sine) ale filelor, în atributul href, care conține id-ul filei corespunzătoare - un div sau orice alt element. Fila activă este selectată folosind pseudo-class:target .

Funcționează așa:

După cum probabil ați observat, avem câteva probleme la utilizarea acestei metode:

Când facem clic pe filă, pagina începe să sară, deoarece browserul ne trimite unde duce acest link. Desigur, acest lucru poate fi evitat, dar fără JS nu există nicio cale.
Titlul filei active nu este evidențiat; acest lucru se poate face, dar este extrem de problematic.
Inițial, nu există file active (din moment ce încă nu am făcut clic pe linkuri) și trebuie să recurgem la un hack și să activăm a treia filă; selectarea primei în acest fel nu va funcționa.
Adaptabilitate foarte controversată: da, filele sunt rearanjate la o nouă linie atunci când ecranul se îngustează, iar conținutul filei se îngustează odată cu acesta, dar nu arată foarte frumos. Această problemă poate fi rezolvată prin interogări media, dar având în vedere că nu vom fi legați de numărul de file, problema va rămâne pe unele dimensiuni de afișare.

Tragem o concluzie justificată: această metodă nu este potrivită pentru noi, deoarece nu va satisface majoritatea cerințelor. Implementarea este groaznică și nu aș recomanda utilizarea acesteia.

Varianta a doua

Aceasta metoda crearea de file fără JavaScript este deja mai practic, deși are și unele probleme în aplicare. Esența metodei este următoarea: caseta de selectare și elementele de etichetă sunt folosite pentru titlurile filelor, iar folosind pseudo-class:checked și un alt element div, putem afișa conținutul numai filei active și ascunde toate celelalte:

Introducere filă-wrapper: bifat + etichetă + .tab-element (afișare: bloc;)

Tab - introducere wrapper: bifat + etichetă + . filă - element ( afișare : bloc ; )

Iată cum funcționează:

După cum probabil ați observat, în acest exemplu folosim poziție: absolute; pentru a plasa titlurile filelor în partea de sus și conținutul filelor în partea de jos. Acest lucru creează anumite probleme:

Complet inadaptabil. Când schimbați dimensiunile ecranului, filele cad și conținutul filei le acoperă. Acest lucru poate fi remediat: faceți defilarea orizontală a filelor, această soluție are un loc, dar nu prea îmi place.
Deoarece folosim poziționarea absolută pentru a afișa conținutul filelor, va trebui să specificăm o înălțime fixă a filelor, altfel acestea se vor suprapune pe conținutul de mai jos (văzut în exemplu), ceea ce înseamnă că nu putem folosi această abordare cu un număr necunoscut anterior de file.

Desigur, în unele cazuri această metodă poate fi folosită, de exemplu, atunci când cunoașteți dinainte numărul de file și cantitatea de conținut din interiorul acestora. Dar căutăm o soluție universală, așa că această abordare nu este aplicabilă în cazul nostru.

Soluţie

A treia opțiune, care este și soluția, este o modificare a celei de-a doua metode. Funcționează exact la fel, dar nu vom folosi poziționarea absolută sau proprietatea float pentru titluri.

În această metodă, folosim flexbox-ul la modă pentru a plasa file și conținutul acestora. Frumusețea flexbox aici este că putem desemna ce elemente sunt afișate mai întâi și care la sfârșit. Acest lucru se poate face folosind proprietatea de comandă: 1; , care este implicit la zero.

File CSS pure

Versiunea radio a filelor. Cerințe: să nu se bazeze pe ID-uri specifice pentru CSS (CSS-ul nu ar trebui să cunoască ID-uri specifice), flexibil pentru orice număr de file necunoscute, accesibile. Avertismente: deoarece acestea sunt casete de selectare, filele nu pot fi afișate în tab-uri, trebuie să utilizeze tastele săgeți .

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre un cod

File CSS

File verticale CSS pur.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: nu

Dependente: -

File CSS pure

Doar HTML și CSS.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Nu cu mult timp în urmă, ne-am uitat la implementarea filelor cu conținut, fără a conecta javascript, folosind exclusiv .
Astăzi vreau să vă prezint o altă soluție, nu mai puțin interesantă, pentru crearea unui bloc compact de file construit pe CSS3 pur și folosind elemente de layout adaptive. Ca și în prima variantă, nimic de prisos și greoi, foarte minim de cod CSS, și vei avea la dispoziție un bloc adaptiv cu file comutabile care se va potrivi perfect în orice secțiune a paginii, fie că este vorba de un mesaj separat, de o latură. coloană sau o fereastră modală.

Ce modificări au fost făcute față de prima versiune?
În primul rând, blocul de file a devenit adaptiv, adică. atunci când sunt vizualizate pe dispozitive mobile, dimensiunea filelor se modifică în funcție de dimensiunea ecranului dispozitivelor utilizatorului, textul titlului este eliminat și rămân doar pictogramele font, indicând semnificația conținutului unuia sau altuia.
Pictogramele fonturilor sunt din , colecția este foarte bogată și, în plus, absolut gratuită. Puteți integra pictograme în orice proiect utilizând un set descărcat de fonturi sau le puteți conecta la fișierul stil CSS direct de pe site-ul dezvoltatorului prin @import folosind următoarea linie:

@import URL( „http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css”) ;

@import url ("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

În exemplul demonstrativ, asta este exact ceea ce am făcut, așa că, uitându-vă la codul sursă, vă puteți da seama cu ușurință ce este.
Structura file-urilor din Html este destul de simplă. Container div de bază, link și direct secțiuni

, în care un anumit conținut este ascuns deocamdată. Toate! Nimic de prisos, fără biblioteci js, fără fișiere de imagine suplimentare în design, aspectul filelor, precum și funcționalitatea acestora, se formează exclusiv folosind CSS. Desigur, utilizarea noilor standarde CSS3 nu garantează o funcționare stabilă în toate browserele fără excepție, dar în versiunile moderne, filele funcționează perfect. IE afișează corect filele începând cu versiunea 9. Deci, dacă nu sunteți indiferenți față de psihicul și sentimentele de percepție ale utilizatorilor care folosesc cu încăpățânare versiuni mai vechi ale acestui „browser”, este mai bine să nu utilizați această metodă de a crea file, ci să folosiți jQuery.

HTML

< div class = "tabs" > < input id= "tab1" type= "radio" name= "tabs" checked> < label for = "tab1" title= "Fila 1" >Fila 1 < input id= "tab2" type= "radio" name= "tabs" > < label for = "tab2" title= "Fila 2" >Fila 2 < input id= "tab3" type= "radio" name= "tabs" > < label for = "tab3" title= "Fila 3" >Fila 3 < input id= "tab4" type= "radio" name= "tabs" > < label for = "tab4" title= "Fila 4" >Fila 4 < section id= "content-tab1" > < p> < section id= "content-tab2" > < p> < section id= "content-tab3" > < p>Postați orice conținut aici.... < section id= "content-tab4" > < p>Postați orice conținut aici....

Fila 1 Fila 2 Fila 3 Fila 4

Pentru a organiza blocurile de conținut am folosit eticheta

din clipul HTML5, care este folosit, în cele mai multe cazuri, pentru a împărți un document în secțiuni care sunt diferite ca semnificație și conținut, cu posibilitatea de a folosi propriile titluri de prim nivel

.
Comutarea filelor are loc prin interacțiunea atributului bifat din etichetă și pseudo-clasa:checked , strâns legate prin identificatori în CSS. În procesarea acestei metode se împiedică vechea, celebra încetinire a progresului Internet Explorer 8; de la versiunea 9 totul funcționează în cel mai bun mod posibil.
Ajungem ușor la partea cea mai interesantă, la stilizarea file-urilor folosind magia CSS. Aici lucrurile sunt și mai simple, nu are rost să descriem în mod specific fiecare proprietate și parametri, am scris câteva explicații în codul sursă, așa că cred că nu va fi greu să-ți dai seama ce merge unde și de ce, dar dacă ai întrebări sau găsiți o eroare, scrieți în comentarii, cu siguranță voi răspunde și vă ajut.

CSS3

/* Container cu file de bază */. file (lățime minimă: 320 px; lățime maximă: 800 px; umplutură: 0 px; marjă: 0 automat; ) /* Stilează secțiunile de conținut */. tabs> secțiune (afișare: niciuna; umplutură: 15px; fundal: #fff; chenar: 1px solid #ddd; ) . tabs> section> p ( margine: 0 0 5px; line-height: 1,5; culoare: #383838; /* adaugă animație */- webkit- animatie- durata: 1s; animatie- durata: 1s; - webkit- animație- umplere- mod: ambele; animație-fill-mode: ambele; - webkit- animatie- nume: fadeIn; nume-animație: fadeIn; ) /* Descrieți animația proprietății opacității */@- webkit- keyframes fadeIn ( de la ( opacitate: 0 ; ) la ( opacitate: 1 ; ) ) @ keyframes fadeIn ( de la ( opacitate: 0 ; ) la ( opacitate: 1 ; ) ) /* Ascunde casetele de selectare */. tabs> input (afișare: niciunul; poziție: absolut; ) /* Stiluri de comutatoare de file */. file> etichetă ( afișare: bloc inline; margine: 0 0 - 1px; umplutură: 15px 25px; greutate font: 600; aliniere text: centru; culoare: #aaa; chenar: 0px solid #ddd; lățime chenar: 1px 1px 1px 1px; fundal: #f1f1f1; chenar-rază: 3px 3px 0 0 ; ) /* Pictograme de font din Font Awesome în format Unicode */. file> etichetă: înainte (font-familie: fontawesome; font-greutate: normal; margine-dreapta: 10px; ) . tabs> label[ for *= "1" ]: before (conținut: " \f 19a"; ). tabs> label[ for *= "2" ]: before (conținut: " \f 17a"; ). tabs> label[ for *= "3" ]: before (conținut: " \f 13b"; ). tabs> label[ for *= "4" ]: before (conținut: " \f 13c"; } /* Schimbă stilul comutatoarelor de file la trecerea cursorului */. file> etichetă: hover (culoare: #888; cursor: indicator; ) /* Stiluri pentru fila activă */. file> intrare: bifat+ etichetă (culoare: #555; chenar-sus: 1px solid #009933; chenar-jos: 1px solid #fff; fundal: #fff; ) /* Activarea secțiunilor folosind pseudo-clasa:checked */ #tab1:verificat~#content-tab1, #tab2:verificat~#content-tab2, #tab3:verificat~#content-tab3, #tab4:verificat~#content-tab4 ( afisare: bloc; ) /* Eliminați textul de pe comutatoare * și lăsați pictograme pe ecranele mici */ Ecran @media și (lățime maximă: 680 px) ( . tabs> etichetă ( font-size: 0 ; ) . tabs> etichetă: înainte ( margine: 0 ; font-size: 18px; ) ) /* Schimbați umplutura * a comutatoarelor pentru ecrane mici */ Ecran @media și (lățime maximă: 400 px) ( . file> etichetă ( umplutură: 15 px; ) )

/* Container de bază pentru file */ .tabs ( lățime minimă: 320 px; lățime maximă: 800 px; padding: 0 px; margine: 0 automat; ) /* Stiluri secțiuni de conținut */ .tabs>section ( afișare: niciuna; padding : 15px; fundal: #fff; chenar: 1px solid #ddd; ) .tabs>section>p (marja: 0 0 5px; line-height: 1,5; culoare: #383838; /* atașați animația */ -webkit-animation -durata: 1s; durata-animație: 1s; -modul-de-umplere-animație-webkit: ambele; modul-umplere-animație: ambele; -nume-animație-webkit: fadeIn; numele-animație: fadeIn; ) /* Descrieți proprietățile opacității animației */ @-webkit-keyframes fadeIn ( de la ( opacitate: 0; ) la ( opacitate: 1; ) ) @keyframes fadeIn ( de la ( opacitate: 0; ) la ( opacitate: 1; ) ) /* Ascunderea opacității casete de selectare * / .tabs>input (afișare: niciunul; poziție: absolut; ) /* Stiluri de comutatoare de file */ .tabs>label (afișare: inline-block; margine: 0 0 -1px; padding: 15px 25px; font- greutate: 600; aliniere text: centru; culoare: #aaa; chenar: 0px solid #ddd; lățime chenar: 1px 1px 1px 1px; fundal: #f1f1f1; chenar-rază: 3px 3px 0 0; ) /* Pictograme font din Font Awesome în format Unicode */ .tabs>label:before ( font-family: fontawesome; font-weight: normal; margin-right: 10px; ) .tabs>label:before ( conținut: " \f19a"; ) .tabs>label:before ( conținut: "\f17a"; ) .tabs>label:before ( conținut: "\f13b"; ) .tabs>label:before ( conținut: "\f13c"; ) /* Schimbă stilul comutatoarelor de file la trecerea cursorului */ .tabs>label:hover (culoare: #888; cursor: pointer; ) /* Stiluri pentru fila activă */ .tabs>input:checked+label (culoare: # 555; chenar -sus: 1px solid #009933; chenar-jos: 1px solid #fff; fundal: #fff; ) /* Activarea secțiunilor folosind pseudo-clasa:checked */ #tab1:checked~#content-tab1, # tab2:checked~# content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 ( display: block; ) /* Eliminați textul din butoanele radio * și lăsați pictograme pe ecranele mici */ @media ecran și (max -width: 680px) ( .tabs>label ( font-size: 0; ) .tabs>label:before ( margin: 0; font-size: 18px; ) ) ) /* Schimbați umplutura pentru * comutatoare pentru ecrane mici */ @ ecran media și (lățime maximă: 400px) ( .tabs>label ( umplutură: 15px; ) )

Puteți proiecta filele () în orice mod doriți, totul din exemplu este doar un exemplu, viziunea mea de moment asupra produsului, nimic mai mult. Puteți afla valorile Unicode ale pictogramelor fontului de care aveți nevoie pe site-ul dezvoltatorului. Pentru a face acest lucru, faceți clic pe pictograma selectată și copiați codul digital emis, cam așa: \f13b .
Vă rugăm să rețineți că atunci când reduceți dimensiunea ferestrei browser, filele se adaptează automat la dimensiunea curentă până la o anumită valoare (în exemplul 680px), după această valoare, titlurile text ale filelor dispar, lăsând pictograme. Acest lucru asigură compactitatea maximă a întregului bloc de file; tot ce rămâne este să alegeți pictogramele potrivite care se potrivesc cu semnificația conținutului prezentat în interiorul filelor.

Urmăriți un exemplu live despre cum funcționează filele, descărcați sursele, experimentați cu parametrii și creați, creați, creați...

Dacă te-ai săturat să lucrezi cu șabloane în limba engleză și visezi la o șansă de a folosi șabloane în limba rusă, atunci cu siguranță vei fi mulțumit de câteva vești grozave. Piața TemplateMonster are acum soluțiile gata făcute de care aveți nevoie. Da, da, pe site le găsești acum pe cele mai bune. Șabloanele localizate sunt exact ceea ce aveți nevoie dacă doriți să vă construiți proiectul online într-un timp minim. Pe lângă faptul că textele pentru șabloane au fost scrise manual, acestea au toate instrumentele necesare pentru a crea un site web profesional.

Cu tot respectul, Andrew

Bună ziua, dragi cititori. În această zi geroasă ne vom descurca cu tine file frumoase folosind CSS și JQuery. Se pare că aceste așa-numite file sunt foarte utile pentru întregul site; pot economisi spațiu în mod semnificativ pe pagină. Ele pot fi plasate peste tot, în bara laterală, sau direct în conținutul propriu-zis, articolul.

De asemenea, filele pe care le vom realiza au un design frumos; acestea vor decora semnificativ site-ul dvs. Ce frumos si util :-) mi se pare o rara coincidenta. Mai mult, sunt realizate doar cu ajutorul lui , respectiv: se incarca rapid si nu suporta nicio sarcina pe server.

JQuery

$(document).ready(function() ( $("#conținut div").hide(); // Conținut ascuns $("#tabs li:first").attr("id","current"); // Ce filă se afișează prima $("#content div:first").fadeIn(); // Afișează conținutul primei file $("#tabs a").click(function(e) ( e.preventDefault() ; $ ("#content div").hide(); //Ascunde tot conținutul $("#tabs li").attr("id",""); //Resetează identificatorii $(this).parent() .attr ("id","current"); // Activează identificatorii $("#" + $(this).attr("title")).fadeIn(); // Afișează conținutul filei curente )) ; ))() ;

Asta este, practic, tot, principalul lucru este să experimentezi. Puteți adăuga imagini de fundal la aceste file, care le vor îmbunătăți semnificativ aspectul, dar vor dura mai mult pentru încărcare.

Compatibilitate browser

Aceste file sunt acceptate de aproape toate browserele, doar că în unele vor arăta puțin diferit, deoarece multe nu acceptă încă CSS3.

Atât, sper că v-a plăcut :-) Dacă ceva nu vă este clar, asigurați-vă că întrebați în comentarii. Pe curând.