Turinys
- 01. Suderinkite vaizdus su svetainės spalvų schemomis
- 02. Tolygiai pasidalykite vieta paskutinėje tinklelio eilutėje
- 03. Sukurkite dalelių animacijas naudodami „box-shadow“
- 04. Animuoti daugiakampę su transformacijomis
- 05. Pagrindinis ’calc ()’ padėčiai nustatyti
- 06. Padarykite dėžės modelį sveiką su „dėžutės dydžiu“
- 07. Vertikaliai centre su CSS
- 08. Nukreipkite į susijusių objektų banką
- 09. Kontrolinis brūkšnelis
- 10. Pasinaudokite „Mode“ rašymo pranašumais
- 11. Naudokite nuolydžius neįprastais būdais
- 12. Nuorodose naudokite string-Matching
- 13. Padarykite FOUT darbą sau
- 14. Naršykite apie SVG, jei reikia fono
- 15. Sufokusuokite vartotojus su 3D perėjimais
- 16. Sukurkite žiedinius meniu naudodami CSS ir matematiką
- 17. Animuoti sąsajas ant svyravimo
- 18. Padarykite paprastas pagrindinio kadro animacijas
- 19. Sukurkite plaukiojančius 3D efektus su šešėliais
- 20. Atnaujinkite puslapio eleMents naudodami ‘: target’
- 21. Pateikite atsiliepimą su subtiliomis animacijomis
- 22. Pasiruoškite „valiai animuoti“
- 23. Humanizuokite įvesties laukus
- 24. Pristabdykite ir paleiskite CSS animacijas
- 25. Nenaudokite CSS kintamųjų
Tam tikru metu naudojant bet kokias technologijas kyla jausmas, kad buvo padaryta beveik viskas, ką galima padaryti. Kai kažkas nebėra taip nauja ir blizga, susidomėjimas nyksta ir atkreipiamas dėmesys į kitą didelį dalyką. Tai dažnai būdavo interneto pramonėje, kuri anksčiau, anksčiau ar vėliau yra linkusi siaubingai jaudintis dėl tam tikro technologijos aspekto, perkeldama ją į kasdienybę.
Kai CSS pasirodė pirmą kartą, ji buvo revoliucinga ir laikui bėgant ji tobulėjo, kad dizaineriai galėtų kurti lanksčius, griežtai sukurtus ir gražius tinklalapių maketus. Tačiau vėlai iš įvairių pusių kilo pasiūlymas, kad CSS yra pavargęs ir galbūt jo laikas saulėje praėjo.
Noriu pademonstruoti, kad CSS pasaulyje vis dar yra daug įspūdžių ir gyvybės, nesvarbu, ar tai yra pažangiausios savybės, kurių galbūt dar netyrėte, ar CSS aspektų naudojimas anksčiau nesvarstytu būdu.
Štai keletas geriausių pramonės CSS ekspertų patarimų.
(Pastaba: kai kurie šios funkcijos metodai yra pažangiausi ir gali būti nevisiškai palaikomi visose naršyklėse. Prieš pradėdami bet kokį darbą atidžiai patikrinkite ir įsitikinkite, kad yra atsarginių kopijų.)
01. Suderinkite vaizdus su svetainės spalvų schemomis
Christopheris Schmittas, konferencijos organizatorius
Konferencijos turi savo spalvų schemas, o su daugeliu pranešėjų portretų tvarkymo eiga gali būti sudėtinga. Rankinis filtrų taikymas nesikeičia ir priklauso nuo to, ar turite prieigą, tarkime, prie konkretaus „Photoshop“ veiksmo. Dabar naudoju didelės raiškos pilkosios skalės PNG ir pridedu tonus naudodamas CSS filtrus. Tai leidžia man pritaikyti bet kurį portretą prie įvykio schemos ir taip pat pakartotinai naudoti vaizdus keliomis temomis. Man tiesiog reikia naujos CSS taisyklės kiekvienam. Peržiūrėkite demonstracinę versiją.
02. Tolygiai pasidalykite vieta paskutinėje tinklelio eilutėje
Stephenas Hay, dizaineris ir autorius
Jei nežinomas elementų skaičius turi būti rodomas tinklelyje, galite naudoti „Flexbox“, kad paskutinę eilutę padalytumėte tolygiai. Taigi, jei yra tik vienas elementas, jis užims visą eilutę; jei yra du elementai, eilutė bus padalinta per pusę ir pan. Peržiūrėkite demonstracinę versiją.
03. Sukurkite dalelių animacijas naudodami „box-shadow“
Ana Tudor, koduotoja ir matematikos fanatikė
Maišant dėžutė-šešėlis naudodamiesi matematika ir „Sass“ galite piešti 2D kreives, imituoti 3D judėjimą ir kurti beprotiškas dalelių animacijas, kurias visi suklaidins dėl drobinių! Peržiūrėkite demonstracinę versiją ir dar vieną.
04. Animuoti daugiakampę su transformacijomis
Ana Tudor, koduotoja ir matematikos fanatikė
Jūs tikriausiai matėte grynus CSS daugiakampius, sukurtus su kraštinėmis, bet mes turime daug galingesnį įrankį transformuotis nuosavybė. Grandinių įdėjimas ir pritaikymas į įdėtus elementus leidžia mums sukurti sudėtingus daugiakampius su vaizdo fonais ar kraštinėmis ir skaidriu interjeru. Naudodamiesi 3D transformacijomis, galime šias 2D formas sujungti į daugiakampes ir priversti kietąsias medžiagas susilieti, atsiskleisti, sprogti ar rekombinuoti tokiu būdu, kuris lengvai supainiotas su WebGL. Peržiūrėkite demonstracinę versiją.
05. Pagrindinis ’calc ()’ padėčiai nustatyti
Ana Tudor, koduotoja ir matematikos fanatikė
Aš mylėjau apskaičiuoti () nuo to momento, kai jį atradau. Tai naudinga sutramdyti paraštes, užpildą ar matmenis ir gali būti gelbėjimo priemonė, kai naudojama fonams, vidiniams nuolydžiams ar transformacijoms nustatyti ar jų dydžiui nustatyti, ir derinama ne tik su tais pačiais senais, bet ir naujais bei šauniais peržiūros sritimis.
06. Padarykite dėžės modelį sveiką su „dėžutės dydžiu“
Sawyer Hollenshead, „Oak Studios“ kūrėjas ir dizaineris
Naudokite dėžutės dydis kad išsaugotum sveiką protą. Be jo elementas, kurio apibrėžtas plotis yra 250 taškų ir 25 taškų užpildas, sujungiamas iki 300 taškų, todėl pikselių ir procentų maišymas yra sunkus. Su dėžutės dydis:pasienio dėžutė kraštai ir paminkštinimai vietoj nustatyto pločio.
07. Vertikaliai centre su CSS
Trentas Waltonas, „Paravel“ įkūrėjas
Istoriškai buvo sunku vertikaliai centruoti ką nors naudojant CSS, pavyzdžiui, jei turite vaizdą su gretimu tekstu, kurį norite sulyginti vertikaliai. Užuot trypęs ir keikdamasis, naudokitės „Flexbox“, kad išspręstumėte derinimo bėdas. Peržiūrėkite demonstracinę versiją.
08. Nukreipkite į susijusių objektų banką
Jonathanas Smiley, „Zurb“ partneris ir dizaino vadovas
Nuskuskite CSS linijos svorį, naudodami apytikslius atributų parinkiklius klasių pavadinimuose, kad nukreiptumėte į didelį susijusių objektų banką, o ne prie kiekvienos klasės pridedate bendrų atributų. Pavyzdžiui ... [class * = "- block-grid-"] {} ... taikytųsi į tokius pavyzdžius: .small-block-grid-3 .large-block-grid-5
09. Kontrolinis brūkšnelis
Savid Storey, atviras interneto advokatas
Brūkšniavimas yra savaime suprantamas spausdinant, o kai kurie kūrėjai naudoja brūkšneliai nuosavybės internete, tačiau nedaugelis žino apie kitas savybes, užtikrinančias geresnį valdymą. Jei nesate atsargus, gausite brūkšnelių kopėčias, kur brūkšniai naudojami keliose linijose. Bendra nykščio taisyklė yra ne daugiau kaip dvi iš eilės, kurias galite valdyti naudodamiesi brūkšnelio-ribos linijos. Be to, brūkšnelio-ribos-simboliai leidžia nurodyti minimalų brūkšninio žodžio ilgį, taip pat minimalų simbolių skaičių prieš ir po brūkšnio pertraukos.
10. Pasinaudokite „Mode“ rašymo pranašumais
David Storey, atviras interneto advokatas
Rašymo režimai leidžia nustatyti teksto tekėjimo kryptį. Kai kurie Rytų Azijos tekstai rašomi vertikaliai, linijos auga iš dešinės į kairę, nurodomos rašymo režimas: vertikalus-rl (tb-rl IE). Vertikalus tekstas iš tikrųjų nenaudojamas Europos rašymo sistemose, tačiau gali būti naudingas lentelių antraštėms, kai yra ribota horizontali erdvė.
11. Naudokite nuolydžius neįprastais būdais
Ruth John, dizainerė
Fono gradientai gali puikiai atrodyti, kai naudojami su kraštinėmis ir kulkomis. Aš naudoju tiek savo tinklaraštyje, tiek su išankstiniu procesoriumi, kuris gali pakartotinai naudoti kodą, kad nepakartotų rankiniu būdu. Neapsikvailinkite, nes nuolydžiai gali būti sunkūs procesoriaus atžvilgiu. SCSS sąrašo ženklelių derinys:
@mixin gradedBullet ($ color) {background-image: linear-gradient (left, lighten ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color) (15%) 30 taškų, skaidrus 31 taškų); }
12. Nuorodose naudokite string-Matching
Ruth John, dizainerė
Savo tinklaraštyje aš naudoju CSS atributų parinkiklius su eilučių derinimu prie stiliaus socialinių piktogramų. Jie rodomi visame mano tinklaraštyje, kartais su tekstu, o kartais be, bet visada su piktograma. Norėdami sukurti tinkamą nuorodą su tinkama socialine piktograma, aš naudoju eilutės atitikmenį href inkaro elemento atributas. aš naudoju *= Taigi href ant inkaro elemento turi būti tik mano nurodyta eilutė.
/ * visoms socialinėms nuorodoms * / .social a: prieš {display: inline-block; padding-right: 30 taškų; font-family: ’FontAwesome’;} / * Kiekviena konkreti nuoroda * / .social a [href * = "twitter"]: prieš {content: " f099"; spalva: # 52ae9f;} .social a [href * = "github"]: prieš {content: " f09b"; spalva: # 5f2e44;} .social a [href * = "feed"]: prieš {content: " f09e"; spalva: # b47742;}
13. Padarykite FOUT darbą sau
Jasonas Pamentalas, pagrindinis „H + W“ dizaino vadovas
Žiniatinklis sukurtas remiantis prielaida, kad jis turėtų pateikti turinį, net jei naršyklė negali pateikti „bling“. Lėtai įkeliami žiniatinklio šriftai gali būti varginantys, „FOUT“ („Stilizuoto teksto blykstė“) šypsosi kaip navigacija ir tekstas, kol šriftai atsisiunčiami. „Google“ ir „Typekit“ pateikia atsakymą: žiniatinklio šriftų krautuvas. Įterpdami klases į puslapį, atsižvelgdami į šriftų įkėlimo būseną, galite suplanuoti atsargas su tomis klasėmis, kad sumažintumėte grįžtamąjį ryšį, taip pat išnaikindami „WebKit“ nematomo turinio sindromą. Peržiūrėkite demonstracinę versiją.
14. Naršykite apie SVG, jei reikia fono
Emil Björklund, inUse žiniatinklio kūrėjas
Vienintelės naršyklės, neturinčios SVG palaikymo, yra IE8 ir naujesnės versijos bei „Android 2 WebKit“, todėl naudoti SVG fonams CSS yra įmanoma, ypač kartu su PNG atsarginiu sprendimu, pvz., „Grunticon“. SVG gali būti sukurtas CSS, o iš SVG yra įdomus CSS ypatybių (filtrų!) Išpūtimas, su kuriuo galime žaisti pritaikę HTML.
15. Sufokusuokite vartotojus su 3D perėjimais
Emil Björklund, inUse žiniatinklio kūrėjas
3D transformacijų naudojimas ir naudojimasis z dimensija vartotojo sąsajose gali būti tikrai naudinga, ypač slėpti / rodyti ar sutraukti / išplėsti turinį. Taip pat tokiose situacijose gana lengva turėti 2D perėjimą arba jo visai nėra. Tai sritis, kurioje šiek tiek laipsniškas patobulinimas gali būti ilgas.
16. Sukurkite žiedinius meniu naudodami CSS ir matematiką
Sara Soueidan, frontendo kūrėja
Žiediniai meniu yra populiarūs programose mobiliesiems, todėl naudodami CSS transformacijas ir perėjimus galite sukurti paprastą žiedinį meniu. Šį meniu galima modifikuoti ir pritaikyti taip, kad būtų sukurtas ir į viršų arba žemyn atsidarantis meniu. CSS nėra tiesioginio būdo išversti elementą įstrižai, tačiau galite naudoti apskritimo spindulio, ant kurio norite išdėstyti elementus, vertę ir pritaikyti paprastą matematinę taisyklę, kad apskaičiuotumėte horizontalias ir vertikalias vertimo vertes, kurios bus perduotos translateX () ir verstiY () funkcijos. Tokiu būdu jūs baigsite a įstrižai vertimas, jei norite perkelti meniu elementus į teisingas rato vietas. Spustelėkite įvykį, kuris uždaro / atidaro meniu, galima tvarkyti naudojant „JavaScript“ arba galite žengti dar vieną žingsnį ir turėti meniu tik CSS naudodami CSS žymimąjį laukelį. Savo demonstracinėje versijoje aš naudoju „JavaScript“ ir HTML5 „classList“ API, kuris nėra palaikomas visose naršyklėse, todėl turėsite peržiūrėti demonstracinę versiją šiuolaikinėje naršyklėje, kad ji veiktų, arba atžymėkite „jQuery“ kodą, užuot naudoję „classList“ API kodas.
Peržiūrėkite demonstracinę versiją ir visą pamoką. CSS žymės langelio nulaužimo pavyzdys.
17. Animuoti sąsajas ant svyravimo
Paulas Lloydas, „The Guardian“ sąveikos dizaineris
Negalima pasikliauti pelės žymeklio būsenomis, kad veiksmas veiktų ar pateiktų svarbią informaciją, tačiau vis tiek galite patobulinti sąsajas pelės vartotojams. 24ways.org tinklalapyje mes atskleidžiame straipsnių pavadinimus, kai pervedate pelės žymeklį ant nuorodų ankstesnėje / kitoje naršymo srityje. Tai buvo pasiekta sukūrus a :: po pseudoelementas, kuriame yra sugeneruotas turinys, gaunamas iš a vertės duomenys- atributas, pritaikius CSS perėjimą, kad jis slinktų į rodinį užvedus pelę. Peržiūrėkite demonstracinę versiją.
18. Padarykite paprastas pagrindinio kadro animacijas
Paulas Lloydas, „The Guardian“ sąveikos dizaineris
Svetainėje 24ways.org prie suvestinių pridėjome animuotus kampinius atvartus, kurie atsidarė pakibus. Tai buvo padaryta derinant @keyframes taisyklė su animacijos ypatybe, pakeičiant fono paveikslėlio padėtį, kad būtų sukurta „sprite“ pagrindu sukurta animacija. Apgaulė yra deklaruoti kadrų, kuriuos turite animacijoje, skaičių žingsniai () vertė. Peržiūrėkite demonstracinę versiją.
19. Sukurkite plaukiojančius 3D efektus su šešėliais
Catherine Farman, „Happy Cog“ kūrėja
Neseniai įgyvendinant projektą reikėjo plūduriuojančios produkto nuotraukos su apačioje esančiu apvaliu šešėliu, sukuriančiu 3D efektą iššokant nuo ekrano. Šešėlis naudoja kelias CSS3 funkcijas: sienos spindulys alfa skaidrumas ir dėžutė-šešėlis. Tai gerai tinka gaminių tinkleliams, demonstruojamiems pagrindinio puslapio herojaus vaizdams ar bet kokiam įnoringam dizainui su skeuomorfiniu išlenkimu. Peržiūrėkite demonstracinę versiją.
20. Atnaujinkite puslapio eleMents naudodami ‘: target’
Simonas Madine'as, „HeRe“ vyresnysis interneto kūrėjas
CSS nėra programavimo kalba įprasta prasme, tačiau vis tiek galite atlikti protingus dalykus negrįždami į „JavaScript“. Pavyzdžiui, : taikinys pseudoklasė taikoma elementams, kurie yra spustelėtos nuorodos taikinys.
Galite tai naudoti norėdami apibrėžti puslapio būseną, nukreipti į tėvus, kuriuose yra daugybė elementų, o jūsų nuorodos tampa priemone vienu paspaudimu valdyti visų vaikų išvaizdą ir išdėstymą. Peržiūrėkite demonstracinę versiją.
21. Pateikite atsiliepimą su subtiliomis animacijomis
Neil Renicker, dizaineris ir kūrėjas
CSS pseudoelementai :: prieš tai ir :: po kartu su CSS perėjimais gali įgalinti malonią animaciją, kuri suteikia subtilų grįžtamąjį ryšį pelės vartotojams. Pvz., Sukurkite CSS rodyklę pseudo elemente, pritaikykite perėjimą prie pseudo elemento (perėjimas: visi lengvieji išėjimai .15s;), tada pridėkite paprastą maketo pakeitimą : užveskite pelės žymeklį pseudoklasė (pvz., taisymas paraštė-viršus). Peržiūrėkite demonstracinę versiją.
22. Pasiruoškite „valiai animuoti“
Paulas Lewisas, koduotojas ir „Chrome“ ryšių su kūrėjais komandos narys
Jei naudojate -webkit-transformuoti: translateZ (0) magiškai padaryti puslapius greitesnius, įsilaužimą, kuris daugelyje naršyklių tiesiog sukuria naują kompozitoriaus sluoksnį, pakeičia noras-animacija. Netrukus galėsite naršyklei pasakyti, ką ketinate pakeisti dėl elemento (jo padėtį, dydį, turinį ar slinkties padėtį), o naršyklė pritaikys tinkamą optimizavimą po gaubtu. Daugiau informacijos.
23. Humanizuokite įvesties laukus
Yaronas Schoenas, „Made For Humans“ įkūrėjas
Pridėjus greitas animacijas prie elementų, su kuriais vartotojai sąveikauja, sąsaja tampa mažiau kompiuterinė. Su įvesties laukais pabandykite įdėti a perėjimo skambutis viduje, todėl kiekvieną kartą, kai jį sutelksite ar nenukreipsite, bus sklandus perėjimas.
įvestis, textarea {-moz-pāreja: visi 0.2s palengvina; -o-perėjimas: visi 0.2s palengvėja; -webkit-perėjimas: visi 0.2s palengvėja; -ms-perėjimas: visi 0.2s palengvina; perėjimas: visi 0.2s palengvina;
24. Pristabdykite ir paleiskite CSS animacijas
Val vadovas, dizaineris ir konsultantas
Galite „pristabdyti“ ir „paleisti“ CSS animaciją, pakeisdami ją animacijos-žaidimo būsena nuosavybė. Nustačius „pristabdytą“, animacija bus sustabdyta, kol nepakeisite animacijos-žaidimo būsena į bėgimas, pavyzdžiui, ant svyravimo.
.animating_thing {animacija: sukite 10s tiesinį begalinį; animacija-grojimo būsena: pristabdyta; }. animating_thing: hover {animation-play-state: running; }
25. Nenaudokite CSS kintamųjų
Dave'as Shea'as, dizaineris ir autorius
Pagaliau gauname CSS kintamuosius, pavyzdžiui, kad vieną kartą parašytume spalvos šešiakampę reikšmę ir nurodytume ją per stiliaus lapą. Tačiau oficiali specifikacija yra išsami, prideda sintaksės sudėtingumo, siūlo nepaprastą funkcionalumą ir daugumos naršyklių iš esmės nepalaiko. Laikmetyje, kai „Sass“ yra labai populiarus ir pranoksta kintamuosius, turinčius galingą programavimo logiką, pvz., Pasirinktines funkcijas ir „if / else“ teiginius, oficiali specifikacija yra kur kas trumpesnė.
Tikimės, kad šie svarbiausi patarimai atnaujino jūsų požiūrį į CSS ir jo teikiamas galimybes kuriant ir kuriant internetą. Nepamirškite kruopščiai išbandyti bet kurį iš šių būdų, kad patikrintumėte naršyklės palaikymą prieš pradedant bet kokį darbą.
Žodžiai: Craigas Grannellas Iliustracija: Mike'as Chipperfieldas
Šis straipsnis iš pradžių pasirodė internetiniame žurnalo 253 numeryje.
