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

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:

<div> lite <strong>text</strong> med flera <strong>strong</strong> taggar</div>

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:

<div>
<a href="#">internt</a>
<a href="http://google.se" rel="external">google</a>
</div>

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.

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

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

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

Beautiful CSS Form

This tutorial explains how to design a beautiful form (Facebook inspired) using a clean CSS design with only label and input tags to simulate an HTML table structure

Demo: Se demostration

Advanced CSS Menu Trick

We are now coming to a point where the browsers are supporting a lot of new features, giving us more opportunities to take advantage of previously unused pseudo elements. This example, “advanced css menu trickswill work perfectly in any modern browser, yet still be fully functional in your older version of IE as well.

Demo: Se demostration

7 Principles Of Clean And Optimized CSS Code

But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. Optimization just minimizing file size also about being organized, clutter-free, and efficient.

CSS Step Menu

This menu has a varying amount of steps, dependent upon the type of user accessing the application. Because of that requirement, I needed to write a CSS menu that could easily be changed from 5 steps to 4, 3, or 2 steps.

Demo: Se demostration

CSS Sliding Sprite Windows

I want to share a CSS technique I’ve used alot. I’m sure that you have seen CSS sprite techniques that utilize changing background position on hover to change a link’s state. Also, they have the added benefit of keeping from loading images on hover, limiting lag. This technique is very similar, but works like a charm for IE6 and PNG images.

Demo: Se demostration

Simple Double Quotes

This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote.

Demo: Se demostration

How to Create a Block Hover Effect for a List of Links

Among the many things to like about Veerle’s redesign of her blog is the way she does the hover effects for lists of links, such as those in her “approved” section. Rather than force others to wade through Veerle’s CSS (wow, that’s quite a style sheet!) I thought it’d be helpful to show how to create this “block hover” effect.

Demo: Se demostration

Digg-like navigation bar using CSS

This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.

A CSS sticky footer that just works

We’ve all tried to use a sticky footer one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based sticky footer are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I’ve fashioned a sticky footer that even beginners can get a handle on. It’s been tested in IE 5 and up, Firefox, Safari and Opera.

Demo: Se demostration

Form field hints with CSS and JavaScript

It’s a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this.

Demo: Se demostration

CSS Tooltips – Floating HTML Elements

Tooltips are those li’l tip boxes that show up when you place your mouse over a link, or piece of text. This article shows how to create these tooltips with only CSS. Yes, no javascript.

Advanced CSS Menu

This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS.

Demo: Se demostration