Pinceladas da Web

Se você possui um blog ou um site que possui muitas páginas, aqui iremos aprender uma maneira muito fácil para que os usuários possam estar visitando essas páginas mais rapidamente, nós iremos utilizar uma técnica chamada de paginação, onde são dispostos vários números de páginas em formato de listas para que o usuário possa estar navegando mais rapidamente pelo site, essa técnica é muito utilizada em fóruns, e também lá no Digg. Para isso iremos utilizar do seguinte código CSS:

body {
	font-size: 100%;
	color: #333;
	background: #FFF;
	font-family: Arial, Helvetica, sans-serif;
}
#pages {
	padding: 3px;
}
#pages ul {
	list-style-type: none;
}
#pages li {
	float: left;
	display: inline;
	margin: 0 5px 0 0;
	display: block;
}
#pages li a {
	color: #88af3f;
	padding: 4px;
	border: 1px solid #ddd;
	text-decoration: none;
	float: left;
}
#pages li a:hover {
	color: #638425;
	background: #f1ffd6;
	border: 1px solid #85bd1e;
}
#pages li.nolink {
	color: #CCC;
	border: 1px solid #F3F3F3;
	padding: 4px;
}
#pages li.current {
	color: #FFF;
	border: 1px solid #b2e05d;
	padding: 4px;
	background: #b2e05d;
}

E agora, no nosso HTML você pode observar que estamos utilizando de listas desordenadas, que para esse fim seria a melhor indicação, e se notar no código CSS, estamos utilizando a propriedade CSS Display:inline, muito utilizada em menus e formulários para dispor o nosso exemplo em linha.

<div id="pages">
	<ul>
		<li class="nolink">« Previous Page</li>
		<li class="current">1</li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">6</a></li>
		<li><a href="#">7</a></li>
		<li><a href="#">8</a></li>
		<li><a href="#">9</a></li>
		<li><a href="#">10</a></li>
		<li><a href="#">Next Page »</a></li>
	</ul>
</div>

Para as páginas que não estão ativas, utilize-se da classe “nolink”, e para a página que está ativa, utilize-se da classe “current”, veja aqui um exemplo em funcionamento.

Tradução do artigo original de: Now CSS

Muita gente ainda desconhece a real utilidade dessas propriedades, eu também confesso que por mim já passou despercebido, mas nunca é tarde para começar a utilizá-las:

1.Clip

clip: rect(5px, 40px, 45px, 5px)

Info – Demo – Artigo

2.Visibility

visibility: (inherit | visible | hidden)

Info – Artigo

3.Text-shadow (Safari 1.1+)

text-shadow: color, x-coordinate, y-coordinate, blur radius
text-shadow: #000000 10px -5px 1px

Info – Demo – Artigo

4.Content

content: "Your browser supports content"

Info – Demo – Artigo

5.Quotes

q { quotes: '"' '"' }

Info – Demo – Artigo

6.Counter-reset e Counter-increment

body {
  counter-reset: section;           /* Set the section counter to 0 */
}
h1:before {
  counter-increment: section;      /* Increment the section counter */
  content: "Section " counter(section) ": "; /* Display the counter */
}

Info – Artigo

7.Marks

@page: { marks: <value>; }

Info – Artigo

8.Page-break-before e Page-break-after

page-break-before: (always|auto|empty string|left|right);
page-break-after: (always|auto|empty string|left|right);

Info – Demo – Artigo

9.Orphans e Widows

orphans: <integer>
 widows: <integer>

Info – Artigo

10.Font-size-adjust

font-size-adjust: number

Info – Artigo

11.Font-stretch

font-stretch: (normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit)

Info

12.Font-variant

font-variant: (normal | small-caps)

Info – Artigo

13.Caption-side

caption-side: (top | bottom | left | right)

Info – Artigo

14.Table-layout

table-layout: (auto | fixed)

Info – Artigo

15.Empty-cells

empty-cells: (show | hide)

Info – Artigo

Adaptação do artigo original de: Anieto2K

De acordo com as especificações do W3C, Visibility:hidden e Display:none tem “aparentemente” a mesma função, “esconder” objetos em uma página, mas com uma única diferença, quando utilizamos visibility:hidden em uma div por exemplo, ela ficará oculta em nossa página, mas o espaço por ela ocupado ainda ficará alí na página, ao contrário de display:none, quando usado além de esconder o objeto, ele some com o espaço ocupado pela mesma também. Ficou meio confuso? Vamos ver um exemplo:

Usaremos como exemplo o seguinte código CSS:

div {
    border:1px solid #000;
}
.visibility {
    visibility:hidden;
}
.display {
    display:none;
}

E utilizar-mos o seguinte HTML:

<div>1 : Caracterizada como uma div normal</div>
<div class="visibility">2 : Essa div utiliza visibility:hidden</div>
<div>3 : Caracterizada como uma div normal</div>
<div class="display">4 : Essa div utiliza display:none</div>
<div>5 : Caracterizada como uma div normal</div>

Agora, vejam um exemplo em funcionamento, se notarem, a div de nº 2, que utiliza visibility:hidden não aparece, mas seu espaço ocupado continua alí, e a div de nº 4, que utiliza display:none, também não aparece, e nem seu espaço ocupado. Vocês sabiam disso? Eu não, acabei descobrindo isso aqui.