Web diseinurako kalitate handiko 23 CSS liburutegi

CSS

Uneko CSS liburutegiak web diseinu maila altuaren froga dira eta horiek nola errazten dituzte gauzak webeko esperientzia zer den ulertzeko modu bikain horiek ezartzeko orduan.

Horregatik egingo dugu partekatu kalitate handiko 23 CSS liburutegi diseinu lengoaia honen bidez dena posible dela frogatzen duten hainbat artistarena. Baliabideen eskaintza interesgarria CSS bidez lor daitekeenaz harritzeko.

Lausotu menua

Blur

a bikain optimizatutako demoa bertan, zazpi adibide aurki ditzakezu. CSS3 trantsizioa eta adimen handia litzatekeena hautatzaile desberdinen erabileran kalitate handiko lausotze efektua sortzeko.

CSS3D hodeiak

hodeiak

Bakarrik pasatu demo honen gainean, CSS liburutegi honekin lortutako efektu handia bizi ahal izango duzu. Hoberena, hodei horiek mugimendu betean daude. CSS3 3D Transforms erabiltzen du, baita JavaScript ere. Estekatik tutorialera sar zaitezke urrats bakoitza non aurkitu.

Logotipoak CSS hutsean

logos

Liburutegi honek badu logotipo ezagunenetako batzuk hala nola, Apple edo Twitter. Interesgarria baino gehiago da saguaren erakuslea jarrita logotipo bakoitzaren propietateak ezagutzea. Estekatik kode osorako sarbide guztiak dituzu.

Nabigazio barra Jan Kaderaren eskutik

Jan

Codepen.io-tik daukagu sarbidea nabigazio barra honetara 3Dn hori zoragarri mugitzen da eta bertatik bere kodea guztiz jakin dezakegu. Liburutegi honen berezitasuna da 65 lerro baino ez dituela. CSS3 funtzio berriak sakonera eremuko efektuan daude.

Irudi-panelak irristatzen

Labainketa

Tutorialerako sarbidea duzu hemendik. Bere balio handia da animazioak zein leunak diren irudi-panelak irristatzean. Lau aldaera sar ditzakezu zure webgunean sartzeko eta emaitza bikaina lortzeko.

Eraztun bikoitza

Eraztun bikoitza

Aurretik gaude primeran birsortutako eraztuna fabrikazioko animazio bikainarekin. Codepen.io-tik ehunka lerrok osatutako kode guztietarako sarbidea duzu.

malgu-kutxa

Flex

Flexboxak orrialde batean zutabeak bistaratzeko CSS modu berria dira. A nahiko gida integrala ontzi horiek ulertzeko.

Nabigazio menu koloretsua

Nabigazioa

Sarbidea duzu nabigazio menu honetarako HTML eta CSS guztiak koloreekiko maitasun handia aitortzen duena. CSS-n egina dago, hizkuntza honetan murgildu ahal izateko.

Aurrerapen barrak CSS3n

Barras

Ingelesez dagoen arren, liburu denda gehienak bezala, HTML eta CSS ondo zehaztuta daude beharrezkoa da diseinuaren aurrerapen barra handiak edukitzeko. Gradienteak, lerroak eta beste efektu bisual mota batzuk dituzu zain.

Animate.css

Animatu

GitHub-en ezaguna da CSS-n egina. Aukeratu jakin nahi duzun animazioa eta "Animatu" botoian klik egitea besterik ez duzu Animate.css-en efektua ikusteko. GitHub-en deskarga edo ikus dezakezu.

Spinkit

Spinkit

Ahal duten adierazle bilduma baten aurrean gaude mota guztietako elementu bisualetarako balio du sarean. Egin klik "Iturria" gainean eta bere exekuziorako beharrezko kode guztiak aurkituko dituzu.

Buttons

botoiak

a CSS botoien liburutegia Lehiatik bereizteko behar duzuna aurkitzeko modu eta ideia guztien artean. Alboko barratik aurkitu nahi ez dituzun formak edo efektuak desaktiba ditzakezu eta horrela bereziki fokatu ditzakezu.

FlipSwitch

irauli etengailua

Aurretik gaude zenbait botoi desgaitzeko aukera ematen duen aplikazioa bila gabiltzan horietako bat sortzeko. Ezarpen desberdinak erabiltzen ditugu eta, azkenean, gure webgunerako kopiatuko dugun kodea erreproduzitu ahal izango dugu. Baliabide oso interesgarria bere aldakortasunagatik eta estilo bikainagatik.

Aholkua.css

Argibide gehiago

a CSS liburutegia JavaScript gabe eta nahi duzun moduan erabiltzeko prest. Tamaina txikikoa, erabiltzeko erraza eta web arakatzaile moderno guztietan funtzionatzen du.

Koloreak.css

koloreak

Norentzat bilatu kolorea alternatiba interesgarri batetik eta horrek ikuspegi bisual bikaina duten webguneetarako prototipatze azkarra ahalbidetzen du.

Voxels.css

Voxelak

Minecraft, eraikuntza jokoa ezagutzen baduzu, ziur asko CSS liburutegi hau erraz ezagutzen da. Biratu erdian sakatzen dugun bitartean sareak sortzen joateko.

Tipografia

tipografia

a CSS letra tipoa arina, zure hurrengo proiekturako ezin hobea.

spinners

spinners

a animazioen bilduma handia ikonoak CSS eta HTML kargatzeko.

Karga-lerroaren adierazleak

Adierazleen

Testu hutsa CSS bikoteanera guztietako adierazleak kargatzeko. Zure webgunerako adierazle beharrezko eta egokia aurkitzeko iturri bikaina.

CSS kargatzailea

CSS kargatzailea

Another ikonoak kargatzeko letra-tipoa mota guztietako animazioetarako pertsonaliza daitekeena.

Irudia pasatzean

Pasatzean

a CSS liburutegi eskalagarria eta irudien pisu txikia klase horretako «pasatzean».

ñabardura.css

Degradatua

Iturri bat 49 gradiente edo gradiente fotorrealista eduki eta irudi mota guztietarako.

Materializatu

Material

Un Materialen diseinuan oinarritutako CSS esparrua, Google-k aplikazio ugari eta bere Android sistema eragilean erabiltzen duen diseinu printzipioa.

Ez galdu hitzordua oso akabatutako sareekin duten svg irudiak.


Artikuluaren edukia gure printzipioekin bat dator etika editoriala. Akats baten berri emateko egin klik hemen.

Idatzi lehenengo iruzkina

Utzi zure iruzkina

Zure helbide elektronikoa ez da argitaratuko.

*

*

  1. Datuen arduraduna: Miguel Ángel Gatón
  2. Datuen xedea: SPAM kontrolatzea, iruzkinen kudeaketa.
  3. Legitimazioa: Zure baimena
  4. Datuen komunikazioa: datuak ez zaizkie hirugarrenei jakinaraziko legezko betebeharrez izan ezik.
  5. Datuak biltegiratzea: Occentus Networks-ek (EB) ostatatutako datu-basea
  6. Eskubideak: Edonoiz zure informazioa mugatu, berreskuratu eta ezabatu dezakezu.