Lag supernettsteder med CSS-verktøy og -ressurser

0

Å designe et nettsted kan være en kjedelig oppgave med tanke på hvor mye arbeid som må legges ned i det: Finn verten din, planlegg den, kode hver side, så noen flere sider, og så mer, og så skjønner du ideen .

Noen nettdesignere eller utviklere vil imidlertid se etter måter å øke effektiviteten ved å bruke raske metoder. Hva er det, spør du kanskje? Jeg mener ikke at du bare kan kopiere og lime inn en annens nettside, gjøre den til din egen og kalle den ferdig! Du kan imidlertid benytte deg av tonnevis av verktøy og ressurser som er der ute for designere å gjøre god bruk av!

Det er så mange sjenerøse designere og utviklere som koder opp de kuleste verktøyene og plasserer dem på nettet for bare ett formål: Gjør en annen webdesigner og utvikleres arbeid superenkelt. Det er det! Så hvorfor ikke bruke disse praktiske verktøyene, appene og bibliotekene for å bygge nettstedet ditt? La dem gjøre livet ditt enkelt, akkurat som de er ment til!

Her er en lang liste med ressurser og verktøy som hver designer MÅ ta en titt på! Vi bestemte oss for å gå for CSS-verktøy og -ressurser siden det for øyeblikket er alle hovedelementer som bringer en nettside til live. En annen grunn er fordi de siste "kule verktøyene" som tilbys av nettutviklere tilbys rikelig i CSS (som er forkortelse for: Create Super Sites. Nei, jeg bare tuller.) Så la oss ta en titt!

CSS nettbaserte verktøy, apper og biblioteker

CCS krympe

Nå, ikke få feil idé her. Dette er ikke din typiske "shrink" eller terapeut. Selv om han kan slappe av den overbelastede nettsidekoden din ved å redusere størrelsen til omtrent halvparten eller mindre enn halvparten. Denne kule appen krymper CSS-filen din med en betydelig mengde, noe som gjør den mindre tung og laster raskere.

Besøk nettsiden

CSS Synth

Dette CSS-verktøyet lar deg vise animasjonene dine akkurat slik du vil ha dem. Er det en bestemt rekkefølge som passer best for hvordan animasjonene dine vises? I så fall, bruk CSS Synth til å angi dine preferanser med hensyn til animasjonene dine. Du kan til og med stille inn forsinkelsestid, prefikser, varighet osv. Det er et superenkelt verktøy med et superenkelt grensesnitt.

Besøk nettsiden

CSS Frame Generator

CSS Frame Generator er et flott verktøy der alt du trenger å gjøre er å legge inn XHTML-koden din, trykke på "Gi meg min kode"-knappen (sint), og de vil generere en CSS-ramme for deg i en håndvending.

Besøk nettsiden

Postbar

Lei av copy paste, og-tegnet og <, og >? Postable er en ultravennlig app som setter inn disse skiltene for deg. Elliot Swan, designeren, sa at han selv ble lei av disse kodene, utdrag som må settes inn igjen og igjen. Da han endelig ble lei, laget han Postable.

"Jeg hater absolutt å måtte bytte alle ‘<‘ og ‘>'-tegnene i koden min til henholdsvis ‘<‘ og ‘>'. Jeg hater også å måtte skrive "&" hver gang jeg vil inkludere et og-tegnet. Det gjør det ekstremt irriterende å inkludere kodebiter på bloggen min, og i dag ble jeg endelig lei." – Elliot Swan

Besøk nettsiden

Formalisere

Formalize er designet for å hjelpe designere med deres "skjemaer". Til slutt, når du er klar til å sette opp nettstedet ditt, er det som gjenstår oppgaven med formstyling. Standardskjemaer kan se flotte eller forferdelige ut basert på hvilken nettleser og operativsystem som brukes. Inkonsekvente og vansirede former forbedres ved hjelp av denne appen.

Besøk nettsiden

CSMatic

Webdesignere, dette er det ultimate verktøyet for deg! CSS Matic lar deg generere gradienter, designe kantradiuser, legge til støytekstur og boksskygger. Boksskyggen har alle slags alternativer for å uskarpe radius, endre farger, skyggestørrelse, skyggeretning og mye mer. På samme måte kan du med støyteksturalternativene lage subtile bakgrunnsmønstre, endre støyopasitet og mer.

Besøk nettsiden

CSS Meny Maker

CSS Menu maker lar deg lage fantastiske menyer som er enkle, rene og responsive. Den har alle verktøyene som trengs for å lage tilpassede menyer som er kompatible med CSS og alle nettlesere. Du trenger ikke finne ut av de kompliserte kodene. Bare bruk menygeneratoren til å automatisk generere kule menyer uten problemer. Kildekoden er gitt slik at du kan endre koden og justere den slik du vil.

Besøk nettsiden

Kotatsu

Trenger du et bord på nettsiden din? (Selvfølgelig mente jeg datatabellen. Hva syntes du?) Kotatsu vil være din enkle å lage tabellguide. Glem kodingen og glem Dreamweaver! Bare skriv inn radene og kolonnene dine i denne enkle HTML-tabellgeneratoren, og du er ferdig!

Besøk nettsiden

CSS-knappgenerator

CSS-knappgenerator er en fantastisk app for å lage vakre CSS-knapper. Det beste er at du kan tilpasse knappene dine og få dem til å se akkurat slik du vil at de skal! Gi bort bildene og prøv disse nydelige CSS-knappene. Skriv inn knappeteksten din, juster skriften, gi den et klassenavn, velg knappestilen din og endre fargen! I tillegg kan du tilpasse kantlinje, størrelse, boksskygge og tekstskygge. Så mye kan legges inn i en enkel knapp for å gjøre den akkurat slik du vil at den skal se ut. CSS-knappgenerator vil garantert generere den perfekte knappen for deg på kort tid. Det er en fantastisk tilleggsfunksjon som er laget for nybegynnere.

Besøk nettsiden

CSS-knappbiblioteker

Beautons

Leter du etter solide, flate knapper? Vanlig, stor, flat, tynn, liten, funksjonshemmet, avrundet, plaster type, Beautons har alt. Beautons tror på mottoet "enkelt er vakkert."

Besøk nettsiden

Btns.css

Hvis du liker svart, hvitt, grått eller blått, må du sjekke ut Btns-knappene. De er vakkert utformede knapper for svart-hvitt-tema-websider. Et annet pluss er at deres flathet og enkelhet gjør at de ser fantastiske ut.

Besøk nettsiden

Sosiale knapper v2

Ser du etter en samling brukervennlige, responsive sosiale knapper for din flate nettside? Social Buttons versjon 2 har nettopp det! Alt du trenger å gjøre er å kopiere og lime inn koden i HTML-koden og voila! La seerne dele, tweete eller feste siden de liker med bare et klikk på en knapp.

Besøk nettsiden

CSS-animasjonsbiblioteker

CSShake

Du kan riste opp den siden din ved å bruke CSShake-kodene. Rist disse knappene, teksten, bildene du ønsker og få dem til å flytte til sporet i kodingen. (Selv jeg brukte flere minutter på å holde pekeren min bare for å se hvordan alt rister. Det er så vanedannende!)

Besøk nettsiden

Hover.css

Hover.css er tilgjengelig i CSS, Sass og LESS, og gir deg en samling av CSS3-drevne sveveeffekter. Du kan bruke dem hvor som helst (logoer, knapper, tekst, bilder, lenker, ikoner osv.)! Få dem til å pulsere, vingle, surre, skjeve, sveipe inn og ut, eller noe annet med bare litt kode og fantasi. Det slutter ikke bare der. Dette verktøyet tilbyr også snakkebobler, kantoverganger og til og med papirkrølleeffekter.

Besøk nettsiden

CSS-typografiverktøy

CSSFontStack

CSS Font stack tilbyr en stor stabel med vanlige fonter. Selv om den komplette samlingen er stor, er den ment å være nettsikker. Med disse nettsikre skriftene trenger du ikke å bekymre deg for ikke-forhåndsinstallerte skrifter som ikke støtter alle operativsystemer.

Besøk nettsiden

CSS Typesett

CSS-typesett er et flott verktøy designet for å tillate nettutviklere å teste forskjellige typografistiler. Bare kopier og lim inn teksten og lek med innstillingene (dvs. skriftfarge, størrelse, stil, avstand osv.) og se hva som passer deg best!

Besøk nettsiden

Typeinnstillinger

Typesettings er et fantastisk skriveverktøysett som bruker Ems for å skrive i stedet for REM-er eller piksler. Den er basert på modulær skala, vertikal rytme og responsive forholdsbaserte overskrifter. De modulære skalaverdiene brukes til å angi skriftstørrelse. Standard stiler er et alternativ, og du kan også justere tonnevis av innstillinger (dvs. overskrifter). Totalt sett er det et svært funksjonelt typeverktøysett med mange innstillinger.

Besøk nettsiden

Sassline

Sassline bruker Sass mixins og rems for å jobbe proporsjonalt med grunnlinjenett. Dette gir deg typografisk kontroll og muligheten til å justere tekst og kolonner på rutenettet enkelt. En presis vertikal rytme er satt for å aktivere denne funksjonen.

Besøk nettsiden

FrameWorks

materialisere seg

Ser du etter et helt moderne utseende til nettstedet ditt? Hva med å bruke et rammeverk som etterligner Googles nyeste Material Design-tema? Flatt, dristig og realistisk er det "nye" utseendet de promoterer. Materialize er et "moderne responsivt grensesnitt" basert på Googles materialdesign. Ikonene, typografien, stilene, elementene, komponentene og animasjonene bruker alle materialdesignprinsipper. Det vakre designspråket oversetter med suksess begreper om vitenskap og kunst til teknologi og innovasjon. Dette er definitivt den neste store tingen i år!

Ser du etter et annet Material Framework?

Besøk nettsiden

Material UI

Ta en titt på Material UI som også bruker Googles materialdesignprinsipper for å implementere det på et CSS-rammeverk med en ekstra touch av React-drevne komponenter.

Besøk nettsiden

PowertoCSS

PowertoCSS er et flott rammeverk med alle de fire nødvendige egenskapene til et moderne nettsted: lett, lett å lære, temavennlig og lynrask! Utviklerne hevder at de prøver å holde alt enkelt, enkelt og minneverdig. Jeg plukket også opp et minneverdig sitat herfra!

"Læring sliter aldri ut sinnet." -Leonardo da Vinci

Besøk nettsiden

Grid Designer 2.4

Hvis du ønsker å designe ditt eget rutenett – med litt hjelp – prøv ut grid designer. Det er den perfekte kombinasjonen av et manuelt rutenett og et forhåndsdesignet rutenett. Legg til spesifikasjonene til rutenettet ditt ved å bruke kolonnene tall, kolonnebredder, takrenner og marginer. Spesifiser også typografien din ved å bruke dette verktøyet og eksporter deretter det endelige rutenettet.

Besøk nettsiden

Kompass

Compass er et CSS-forfatterrammeverk med åpen kildekode som bruker Sass med en utvidelse av CSS3. Mønstrene kan gjenbrukes, sprite-skaping er enkelt, og du kan lage vakre typografiske rytmer. Du må være kjent med Sass for denne.

Besøk nettsiden

CSS-ikongeneratorer

Sosa-ikoner

Sosa tilbyr en stor samling av håndlagde pikselbaserte produktikoner. Det er 160+ ikoner tilgjengelig som er enkle, ryddige og responsive. Sosa tilbyr også et stort utvalg av fonter som enhver designer må se på. Temaer/maler og utskrifter er også tilgjengelige.

Besøk nettsiden

Glyphter

Hva er bedre enn en håndfull nyttige og gratis varer? Glyphter er et veldig ressurssterkt verktøy for å generere ikoner. Den tilbyr en enorm samling av søte ikoner som er utenom det vanlige – og gratis!

Besøk nettsiden

Perfekte ikoner

Perfekte ikoner presenterer for deg en perfekt samling av oppløsningsuavhengige sosiale ikoner. Last ned, pakk ut, last opp, kopier, lim inn, og du er ferdig!

Besøk nettsiden

Fargepaletter

Farger

Leter du etter noen iøynefallende fargepaletter? Sjekk ut Farger som presenterer de mest moderne trendfargene i dag. SASS/LESS/Stylus/CSS-variabler og CSS-klasser har blitt brukt til å bygge disse vakre palettene. Designerne ønsker å spre bedre versjoner av gamle farger ved å erstatte dem med dristigere, lysere og bedre farger. De spør alle: "Vennligst hjelp med å kvitte verden for triste farger".

Besøk nettsiden

Pantone

Pantone©-farger er på farten. Åpne deg selv for en enorm samling av Pantone©-farger ved å bruke Sass-variabler. Om du vil ha de lette versjonene av de lyse, er helt opp til deg. De er alle nettvennlige og klar for netthinnen.

Besøk nettsiden

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon