11 CSS-malnettsteder starter ikke fra scratch!

Webdesign er mer tilgjengelig enn noensinne, men det tar fortsatt mye arbeid - og rikelig med ferdigheter. Vil du lære Webdesign? 7 YouTube-kanaler for å få deg i gang Vil du lære Webdesign? 7 YouTube-kanaler for å få deg i gang YouTube har tusenvis av videoer og kanaler for nybegynnere i webdesign. Her ser vi på noen av de beste for å komme i gang. Les mer - for å produsere profesjonelle resultater.

Heldigvis trenger du ikke å starte fra begynnelsen hver gang. Det finnes tusenvis av gratis CSS-maler tilgjengelig online, som alle omfatter moderne designtrender og teknologier. Du kan bruke dem i sin opprinnelige form, eller tilpasse dem for å gjøre dem dine egne.

I denne veiledningen tar vi en nærmere titt på CSS-maler, og hvor de skal finne dem.

Hva er en CSS-mal?

En CSS-mal inneholder ikke bare CSS: det gir deg alt du trenger for å skape et fullt fungerende nettsted. Når du laster ned en, får du vanligvis en mappe med følgende:

• HTML-filer - Du får en HTML-fil for hver side på nettstedet. Den vil inneholde eksempeltekst og bilder som du må bytte ut med ditt eget innhold. Du må også kunne justere metadataene, relatert til ting som nettstedbeskrivelsen.
• CSS-fil - Du får vanligvis en hoved CSS-fil som inneholder all styling for nettstedet, pluss eventuelle tillegg som et tilbakestilt stilark, eller en for webfonter.
• Javascript-fil - Hvis nettstedet inneholder Javascript-funksjoner, bør de ideelt sett inkluderes i sin egen separate fil, i stedet for å bli innlemmet i HTML-dokumentene.
• Bilder, skrifter og ikoner - Eventuelle bilder som brukes i malen, bør også inkluderes. Du vil kanskje beholde ting som ikoner og bakgrunner, men må erstatte de andre stedholderbildene med din egen. Noen tilpassede skrifttyper kan også inkluderes.

I motsetning til de fleste andre typer mal, møter du WordPress, Excel eller InDesign-maler. De 7 beste nettstedene for å finne gratis InDesign-maler: bøker, flygeblad, magasiner og mer. De 7 beste nettstedene for å finne gratis InDesign-maler: Bøker, Flygeblad, magasiner og mer Hva med å bruke en profesjonell Adobe InDesign-mal i stedet for å lage din egen? Her er de beste gratis malingssider. Les mer - CSS-maler krever en viss teknisk kunnskap.

Det er ikke noe vennlig grensesnitt å redigere dem inn, så du må i det minste vite hvordan du finner deg rundt et HTML-dokument bare for å legge til ditt eget innhold. For å lage dine egne tilpasninger trenger du en anstendig kjennskap til CSS Lær HTML og CSS med disse trinnvise opplæringsprogrammene Lær HTML og CSS med disse trinnvise opplæringsprogrammene Nysgjerrig om HTML, CSS og JavaScript? Hvis du tror at du har mulighet til å lære å lage nettsteder fra bunnen av - her er noen gode trinnvise opplæringsprogrammer verdt å prøve. Les mer .

Hva skal du se etter i en CSS-mal

Det er så mange gratis CSS-maler å velge mellom. Så hvordan vet du hva som passer deg? Her er noen ting å se etter:

• Design - Åpenbart vil du ha et nettsted som ser bra ut og reflekterer hvilket bilde du vil skildre. Men vurder også om malen passer til dine behov både nå og i fremtiden. Mange er for en-siders nettsteder; Noen er laget for flere sider. Hvis du trenger den sistnevnte, vurder om du kanskje har det bedre å bruke et CMS som WordPress i stedet.
• Mobil-optimalisert - Mobil nettbruk er nå høyere enn skrivebordet, så det er viktig at nettstedet ditt fungerer riktig på smarttelefoner. En hvilken som helst anstendig CSS-mal skal bruke responsiv design slik at nettstedet fungerer perfekt på alle størrelser. Hvis den valgte ikke gjør det, bytt til en som gjør det.
• Bra skrevet - Last ned malen og se koden før du forplikter deg til å bruke den. Det skal være rent, godt strukturert og enkelt å redigere. Det bør også være SEO-bevisst, med riktig bruk av tittel og overskriftskoder.
• Tillatelse - Pass på å sjekke lisensen for den valgte CSS-malen. Mange er tilgjengelige under en Creative Commons-lisens. Hva er Creative Commons, og bør du bruke det? Hva er Creative Commons, og bør du bruke det? Creative Commons er et sett med lisenser som automatisk gir deg tillatelse til å gjøre forskjellige ting, for eksempel gjenbruk og distribusjon av innholdet. La oss finne ut mer om det og hvordan du bruker det. Les mer, men forskjellige versjoner av denne lisensen avgjøre om du kan redigere malen, om du kan bruke den kommersielt, og om du trenger å kreditere den opprinnelige designeren.
• Addons - Noen CSS-malutviklere tilbyr sitt arbeid på en “freemium” basis. Du får malen gratis, men har muligheten til å betale for ekstra tilpasninger for å gjøre det unikt for nettstedet ditt.

Med alt som forklart, la oss ta en titt på de beste stedene for å finne gratis CSS-maler.

1. Templated.co

Denne fantastiske samlingen med mer enn 800 CSS-maler inneholder stiler for hver klasse av nettsted. De er alle opprettet spesielt for nettstedet, så du bør ikke se dem beskjære opp noe annet sted.

Alle maler er lydhør, og er bygget med HTML5. De er små og lette, med ekstra Javascript-funksjoner, som en videoboks eller rulleeffekter, bare brukt der de legger til ekte verdi for opplevelsen.

2. Styleshout.com

Styleshout tilbyr et stort utvalg av både gratis og premium maler, den tidligere utgitt under Creative Commons-lisensen.

De frie malene dekker et bredt spekter av kategorier, fra hele nettsteder til Kommende snart sider, og til og med den ofte oversett 404-feilsiden. Slik lager du en flott 404-feilside og 10 eksempler. Slik lager du en god 404-feilside og 10 eksempler. En smart måte utformet 404 feil side kan være forskjellen mellom et kjedelig nettsted og en minneverdig nettside. Les mer . Du kan tilpasse dem selv og tilpasse dem til stilen på ditt eksisterende nettsted, eller du kan betale for å få Styleshout til å gjøre det for deg.

3. HTML5Up.net

Denne superstilte samlingen av maler er også super populær. De fleste har blitt lastet ned hundretusenvis av ganger, og det er lett å se hvorfor.

Alle de vanlige kategoriene av nettstedet er tatt vare på, for eksempel blogger og produktside, og det er noen spesielt flotte design for fotografer å vise frem sitt arbeid. De grunnleggende rutenettskjermmalene er ekstremt tilpassbare, mens de flaskere de pleier å bruke Javascript ganske tungt, så det kan være mindre egnet til tweaks.

4. Freebiesbug.com

Hva Freebiesbug mangler i mengde det gjør mer enn i kvalitet. Et nettsted der unge utviklere viser sine ferdigheter, inneholder mange høyteknologiske premiumdesigner.

Nettstedets imponerende samling av gratis maler er perfekt for byråer, fotografer, apputviklere og andre reklamer. Pakket med Javascript og CSS effekter og animasjoner, kan du tilpasse nettstedene, selv om de ofte er så hyggelige at du kanskje ikke vil.

I tillegg inneholder Freebiesbug.com alle slags gratis ressurser for webdesignere, inkludert fonter, lagerfotografier, Illustrator-skisser Betal ikke for Adobe Illustrator: Dette gratis alternativet er flott Betal ikke for Adobe Illustrator: Dette gratis alternativet er flott Adobe Illustrator er kjempebra, men det koster ganske mye på grunn av Creative Cloud-abonnementet. Dette webapp-alternativet er nesten like bra og koster ingenting! Les mer og PSD-filer, og mer.

5. Free-CSS.com

Free-CSS.com er et uten frills nettsted som tilbyr - i skrivende stund - noen 2503 gratis maler, pluss mange premier også, hvis du fortsatt ikke finner det du leter etter.

Med så mange å velge mellom, kan det være litt vanskelig å slå seg på den perfekte designen. Kvaliteten er generelt god, selv om nettstedets 10-års eksistens betyr at det fremdeles er vert for maler skrevet i XHTML. Du vil unngå disse. Den andre tingen er å sørge for at du sjekker lisensen for den valgte malen. De er alle gratis, men noen er offentlige domener, noen Creative Commons, og noen bruker en forfatters spesifikk lisens.

6. OS-Templates.com

28 sider med gratis CSS-maler, for det meste ved hjelp av moderne, nettbaserte oppsett på en enkelt side. Hvis det er enkelt, er det du er ute etter, så er dette stedet å se. Designene er rene, attraktive og enkle å tilpasse.

OS-Templates.com tilbyr også en stor samling av “grunnleggende maler”. Disse gir deg den grunnleggende strukturen for et nettsted i ulike populære layoutordninger (to-kolonne, tre kolonne osv.), Mens de er helt ustylte. Som å bruke standardtemaet i WordPress, gjør det tomme lerretet deg i stand til å slå nettstedet ditt til alt du vil.

7. boag.online

Maglev er en enkelt nettside for en nettside som kan forhåndsvises i action på boag.online.

Det er en rask, ren mal, ideell for en produktside. Den minimalistiske designen forsterkes kun av noen få Jquery-effekter for å hjelpe deg å bla mellom seksjoner. Det enkle layoutet fungerer i seg selv, men det gir også et flott utgangspunkt for dine egne tilpasninger.

8. Pixel Buddha

Pixel Buddhas maler er ikke bare begrenset til nettsteder, de inkluderer også noen for nyhetsbrev.

Uansett er de alle designet med HTML5 og CSS3, og er lydhør så det ser bra ut på en hvilken som helst enhet. Høydepunkter inkluderer Howdy HTML, en vakker portefølje / CV-modell De siste 5 gjenoppbyggingsapplikasjonene og nettstedene du trenger, må du ha de siste 5 gjenoppbyggingsapplikasjonene og nettstedene du trenger. Bruk disse fantastiske gjenoppta byggeplassene og -appene når du trenger for å få din CV til å skille seg ut i mengden. Med de riktige verktøyene kan du bygge et unikt CV raskt, selv uten design ferdigheter. Les mer, og SOHO HTML, en fantastisk leter eCommerce-side som inneholder kilde-PSD-filene på toppen av HTML og CSS.

9. Templatemo.com

Nesten 500 gratis maler er tilgjengelig fra Templatemo. Noen av de beste er de som brytes fri fra Bootstrap-stil rutenettet for å prøve noe annerledes.

De fleste av malene er enkle og ryddige, selv om funksjoner som lysbokser og innholdskarrousler er inkludert der de trengs. Vi liker også det faktum at flere av malene er satt opp til å jobbe med så mange som seks sider som standard. Dette gjør det enklere hvis innholdet ditt ikke passer til den stadig mer vanlige ensides oppsettet.

10. Startbootstrap.com

Bootstrap er et utrolig populært front-end rammeverk som gjør at du kan bygge nettsteder av høy kvalitet på kort tid. Det tar imidlertid litt tid å lære, som er der Start Bootstrap kommer inn.

Denne samlingen av gratis, åpen kildekode maler er alle bygget ved hjelp av Bootstraps nettverkssystem. Opprette webgrensesnitt: Hvor skal du begynne å lage webgrensesnitt: Hvor skal du begynne? Vi viser deg hvordan nettgrensesnitt bryter ned, og påpeker de viktigste konseptene, verktøyene og byggeklosser som trengs for å gjøre deg selv til en 21. århundre webdesigner. Les mer . Det er mer enn 30 å velge mellom. Noen er fullt utformede, og er ment for apper, blogger og destinasjonssider, mens andre er tomme layouter som venter på at du skal style.

11. Bootswatch.com

Til slutt, noe litt mer praktisk. Bootswatch tilbyr 16 åpen kildekode-temaer for å utforme nettsteder bygget med Bootstrap.

Du kan enten bygge nettstedets layout selv ved hjelp av Bootstrap, eller laste ned en av de tomme malene fra Start Bootstrap. Hva Bootswatch gjør er å endre fonter, bakgrunnsfarger og styling for knapper, menyer og andre elementer. Det gir nettstedet ditt et unikt utseende, mens du holder deg til Bootstraps ultra-rene etos.

Det er enkelt å kaste sammen en grunnleggende nettside med Bootstrap, og Bootswatch gir det litt instant polish.

Slik bruker du CSS-maler

Det finnes i hovedsak to måter å bruke maler på. Du bruker dem enten, eller du bruker dem som grunnlag for ditt eget design.

Faren ved bruk av maler er at du ender med et nettsted som er identisk med andres. Velg en populær mal, og det kan være bokstavelig talt titusenvis av identiske nettsteder. Dette er hovedargumentet til fordel for å tilpasse dem.

CSS maler er en flott snarvei for erfarne webdesignere som har en grunnleggende layout i tankene og ønsker å hoppe rett inn i styling det opp.

De er også perfekte for alle som er ny til webdesign. Hvis du kjenner deg rundt HTML og CSS, men ennå ikke har tillit eller kunnskap til å bygge et nettsted fra bunnen av, så fungerer en CSS-mal som både en enkel måte å få et flott nettsted og et fantastisk læringsverktøy.

Du kan behandle det som et pågående arbeid. Start med å bytte ut skriftene. Vil du ha nydelige fonter? Her er 25+ nettsteder der du finner dem, vil du ha flotte fonter? Her er 25 + Nettsteder hvor du finner dem Snarere enn å vade gjennom hundrevis av skrifter, er det noen få nettsteder som hjelper deg med å holde tritt med alle de nye skriftene du vil bruke i ditt neste design. Les mer og endre fargeskjemaet Hvordan velge en fargeskjema som et pro Slik velger du en fargeskjema som en Pro Farger er vanskelig. Det kan virke lett nok å velge en håndfull farger som ser bra ut sammen, men som en designer som har tilbrakt timer, vil tweaking nyanser fortelle deg: det er vanskelig. Les mer, og over tid kan du omorganisere eksisterende elementer, legge til nye, og så videre. Det er ingen bedre måte å lære noe på enn gjennom praktisk, praktisk erfaring.

Bruker du CSS-maler når du bygger nettsteder? Hva er favorittstedene dine for å finne dem? Del dine erfaringer og tips med oss ​​i kommentarene.

Utforsk mer om: CSS, Webdesign.