E então?

Mais reciclagem.

Reciclando velhas fotos.

Eu trabalho o dia inteiro e chego em casa morta, geralmente depois de fazer mais alguma coisa. Tudo o que quero é tomar uma sopa, que fique pronta em menos de cinco minutos e suje apenas uma xícara. A primeira opção são as sopas instantâneas de pacotinho. Baratinhas, fáceis e rápidas. Tem gosto de humm, sopa de pacote, tipo sabor morango que nunca viu um morango por perto, sem falar na quantidade de sódio - sal, por porção.

Acabei desenvolvendo um sistema e várias receitas que dão o mesmo resultado e além de terem gosto de comida de verdade, fazem bem pra você. Vou mostrar a de lentilha mas ervilha, feijão de qualquer variedade, grão de bico ou qualquer outra leguminosa - noves fora o amendoim - vão dar um resultado parecido.

Equipamento:

Panela
Liquidificador
Formas de gelo
Freezer

Nessa versão os ingredientes são:

Lentilha
Sal
Cebola ou Alho ou cebola e alho
Caldo de bacon - use vegetais se você é vegetariano
2 colheres de sopa de óleo de canola, soja ou girassol

1) Coloque a lentilha de molho - eu faço isso com todas as leguminosas. Cozinhar esse tipo de vegetal é em grande parte o processo de rehidratação portanto o molho acaba reduzindo bastante o tempo de cozimento. Umas duas horas bastam, mas se precisar ser a noite toda não tem problema.

2) Cozinhe a lentilha até que ela desmanche. Só em água. Legumes devem ser cozidos em água primeiro, sem sal. Temperar legumes é outro processo. Se você não for usar panela de pressão - não precisa, é bem rápido - remova a tampa quando ferver.

3) Faça seu tempero. Frite a cebola e o alho no óleo, coloque um pouco de sal e um cubo do caldo de bacon. A idéia aqui é fazer um tempero bem leve, que não deixe o legume com um gosto muito característico. Esqueça ervas, pimenta e tudo que fica uma delícia, mas é muito marcante.

4) Adicione a lentilha ao tempero. Deixe cozinhar por alguns minutos.

5) Sirva um prato e vá comer. Deixe o resto esfriando por uns vinte minutos.

6) Agora é a parte divertida. Coloque a lentilha no liquidificador e bata até ficar cremosa. Distribua o creme de lentilha em formas para gelo e leve ao freezer. Depois que estiver sólido, retire das formas e guarde em um pote plástico tampado no freezer. Pode jogar todos os cubos juntos, não vai grudar muito. Se você encontrar os cubos muito grudados é inclusive um sinal de que faltou luz por muito tempo e a comida que estava guardada provavelmente estragou.

7) Para comer basta adicionar alguns cubos - cinco ou seis - à uma tigela com meia xícara de água. Microondas por 3 minutos e adicione tempero depois. Shoyu, pimenta, salsinha, manjericão, gengibre ralado. Cada dia um tempero diferente e cada dia você come uma sopa diferente. Tão rápido quanto de pacote e muito, mas muito mais gostosa.

Descobri ontem essa loja de lingerie ali no Market Place, quando fui resolver outros problemas.

Entrei só porque estava matando tempo e tomando um milk shake, fiquei conversando com a vendedora, até que ela pronunciou as palavras mágicas “a gente trabalha com tamanho internacional de sutiã”.

Eu tenho um problema com tamanhos de sutiã, tenho as costas estreitas e preciso de um bojo maior. O que sempre acontece é a escolha entre duas opções igualmente ruins: bojo apertado - que causa a síndrome dos quatro peitos - ou costas largas - que nunca para no lugar. Por isso o som de “numeração internacional” foi como se uma sinfonia começasse a tocar.

A numeração internacional é um sistema de gradação de tamanhos que leva em conta a largura das costas e o tamanho do bojo em separado. Ou seja, uma mulher com seios pequenos e costas largas encontra um tamanho que serve, uma mulher com costas estreitas e seios grandes também.

Em um dado momento de profundo desespero, considerei comprar sutiãs pelo Ebay. Porém os estilos que acabam sendo vendidos em sites de leilão são mais decorativos do que básicos e eu não vejo objetivo em ficar exibindo rendas e bordados na roupa do trabalho. Esse tipo de decoração aparece sim através da roupa. Um pouco assustador também é comprar um sutiã por um tamanho que nunca se experimentou. Segui todas as instruções para medir e calcular o tamanho, mas ainda fiquei insegura. O único outro senão é pagar o envio, que sempre vai ser algo por volta do valor da peça em si. As dúvidas eram tantas que nunca consegui concluir uma transação, apesar de ter visto um ou dois modelos mais básicos que me interessaram.

Voltando ao ponto: olhei para uma arara escondidinha no fundo da loja, onde ficam os modelos básicos e comecei a escolher. Escolhi três modelos, todos em preto e no tamanho correspondente ao que eu tinha medido para a busca no Ebay: 36 B - que são 36 polegadas de circunferência do torso com o bojo tamanho B, 80 B em centímetros. O modelo com o bojo rígido não ficou bem posicionado contra as costelas e por isso acabei levando um modelo com o bojo de tecido, coisa que não fazia há anos. Em duas cores - branco e preto, porque quando se acha algo assim há de se levar um para cada tipo de blusa.

Já usei os dois e são os sutiãs mais confortáveis de toda a minha vida. Os mais caros também, mas nesse caso, considero um investimento. Lingerie no tamanho correto faz todas as suas roupas vestirem melhor então não são apenas duas peças: é praticamente um guarda-roupa inteiro novo.

Só não entendi porque a loja não tem um cartaz enorme avisando que eles trabalham com essa numeração. Aposto que teria fila em frente se o mulherio descobrisse. Praticamente todas as minhas amigas tem problema com tamanho de sutiã, fora as poucas que não usam.

O site da marca é meio inútil, daquelas coisas em flash que o povo da moda adora, mas que não permite links internos e que tem um fundo cheio de textura deixou o logo desse jeito. Lá no fundo tem a informação na numeração internacional, mas o foco mesmo é nas coleções. Pelo menos tem o endereço das lojas.

Eu fico aqui torcendo que nos próximos anos essa moda se espalhe e tome conta do mercado brasileiro. No meio tempo, serei cliente fidelíssima.

Encontrei esse guia outro dia e achei bom demais para não ter uma versão em português. Estava desistindo, quando lembrei dos direitos autorais, mas ao olhar o rodapé vi escrito Creative Commons. Traduzi e segue abaixo. A versão que ele aplicou foi a “Attribution and Share Alike”, a exceção está aberta, esse conteúdo se mantém com a mesma licença. O resto do blog, não.

A versão em inglês está disponível aqui. O crédito é de Dustin Diaz.

Sem mais delongas:
Não existe um guia oficial para todas as propriedades abreviadas do CSS. Direto ao ponto: todas as especificações de CSS que encontrei tem meia dúzia de exemplos e depois disso você deve ser capaz de se achar. Hum. Nos últimos anos, descobri alguns fatos interessantes sobre essas abreviações… por isso esse guia surgiu.

Background

Fundos podem ser confusos, mas são bastante eficazes quando condensados corretamente. A sintaxe para declarar o background abreviado é:

propriedades background

element {
background-color: cor|| #hex || (rgb / % || 0-255);

background-image:url(URI);
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-position: X Y || (top||bottom||center) (left||right||center);
background-attachment: scroll || fixed;
}

Acredite ou não, todas essas propriedades podem ser combinadas em uma única propriedade, como se vê abaixo:

a propriedade background abreviada

element {
background:
#fff
url(image.png)
no-repeat
20px 100px
fixed;
}

O desconhecido

Muitas vezes os desenvolvedores se perguntam:”E se eu deixar esse valor vazio, ou aquele outro? Como isso vai afetar o design?”. Boa pergunta.

Os valores padrão serão assumidos, quando estiverem declarados na propriedade. Veja abaixo.

valores padrão para a propriedade background

element {
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;
}

Moral da história: cuidado com o que você não declara. Por não colocar um valor numa propriedade abreviada, você está explicitamente declarando os valores default acima. Observe o exemplo abaixo:

background abreviada, exemplo implícito

element {
background:red url(image.png);
}

Isso é o mesmo que declarar os seguintes valores:

background abreviada, exemplo explícito

element {
background:red url(image.png) repeat top left scroll;
}

Font

A fonte é talvez a propriedade mais complexa na utilização abreviada. Ela segue a mesma regra da propriedade background: tudo que não estiver presente utilizará os valores padrão. Segue a declaração completa:

Propriedades font

element {
font-style: normal || italic || oblique;
font-variant:normal || small-caps;
font-weight: normal || bold || bolder || || lighter || (100-900);
font-size: (número+unidade) || (xx-small - xx-large);
line-height: normal || (número+unidade);
font-family:nome,”outros nomes”;
}

Os valores padrão para a propriedade fonte abreviada são os seguintes:

valores padrão para as propriedades font

element {
font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;
}

E claro, sem mais embromação, segue a declaração da propriedade fonte abreviada.

a propriedade fonte abreviada

element {
font:
normal
normal
normal
inhert/
normal
inherit;
}

É aqui que fica confuso. O fato de que font-style, font-variant e fonte-weight são “normal” por definição, não quer dizer que você não precise prestar um pouco de atenção quando aplicar o estilo aos elementos que possuem um estilo por padrão do navegador, como h1 a h6 e strong ou em. Por exemplo, ao aplicar o estilo ao elemento strong:

Elemento strong com estilo de fonte

strong {
font:12px verdana;
}

Ao escrever a regra acima, você está implicitamente removendo o negrito que é aplicado por padrão aos elementos strong.

Para terminar, pelo menos a fonte, segue um exemplo no mundo real:

exemplo de fonte abreviada - implícito

p {
font:bold 1em/1.2em georgia,”times new roman”,serif;
}

Isso é o mesmo que declarar as seguintes propriedades
exemplo de fonte - explícito

p {
font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:1em;
line-height:1.2em;
font-family:georgia,”times new roman”,serif;
}

Border
As mesmas regras se aplicam aqui. É só o que você precisa saber.

Propriedades border

element {
border-width: número+unidade;
border-style: (numerous);
border-color: color || #hex || (rgb / % || 0-255);
}

é o mesmo que:

Propriedade border abreviada

element {
border:
4px
groove
linen
}

Não me pergunte como isso fica. O fato de que “linen” está ali, quer dizer que as coisas vão ficar estranhas. Pode esperar, que ainda vai ficar mas bizarro…

Exemplos de border

p {
border:solid blue;
}
/* cria uma borda sólida de 3 pixels
não me pergunte de onde vieram os 3 pixels */

p {
border:5px solid;
}
/* cria uma borda sólida de 5px…
o padrão deve ser preto?! */

p {
border:dashed;
}
/* cria uma borda de 3pixels, preta e interrompida
calma que tem mais */

p { border:10px red; }
p { border:10px; }
p { border:red; }

/* esses nem funcionam */

Uma coisa a se notar quando se declara uma borda sem uma cor explícita. O padrão é preto, a não ser que esteja explicitamente especificado ou seja herdado de outra propriedade color. Veja os exemplos abaixo:

Exemplos de cor em border

p {
border:dotted;
color:red;
}

/* cria uma borda pontilhada de 3 px VERMELHA*/
/* —————————– */
body {
color:blue;
}
body p {
border:5px solid;
}

/* cria uma borda de 5px sólida e AZUL */
/* —————————– */

Entendeu? Ótimo.

Margin e Padding

Essas são as mais simples. Basta pensar no ponteiro de um relógio apontando para o 12 e seguir a hora. Para simplificar, vamos trabalhar com a margem (margin), mas tudo se aplica exatamente igual ao enchimento (padding)

Propriedades margin

element {
margin-top: número+unidade;
margin-right: número+unidade;
margin-bottom: número+unidade;
margin-left: número+unidade;
}

… combinado com os super poderes da margem:

a propriedade abreviada margin

/* topo direita abaixo esquerda */
element {
margin: auto auto auto auto;
}

É possível declarar a sua margem com um, dois, três ou quatro valores. Veja como ela se comporta em cada caso:

Brinque com a margem

/* adiciona uma margem de 10px para todos os lados*/
element {
margin:10px;
}

/* adiciona uma margem de 20px ao topo e abaixo
e uma margem de 5px a esquerda e a direita*/
element {
margin:20px 5px;
}
/* adiciona uma margem de 50px ao topo
e de 10px para a direita e esquerda
e de 300 px abaixo */
element {
margin:50px 10px 300px;
}

Entendeu? Divertido, não? Se você ainda está lendo deve gostar.

Outline

Essa propriedade não é muito usada, provavelmente por conta da falta navegadores que suportem o CSS 2.1. Essa é uma propriedade, eu garanto, e como tal conta com sua versão abreviada. Funciona quase igual à borda abreviada. Para que possamos chamar isso aqui de guia, ela tem de estar presente. Então:

Propriedades outline

element {
outline-width: número+unidade;
outline-style: (vários);
outline-color: cor || #hex || (rgb / % || 0-255);
}

Abreviada:

Propriedade outline abreviada

element {
outline:3px dotted gray;
}

Para evitar a repetição, confira como a propriedade border abreviada funciona e entenda o funcionamento esperado e os inesperados dessa propriedade.

List-style

É isso, o último. Não é muito usado, por isso guardei até o fim. Segue:

Propriedade list-style

element {
list-style-type: (vários);
list-style-position:inside || outside;
list-style-image:url(image.png);
}

Os valores por padrão:

element {
list-style-type:disc;
list-style-position:outside;
list-style-image:none;
}

Para não nos estendermos, segue um exemplo final:

exemplo abreviado de list-style

ul li {
list-style:square inside url(image.png);
}

/* nesse caso, se a imagem.png não estiver disponível
exibe um quardado */

FIM.
Espero que esse guia sirva de referência por vários anos para as suas dúvidas sobre abreviações de CSS.