HTML kartice na stranici. Kako napraviti adaptivne kartice (kartice) pomoću css-a bez korištenja skripti. Kako to učiniti uspješnim
Iako je temelj dizajna kreativnost, ipak je ima elementi sučelja web stranice Bit će korisno imati na zalihama. U ovom ću članku prikazati 15+ najvažnijih detalja korisničko sučelje mjesto, koji će svima biti od koristi. Pomoću ovih malih savjeta možete dobiti lijep i praktičan dizajn uz manje truda i vremena.
1. Rešetka
Stranica, osim autorskog sadržaja, obično sadrži i prostor za banner, prostor za oglašavanje, linkove itd. Bitno je da ti prostori nije pokvarilo cjelokupni izgled stranice, i bili su u isto vrijeme povoljno smješten. Stoga je prikladno koristiti označavanje stranice. Klasični izgled stranice je ovakav:
Marka(logotip, slogan i sl.), u gornjem lijevom kutu
Navigacija- na vrhu stranice, a također po mogućnosti s lijeve strane
Glavni sadržaj— središte stranice
oglasi- na desnoj strani stranice
Podnožje ne sadrži važna informacija(ili sadrži njegov duplikat), obično su to poveznice na interne stranice i kontakt podatke.
U ovom sam primjeru nacrtao zamišljenu mrežu
Da biste vidjeli mrežu, samo mentalno podijelite sliku ravnim linijama.
I još jedan primjer korištenja mreže u dizajnu.
2. Vertikalna navigacija
Lijevu i desnu navigacijsku traku vidimo sve rjeđe, jer... Sada postoji tendencija pojednostavljenja izbornika i prelaska na vodoravnu verziju. Međutim, okomita navigacija neće nestati samo zato što vodoravna opcija nije uvijek toliko univerzalna. Tako, okomita je opcija prikladnija za izbornike sa složenom ili dugom strukturom stabla. Uzmimo, na primjer, molotok.ru.
Teško je zamisliti kako će sve njegove kategorije stati u horizontalni izbornik.
Međutim, ništa vas ne sprječava da ga koristite za male stranice. Ako se postavi neposredno ispod logotipa, može prilično dobro ispuniti prazninu.
Lijep jednostavan primjer okomite navigacije
Okomiti izbornik nalazi se lijevo, ispod logotipa
3. Horizontalna navigacija
Horizontalna navigacija obično se koristi za jednostavne i kratke popise poveznica. Vrlo je zgodno postaviti ga iznad ili ispod logotipa. Osim tvoje vidljivost, horizontalni izbornik ima još jednu prednost - to je ušteda prostora. Okomiti izbornik zauzima prostor na temelju duljine najduže riječi. Ali vodoravni izbornik tek malo “naraste” u visinu, a i tada se uvijek možete poigrati s marginama i paddingom.
Uobičajen (dobro dizajniran) vodoravni izbornik
Još jedan primjer dobrog dizajna horizontalni izbornik
4. Padajući popisi
Druga, naprednija opcija navigacije su padajući popisi. Često se koristi na stranicama gdje nekoliko kategorija, ali one uključuju potkategorije. Padajući izbornik vrlo je zgodan, pomaže u izbjegavanju nepotrebnih prijelaza i štedi prostor na stranici
Elegantan padajući izbornik
Izmijenjeni izbornik, dodan dizajn slike
Padajući izbornik može biti ne samo vodoravan, već i okomit
5. Krušne mrvice
Breadcrumbs su vizualni prikaz hijerarhije stranica web mjesta. Korisnik mora razumjeti u kojem se dijelu stranice nalazi i kojoj kategoriji stranica pripada. Vrlo zgodna stvar, kao u planu navigacija web stranice, i kao izvor dodatno povezivanje stranice (što tražilice vole, tako da popularnost ovog elementa stalno raste). Postavljeni su iznad sadržaja stranice, s lijeva na desno.
Trenutna stranica je označena bojom
Trenutna stranica se ni po čemu ne ističe. Autori su igrali na logiku posjetitelja)
Trenutna stranica se ni po čemu ne ističe. Ali korijenske stranice su istaknute
6. Popis unosa
Blogovi su sve popularniji i svi imaju popis postova, što je i logično. Svaki takav popis sastoji se od "pretpregleda" objava. A “pretpregledi” su pak iz naslova članka, sažetka, broja komentara i sličnih općih podataka. Glavni naglasak uvijek stavljamo na ime. Trebao bi biti velik, otkrivati temu, bez suvišnih riječi i sadržan u h1 ili h2 tagovima. “Pretpregled” bi trebao zaintrigirati čitatelja tako da postane zainteresiran za gledanje objave i surfanje po stranici.
U proširenom obliku prikazuje se samo zadnji unos, ostali su u obliku malih “pretpregleda”. Ova opcija štedi prostor.
Svaki unos je oblikovan kao stranica u bilježnici.
7. Arhivi
Arhivi su vrlo dobar način omogućiti pristup starim postovima na blogu. Dobra arhiva trebala bi sadržavati sortiranje ne samo po datumima, već i po kategorijama, jer često korisnike zanima samo jedan odjeljak bloga. Nažalost, ne obraćaju svi autori dužnu pažnju na ovaj element, ali uzalud - arhiva uvelike poboljšava upotrebljivost stranice.
Detaljna arhiva, gdje su postovi poredani po kategorijama i oznakama
Ova arhiva uključuje praktičnu privremenu navigaciju
Izvrstan primjer koji kombinira arhivu po datumima i po zapisima
8. Podnožje sa sadržajem
Čini se da dani jednostavnih podnožja blijede i postaju moderni podnožja su lijepa i korisna. Tamo možete smjestiti iste te arhive, kontakte, podatke o autoru (vlasniku) bloga, jelovnike i hrpu drugih stvari. korisna informacija. Funkcija podnožja može uključivati privlačenje posjetitelja da pogledaju druge stranice stranice. Naravno, preporučljivo je lijepo ga ukrasiti. Alternativno, mnogi koristite 3-4 stupca, koji sadrže interne poveznice i informacije, kao i pretplate na RSS i e-pošta.
Informativno podnožje u tri stupca
Primjer izvrsnog grafičkog dizajna za podnožje web stranice
Footer zanimljivog elegantnog dizajna
9. Numeriranje stranica
Kada na stranici ima puno sadržaja, a potrebno ga je nekako organizirati, onda je numeriranje stranica prvo što pada na pamet. Ona dopušta brzo se pomičite kroz sadržaj stranice, istovremeno smanjujući vrijeme učitavanja stranice. Najbolji primjer navigacije stranicom, po mom mišljenju, implementiran je otprilike ovako:
Ovdje vjerojatno nisam nikoga iznenadio, jer... ova shema je prilično česta. Ovdje su trenutna stranica, njeni susjedi jasno izraženi, a postoji i neposredan pristup najnovijim (i prvim) postovima.
Jedna od najčešćih opcija dizajna za pomicanje stranica
Evo zanimljivije opcije dizajna
10. Modalne kartice
Modalne kartice sadrže dodatni sadržaj u kompaktnom obliku, koji postaje otvoren samo kada to korisnik želi. Kada starost bloga dopušta, na primjer, imati veliku arhivu sa veliki iznos oznake i kategorije, možete ih rasporediti u nekoliko kartica tako da ih nije zauzeo puno prostora. Naravno, na ovaj način možete prikazati što god želite, a metode dizajna mogu biti vrlo različite.
U ovom primjeru, na svakoj novoj kartici - drugačiji tip restoranska jela
Magazin nudi posjetitelju izbor sadržaja koji mu je potreban
11. Sudjelujte u sustavu ocjenjivanja.
Većina modernih web stranica/blogova usredotočena je na interakciju s korisnikom. A mnogi se trude da njihove stranice budu sve interaktivniji.
Postavite gumbe na svoju web stranicu Stumbleupon / Twitter / Vkontake itd. - i vidjet ćete kako stranice oživljavaju.
Jedna od popularnih opcija je skupno dodavanje ikona društveno knjižno označavanje na kraju članka
12. Informacijska ploča
Stvar koja nije toliko česta (još!), ali također ima pravo na mjesto u ovom članku. Internetske trgovine, internetske banke, analitički centri - sve ove usluge imaju stranice sa statističkim informacijama na svojim web stranicama. Na takvim stranicama to je posebno važno prenijeti posjetitelju ono što želi pronaći. Njihov dizajn treba biti jednostavan, dobro organiziran i jasan.
Google Analytics jedan je od najistaknutijih primjera dobro napravljene nadzorne ploče.
Još jedan primjer dobrog dizajna i upotrebljivosti pri radu s podacima.
Grafikoni se također koriste za prikaz cijena dionica. Ovo je jedan primjer dizajna.
13. Jednostavna registracija
Svi se susrećemo s obrascima za registraciju na web-mjestima, a mnogi od nas iz ovog ili onog razloga prisiljeni su se često registrirati. Mislim da će se svi složiti da je ponuda za unos potvrdnog e-maila ili složenog, nerazumljivog sigurnosnog teksta na 3. stranici obrasca za registraciju dosadna. Svi ti ekscesi nimalo ne pojednostavljuju život posjetitelja. Zato je važno maksimum jednostavna forma registracija. Korisnik ne smije pomisliti da je nešto zaboravio unijeti, ili pogledati simbole. Ako želite izvući što više informacija od korisnika, učinite ovo:
Za registraciju mora unijeti svoju prijavu, email i lozinku. A nakon registracije pozovite ga da ispuni ostala polja upitnika.
Sjajan primjer jednostavnog registracijskog obrasca, iako ne što kraćeg
Vimeo ima verziju najkraće registracijske forme - samo tri(!) polja
Facebook je još jedan primjer dobre izvedbe forme
14. Akcenti
Oživite svoju stranicu. Naglasite važne riječi/izraze. Igrajte se veličinom, fontom, bojom, dizajnom. Uostalom, prvo što bi posjetitelj trebao vidjeti je što mu ističeš?. Međutim, malo ga je teže natjerati da vidi dijelove stranice ispravnim REDOSLIJEDOM. Ali i to se može riješiti.
Važni dijelovi teksta označeni su tirkiznom bojom
Glavni natpis stranice uvećan je što je više moguće i ispisan drugim fontom
Svaki nova linija“blijedi” u odnosu na prethodni
15. Prikaz zbirki
Mnogi od nas vole pokazivati svoje prijatelje, zbirke slika, resurse, fotografije itd. Za prikaz ovih zbirki, nekoliko različiti putevi.
Neki ljudi koriste mrežu "sličica", dok drugi koriste popis slika.
U ovom primjeru vidimo tako neobičan prikaz prijateljskih veza
Jednostavan i moderan prikaz dizajnerovih najnovijih radova
16. Traži
Svaka web stranica koja ima mnogo sadržaja trebala bi imati značajku pretraživanja. Obično se nalazi gumb za pretraživanje na istaknutom mjestu. U šeširu ili okomiti izbornik.
Jednostavan i blag obrazac za pretraživanje
Primjer neobičnog dizajna obrasca za pretraživanje
I još jedan primjer nestandardnog dizajna našeg obrasca
17. Oblici
Obrasci na stranicama su potrebni kako bi se ostavio komentar ili izvršila neka vrsta plaćanja. Kao u primjeru s registracijom, i ovdje važna je maksimalna jednostavnost. Uostalom, korisnici ne vole dugo petljati oko unosa znakova i razmišljati što gdje unijeti.
Bolje je omogućiti mogućnost pregleda u kojoj je fazi popunjavanja korisnik i koliko je vremena ostalo do kraja. Također Preporučljivo je podijeliti faze u kategorije (opće informacije, kontakti itd.)
Na ovoj stranici možete pratiti proces ispunjavanja obrasca korak po korak
Još jedan primjer korak-po-korak ispunjavanja obrasca. Aktivna faza je označena bojom
Još jedna opcija dizajna - aktivni proces otvara se u novoj kartici
18. Pretplate
Dok su blogovi i društveni mediji dobivaju na popularnosti, postoji trend postavljanja više gumba za pretplatu. U pravilu, minimum je RSS i Twitter. Ljudi se trude stranice učiniti živahnijima i komunikativnijima, čime bi čitateljima bilo što lakše pratiti vijesti.
Zajedno s gumbima za pretplatu odmah se prikazuje broj pretplatnika.
Kad sam vidio ovu opciju, elegantan dizajn odmah mi je zapeo za oko
Najjednostavnija opcija - samo gumbi za pretplatu, plus veze na društvene mreže
19. Klizači
Svaki više ili manje iskusan dizajner izgleda može uzeti gotov jQuery klizač na internetu i umetnuti ga na svoju stranicu. I izgleda vrlo impresivno. Zbog toga se klizači sve češće nalaze na stranicama. U pravilu se postavljaju kao reklamni pano s najboljim materijalima (ili proizvodima) stranice, na najvidljivijem mjestu.
Izvrstan, jednostavan, moderan klizač.
A ovo je prilično čest primjer klizača
Dobar neobičan primjer dizajna klizača
Naravno, elementi tu ne završavaju - ima ih mnogo više. Govorio sam samo o onima najmodernijim i najpopularnijim. Poželio bih svima da informacije shvate ozbiljno, analiziraju i promišljaju. Napravite lijepe web stranice. Čini udobno stranice.
S poštovanjem, Naiko Mikhail.
Uredništvo: Rog Victor i Andrey Bernatsky. webformyself tim.
25. listopada 2019 Post je ažuriran
Jurij Nemets
Izbor prekrasnih kartica - skup prekrasnih kartica za web mjesto
Danas vam predstavljam izbor lijepih i originalnih kartica. Prilikom izrade ovih efekata korišteni su pseudoelementi, SVG slike i CSS prijelazi. Dizajn svih kartica izrađen je u modernom stilu i prikladan je za gotovo svaku web stranicu. Pogledajte primjere ovih kartica i iznenadit ćete se koliko neobično možete dizajnirati ono što se čini tako često korištenim elementom na stranici.
Izbor prekrasnih kartica
preuzimanje datoteka
Izbor prekrasnih kartica
Ako ste gledali demo verziju, mogli ste primijetiti da su svi primjeri na jednoj stranici. Stoga, ako preuzmete i otvorite izvore, vidjet ćete dugačku stranicu poput slike lijevo. Nemojte se bojati! Tamo je sve lijepo strukturirano. Vi samo trebate uzeti željeni "komad" koda i zalijepiti ga na svoju web stranicu.
Svaki novi primjer nalazi se u zasebnom bloku
Ista stvar se događa sa stilskom datotekom. Također je velik, ali tu je sve komentirano, pa ne bi trebalo biti problema.
Ako netko još uvijek nije pogledao demo, onda sam napravio nekoliko screenshotova za vas :)
Zaključak
Dobar izbor kartica s nestandardnim efektima i prijelazima. Odvojite nekoliko minuta vremena i pogledajte sve kartice. Dogodi se da pogledate i pomislite: “Pa obični tabovi, što tu fali. I ne baš, a trebaju mi.” Ali jedan, neki neobičan dizajn je toliko nezaboravan da kada trebate implementirati kartice na web mjesto, to je točno kako ih želite napraviti. A ne možete se ni sjetiti gdje ste ih vidjeli!
Stoga, ne zaboravite dodati moju stranicu u oznake u vašem pregledniku (ovo se radi pomoću prečice na tipkovnici CTRL+D) 😉 .
Nedavno smo pogledali implementaciju kartica sa sadržajem, bez povezivanja javascripta, koristeći isključivo .
Danas vas želim upoznati s još jednim, ne manje zanimljivim rješenjem za stvaranje kompaktnog bloka kartica, izgrađenog na čistom CSS3 i koristeći elemente prilagodljivi raspored. Kao iu prvoj opciji, ništa suvišno ili glomazno, samo minimum css kod, a na raspolaganju će vam biti i prilagodljivi blok s karticama koje se mogu mijenjati i savršeno će se uklopiti u bilo koji dio stranice, bilo da se radi o zasebnoj poruci, bočnom stupcu ili modalnom prozoru.
Koje su promjene napravljene u odnosu na prvu verziju?
Prije svega, blok kartica je postao prilagodljiv, tj. prilikom gledanja na Mobilni uredaji, veličina kartica se mijenja ovisno o veličini zaslona korisničkih uređaja, tekst naslova se uklanja i ostaju samo ikone fonta koje označavaju značenje sadržaja jednog ili drugog.
Ikone fontova su iz , zbirka je vrlo bogata i, štoviše, potpuno besplatna. Ikone možete integrirati u bilo koji projekt pomoću preuzetog skupa fontova ili ih povezati sa svojom datotekom css stilovi izravno s web stranice razvojnog programera putem @import koristeći sljedeći redak:
| @uvezi 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");
U demo primjeru, to je upravo ono što sam napravio, tako da gledajući izvorni kod, možete lako shvatiti što je što.
Struktura kartica u Html-u prilično je jednostavna. Osnovni div spremnik, veza
HTML
| < div class = "tabs" > < input id= "tab1" type= "radio" name= "tabs" checked> < label for = "tab1" title= "Kartica 1" >Kartica 1 < input id= "tab2" type= "radio" name= "tabs" > < label for = "tab2" title= "Kartica 2" >Kartica 2 < input id= "tab3" type= "radio" name= "tabs" > < label for = "tab3" title= "Kartica 3" >Kartica 3 < input id= "tab4" type= "radio" name= "tabs" > < label for = "tab4" title= "Kartica 4" >Kartica 4 < section id= "content-tab1" > < p> < section id= "content-tab2" > < p> < section id= "content-tab3" > < p>Ovdje objavite bilo kakav sadržaj.... < section id= "content-tab4" > < p>Ovdje objavite bilo kakav sadržaj.... |
Za organiziranje blokova sadržaja koristio sam oznaku .
Prebacivanje kartica događa se kroz interakciju provjerenog atributa u oznaci i pseudo-class:checked, usko povezan preko identifikatora u CSS-u. Upravo u obradi ove metode posrće stara, famozna kočnica napretka Internet Explorer 8, od verzije 9 sve radi najbolje.
Lagano dolazimo do najzanimljivijeg dijela, stiliziranja naših kartica pomoću magije CSS-a. Ovdje su stvari još jednostavnije, nema smisla posebno opisivati svako svojstvo i parametre, napisao sam neka objašnjenja u izvornom kodu, pa mislim da neće biti teško dokučiti što gdje ide i zašto, ali ako imate pitanja ili pronađite pogrešku, napišite u komentarima, sigurno ću odgovoriti i pomoći ću.
CSS3
| /* Osnovni spremnik kartice */. kartice (min. širina: 320px; maks. širina: 800px; ispuna: 0px; margina: 0 automatski; ) /* Stilizira odjeljke sadržaja */. tabs> section ( display: none; padding: 15px; background: #fff; border: 1px solid #ddd; ) . tabs> section> p ( margin: 0 0 5px; line-height: 1.5; color: #383838; /* dodaj animaciju */- webkit- animacija- trajanje: 1s; animacija- trajanje: 1s; - webkit- animacija- način ispune: oboje; animation-fill-mode: oboje; - webkit- animacija- naziv: fadeIn; ime-animacije: fadeIn; ) /* Opišite animaciju svojstva neprozirnosti */@- webkit- ključni okviri fadeIn ( od ( neprozirnost: 0 ; ) do ( neprozirnost: 1 ; ) ) @ ključni okviri fadeIn ( od ( neprozirnost: 0 ; ) do ( neprozirnost: 1 ; ) ) /* Sakrij potvrdne okvire */. kartice> unos (prikaz: ništa; pozicija: apsolutna; ) /* Stilovi prekidača kartica */. tabs> label ( display: inline- block; margin: 0 0 - 1px; padding: 15px 25px; font- weight: 600; text- align: center; color: #aaa; border: 0px solid #ddd; border-width: 1px 1px 1px 1px; pozadina: #f1f1f1; radijus granice: 3px 3px 0 0 ; ) /* Ikone fonta iz Font Strašan u Unicode formatu */. tabs> oznaka: prije (familija fonta: fontawesome; težina fonta: normalna; margina desno: 10px; ) . tabs> label[ for *= "1" ] : prije ( sadržaj: " \f 19a"; ) . tabs> label[ for *= "2" ] : prije ( sadržaj: " \f 17a"; ) . tabs> label[ for *= "3" ] : prije ( sadržaj: " \f 13b"; ) . tabs> label[ for *= "4" ] : prije ( sadržaj: " \f 13c"; } /* Mijenja stil prekidača kartice pri lebdenju */. tabs> label: hover (boja: #888; pokazivač: pokazivač; ) /* Stilovi za aktivnu karticu */. tabs> input: označeno+ oznaka (boja: #555; rub-gornje: 1px solid #009933; border- bottom: 1px solid #fff; pozadina: #fff; ) /* Aktiviranje odjeljaka pomoću pseudo-klase:provjereno */ #tab1:provjereno~#content-tab1, #tab2:provjereno~#content-tab2, #tab3:provjereno~#content-tab3, #tab4:provjereno~#content-tab4 ( prikaz: blok; ) /* Uklonite tekst s prekidača * i ostavite ikone na malim ekranima */@medijski zaslon i (max-width: 680px) ( . tabs> label (font-size: 0 ; ) . tabs> label: before ( margin: 0 ; font-size: 18px; ) ) /* Promijenite ispunu * prekidača za male zaslone */@medijski zaslon i (max-width: 400px) ( . tabs> label ( padding: 15px; ) ) |
/* Osnovni spremnik kartice */ .tabs ( min-width: 320px; max-width: 800px; padding: 0px; margin: 0 auto; ) /* Stilovi odjeljka sadržaja */ .tabs>section ( display: none; padding : 15px; pozadina: #fff; obrub: 1px solid #ddd; ) .tabs>section>p ( margin: 0 0 5px; line-height: 1.5; color: #383838; /* priloži animaciju */ -webkit-animation -duration: 1 s; animation-duration: 1 s; -webkit-animation-fill-mode: oboje; animation-fill-mode: oboje; -webkit-animation-name: fadeIn; animation-name: fadeIn; ) /* Opišite svojstva neprozirnosti animacije */ @-webkit-keyframes fadeIn ( od ( neprozirnost: 0; ) do ( neprozirnost: 1; ) ) @keyframes fadeIn ( od ( neprozirnost: 0; ) do ( neprozirnost: 1; ) ) /* Skrivanje potvrdni okviri * / .tabs>input ( display: none; position: absolute; ) /* Stilovi prekidača kartica */ .tabs>label ( display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font- težina: 600; poravnanje teksta: središte; boja: #aaa; obrub: 0px puni #ddd; širina obruba: 1px 1px 1px 1px; pozadina: #f1f1f1; rubni polumjer: 3px 3px 0 0; ) /* Font-ikone iz Font Awesome u Unicode formatu */ .tabs>label:before ( font-family: fontawesome; font-weight: normal; margin-right: 10px; ) .tabs>label:before ( content: " \f19a"; ) .tabs>label:before ( sadržaj: "\f17a"; ) .tabs>label:before ( sadržaj: "\f13b"; ) .tabs>label:before ( sadržaj: "\f13c"; ) /* Mijenja stil izmjenjivača kartica pri lebdenju */ .tabs>label:hover ( boja: #888; kursor: pokazivač; ) /* Stilovi za aktivnu karticu */ .tabs>input:checked+label ( boja: # 555; border -top: 1px solid #009933; border-bottom: 1px solid #fff; background: #fff; ) /* Aktiviranje odjeljaka pomoću pseudo-class:checked */ #tab1:checked~#content-tab1, # tab2:checked~# content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 ( display: block; ) /* Uklonite tekst s radio gumba * i ostavite ikone na malim ekranima */ @media screen and (max -width: 680px) ( .tabs>label ( font-size: 0; ) .tabs>label:before ( margin: 0; font-size: 18px; ) ) /* Promjena ispune * prekidači za male zaslone */ @ medijski zaslon i (max-width: 400px) ( .tabs>label ( padding: 15px; ) )
Kartice () možete dizajnirati kako god želite, sve u primjeru je samo primjer, moja trenutna vizija proizvoda, ništa više. Možete saznati Unicode vrijednosti ikona fonta koje su vam potrebne na web stranici programera. Da biste to učinili, samo kliknite na odabranu ikonu i kopirajte izdani digitalni kod, otprilike ovako: \f13b .
Imajte na umu da kada smanjite veličinu prozora preglednika, kartice se automatski prilagođavaju trenutnoj veličini do određene vrijednosti (u primjeru 680px), nakon te vrijednosti, tekstualni naslovi kartica nestaju, ostavljajući ikone. Time se osigurava maksimalna kompaktnost cijelog bloka kartica, preostaje samo odabrati prave ikone koje odgovaraju značenju prikazanog sadržaja unutar kartica.
Pogledajte primjer rada kartica uživo, preuzmite izvore, eksperimentirajte s parametrima i stvarajte, stvarajte, stvarajte...
Ako ste umorni od rada s predlošcima na engleskom jeziku i sanjate o prilici da koristite predloške na ruskom jeziku, onda ćete sigurno biti sretni s nekim sjajnim vijestima. Isti su se pojavili na TemplateMonster tržištu gotova rješenja, koji vam je potreban. Da, da, na stranici sada možete pronaći one najbolje. Lokalizirani predlošci upravo su ono što trebate ako želite izgraditi svoj online projekt minimalni iznos vrijeme. Osim što su tekstovi za predloške napisani ručno, imaju sve potrebni alati za izradu profesionalne web stranice.
Sa svim poštovanjem, Andrew
Pozdrav, dragi čitatelji. Na ovaj mrazni dan mi ćemo učiniti s vama lijepe kartice sa koristeći CSS i JQuery. Ispostavilo se da su ove takozvane kartice vrlo korisne za web mjesto u cjelini; mogu značajno uštedjeti prostor na stranici. Mogu se postaviti svugdje, u bočnu traku ili izravno u sam sadržaj, članak.
Također, tabovi koje ćemo izraditi su lijepog dizajna, značajno će ukrasiti vašu stranicu. Kako :-) lijepo i korisno, čini mi se rijetka slučajnost. Štoviše, izrađuju se samo uz pomoć , odnosno: brzo se učitavaju i ne opterećuju poslužitelj.
JQuery
$(document).ready(function() ( $("#content div").hide(); // Skriveni sadržaj $("#tabs li:first").attr("id","current"); // Koju karticu prikazati prvu $("#content div:first").fadeIn(); // Prikaži sadržaj prve kartice $("#tabs a").click(function(e) ( e.preventDefault() ; $ ("#content div").hide(); //Sakrij sav sadržaj $("#tabs li").attr("id",""); //Poništi identifikatore $(this).parent() .attr ("id","current"); // Aktiviraj identifikatore $("#" + $(this).attr("title")).fadeIn(); // Prikaži sadržaj trenutne kartice )) ;))() ;To je uglavnom sve, glavna stvar je eksperimentirati, možete dodati na ove kartice pozadinske slike, što će znatno poboljšati njihov izgled, ali će im trebati više vremena za učitavanje.
Kompatibilnost preglednika
Ove kartice podržavaju gotovo svi preglednici, samo će u nekima izgledati malo drugačije, jer mnogi još ne podržavaju CSS3.
To je sve, nadam se da vam se svidjelo :-) Ako vam nešto nije jasno, svakako pitajte u komentarima. Vidimo se uskoro.
U prethodnim člancima naučili ste kako napraviti kartice za web mjesto na i. I mi smo shvatili kako na društvene mreže.
Ali ponekad trebate napraviti najjednostavniju karticu koristeći kombinaciju html-a i css-a i postaviti je bilo gdje na stranici web-mjesta, bez obzira koji cms koristite.
U takvu karticu možete smjestiti bilo koji sadržaj ili kôd. A za ovo ne morate spajati nikakve dodatne biblioteke i skripte - goli Html i CSS.
Primjer html css kartice na stranici:
Izrada html kartice
1 korak. Za kartice pišemo jednostavan kod:
Sadržaj kartice 1
Sadržaj kartice 2
Sadržaj kartice 3
Sadržaj kartice 4
Izrada css-a za novu html karticu
Korak 2. Pišemo stilove za vanjski dizajn.
U stilovima možete promijeniti sve i kako god želite. U ovom primjeru kartice imaju zaobljene kutove. Ako vam ne treba, jednostavno izbrišite ovaj blok.
/* CSS dokument */ .tabs ( neprozirnost: 0; vidljivost: skrivena; ) .tab ( pozicija: apsolutna; vidljivost: skrivena; z-index: 10; boja: #000; font: podebljano 9pt arial; ) .tabs: target+.tab (opacity: 1; visibility: visible; ) .tabsLink a( background-color:#F06406; padding:2px; font: bold 10pt arial; color:#fff; text-decoration:none; /* Početak zaobljenih kartica */ -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; /* Kraj zaobljenih kartica */ )
Kao što vidite, postoji mnogo opcija za stvaranje uobičajenih kartica za skrivanje sadržaja u neaktivnim karticama. A ovo je najjednostavnije, gotovo za 5 minuta.