23 mga de-kalidad na aklatan ng CSS para sa disenyo ng web

CSS

Ang kasalukuyang mga aklatan ng CSS ay patunay ng mataas na antas ng disenyo ng web at kung paano ginagawang mas madali ang mga bagay pagdating sa pagpapatupad ng mga makikinang na paraan ng pag-unawa kung ano ang karanasan sa web.

Iyon ang dahilan kung bakit gagawin namin magbahagi ng 23 mataas na kalidad na mga aklatan ng CSS ng iba't ibang mga artista na nagpapatunay kung paano posible ang lahat sa pamamagitan ng wikang ito ng disenyo. Isang kagiliw-giliw na alok ng mga mapagkukunan upang mamangha sa kung ano ang maaaring makamit sa pamamagitan ng CSS.

I-blur ang Menu

Palabuin

isang makinang na-optimize na demo kung saan maaari kang makahanap ng hanggang pitong mga halimbawa. Ginagamit nila ang paglipat ng CSS3 at kung ano ang magiging mahusay na katalinuhan sa paggamit ng iba't ibang mga tagapili upang lumikha ng isang de-kalidad na blur effect.

Mga Cloud na CSS3D

Ulap

Sa lamang mag-hover sa demo na ito, mararanasan mo ang mahusay na epekto na nakamit sa CSS library na ito. Pinakamaganda sa lahat, buong galaw ang mga ulap na iyon. Gumagamit ito ng CSS3 3D Transforms pati na rin ang JavaScript. Mula sa link maaari mong ma-access ang tutorial kung saan mahahanap ang bawat isa sa mga hakbang.

Mga logo sa purong CSS

Mga Logo

Naglalaman ang library na ito ilan sa mga pinakatanyag na logo ng lahat tulad ng Apple o Twitter. Ito ay higit sa kagiliw-giliw na maaari mong malaman ang mga katangian ng bawat isa sa mga logo sa pamamagitan ng paglalagay ng mouse pointer. Mayroon kang lahat ng access sa kumpletong code mula sa link.

Navigation bar ni Jan Kadera

Jan

Mula sa codepen.io mayroon kami pag-access sa navigation bar na ito sa 3D kamangha-manghang gumagalaw at kung saan maaari nating lubos na malaman ang code nito. Ang kakaibang bagay tungkol sa silid-aklatan na ito ay binubuo lamang ng 65 mga linya. Ang mga bagong tampok sa CSS3 ay naroroon sa malalim na epekto sa patlang.

Mga gliding panel ng imahe

Dumudulas

Mayroon kang access sa tutorial mula rito. Ang malaking halaga nito ay kung gaano makinis ang mga animasyon kapag dumudulas ang mga panel ng imahe. Maaari mong ma-access ang apat na mga pagkakaiba-iba upang isama ang mga ito sa iyong website at makamit ang isang kahanga-hangang resulta.

Dobleng singsing

Dobleng Singsing

Nauna na kami isang perpektong muling nilikha na singsing na may isang mahusay na pagmamanupaktura ng animation. Mula sa codepen.io mayroon kang access sa lahat ng code na binubuo ng daan-daang mga linya.

Flexbox

Pagbaluktot

Ang mga Flexbox ay ang bagong paraan ng CSS ng pagpapakita ng mga haligi sa isang pahina. A medyo komprehensibong gabay upang maunawaan ang mga lalagyan na ito.

Isang makulay na menu ng nabigasyon

Nabigasyon

May access ka sa lahat ng HTML at CSS para sa menu ng pag-navigate na ito na nagpapahayag ng maraming pag-ibig sa kulay. Ganap na ginawa ito sa CSS upang maipasok mo ang iyong sarili sa wikang ito.

Mga Progress bar sa CSS3

Barras

Bagaman ito ay nasa Ingles, tulad ng karamihan sa mga bookstore, Maayos nang detalyado ang HTML at CSS kinakailangan upang magkaroon ng mahusay na mga disenyo ng pag-unlad bar. Naghihintay sa iyo ang mga gradiente, linya at iba pang mga uri ng mga visual effects.

Animate.css

Pagalawin

Sikat sa GitHub, ito ay tapos nang buo sa CSS. Piliin ang animation na gusto mong malaman, at kailangan mo lang mag-click sa button na “Animate it” para makita ang epekto sa Animate.css. Maaari mo itong i-download o tingnan sa GitHub.

Spinkit

Spinkit

Nakaharap kami sa isang koleksyon ng mga tagapagpahiwatig na maaari maghatid para sa lahat ng uri ng mga visual na elemento sa web. Mag-click sa "Source" at makikita mo ang lahat ng code na kinakailangan para sa pagpapatupad nito.

Mga Pindutan

mga pindutan

isang Library ng pindutan ng CSS ng lahat ng mga paraan at ideya upang makahanap ng isa na kailangan mo upang makilala ang iyong sarili mula sa kumpetisyon. Mula sa sidebar maaari mong i-deactivate ang mga hugis o epekto na hindi mo nais na hanapin at sa gayon ay ituon ang partikular sa isa.

FlipSwitch

pitik ang switch

Nauna na kami isang app na nagbibigay-daan sa iyo upang huwag paganahin ang ilang mga pindutan upang lumikha ng isa na eksakto kung ano ang aming hinahanap. Ginagamit namin ang iba't ibang mga setting at sa wakas magagawa naming kopyahin ang code na aming kokopya para sa aming website. Ang isang napaka-kagiliw-giliw na mapagkukunan para sa kanyang kagalingan sa maraming at mahusay na estilo.

Pahiwatig.css

Hint

isang CSS library nang walang JavaScript at handa na para magamit mo ang nais mo. Maliit ang laki, madaling gamitin at gumagana ito sa lahat ng mga pinaka-modernong web browser.

Mga Kulay.css

Colores

Para sa kung sino hanapin ang kulay mula sa isang kagiliw-giliw na kahalili at pinapayagan ang mabilis na prototyping para sa mga website na may mahusay na aspeto ng visual.

Voxels.css

Mga Voxel

Kung alam mo ang Minecraft, ang laro sa konstruksyon, tiyak na ang library ng CSS na ito ay madaling makilala. Paikutin habang pinindot namin ang gitna upang pumunta pagbuo ng grids.

Tipograpiya

typography

isang purong CSS font magaan na perpekto lamang para sa iyong susunod na proyekto.

Spinners

Spinners

isang malaking koleksyon ng mga animasyon ng paglo-load ng mga icon sa CSS at HTML.

Mga tagapagpahiwatig ng linya ng pagsingil

Mga tagapagpahiwatig

Purong teksto sa pares ng CSSupang mai-load ang mga tagapagpahiwatig ng lahat ng mga uri. Ang isang mahusay na mapagkukunan upang mahanap ang kinakailangan at tamang tagapagpahiwatig para sa iyong website.

css loader

css loader

Isa pa font para sa paglo-load ng mga icon na maaaring ipasadya para sa lahat ng mga uri ng mga animasyon.

Hover ng Imahe

umali-aligid

isang nasusukat na silid-aklatan ng CSS at maliit ang bigat ng mga imahe para sa klase ng "hover".

hue.css

Napahamak

Isang mapagkukunan ng 49 gradients o photorealistic gradients para sa lahat ng uri ng nilalaman at mga imahe.

Pagkakatulad

materyal

Un Balangkas ng CSS batay sa Disenyo ng Materyal, ang prinsipyo ng disenyo na ginamit ng Google sa maraming bilang ng mga app at sa sarili nitong operating system ng Android.

Huwag palampasin ang appointment may mga high-end na web sa mga imahe ng svg.


Ang nilalaman ng artikulo ay sumusunod sa aming mga prinsipyo ng etika ng editoryal. Upang mag-ulat ng isang pag-click sa error dito.

Maging una sa komento

Iwanan ang iyong puna

Ang iyong email address ay hindi nai-publish.

*

*

  1. Responsable para sa data: Miguel Ángel Gatón
  2. Layunin ng data: Kontrolin ang SPAM, pamamahala ng komento.
  3. Legitimation: Ang iyong pahintulot
  4. Komunikasyon ng data: Ang data ay hindi maiparating sa mga third party maliban sa ligal na obligasyon.
  5. Imbakan ng data: Ang database na naka-host ng Occentus Networks (EU)
  6. Mga Karapatan: Sa anumang oras maaari mong limitahan, mabawi at tanggalin ang iyong impormasyon.