23 kvaliteetset CSS-i teeki veebidisainiks

CSS

Praegused CSS-i teegid on tõend veebidisaini kõrgest tasemest ja kuidas need asju lihtsustavad, kui tuleb rakendada neid suurepäraseid viise, kuidas veebikogemust mõista.

Sellepärast me ka teeme jagada 23 kvaliteetset CSS-i teeki erinevatest kunstnikest, kes selle disainikeele abil tõestavad, kuidas kõik on võimalik. Huvitav pakkumine ressursse, et imestada, mida CSS-i abil saavutada on võimalik.

Menüü hägustamine

Blur

A. suurepäraselt optimeeritud demo millest leiate kuni seitse näidet. Nad kasutavad CSS3 üleminekut ja mis oleks suurepärane intelligentsus erinevate selektorite kasutamisel, et luua kvaliteetne hägususefekt.

CSS3D pilved

Pilved

Ainult koos hõljutage kursorit selle demo kohal, saate kogeda selle CSS-i teegiga saavutatud suurt efekti. Mis kõige parem - need pilved on täies liikumises. See kasutab nii CSS3 3D-teisendusi kui ka JavaScripti. Lingilt pääsete juurde õpetusele, kust leiate kõik toimingud.

Logod puhtas CSS-is

Logos

See teek sisaldab mõned kõige populaarsemad logod kõik, näiteks Apple või Twitter. On enam kui huvitav, et saate teada kõigi logode omadusi, asetades hiirekursori. Teil on lingilt kõik juurdepääsud täielikule koodile.

Jan Kadera navigeerimisriba

John

Lehelt codepen.io meil on juurdepääs sellele navigeerimisribale 3D-s mis liigub imeliselt ja millest saame selle koodi täielikult teada. Selle raamatukogu eripära on see, et see koosneb ainult 65 reast. Uued CSS3 funktsioonid on olemas sügavuse väljaefektis.

Pildipaneelid libisevad

Liug

Teil on juurdepääs õpetusele siit. Selle suur väärtus on kui sujuvad animatsioonid pildipaneelide libistamisel. Nendele variatsioonidele pääseb juurde, et need oma veebisaidile lisada ja suurepärase tulemuse saavutada.

Topeltrõngas

Topeltring

Oleme enne täiuslikult taasloodud sõrmus suurepärase tootmisanimatsiooniga. Lehelt codepen.io on teil juurdepääs kogu koodile, mis koosneb sadadest ridadest.

Flexbox

Flex

Flexboxid on uus CSS-i viis veergude kuvamiseks lehel. A üsna põhjalik juhend nendest anumatest aru saada.

Värvikas navigeerimismenüü

Navigatsioon

Teil on juurdepääs kogu selle navigeerimismenüü HTML ja CSS kes tunnistab suurt armastust värvide vastu. See on tehtud täielikult CSS-is, et saaksite sellesse keelde sukelduda.

CSS3 edenemisribad

Barras

Ehkki see on inglise keeles, nagu enamik raamatupoode, HTML ja CSS on hästi üksikasjalikud vajavad suurepäraseid disaini edenemisribasid. Teid ootavad gradientid, jooned ja muud tüüpi visuaalefektid.

Animate.css

Animeeri

GitHubis populaarne, see on täielikult CSS-is. Valige animatsioon, mida soovite teada, ja selle efekti nägemiseks lehel Animate.css peate klõpsama ainult nupul "Animeeri". Saate selle alla laadida või vaadata GitHubist.

Spinkit

Spinkit

Seisame silmitsi näitajate kogumiga, mis suudab teenida igasuguste visuaalsete elementide jaoks veebis. Klõpsake nuppu "Allikas" ja leiate kogu selle täitmiseks vajaliku koodi.

nupud

nupud

A. CSS-nuppude kogu kõigist viisidest ja ideedest, et leida üks, mida vajate, et konkurentidest eristuda. Külgribal saate deaktiveerida kujundid või efektid, mida te ei soovi leida, ja seega keskenduda ühele konkreetsele.

FlipSwitch

Lüliti

Oleme enne rakendus, mis võimaldab teil teatud nupud keelata luua just see, mida me otsime. Kasutame erinevaid seadeid ja lõpuks saame taasesitada koodi, mille oma veebisaidile kopeerime. Väga huvitav ressurss oma mitmekülgsuse ja suurepärase stiili poolest.

Vihje.css

Hints

A. CSS-i kogu ilma JavaScripti ja olete valmis kasutamiseks, nagu soovite. Väike suurus, lihtne kasutada ja see töötab kõigis moodsamates veebibrauserites.

Värvid.css

värvid

Sellele, kes otsi värvi huvitavast alternatiivist ja see võimaldab suurepärase visuaalse küljega veebisaitide kiiret prototüüpimist.

Voxels.css

Vokslid

Kui teate Minecrafti, ehitusmängu, on seda CSS-i raamatukogu kindlasti lihtne ära tunda. Pöörake, kui keskel vajutame võrkude loomiseks minna.

Tüpograafia

tüpograafia

A. puhas CSS-font kerge, lihtsalt teie järgmise projekti jaoks ideaalne.

Spinnerid

Spinnerid

A. suur animatsioonide kogu ikoonide laadimine CSS-is ja HTML-is.

Laadimisjoone indikaatorid

Näitajad

Puhas tekst CSS-paarisigasuguste näitajate laadimiseks. Suurepärane allikas selle veebisaidi jaoks vajaliku ja õige näitaja leidmiseks.

CSS-laadur

CSS-laadur

Teine font ikoonide laadimiseks mida saab kohandada igasuguste animatsioonide jaoks.

Kujutise hõljutamine

Hõljuma

A. skaleeritav CSS-i teek ja selle klassi piltide kaal on hõljuv.

hue.css

Degradeerunud

Allikas 49 gradienti või fotorealistlikku gradienti igat tüüpi sisu ja piltide jaoks.

Materialiseerima

materjal

Un Materjalidisainil põhinev CSS-i raamistik, disainiprintsiip, mida Google kasutab paljudes rakendustes ja oma Androidi operatsioonisüsteemis.

Ärge jätke kohtumist vahele kõrgelt viimistletud võrkudega koos svg pildid.


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

Ole esimene kommentaar

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.