Webbrelaterat

26
Oct

Några CSS knep som är värt att ta en titt på

4 Kommentarer | Kategori: CSS

Det kan vara bra att ha några bra CSS funktioner lätt tillgängligt så jag surfade runt på webben i veckan för att se om jag kunde hitta några roliga CSS tricks och effekter som kunde vara användbara för olika typer av projekt. Även om man inte kommer använda nån av dem här exemplaren i helhet så kanske man lär sig nåt nytt knep på vägen.

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.