Abas com CSS utilizando :target

Postado por: Pedro Rogério em
  • 4 mai
  • 17
Pseudo seletor :target

Para aumentar a usabilidade do seu site o ponto inicial seria dar uma maior atenção aos links internos dos seu site, e hoje vou mostrar aqui a utilização do pseudo-seletor CSS3 :target, que é utilizado para manipular as âncoras do HTML. Já falei sobre a sua utilização em um outro post. Já mostrei em um post anterior os benefícios da utilização do pseudo seletor :target, onde eu tenho a possibilidade de aplicar qualquer estilo a âncora após o usuário clicar na mesma.

O exemplo de hoje foi baseado no exemplo citado na Revista W, edição 101, onde o autor Craig Grannell nos ensina a desenvolver um menu em abas que ao clicar o conteúdo é trocado. Isso até então era possível somente com a utilização de JavaScript, mas com a utilização do pseudo seletor :target isso agora fica fácil.

Continuar lendo »

Central Server

Inherit no Internet Explorer

Postado por: Pedro Rogério em
  • 21 abr
  • 14
Herança em CSS

O que é Inherit?

De acordo com as especificações das CSS 2.1, inherit pode ser definido como:

É uma característica das CSS ao qual podemos definir herança entre os estilos, suportada por todas as propriedades CSS.

Se por exemplo, se definirmos que nossa tag de título h1 tenha os seguintes estilos:

h1{
   color:black;
   padding:10px;
}

E logo após definirmos os seguintes estilos para um link ou qualquer elemento que tenha como pai o h1, dessa forma:

h1 a {
   color:inherit;
}

Continuar lendo »

CSS Star Rating

Postado por: Pedro Rogério em
  • 16 abr
  • 7

Procurando na internet você pode encontrar vários scripts de rating, alguns muito complexos utilizando marcação as vezes desnecessária e outros muitos complicados de customizar. Nesse tutorial, desenvolvido por Henry Hoffman, você aprenderá de uma forma muito simples a desenvolver um sistema de rating utilizando HTML e CSS, utilizando uma única imagem em 3 estados: static, hover e active.

Como?

O segredo consiste em utilizar margens negativas. Primeiramente vamos fazer o download da imagem que será utilizada no tutorial e depois vamos preparar o nosso HTML, onde serão utilizados listas desordenadas:

Continuar lendo »

Não use @import

Postado por: Pedro Rogério em
  • 13 abr
  • 14

O que é @import?

A utilização de @import dentro da tag <style> em HTML era utilizada anteriormente para esconder folhas de estilo do Netscape 4, que não tinha suporte a @import, de maneira que, opcionalmente poderíamos proporcionar um CSS com estilos básicos para esse browser e utilizar diferentes regras em CSS com a utilização de da tag <link />. Esta técnica quando não era proporcionada um estilo com a utilização de <link>, ocorria o inconveniente de o conteúdo aparecer sem qualquer estilo CSS, o famoso FOUC (Flash of Unstyled Content).

Uma outra técnica também que poderia ser utilizada para esconder estilos do Netscape 4 era de especificar o atributo media como “all”, ou uma combinação de vários atributos media, já que ele só entendia o atributo media “screen”.

Continuar lendo »

HTML5 CSS Reset

Postado por: Pedro Rogério em
  • 8 abr
  • 3

Enquanto o HTML5 não foi lançado oficialmente, você deve utilizar de artimanhas para que ele funcione corretamente em todos os browsers, e como eu já disse em um outro post, todos os elementos HTML possuem por padrão algum estilo incorporado, isso não será diferente no HTML5, mas como os browsers ainda não tem pré-definido em seu “core” se as novas tags HTML5 são de bloco e inline, as diferenças entre elas, você por enquanto deve especificar no CSS essa diferença.

Foi aí que pesquisando encontrei mais um Reset CSS agora com foco em HTML5:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,  strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
section, article, aside, header, footer, nav, dialog, figure {
	display:block;
}
Páginas:«12345678...15»