Webbrelaterat - Design och resurser för webbdesigners » Resurser

Special HTML tecken du kan använda till dina webbprojekt

Johan — Fri, 11 Feb 2011 13:26:23 +0000

Dessa tecken är inte bara roliga att använda utan även användbara att symbolisera länkar, händelser till exempel. Man kanske inte ska gå galen och sätta tecken överallt, var som alltid i webbdesign och var konsekvent hela tiden. Här har jag samlat mina favoriter på ett ställe som återkommer många gånger i webbprojekten.

Dollar tecken	$	$
Registered tecken	® eller ®	®
Snabel A tecken	@	@
Copyright tecken	© eller ©	©
Trademark tecken	™ eller ™	™
Black spade suit	♠	♠
Black club suit	♣	♣
Black heart suit	♥	♥
Black diamond suit	♦	♦
Multiplication sign	× eller ×	×
General currency sign	¤ eller ¤	¤
Omega	Ω	Ω
Bullet	•	•
Leftward arrow	←	←
Upward arrow	↑	↑
Rightward arrow	→	→
Downward arrow	↓	↓
Less-than sign	<	<
Greater-than sign	>	>
Single right angle quotation	›	›
Single left angle quotation	‹	‹
Right double angle quotation mark	»	»
Left double angle quotation mark	«	«
Lozenge	◊	◊
Therefore	∴	∴
Per mille	‰	‰
Latin capital letter A with ring	Å	Å
Latin capital letter A with diaeresis	Ä	Ä
Latin capital letter O with diaeresis	Ö	Ö
Latin small letter a with ring above	å	å
Latin small letter a with diaeresis	ä	ä
Latin small letter o with diaeresis	ö	ö
Mellanslag

Snabbtips: Använd CSS3 i IE med ett par enkla Javaskript hack

Johan — Wed, 29 Dec 2010 16:03:25 +0000

Dom senaste månaderna har jag jobbat med en rad roliga projekt och en sån propagandamaskin jag är att tjata på klienter att det är okej att använda CSS3 redan idag. Ibland är kunderna otroligt skeptiska eller kan det vara så att kunden vill verkligen att det ska se lika ut i olika webbläsare. En gemensam nämnare som åter kommer upp är hur löser jag runda hörn, box-skuggningar, pseudo klasser osv utan en rad olika Javaskript hack i alla dem vanligaste webbläsare.

Två små Javaskript bibliotek som verkar göra sitt jobb är..

Modernizr

Detta bibliotek stödjer CSS3 och HTML5 som Multiple backgrounds, box-shadow, Drag and Drop, CSS Gradients och många fler. Besök sidan för mer information. Något som kan vara användbart i många olika typer av projekt.

Se mer på Modernizr

Selectivizr

Selectivizr gör så du kan använda pseudo-klasser i Internet Explorer. Att använda pseudo-klasser (:nth-child(N)) sparar tid och möda och även roligt att använda. Se mer om pseudo-klasser på Sohtanaka och en kort se värd video kan du se på net.tutsplus.

Se mer på Selectivizr

4 Praktiska tutorials med hur du bygger hemsidor i HTML5 och CSS3

Anton — Wed, 30 Jun 2010 23:16:12 +0000

Anton här!
Johan har väldigt mycket att göra med sitt nya jobb, därför erbjöd jag mig att uppdatera lite tills Johan kommer tillbaka och skriva sin suveräna blogginlägg.

Nu när HTML5 och CSS3 börjar bli allt vanligare kan det vara bra att öva sig genom lite praktiska tutorials, därför har jag samlat ihop 4st tutorials som är oerhört bra dig som vill lära dig mer om HTML5 och CSS3.

One page portfolio hemsida

Hur man bygger en one-page portfolio hemsida. Mycket användbart för dig som letar efter inspiration till din nya portfolio hemsida – finns mycket att lära här.

Iphone App hemsida

Hur man bygger en Iphone App hemsida, mycket användbar tutorial. Använder en glow effekt, som är riktigt cool!

HTML5 Portfolio med jquery

En till HTML5 och CSS3 tutorial som berör one page hemsidor. Använder sig av många nya tekniker som tillkommit med CSS3.

Bygg en elegant hemsida i HTML5 och CSS3

Min favorit tutorial, den är oerhört bra. Det ges lite fakta, och tutorialen är väldigt enkel att följa.

Hoppas dessa tutorials var lärorika, lämna gärna en kommentar om vad du tyckte, eller vad du vill se mer av för inlägg.

Verktyg som förenklar vardagen

Anton — Tue, 12 Jan 2010 20:49:31 +0000

Hej! Mitt namn är Anton Ranestam och jag är en webbdesigner från Malmö. Jag driver Ranestam Studio. Ni hittar mig även på Twitter och Facebook där jag figurerar aktivt.
Tack för mig!

Varför Grids och CSS ramverk?

Grids är något som gör hela din designprocess mycket enklare och vänligare för ögat för den som tittar. Det är därför att rekommendera att använda något slags “grid” när du gör din hemsida.
Ett CSS ramverk är bra för att ett ramverk innehåller ett antal färdiga alternativ för att utforma en webbsida genom CSS. Vilket gör hela processen med att bygga en hemsida går mycket fortare och det går åt mindre tid.
Dessa rekommenderar jag:

1kb Grid

1kbgrid är en hemsida där du bestämmer dig för antalet kolumner (9, 10, 12, 14 eller 16), kolumnernas bredd (40, 60 eller 80 pixlar), och hur breda du vill att dina “gutters” vara (10 eller 20 pixlar)
Filen är under eller precis 1kb – därav 1kbgrid.
Kika närmare här; 1kb Grid

960 Grid

960 Grid är baserat på en 960 pixel vidd layout. Den funkar med 12 eller 16 kolumners design. När du laddar ned din layout får du även med ett sheet som kan användas när du skissar ner en hemsida för en kund.
Kika närmare här; 960 Grid

Baseline

Baseline är ett ramverk med både nät-baserad design och bra typografi i åtanke. Det fungerar med HTML 5 och CSS 3 (som kräver en modern webbläsare för alla sina funktioner för att visas korrekt).
Kika närmare här; Baseline

Blueprint

Blueprint är en av de mer välkända ramverken där ute. Förutom nät-verktyg för design, inkluderar Blueprint också stöd för typografi, utskriftsstilar, sprites och mycket, mycket mer.
Kika närmare här; Blueprint

Fluid 960 Grid System

Fluid 960 Grid System är baserat på 960.gs ramen, men med en såkallad fluid bredd och omfattar MooTools och jQuery effekter.
Kika närmare här; Fluid 960 Grid System

Grid Calculator

Grid Calculator är ett enkelt verktyg för att justera storleken på teckensnitt, antal kolumner. Den beräknar automatiskt det totala grid bredden och visar grid layout under räknaren. Mycket bra verktyg!
Kika närmare här; Grid Calculator

15 video tutorials om vad du kan göra i Photoshop CS4

Johan — Tue, 13 Oct 2009 10:16:54 +0000

Jag har inte Photoshop CS4 själv men kan tänka mig vilka häftiga grejer man kan göra när man ser dom här videos. En av stora egenskaperna CS4 har är 3D funktionen – som är väldigt användbar då trenden lutar åt mer organiska, realistiska och 3D på webbdesign sidan. Även ett nytt sätt att hantera bilder – du kan sätta ut punkter på en bild och från punkterna kan du dra, stretcha, förminska, förstora bilden. Jag rekommenderar inte att installera Photoshop CS4 om man har en något sämre dator – CS4 drar mycket minne och mycket kraft från processorn. Även ett hyfsat grafikkort är nödvändigt. Om man inte uppfyller dessa krav så får men ett Photoshop som går i snigelfart.

Webbrelaterat - Design och resurser för webbdesigners » Resurser

Special HTML tecken du kan använda till dina webbprojekt

Snabbtips: Använd CSS3 i IE med ett par enkla Javaskript hack

4 Praktiska tutorials med hur du bygger hemsidor i HTML5 och CSS3

Verktyg som förenklar vardagen

Varför Grids och CSS ramverk?

1kb Grid

960 Grid

Baseline

Blueprint

Fluid 960 Grid System

Grid Calculator

15 video tutorials om vad du kan göra i Photoshop CS4

The Hue/Saturation dialog

Create a colored eye

3D Polaroid Montage in Photoshop

How to Create a Panorama in Photoshop CS4

Combine Two 3D Objects and Simulate a Realistic Shadow

Use Batch Processing Actions

Photoshop CS4: Kuler

Harry Potter Text

Photoshop CS4: Droplets

Photoshop CS4 Zooming and Panning

Photoshop CS4 new retouching tools how to

Adobe Photoshop CS4 Extended Depth of Field Tutorial/Demo

Using the New Layer Palette in Photoshop CS4

Photoshop CS4 New Features: Content Aware Scaling

Adobe Photoshop CS4: 3D Capabilities

Närmare titt på nya HTML5 och CSS3, inspiration, resurser och exempel

Webbdesign trender #3: Transparenta bakgrunder och effekter

Relaterade guider och tips om transparenta bakgrunder

Grymma TEXT editorer för webbutvecklare och kodare

200+ användbara CSS tips, tutorials, verktyg och resurser

16 utmärkta bloggplattformar och CMS för privatpersoner och mindre företag