Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

Ao submeter seu site ao validador de CSS do W3C, já deve ter notado algumas advertências em relação a definição de cores de background, muita gente não liga para isso, mas é muito importante desde o momento em que, se o usuário ao visitar seu site, com CSS habilitado e imagens desabilitadas, e não haja uma cor de background definida para os elementos da página, pode ocorrer de que o usuário não vai conseguir ler nada, pois a cor do texto pode ser a mesma do site, ou até mesmo se o usuário navegar com uma folha de estilos definida por ele em que ambas tem a mesma configuração, a página vai parecer ser vazia. Portanto, sempre defina uma cor de background para os elementos de sua página.

Post Original: Ainda a Pensar: background-color e color.

São 147 cores com seus respectivos códigos hexadecimais definidos de acordo com a especificação de cores das CSS3, coloquei os arquivos aqui para download em PNG e PDF.

Vi aqui: PageFace.

Para provar todo o poder das CSS, dêem uma olhada nesse menu circular, totalmente desenvolvido com HTML e CSS, e nada de JavaScript.

Antigamente para se fazer rollover em imagens utilizava-se de JavaScript, utilizando os eventos onMouseOver e onMouseOut, e também de 2 imagens separadas, mas com CSS, você simplesmente precisa de uma só imagem com os 2 estados, ode iremos deslocar a imagem para as coordenadas necessárias para que tenhamos o efeito de rollover. Utilizaremos a seguinte imagem nesse tutorial:

O CSS:

a.srollover {
    display: block;
    width: 22px;
    height: 22px;
    background: url("pbox_close.gif") 0 0 no-repeat;
    text-decoration: none;
}

a:hover.srollover {
    background-position: -22px 0;
}

Se repararem, a imagem possui 44 pixels de largura, mas no CSS eu só marquei 22 e posicionei a imagem a 0 pixels de sua margem, por que logo após, eu criei uma regra para que a imagem se desloque no eixo X 22 pixels para a esquerda, é onde acontece o efeito de rollover. O HTML fica da seguinte forma:

<a class="srollover" href="#">&nbsp;</a>

Veja um exemplo em funcionamento. Esse tutorial foi retirado do site: Find Motive.

Com a utilização das CSS para formatar nossas páginas, a cada dia nós vamos descobrindo técnicas novas, e isso acaba nos oferendo um maior controle sobre nosso código sem sobrecarregar o HTML com várias classes e id’s desnecessários. Para conseguirmos essas melhoras, devemos utilizar de seletores, que desta forma podere-mos manipular um ou vários elementos que temos em nosso HTML. Sua função é semelhante as expressões regulares, onde os seletores nos permitem utilizar de caracteres especiais para nos referirmos a um elemento ou a vários deles.

Seletores

Ampliando os seletores

Além desses seletores, poderemos fazer a utilização de vários outros, os chamados pseudo-elementos.

:first-line

Se refere a primeira linha do elemento, geralmente muito utilizada em textos:

p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps}

<p>Some text that ends up on two or more lines</p>

Propriedades

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

:before

Utilizado para inserir conteúdo antes de qualquer elemento:

h1:before { content: url(beep.wav) }

:after

Utilizado para inserir conteúdo depois de qualquer elemento:

h1:after { content: url(beep.wav) }

Pseudo-elementos e Classes CSS

Juntos nos permitem manipular vários seletores para focalizar em um elemento ou um pseudo-elemento em concreto:

p.article:first-letter {color: #FF0000}
<p class="article">A paragraph in an article</p>

Múltiplos pseudo-elementos

Nos permite utilizar vários pseudo-elementos sobre un mesmo elemento:

p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}
p:first-line {color: #0000FF}

<p>The first words of an article</p>

Compatibilidade

Esse post é uma adaptação do artigo original de: Anieto2K.

É o que propõe em seu site Katherine Angela Gallia, ela utiliza 6 folhas de estilo diferentes em seu site para determinados horários do dia somente utilizando JavaScript, ela utiliza-se do seguinte código:

<script language="JavaScript">
<!-- Begin
function getCSS()
{
 datetoday = new Date();
 timenow=datetoday.getTime();
 datetoday.setTime(timenow);
 thehour = datetoday.getHours();

 if (thehour > 20)
  display = "tree_twilight.css";
   else if (thehour > 17)
  display = "tree_sunset.css";
 else if (thehour > 14)
  display = "tree_afternoon.css";
 else if (thehour > 11)
  display = "tree_noon.css";
 else if (thehour > 7)
  display = "tree_morning.css";
 else if (thehour > 4)
  display = "tree_sunrise.css";
 else if (thehour > 1)
  display = "tree_twilight.css";
 else
  display = "tree_sunset.css";

 var css = '< '; css+='link rel="stylesheet" href=' + display + ' \/';  css+='>';

 document.write(css);
// End -->
}
</script>
<script language="javascript">getCSS();</script>

Onde:

• Das 5 ás 8 da manhã: Ela utiliza o tema sunrise.
• Das 8 da manhã até o Meio-dia: Ela utiliza o tema morning.
• Do Meio dia ás 3 da tarde: Ela utiliza o tema noon.
• Das 3 ás 6 da tarde: Ela utiliza o tema afternoon.
• Das 6 da tarde ás 9 da noite: Ela utiliza o tema sunset.
• E das 9 da noite ás 5 da manhã: Ela utiliza o tema twilight.

Caso o usuário navegue com o JavaScript desabilitado, ela utiliza o tema sunset:

<noscript>
<link rel="stylesheet" href="tree_sunset.css" type="text/css">
</noscript>

Até me deu vontade de fazer isso aqui no meu blog agora.

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

VocÊ perdeu algum post da série? Basta estar dando uma olhada aqui. Mas vamos ao que interessa, hoje iremos ver mais informações sobre a propriedade background, com ela você pode definir o fundo de um elemento com apenas uma linha:

background: #ffffff url(endereço_da_imagem) top left no-repeat fixed;

Valores

• attachment
• color
• image
• position
• repeat

Você também pode definir os valores individualmente.

Background Attachment

Se você estiver utilizando uma imagem de fundo em seu site, você pode definir em background attachment para que ele fique fixo, para parecer que o texto está flutuando sob o background ou scroll, para que ele role junto com a página.

Valores

• fixed
• scroll

Background Color

Para especificar a cor de fundo de um elemento, utilize-se da propriedade Background Color:

background-color: valor;

Valores

• Nome da cor
• Número hexadecimal
• Código da cor RGB
• Transparent

Background Image

Para especificar uma imagem de fundo para um elemento, utilize a propriedade Background Image:

background-image: url(endereço_da_imagem);

Valores

• url
• none

Background Position

Você pode posicionar a imagem utilizada no fundo de qualquer elemento, para isso utilize-se da propriedade Background Position:

background-position: value;

Valores

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
• x-% y-%
• x-pos y-pos

Background Repeat

Você pode ajustar uma imagem de fundo usada em qualquer elemento para que ela se repita nos eixos x e y, basta utilizar a propriedade Background Repeat:

background-repeat: valor;

Valores

• no-repeat
• repeat
• repeat-x
• repeat-y

Tradução do artigo original de: CSS Basics.

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.