20 Ausad jõuluprojektid, mis on varjatud CodePenis

CodePen on online mänguväljak andekatele arendajatele, kus saab alati leida lahedaid projekte, et laiendada oma silmaringi ja näha, mida teised arendajad on valmis. Aasta lõpu puhkus on suurepärane aeg üllatada oma lähedasi loominguliste isiklike projektidega või öelda tänu oma klientidele mõningate jahedate ja tipptasemel disainidega, mis aitavad puhkusereisil.

Selles postituses vaatleme 20 fantastilist jõulud katseid CodePenis, et saate inspiratsiooni luua oma disainilahenduste loomiseks.

1. Perekonna jõululaulu

See armas Family Christmas Songbook app saab mängida oma lemmik jõululaule korraldatud SoundCloud. Stiilieeskirjad on kirjutatud LESSi stiililehe keeles ja muusikapleieri funktsiooni pakub kohandatud jQuery plugin.

Taustal olevad lumehelbe- ja jõulupuu-ikoonid annavad disainile piduliku atmosfääri ja kui te libistate pliiatsi üle, võite leida ka mõningaid peeneid CSS-efekte.

2. Digitaalne jõulupuu

Jõulude kujundamine on alati tänulik töö, sest selle tüüpilised visuaalsed elemendid saab ehitada paljude loominguliste viisidega. See pliiats on selle jaoks hea näide. Kõigepealt näete värvilisi kolmnurke, mis näiliselt ei ole seotud pühadega, aga kui klõpsate nupule Reveal, on nad kokku pandud jõulupuu. See ei ole ainult ainulaadne lahendus, vaid meenutab ka lihtsamat mängu.

3. Jõuluvana animatsioon lumega

Te ei pea tingimata kasutama JavaScripti, kui soovite jõuluks animatsiooni luua. Selles pliiatsis luuakse nii lumesadu animatsioon kui ka taustapildid ainult CSS-is. Tasub vaadata koodi veidi, sest see näitab CSS3 uskumatuid võimalusi. Taustapilt võib isegi valesti SVG-graafikaga segi ajada.

4. Jõuluvana juhatusel!

Jõuluvana joosta! on lõbus JavaScripti mäng pühade jaoks, mis kasutavad mängu phaser.js HTML5. Selles mängus ei ole liiga palju reegleid: Santa jookseb lõputult või vähemalt kuni ta kukub. See pliiats annab teile suurepärase võimaluse mõista, kuidas JavaScriptis lihtsamat mängu kirjutada.

5. Salajane Santa nime valija

Mütsist väljavõtmine on koolides ja kontorites populaarne viis Secret Santade valimiseks - see pliiats on vaid selle traditsiooni digitaalne versioon. Kuna see kasutab ainult vanilli JavaScript, saate selle hõlpsasti oma saidile kinnistada. Muutke lihtsalt muutuja nimesid.

6. Jõulupallid Pure CSSis

Need rõõmsameelsed jõulupallid on kirjutatud puhtas CSS-s, võttes arvesse piirisäte reegleid. Pallide erinevad osad pannakse kokku, kasutades täpselt arvutatud suhtelisi asendeid.

Kui soovite veebilehe jaoks kiiresti puhkusekeskkonda lisada, sisestage lihtsalt mõned neist pallidest sobivasse kohta värvi järgi, mis vastab saidi üldisele kujundusele.

7. Liikuvad lumehelbed

Saate need lumehelbed liigutada, libistades neid töölauale või nutitelefoni kallutades. Funktsionaalsust pakub objektorienteeritud JavaScript, mida arendaja targalt kasutab kohandatud lumehelbe klassi loomiseks.

Lumehelbed ise on ehitatud CSS3-sse ja taust kasutab gradiente - selles pensüstelis pole ühtegi pilti.

8. Holiday Accordion Experiment

See puhkusakordion on lihtsalt ilus. Kui liigutad vahekaardi kohal, mis keskendub veidi laiendades, ja kui klõpsate, ilmub see äkki üles ja katab kogu lehe. On huvitav märkida, et see pliiats kasutab skaleeritavat vektorgraafikat (SVG), mis on kujundatud CSS-iga.

SVG-d on võimsamad, kui nad näivad esmapilgul olevat, neid saab nutikalt paigutada ja kujundada samade reeglite järgi, mida kasutame tavaliste HTML-elementidega.

9. Lame Pure CSS lumememm

Kes ütles, et lame disain peab olema igav? See armas lumememm võib kergesti lisada jõuluvõimu igale disainile. Lumememmile ei ole kasutatud pilte, see on täielikult kirjutatud CSS-sse. Tasub vaadata CSS-koodi natuke ja vaadake, kuidas arendaja kasutab: enne ja: pärast pseudo-valikuid, et saavutada soovitud tulemus.

10. CSS3 lumehelves

Saate hõlbustada ainult CSS3-kujutiste loomist, kasutades täiustatud esiotsa arendusvahendeid; see hästi kavandatud CSS3 lumehelves on selle jaoks suurepärane näide. Selle uimastava lumehelbe kujunduse rakendamiseks kasutas arendaja HTML-i jaoks koostatud Jade-mallimise keelt ja Sass CSS-i eelprotsessorit.

11. Jõulud

Nutikad disainilahendused valivad tihti peeneid lahendusi, nagu lumega jõulude nupp selles pliiatsis. Tumepunane taust on ideaalne valik jõulude kujundamiseks; mitte kõik ei pea ju olema roheline.

Värvid, kalded, kirjatüüp ja hoverefekt muudavad selle nupu väga elegantseks ja pidulikuks. Sul on vaja vaid mõnda neist, et kiiresti kruntida mälestuspaika.

12. Parallaks Happy Holiday

Kui sulle meeldib parallaksi kerimine, siis miks te seda ei kasutaks oma puhkusekujunduse jaoks? Selle pliiatsi arendaja eksperimenteeris selle mõjuga targalt ja kasutas Parallax.js jQuery pluginat vähem levinud viisil, kerimise efekt ei ole tavaline, vaid horisontaalne. Jõulumõju tugevdab muljetavaldav lumesadu

Kui ma oleksin pidanud valima selle pliiatsiga kõik vead, oleks see värvivalik: valge tähed osaliselt valgel taustal nõrgendavad disaini kättesaadavust märkimisväärselt..

13. CSS jõulude pakenduspaber

CSS3 abil saate luua täiesti unikaalse jõulude pakenduspaberi. Selle pliiatsi arendaja näitab selle jaoks mitte ainult ühte, vaid kuut varianti. Ilusad mustrid saavutatakse CSS-gradientide ja tausta-segu-režiimi vara nutika kasutamise abil.

Arendaja enda veebisaidil on veel rohkem lahedaid näiteid ja üksikasjalikku selgitust.

14. Lahter kasti sees

See kujutlusvõimeline disain oli inspireeritud traditsioonilistest Vene nukudest (nuku sees olevast nukust). Kui avate väliskarbi, klõpsates sellel, avab see sisemise kasti, mis on ka teise sisemise kasti väliskast. Funktsioon on kirjutatud jQuery-s ja kastide täpsed kohad määratakse CSS-faili absoluutsete ja suhteliste reeglite abil.

15. Kinkekarp paberi koorimisefektiga

Kui teil õnnestub lindi eemaldamine sellest kingitusest eemaldada, siis saate vaadata superkooli paberi koorimisefekti, mis näitab kingituse sisemist sisu. Täielikku juhendit saate lugeda arendaja veebisaidilt, see on trikk, mida kindlasti tasub õppida. Kui sa tahad seda koodi lihtsalt kasutada, saate selle GitHubilt kloonida.

16. Holiday Spirit Animated Canvas

Jõulud võivad olla uute aegadega eksperimenteerimiseks suurepärane aeg, just nagu arendaja tegi seda selles pliiatsis, kasutades HTML5 lõuendit animeeritud taustana. Lõuend tuleb enne HTML-failis olevat sisu (Happy Holidays!) Ja see on määratud nutika CSS-i positsioneerimise abil taustaks.

Pliiats kasutab ka taustapilti, mis sisaldub eraldi JavaScripti failina.

17. Kinkekaardi kasutajaliides

See pilkupüüdev kinkekaart ei ole ainult jõulude ajal, vaid seda saab kasutada igal ajal, kui soovite oma veebilehe kingitusega oma kasutajaid üllatada. See ei tugine JavaScriptile, kuna see on täielikult kirjutatud Sassi stiilitabeli keeles.

Kujunduses kasutatakse CSS3 klippideed, mis võimaldavad arendajatel kuvada ainult konkreetse elemendi piirkonda, selle asemel, et näidata kogu oma ala.

18. Pure CSS Merry Christmas kaart

See lõputult naeruv Santa - kasutades ainult HTML-i ja CSS3-d - võib anda teile võimaluse mõista, kuidas võtmekeha animatsiooni süntaksit saab praktikas kasutada. CSS3-s saate animatsiooni reeglite määramiseks kasutada @keyframes reeglit ja seejärel saate selle määratud animatsiooni siduda teatud elemendiga, kasutades animatsiooni CSS3 omadust.

Te peate lisama võtmefaili nime animatsioonivara esimeseks väärtuseks, just nagu arendaja tegi seda kohandatud võtmefailidega, mida nimetatakse kehaLaugh, habeLaugh, headLaugh ja suuLaugh spetsiaalselt sellele pliiatsile loodud.

19. Xmas Cracker

Kui liigute selle muljetavaldava Xmas Crackeri kohal, siis ilmub see ainulaadsele jõulusõnumile, mis on hämmastav viis soovitada oma külalistele rõõmu jõule. HTML on kirjutatud HTML-i abstraktsiooni märgistuskeeles HAML-is, samas kui stiilieeskirjad võtavad Sass Syntactically Awesome Styesheets-i keele võimenduse..

Tulemus on tõesti arukas ja vinge. Lisades veidi rohkem JavaScripti, saab seda isegi kasutada kohandatud jutumärkide või sõnumite edastamiseks kasutajatele.

20. Vilkuv Xmas-tuled

Need vilkuvad jõulud tuled võivad kiiresti anda ainulaadse atmosfääri igale veebisaidile. Esikood on kirjutatud HAMLis, mis koostab HTML-i, Sass, mis koostab CSS-i, ja jQuery.

Animeeritud hõõguv efekt saavutatakse eespool nimetatud @keyframes reegli abil, mille annab CSS3. Lindide värvid on määratud jQuery failis, lisades 50 kraadi eelmise liini Hue väärtusele, kasutades HSL värvi skaalat.