CSS Mania » Articles

More than 50 ways to navigation menu using CSS

admin — Tue, 08 Jul 2008 18:48:03 +0000

Tab navigation has been one of the most fundamental element in any modern web structure. In order to make sure visitors can properly navigate through the website. One of the biggest challenge web designers and developers faced is to integrate a simple and nice tab navigation that not only don’t confuse, but helps visitors easily understand where they should be clicking.

Kalkulator jednostek - inna wersja

admin — Wed, 07 May 2008 13:34:22 +0000

Może się komuś przydać bardziej rozbudowany kalkulator jednostek, który potrafi zamieniać praktycznie we wszystkich jednostkach:

% — procent
em — em, firet, stopień pisma
ex — wysokość x dla danego kroju pisma (x-height)
pc — pica
pt — punkt (point)
px — piksel (pixel)
in — cal (inch)
mm — milimetr
cm — centymetr

Fiddler

admin — Tue, 25 Mar 2008 15:39:34 +0000

Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.

Fiddler is freeware and can debug traffic from virtually any application, including Internet Explorer, Mozilla Firefox, Opera, and thousands more.

Positioning in CSS

admin — Thu, 20 Mar 2008 09:42:39 +0000

There are many ways to position your elements in CSS. Relative positioning, absolute, float or a combination of them. Those different techniques are clearly explained with example pages and coding examples.

Reset CSS

admin — Wed, 27 Feb 2008 09:08:46 +0000

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. One of the solution give us Eric Meyer.


/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Blueprint 0.7 CSS Framework - final version

admin — Fri, 22 Feb 2008 13:35:33 +0000

Blueprint 0.7 CSS Framework has finally been released.

23 narzędzia do oczyszczania i kompresji CSS

admin — Thu, 31 Jan 2008 21:25:58 +0000

Jest wiele narzędzi, które mogą pomóc “oczyścić”, skompresować czy wskazać błędy w arkuszu stylów CSS. Wypróbuj 23 narzędzia, które mogą pomóc w codziennej pracy z CSS.

Jak znaleźć rozmiar okna przeglądarki?

admin — Sun, 13 Jan 2008 20:05:38 +0000

Znalezienie rozmiaru okna przeglądarki można podzielić na 3 wersje, używając:

window.innerHeight/Width
Dotyczy większości przeglądarek, ale nie IE.
document.body.clientHeight/Width
Dotyczy więszkości przeglądarek, w tym również IE.
document.documentElement.clientHeight/Width
Dotyczy przeglądarek obsługujących DOM, w tym IE.

Więcej informacji znajdziesz w artykule pt. Finding the size of the browser window.

Formularze i Ajax

admin — Sat, 29 Dec 2007 19:53:40 +0000

Formularze wymagają m.in. opracowania wyglądu i funkcjonalności. Nie zawsze o wszystkim pamiętamy podczas ich projektowania. Pewną ciekawą inspiracją może być zbiór różnych formularzy z wykorzystaniem Ajaksa pt. 47+ Excellent Ajax CSS Forms.

Warstwa z okrągłymi narożnikami

admin — Thu, 27 Dec 2007 22:22:55 +0000

Próbowałeś kiedyś zrobić warstwę z okrągłymi narożnikami? Nie jest to trudne i jeden ze sposobów jest opisany w artykule pt. Liquid layer with rounded corners using CSS [en].