Webbrelaterat - Design och resurser f�r webbdesigners » CSS

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.

20 nya sp�nnande CSS/jQuery plugins, tricks och skript

Johan — Thu, 22 Apr 2010 20:58:07 +0000

T�nkte egentligen inte posta fler inl�gg innan mitt design byte som kommer snart men det drog lite p� tiden s� har kommer ett under tiden.

Okej, alla �r inte super nya men vissa l�nkar �r verkligen v�rt att n�mna och �r plugins/tricks som man anv�nda i m�nga vardagliga projekt. Dom senaste tv� �ren har det dykt upp massor av h�rliga Javaskript, jQuery plugins och avancerade CSS tekniker som utg�r coola eller interaktiva effekter. Det �r verkligen inte fel att spara en massor av tekniker i din toolbox f�r att underl�tta och minimera din tids�tg�ng f�r dina projekt. Kan �ven tipsa om att m�nga sidor som n�mns nedanf�r har fler tips/plugins s� st�ng inte ner sidan direkt utan g�r g�rna en scan innan.

CSS3 support for Internet Explorer 6, 7, and 8

M�nga CSS tekniker som runda h�rn, box skugga funkar ju inte sj�lvklart i Internet Explorer 6, 7, and 8 men med detta fix s� l�ser du det. Du vill ju inte g�ra din kund besviken?

Ladda ner Bes�k tutorial

Pure CSS Vignette

En cool bildgalleri som �r gjort med avancerad CSS. Kul att l�ra sig nya tricks.

Demo Bes�k tutorial

Sponsor Flip Wall With jQuery & CSS

M�nga av er har s�kert sett annonsplatser i sidobaren p� m�nga sidor. Varf�r inte g�ra den mer intressant och sp�nnande med denna plugin.

Demo Bes�k tutorial

CSS3-Spotlight

Detta kanske �r sv�rt att anv�nda i vanligt projekt men det �r en cool teknik som absolut �r v�rt att titta p�.

Demo Bes�k tutorial

Facebook-style navigation menu with jQuery

Vill du ha en dropdown meny som facebook har? D� �r detta l�sningen f�r dig. Snygg liten funktion som k�nns lite mer sp�nnande �n en vanlig tr�kig variant av dropdown menyer.

Demo Bes�k tutorial

Mega Drop Down Menus w/ CSS & jQuery

Denna j�tte dropdown menyn �r bara ett m�ste i din toolbox.

Demo Bes�k tutorial

CSS3 Glow Tabs with Box Shadow

Visar hur du kan g�ra kombinera olika snygga effekter med CSS3.

Demo Bes�k tutorial

Create a Button with Hover and Active States using CSS Sprites

Med CSS3 kan man g�ra s� snygga knappar utan att designa upp dom och l�gga in dom som bilder. Se hur du kan g�ra h�r.

Bes�k original tutorial

Feature List

En effektiv bildkarusell som �r bra f�r f�retag som vill beskriva lite om produkten.

Bes�k k�lla Demo

Contactable A jQuery Plugin

Det �r inte n�dv�ndigt att anv�nda formul�ren som beskrivs i denna plugin. du kanske bara vill ha “slide” effekten med annat inneh�ll i.

Bes�k k�lla Demo

Switch Display Options

En sk�n display switch som kan vara anv�ndbar n�r man har mycket inneh�ll i en lista och g�ra den mindre och beh�ndigare.

Bes�k k�lla Demo

Micro Image Gallery

Har �r samma effekt som ovan men med andra egenskaper. Se vilken som passar ditt projekt.

Bes�k k�lla Demo

Fly-To-Basket Effect With jQuery

Bygger du en webbshop kan denna effekt vara bra. Kunderna ser att dom har lagt sin produkt i varukorgen.

Bes�k k�lla Demo

Digital Clock (HTC Hero inspired)

Denna effekt kan vara bra f�r bloggar, resesajter, v�der sajter osv. Snygg dessutom.

Bes�k k�lla

Fixed Fade Out Menu: A CSS and jQuery Tutorial

Denna meny sitter fixerad i toppen och n�r du b�rjar skrolla s� tonar menyn ner sig och f�ljer med n�r man skrollar.

Bes�k tutorial Demo

Ketchup Plugin

Anv�ndbarhet �r nummer 1 f�r mig i webbdesign. Varna dina bes�kare n�r dom g�r fel eller har missat n�t med denna plugin.

Bes�k tutorial

TipTip jQuery Plugin

Det finns massor av Tooltip skript men denna �r lite extra snygg och l�tt att anv�nda.

Bes�k tutorial

Understanding CSS3 Gradients

Toningar funkar inte s� j�ttebra i alla webbl�sare i dagens l�ge men l�r dig innan det blir standard f�r denna effekt kommer med all s�kerhet bli riktigt popul�r.

Bes�k tutorial

Quicksand

Detta �r ocks� en form av anv�ndbar effekt. Ist�llet f�r att g�r olika sidor f�r uppgiften s� l�t det h�r skriptet g�ra det �t dig.

Bes�k tutorial Demo

How to: CSS Large Background

Har du n�gon g�ng velat haft en bild som bakgrund men sv�rt och f� den att passa med h�ga och mindre h�ga uppl�sningar.

Bes�k tutorial

15 tips p� snygga webb fonter med CSS @fontface – och hur man g�r

Johan — Thu, 05 Nov 2009 12:50:02 +0000

Att anv�nda @font-face regeln �r som kanske m�nga vet ingen ny egenskap f�r CSS3. Det fanns �ven f�r CSS2 och funkar ocks� f�r Internet Explorer 6.0. Dock s� l�ser Internet Explorer inte TTF format s� bra s� det finns en liten l�sning f�r detta. Bes�k ttf2eot f�r konvertera TTF till EOT.

Hur man l�gger in detta p� din webbsida �r en ganska enkelt egentligen. B�rja med att �ppna din style.css och droppa denna kod snutt:


@font-face {
	font-family: Delicious;
	src: url('Delicious-Roman.otf');
}

@font-face {
	font-family: Delicious;
	font-weight: bold;
	src: url('Delicious-Bold.otf');
}

Och:

h2 { font-family: Delicious, sans-serif; color:#000;}

S� ska det se ut n�t s�nt h�r i dina h2 taggar:

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Snyggt va! Nu har vi g�tt igenom enkelt hur vi l�gger in inb�ddade special fonter p� din webbsida. Men vart hittar man h�ftiga fonter d�.. H�r kommer 15 rekommenderande fonter av lite olika slag. Notera att dessa fonter g�r sj�lvklart att anv�ndas till dina design projekt.

Nevis

Ladda ner fonten h�r

Miso

Ladda ner fonten h�r

Delicious

Ladda ner fonten h�r

JustOldFashion

Ladda ner fonten h�r

DejaVu Sans

Ladda ner fonten h�r

Komika Axis

Ladda ner fonten h�r

Octin College Free

Ladda ner fonten h�r

Tiza

Ladda ner fonten h�r

Journal

Ladda ner fonten h�r

Anonymous

Ladda ner fonten h�r

Aurulent Sans

Ladda ner fonten h�r

Bitstream Vera Sans

Ladda ner fonten h�r

Bitstream Vera Sans

Ladda ner fonten h�r

Kontrapunkt

Ladda ner fonten h�r

Kontrapunkt

Ladda ner fonten h�r

CSS nyb�rjar guide, vad man ska g�ra och inte – del 1

Johan — Wed, 28 Oct 2009 09:57:57 +0000

Efter har sysslat med detta n�gra �r nu s� t�nkte jag dela med mig fr�gor jag sj�lv st�llde n�r jag brottades med att l�ra mig CSS. I detta inl�gg s� kommer jag lista fem punkter som man b�r t�nka p� som nyb�rjare inom CSS (Cascading Style Sheets). Kommer n�sta g�ng lista fem punkter till.

1. Beh�ll din CSS extern

Det finns olika s�tt att anv�nda CSS mallen.

Extern stilmall
Intern stilmall
Inline stil

Extern stilmall

Extern stilmall �r det vanligaste s�ttet att anropa din stilmall och absolut det b�sta s�ttet. Och det man anv�nder n�r man har flera sidor p� sin webbplats. Extern stilmall ska l�ggas in p� f�ljande s�tt inom head taggarna:



	Impedio

Intern stilmall

Intern stilmall anv�nder du n�r man ska stila upp n�got enstaka element eller om sidan �r v�ldigt liten. Du l�gger in intern stilmall p� f�ljande s�tt inom head taggarna:

Inline stil

Detta s�tt �r n�got man inte rekommenderar. F�r att du vill skilja p� din design kod och din markup. Du l�gger in inline stil p� f�ljande s�tt:

Detta �r en paragraf med inline style

2. Testa din kod i olika webbl�sare

F�r att undvika buggar och g�ra det p� r�tt s�tt s� testa din kod hela tiden s� den funkar i alla dom popul�raste webbl�sare. Ha helst olika webbl�sare installerat p� din dator f�r att l�ttare komma �t dina problem. Validera din kod ofta f�r att fels�ka ditt problem. Alltid l�ttare att l�sa och finna problemet tidigare i din process s� det �r n�got att t�nka p�.

3. Anv�nd inte CSS till allt

Att anv�nda CSS till alla taggar �r bara mycket kod i on�dan och din HTML markup blir bara trasslig och sv�rl�st.

D�ligt exempel:



    Hem
    Om f�retaget
    Services
    Portf�lj
    Kontakt

Bra exempel:



	
		Hem
		Om f�retaget
		Services
		Portf�lj
		Kontakt

4. Korrekt hierarki

Att ha en trasslig hierarki i din markup f�rs�mrar bara f�r dig och n�sta person som ska ta �ver koden. Genom att g�ra det p� ett korrekt s�tt s� spar du tid och du f�r en l�tt�versk�dlig kod. Anv�nd g�rna ocks� kommentar taggarna n�r du avslutar stora DIV’ar. Blir l�ttare att hitta en enstaka DIV om du har mycket kod.

D�ligt exempel:


					
					
						F�rstasidan
				Service
							Projekt
				Karri�r
						Kontakt

Bra exempel:


		
			
				Impedio
				
					
						F�rstasidan
						Service
						Projekt
						Karri�r
						Kontakt

5. Prenumerera p� bloggar och resurser

En av dom b�sta s�tten att h�lla sig uppdaterad och l�ra sig nya trender �r att prenumerera och l�sa olika bloggar och andra v�rdefulla resurswebbsidor. I dagens l�ge och med lite disciplin s� kommer du l�ngt att bara jobba hemifr�n fr�n din egna dator.

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

Johan — Tue, 18 Aug 2009 12:45:34 +0000

Det har varit hemskt tyst h�r ett tag. Finns m�nga anledning till det. Bara f�r att ta n�n d�lig urs�kt �r det f�r sommaren har varit h�r plus att jag har jobbat med tv� andra projekt som har �tit upp min tid. En av dom intressantaste delarna i denna bransch i sommar har varit nya HTML5 och CSS3. �ven om detta inte �r en officiell standard �n och det kommer att dr�ja l�nge innan det s� skadar det inte att h�nga med och l�ra dig alla nya roliga tricks. G� djupare och f� en �versikt vad som kommer h�nda med den nya webben.

Get Started with CSS 3

Push Your Web Design Into The Future With CSS3

Introducing the CSS3 Multi-Column Module

CSS 3 selectors explained

CSS3 Background Images (Sizing & Multiple Imgs)

Introduction to CSS3 – Part 1: What is it?

Notering: Gl�m ej att se dom andra delarna ocks�.

The Potential of Web Typography

The fundamental problems with CSS3

HTML 5 and CSS 3: The Techniques You�ll Soon Be Using

Coding A HTML 5 Layout From Scratch

HTML 5 Reset Stylesheet

HTML 5 canvas – the basics

HTML5 Gallery

The Power of HTML 5 and CSS 3

All you ever nedded to know about CSS3

CSS Advanced Layout Module

Rounded Corner Boxes the CSS3 Way

Multiple Backgrounds (CSS3)

Css3 opacity: transparency of an element in css

CSS3 Embedding a Font Face

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

Johan — Tue, 05 May 2009 14:51:23 +0000

Det h�r inl�gget skulle egentligen sl�ppas i fredags men efter s� mycket jobb runtom kring s� har jag inte riktigt haft tid att g�ra ordning den. Om dryga en m�nad s� kommer jag sl�ppa en webbsida som handlar mycket om Photoshop plus att jag designar en ny design till en spelmagasin webbsida och b�da kommer jag kommer visa h�r n�r dom �r klara. Hursomhelst.. Missa inte m�nga av dom h�r tipsen nedanf�r. Jag har verkligen f�rs�kt att ta varierande och moderna CSS tips, tutorials, verktyg och resurser.

12 CSS Tools and Tutorials for Beautiful Web Typography

25 Code Snippets for Web Designers (Part1)

25 Code Snippets for Web Designers (Part2)

Most used CSS tricks

53 CSS-Techniques You Couldn�t Live Without

20 Useful CSS Tips For Beginners

5 Ways to Instantly Write Better CSS

Using CSS to Do Anything: 50+ Creative Examples and Tutorials

CSS Code Snippets : 15 Wicked Tricks

15 CSS Tricks That Must be Learned

8 Premium One Line Css Tips

8 CSS tips for better linking

10 Excellent CSS Tips and Tutorials

50+ Nice Clean CSS Tab-Based Navigation Scripts

12 Principles For Keeping Your Code Clean

Quick & Easy CSS Development with Firebug

20 Useful Resources for Learning about CSS3

5 Popular CSS Frameworks + Tutorials & Tools for Getting Started

20 Ultimate CSS Tutorials That Will Help You Master CSS

43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation

5 Tips For Organizing Your CSS

40+ CSS Generators, Creators, and Makers

‘

Transparent Background, Positioning Problem

5 snabba om CSS selectors och pseudoklasser

Andreas Johansson — Wed, 04 Mar 2009 11:51:12 +0000

Av Andreas Johansson

Oftast s� utnyttjar man inte CSS till 100%. Det finns m�nga knep som kan g�ra ditt HTML-dokument mindre men �nd� b�ttre styrt fr�n CSS-mallen. F�r att komma �t just “det d�r elementet i det h�r fallet” s� kan man anv�nda sig av antingen selectors eller pseudoklasser i CSS.

1. x + y

H�r har vi ett guldkorn som ofta blir bortgl�mt, det betyder att g�r detta om x elementet kommer f�re y elementet. Speciellt anv�ndbart n�r man g�r rubrikniv�er: h1 + h2 { margin-top: -15px; } tar bort 15px fr�n h2s top s� att elementen linjerar b�ttre.

2. x > y

Har du en till exempel en div med flera strong i s� kanske du enkelt vill komma �t strong taggarna.

Exempel:

 lite text med flera strong taggar

Anv�nd:

div > strong { }

Det finns vissa bevis som s�ger att ist�llet f�r div > strong s� renderas div strong snabbare i webbl�saren, b�da fungerar lika bra.

3. x#y/x.y

N�r man s�tter id=”y” eller class=”y” s� ger man elementet ett “namn” som senare kan anropas fr�n CSS-mallen. Det h�r �r v�ldigt grundl�ggande men skriver man ut elementnamnet innan klassen som h1.red s� letas enabrt alla h1-taggar som har class=”red” upp. h2/h3 eller p med klassen red ignoreras.

div#headline kan man skriva ist�llet f�r enbart #headline. # representerar ett ID och till skillnad fr�n class (punkt) f�r ett id bara �terkomma en g�ng i dokumentet. F�rdelen att skriva div#headline �r att du alltid vet vilket element som representerar #headline.

4. x:y

Pseudoelement och pseudoklasser �r en annan grupp som �r bra att kunna. Vi kan bland annat s�tta olika regler beroende vilket spr�k dokumentet �r p� via :lang taggen, eller bara komma �t f�rsta raden eller tecknet i en tagg.

x:lang(sv) s�tter regler p� element x, men enbart ifall dokumentets spr�k �r p� Svenska.
x:first-line Om man vill ha en ingress eller n�got speciellt som ska h�nda den f�rsta raden i varje paragraf (till exempel) s� kan man anv�nda :first-line.
x:first-letter fungerar p� smama s�tt som :first-line men �ndrar enbart det f�rsta tecknet.
x:before anv�nds f�r att l�gga in matrial innan ett element
x:after fungerar som :before men l�gger in efter ett element

5. x[rel~=y]

De s�ger att CSS �r magiskt och att m�jligheterna �r o�ndliga, den h�r taggen representerar en stor del av den magin i s� fall.

Exempel:


internt
google

Hur ska jag nu komma �t enbart den externa l�nken? Enkelt, anv�nd a[rel~=external] { }. Detta kan anv�ndas i fler syften, till exempel om du vill komma �t olika sorters knappar eller input element i ett formul�r:

input[type=button]

Det finns olika s�tt att komma �t informationen p�:

x[rel] kommer �t x elementet som har rel satt.
x[rel=foo] kommer enbart �t x element som har foo som exakt v�rde i rel.
x[rel~=foo] kommer �t element x som har foo som en del av v�rdet i rel.

Dagliga tips #05: CSS Framework, 50+ gratis WordPress tema, PHP tips

Johan — Wed, 04 Feb 2009 22:39:57 +0000

Av vettiga sk�l s� blev det ingen post ig�r men h�r kommer en med ett par extra l�nkar ist�llet. Det finns tv� l�nkar jag verkligen tycker man borde ta en koll p�. F�rsta �r CSS Framework Roundup: Should You Use One?, att skapa en webbsida efter ett Grid system skapar man harmoni och balans p� sin webbsida. Och 50+ gratis tema till WordPress kan vara bra att bokm�rka.

1.50+ Free WordPress Themes for Personal Blogs of High Quality

2.101 Ideas to Get More Freelance Work and Generate New Client Leads

3.Are You Making These 10 PHP Mistakes?

4.Design Resource | 30+ Free Quality PSD Files to Download

5.CSS Framework Roundup: Should You Use One?

6.10 Vector Halftone Patterns

7.15 jQuery Plugins to Fix and Beautify Browser Issues

Dagliga tips #02: jQuery tutorials, javaskript inspiration, resurser om CSS3

Johan — Thu, 29 Jan 2009 16:03:33 +0000

Intressant det �r med jQuery, jag hittade en bra l�nk till 13 animerade jQuery tekniker. Javaskript inspiration kanske ger dig nya id�r. 100 Photoshop brushes kan vara bra och ha l�ttillg�ngligt. Gillar du CSS s� b�r du definitivt ta en titt p� 20 Useful Resources for Learning about CSS3.

1. 50 Websites that make amazing use of javascript

2. 13 Excellent jQuery Animation Techniques

3. 20 Useful Resources for Learning about CSS3

4. Building a jQuery-Powered Tag-Cloud

5. 100 Awesome High Resolution Photoshop Brushes

Dagliga tips #01

Johan — Thu, 29 Jan 2009 00:03:40 +0000

Jag t�nkte prova att posta 1 mindre och kortare post fast en varje dag som inneh�ller 5 intressant l�nkar och 1 lite l�ngre post och djupare post i veckan. Vanligtvis kommer det vara l�nkar till artiklar om tips, analyser och teorier, om du vill l�sa till dig principer. Webb och grafisk inspiration, tips om PHP, HTML/CSS och javaskript. Det �r ungef�r dom rammarna jag kommer h�lla mig runt.

Webbrelaterat - Design och resurser f�r webbdesigners » CSS

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

20 nya sp�nnande CSS/jQuery plugins, tricks och skript

15 tips p� snygga webb fonter med CSS @fontface – och hur man g�r

CSS nyb�rjar guide, vad man ska g�ra och inte – del 1

1. Beh�ll din CSS extern

Extern stilmall

Intern stilmall

Inline stil

2. Testa din kod i olika webbl�sare

3. Anv�nd inte CSS till allt

4. Korrekt hierarki

5. Prenumerera p� bloggar och resurser

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

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

5 snabba om CSS selectors och pseudoklasser

1. x + y

2. x > y

3. x#y/x.y

4. x:y

5. x[rel~=y]

Dagliga tips #05: CSS Framework, 50+ gratis WordPress tema, PHP tips

1.50+ Free WordPress Themes for Personal Blogs of High Quality

2.101 Ideas to Get More Freelance Work and Generate New Client Leads

3.Are You Making These 10 PHP Mistakes?

4.Design Resource | 30+ Free Quality PSD Files to Download

5.CSS Framework Roundup: Should You Use One?

6.10 Vector Halftone Patterns

7.15 jQuery Plugins to Fix and Beautify Browser Issues

Dagliga tips #02: jQuery tutorials, javaskript inspiration, resurser om CSS3

1. 50 Websites that make amazing use of javascript

2. 13 Excellent jQuery Animation Techniques

3. 20 Useful Resources for Learning about CSS3

4. Building a jQuery-Powered Tag-Cloud

5. 100 Awesome High Resolution Photoshop Brushes

Dagliga tips #01

1. CSS Code Snippets : 15 Wicked Tricks

2. 50 Useful Design Tools For Beautiful Web Typography

3. 30 Amazingly Creative Social Bookmarks Icon Sets

4. 50 Simple Ways to Gain RSS Subscribers

5. 22 Well Done State Tourism Websites