Arquivo da categoria: CSS . Cascading Style Sheets

Aqui você encontra artigos sobre CSS e estruturas web entre outros…

JQuery para produção de Layouts

O JQuery tem me dado um importante suporte para aqueles problemas que o CSS não consegue resolver por falta de compatibilidade em alguns browsers e também para evitar sujar o código HTML com elementos dispensáveis, em ocasiões comuns como no caso da criação de bordas arredondadas.

Nestes cenários, invarialmente temos que criar alguns elementos agregados que servirão para dar exclusivamente suporte visual para o layout.

Não é bom que sujemos nosso HTML com código que não carregue significado semântico nenhum, mas em alguns casos, como ao fazer bordas arredondadas, a criação destes elementos é necessária. É nesse ponto que o JQuery pode nos ajudar grandemente.

Se você é desenvolvedor client-side, tenha em mente que você não precisa saber programar para aprender JQuery. Sua sintaxe é muito simples e pode salvar sua vida quando ocorre problemas de compatibilidade entre browsers. É o que veremos a seguir: como o JQuery pode nos auxiliar em momentos da falta de suporte do CSS.

Criando elementos dinamicamente

Suponha que você tenha um botão simples, onde as bordas são arredondadas. Para facilitar nosso exemplo esse botão não terá altura variável, apenas largura. Eu poderia fazer duas imagens: uma imagem seria a borda da esquerda e a outra imagem a borda da da direita. Se fôssemos fazer com HTML e CSS puro, o código seria esse:

<a href=”#”>texto do botão</a>

O CSS:

.btn {
border-radius:10px;
}

Talvez eu teria que colocar um prefixo para o Frefox (-moz-) entender a borda arredondada, mas vamos simplificar nosso exemplo.

Os IE7-8 não reconheceriam essa propriedade. Mas se seu cliente precisa de que o suporte seja estendido para esses browsers, não há outra escolha a não ser fazer as benditas bordas (ou qualquer outro problema) funcionar no IE.

Uma maneira simples de ser feita é colocando um backgrounds diretamente no LINK, pode ser a borda da esquerda e em outro elemento definiríamos a borda da direita. Criar um elemento para que sua única função seja manter o padrão visual vai de encontro contra toda a ideia de semântica. Fazendo isso também misturamos aquela teoria de separação de formatação com informação. Mesmo assim essa a única solução. É aí que o JQuery vem nos ajudar. O código HTML, caso fossemos criar um elemento extra, seria:

<a href=”#”>texto do botão <span></span></a>

Para mantermos a integridade do nosso HTML, criaremos esse elemento via JQUERY da seguinte forma utilizando a função append:

$(document).ready(function(){
$(‘.btn’).append(‘<span />’);
});

Já que estes elementos são cridos dinamicamente, os leitores de tela e os indexadores de busca não os leem, logo, o código HTML não fica poluído e você não perde com SEO. A manutenção fica simples de ser mantida e o HTML, se já estiver sob programação server-side não precisará ser modificado manualmente.

Escolhendo elementos específicos

Outro problema muito comum é a necessidade de ter que escolher elementos específicos no Layout sem ter que adicionar manualmente classes ou tendo que fazer uma condição maluca para ter que capturar tais elementos. Isso seria muito simples se utilizássemos o pseudo-elemento nth-child do CSS. O nth-child seleciona determinados elementos em uma árvore de elementos. Por exemplo, você tem uma lista e quer pegar o terceiro ítem da lista, você utilizaria algo assim:

ul li:nth-child(3n) {
color:red;
}

O problema? Nada disso funciona nos IEs. Mas isso é extremamente útil e com JQuery você pode adicionar uma classe nestes elementos para formatar com CSS.

A Home deste site foi feita desta forma. O conteúdo foi criado com um simples LOOP do WordPress que joga o HTML do conteúdo em uma única página. Veja que cada um blocos de texto desta home é diferente. Sem poder utilizar o nth-child eu utilizei a função slice do JQuery:

$(document).ready(function(){
$(‘.homeposts article’).slice(1, 3).addClass(‘destaqueprincipal’);
$(‘.homeposts article’).slice(3, 6).addClass(‘destaquethird’);
$(‘.homeposts article’).slice(6, 10).addClass(‘destaques’);
$(‘.homeposts article’).slice(10, 12).addClass(‘chamadas’);
});

Por exemplo, note essa linha:

$(document).ready(function(){
$(‘.homeposts article’).slice(1, 3).addClass(‘destaqueprincipal’);
});

Aqui eu digo que o primeiro, segundo e terceiro e elemento article de .homeposts terão uma classe adicional chamada destaqueprincipal. E a mesma lógica foi aplicada para os elementos posteriores.

Utilizando seletores complexos

Outro problema é a inserção de classes em elementos do mesmo gênero mas com funções diferentes, como os campos de formulários. Normalmente, quando produzimos um formulário de contato, por exemplo, precisamos diferenciar os inputs de texto, inputs de checkbox, inputs de radio, inputs de submit etc. Pode ser que estes inputs sejam criados dinamicamente pelo framework utilizado para auxiliar na programação back-end. Nesse caso não temos controle manual nenhum.

No melhor dos mundos utilizaríamos seletores complexos para aplicar um estilo específico para um dos elementos. A sintaxe em CSS ficaria mais ou menos assim:

input[type=”text”] {
border:1px solid gray;
}

O código acima define uma borda preta para os elementos input que tenham o atributo type cujo valor seja text. Você faria isso para cada um dos tipos dos inputs que você gostaria de formatar:

input[type=”text”] {border:1px solid gray;}
input[type=”checkbox”] {border:1px solid green;}
input[type=”submit”] {border:1px solid red;}
input[type=”radio”] {border:1px solid yellow;}

Esse código pode não funcionar em alguns browsers, por isso faremos com a ajuda de JQuery.
O código é muito simples e na realidade não foge muito da sintaxe do CSS. Adicionaremos uma classe para cada um destes elementos possibilitando a estilização via CSS por meio dessa classe. O código ficaria assim:

$(document).ready(function(){
$(‘input[type=”text”]’).addClass(‘inputText’);
$(‘input[type=”checkbox”]’).addClass(‘inputCheckbox’);
$(‘input[type=”submit”]’).addClass(‘inputSubmit’);
$(‘input[type=”radio”]’).addClass(‘inputRadio’);
});

Com as classes atribuídas, podemos temos controle total via CSS.

Conclusão

Estas pequenas dicas contribuem para soluções sustentáveis para seu código. Com um pouco de planejamento você conseguirá manter o controle total do seu código e um alto índice de compatibilidade com os browsers atuais no mercado. A diminuição de hacks no CSS também diminui bastante já que com uma mesma solução, você abrange até os browsers mais antigos.

Por: Diego Eis

Deixe um comentário

Arquivado em CSS . Cascading Style Sheets, JQuery

Navegação Breadcrumb

O que é breadcrumb navigation ?

Imagine que você quer comprar uma HD e vai procurar na internet.

Você vai no buscador, procura por “seagate 250Gb” e ele te indica uma página que contém o produto.

Logo no topo, você irá encontrar alguns links em sequência, mais ou menos assim:

Informática>Discos Rígidos e Removíveis>Seagate > 250GB

e logo abaixo a descrição do produto.

Breadcrumb Demonstração

Breadcrumb Demonstração

Você se pergunta: Pra que isso?

Esse tipo de elemento é chamado Breadcrumb Navigation. São elementos que ajudam você a navegar melhor pelo site. No exemplo acima, se você quisesse procurar por Hd’s de outros tamanhos de armazenamento, mas da seagate, você intuitivamente clicaria no link >Seagate e acharia uma pagina falando dos vários tipos de hd’s da seagate, incluindo seus vários tamanhos de armazenamento. Logo, você deixará seu usuário mais feliz pela questão de usabilidade.

Outra coisa importante: se o usuário chegou à página do produto diretamente pelo link do buscador, e ele der clicar no botão “Voltar” do navegador, ele voltará para o buscador, o que é ruim para você, pois haverá mais chances do cliente ir para outro site procurar pelo produto. Mas se ele ver mais elementos de breadcrumb navigation, maior a chance do cliente permanecer no seu site procurando por mais coisas.

E por fim, como isso diminuirá o esforço do cliente para atingir uma página, isso qualificará melhor suas páginas. E para um questão de SEO, testes dizem que isso agiliza a indexação das páginas.

Dica de breadcrumb navigation: Colocar varios links para paginas importantes em pontos estratégicos da página, como no menu ou no rodapé.

Dica 2 de breadcrumb navigation: Esquema de paginação sugerido pelo meu amigo Rafael no seu post de acessibilidade. Ex:

<<Previous | 1 | 2 | 3 | 4 | 5 | Next>>

Mas cuidado, não saia colocando link pra tudo pra nao poluir a pagina e para o crawler não achar que você é um spammer. E tome cuidado com os conteúdos duplicados gerados pelos links.

Fonte: MestreSEO

Deixe um comentário

Arquivado em Acessibilidade na internet, CSS . Cascading Style Sheets, Padrões W3C

@font-face – Fonts externas na web

Tipografia na web sempre foi um sonho para todo designer para web.

@fonface

@fonface

Alguns designers que trabalharam durante muito tempo com impressão estranham o tarbalhar com web por conta dessa limitação. A tipografia é parte importante na criação de peças gráficas e na web, isso não poderia ser diferente. Mesmo assim, não havia uma maneira ‘inteligente’ de utilizar fonts externas na criação de layouts para web. Iniciativas como TypeKite Sifr  quebram o galho mas não são o ideal.

@font-face é uma das funcionalidades mais esperadas do CSS. Ela permite que você utilize famílias de fonts em websites sem que o usuário tenha a font instalada no sistema. Veja abaixo a sintaxe:

@font-face {
font-family: helveticaneue;
src: url(‘HelveticaNeueLTStd-UltLt.otf’);
}

Na primeira linha você dá um nome para a Font que você está importando. Pode ser qualquer nome.
Na segunda linha, você inclue o endereço de onde a font se encontra. Para facilitar, crie uma pasta font dentro da pasta onde está o CSS.

Feito isso, você a utiliza como qualquer outra font:

p {
font:36px helveticaneue, Arial, Tahoma, Sans-serif;
}

Fiz alguns testes aqui e em algumas máquinas e conexões lerdas, o browser carrega primeiramente o texto com a font padrão do sistema e logo depois monta o texto com as fonts corretas. Nada de outro mundo para quem utiliza imagens para substituir textos. Mesmo assim, pode ser um incomodo para alguns.

Suponhamos que você queira oferecer a font para os que não a tem disponivel no sistema, mas para que o site carregue mais rápido, queira utilizar a cópia local do sistema do usuário caso ele a tenha instalado:

@font-face {
font-family: helveticaneue;
src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf);
}

O valor local() faz com que o browser procure a font no computador do visitante antes de executar o download da font que está no servidor.

Abaixo segue uma série de formatos que podem ser usados e que os browsers podem adotar:

String Font Format Common extensions
“truetype” TrueType .ttf
“opentype” OpenType .ttf, .otf
“truetype-aat” TrueType with Apple Advanced Typography extensions .ttf
“embedded-opentype” Embedded OpenType .eot
“svg” SVG Font .svg, .svgz

Compatibilidade

A compatibilidade é melhor do que você pode imaginar. Mesmo assim há alguns entraves que chateiam. Entretando, se você pratica Gracefull Degradation, vai achar uma maravilha.

As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT.
Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF.
Você pode converter suas fonts para EOT diretamente no Font Squirrel.

É sempre bom você não abusar. Uma porque o design não fica bonito se você utilizar muitas fonts diferentes. Outra que o site pode ficar carregado. Lembre-se que o browser carrega o arquivo da font para só assim aplicar no layout.

Veja um exemplo pronto.

Fonts pagas

O principal problema com o @font-face o download de font ilegal. Há uma pancada de fonts que são grátis, estas não há problema. Mas há uma outra grande parte que são pagas. O problema é que você tem a licensa de utilizar essa font nos seus projetos, mas não tem o direito de compartilhá-la ou dar para alguém. Quando você utiliza @font-face, você praticamente disponibiliza para o mundo o arquivo da font. Qualquer um pode fazer o download sem problemas. Por isso, cuidado com a font que você utiliza. Certifique-se de que ela é uma font gratuita.

Fonte: Tableless

2 Comentários

Arquivado em CSS . Cascading Style Sheets, XHTML

Cantos arredondados com CSS e JavaScript

Para quem trabalha com a dobradinha xHTML e CSS, sabe da “dor de cabeça” que é para arredondar os quatros cantos de um bloco. No mínimo, você teria que usar 4 elementos, com 1 background para cada canto.

Pois bem. Nesta última semana, estive testando o Nifty Corners Cube, criado pelo Alessandro Fulciniti, e achei muito interessante.

A solução foi testada com sucesso nos browsers IE5.5, IE6 e IE7 beta 2 preview, Opera 8.5, Firefox 1.5 e Safari 2.0.

Em primeiro lugar, você não precisa de imagens para fazer o arredondamento. O seu funcionamento é um tanto quanto simples: no evento onLoad da janela é feito a chamada a função do Nifty.

Exemplo (veja online):

<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>

Explicando: O primeiro parâmetro da função é o nome da camada onde qual será aplicado o efeito. O segundo parâmetro é uma palavra-chave que indica o tipo de arredondamento que será feito (vide tabela abaixo).

No exemplo acima, aplicou-se o arredondamento de tamanho maior (big) na camada #box. Pode-se ainda aplicar o efeito em várias camadas, separando-as por vírgula (veja um exemplo). Da mesma forma, pode-se aplicar utilizando várias palavras-chaves, separando-as por espaço (veja um exemplo).

palavra-chave significado
tl canto superior esquerdo
tr canto superior direito
bl canto inferior esquerdo
br canto inferior direito
top cantos superiores
bottom cantos inferiores
left cantos da esquerda
right cantos da direita
all (padrão) todos os cantos
none nenhum dos cantos
small tamanho dos cantos pequenos (2px)
normal (padrão) tamanho dos cantos normal (5px)
big tamanho dos cantos maior (10px)
transparent aplica transparência do canto para o preenchimento interno (veja um exemplo)
fixed-height para ser aplicado quando uma altura (height) é fixa e definida no CSS

Para maiores informações, veja: Nifty Corners Cube.

Deixe um comentário

Arquivado em CSS . Cascading Style Sheets

Extensão para Firefox – Firebug e CSS

O Firebug é uma extensão para o Firefox que auxilia no desenvolvimento web na edição do CSS, HTML, DOM, JavaScript, Ele foi desenvolvido por Joe Hewitt, um dos criadores do Firefox e em conjunto com outros plugins, como o YSlow você tem uma completa suíte de desenvolvimento e análise de performance de websites.

Aqueles que utilizam o Firebug a primeira vez com certeza não conseguem largá-lo mais, aliás, hoje em dia não existe mais desenvolvimento web sem o uso do Firebug.

Fonte

Deixe um comentário

Arquivado em Browsers, CSS . Cascading Style Sheets

Barra de progresso com CSS

Você por um acaso alguma vez já tentou desenvolver uma barra de progresso e não obteve sucesso como queria? Hoje acabei encontrando uma maneira muito simples e funcional de se obter resultados satisfatórios de barra de progresso com CSS no site de Ben Ogle’s.

Basicamente você deve fazer o uso de três divs: uma div que atuará como container, outra que será a cor do progresso e a última para o seu texto. Tanto a div container quanto a div com o progresso devem conter uma imagem de fundo. A imagem utilizada é uma png transparente para que seja mostrada a cor de fundo da div.

HTML

A estrutura do HTML é muito simples:

1.<div>
2.    <div style=”background-color: #0a0; width: 40%;”>
3.        <div>
4.            Texto aqui!
5.        </div>
6.    </div>
7.</div>

Observe o atributo style. A cor definida é a cor da barra de progresso bem como a largura deve ser definida em porcentagem.

CSS

01..meter-wrap{
02.    position: relative;
03.}
04.
05..meter-wrap, .meter-value, .meter-text {
06.    /* Altura e largura de sua imagem */
07.    width: 155px; height: 30px;
08.}
09.
10..meter-wrap, .meter-value {
11.    background: #bdbdbd url(/path/to/your-image.png) top left no-repeat;
12.}
13.
14..meter-text {
15.    position: absolute;
16.    top:0;
17.    left:0;
18.    padding-top: 5px;
19.    color: #fff;
20.    text-align: center;
21.    width: 100%;
22.}

Imagem

Observe agora a imagem utilizada no exemplo, ela foi coloca em um fundo colorido para que você possa notar os cantos da imagem:

Barra de progresso

Vejam agora o exemplo funcional de barra de progresso com CSS.

Fonte

Deixe um comentário

Arquivado em CSS . Cascading Style Sheets

Solução definitiva – PNG Transparente no IE6

Muitos desenvolvedores não sabem, mas o IE6 e versões anteriores possuem um terrível problema com PNG’s de 24 Bits, onde ele não processa o canal Alpha da imagem, com isso toda a transparência fica com o fundo meio “esverdeado” (problema esse já corrigido no IE7). Hoje em dia existem vários scripts que corrigem esse problema de transparência no IE, mas todos sofrem da mesma deficiência, que é a não implementação de background-position, background-repeat, link que não funciona entre outras coisas.

Já testei várias formas diferentes de correção, mas finalmente encontrei um script JS que funciona perfeitamente, onde é implementado o tão sonhado background-position e background-repeat, lhes apresento o DD_belatedPNG, um JavaScript extremamente pequeno, que em sua versão comprimida chega a aproximadamente 6KB. Sua utilização é extremamente simples, basta você baixar o arquivo JS e fazer uma chamada para o mesmo da seguinte forma dentro do header do seu site:

<!–[if IE 6]>
<script src=”DD_belatedPNG.js” type=”text/javascript”></script>
<script>
/* Exemplo de utilizacao */
DD_belatedPNG.fix(‘.png_bg’);
</script>
<![endif]–>

O Script foi inserido na página via comentários condicionais, para que seja lido somente pelo Internet Explorer 6 e menores, os outros browsers o consideram como um simples comentário HTML. Da forma citada, todos os elementos que possuírem a classe “png_bg” serão afetadas pelo Script as imagens começarão a funcionar corretamente. Uma outra forma de utilização é chamando os elementos DOM:

Exemplo 1

Exemplo 2 – Com background repeat

Exemplo 3 – Com background position

Fonte

Deixe um comentário

Arquivado em CSS . Cascading Style Sheets, Usabilidade na internet