Todos os posts da Categoria:
Drop Caps com CSS
Drop Caps são muito utilizados em livros, onde a primeira letra do parágrafo ocupa 2 ou mais linhas do texto, se destacando.
Para conseguir esse efeito é muito simples, observem a seguinte marcação HTML:
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
Agora, no css, faremos o uso do pseudo-seletor :first-letter, onde iremos aplicar estilos a primeira letra do parágrafo:
p:first-letter {
font-size: 4.2em;
float: left;
line-height: 0.6em;
margin: 0.13em 0.13em 0.13em 0;
}
Como viram, não existe segredo, para um melhor entendimento do tutorial, é só dar uma olhada nesse exemplo.
Diferença entre position: static, relative, absolute e fixed
Neste tutorial vamos aprender a diferença entre position: static, relative, absolute e fixed no CSS.
position: static
Esse é o valor default para todo elemento HTML, o que significa que o elemento não tem posicionamento definido e seu fluxo ocorre normalmente no documento HTML.
#div1 {position: static}
Não é necessário definir position:static para os elementos da página pois esse é o valor default.
position: relative
Especificando position:relative agora você pode utilizar top ou bottom, right ou left para posicionar os elementos na página em relação ao lugar que ele ocuparia no fluxo do documento.
#div1 {
position: relative;
top: 40px;
left: 20px;
}
Nesse exemplo posicionamos o elemento a 40px do topo e a 20px da esquerda em relação ao lugar que ele ocuparia no fluxo do documento. Vale lembrar que utilizando position:relative todo esse espaço que foi definido ainda continua sendo ocupado pelo elemento na página. Exemplo.
position: absolute
Utilizando position: absolute agora podemos posicionar exatamente nosso elemento em relação ao primeiro elemento pai com posição diferente de “static” numa sequência até parar no body.
#div1 {
position: absolute;
top: 40px;
right:0;
}
Vale lembrar que a patir do momento que utilizamos position: absolute ele perde a ordem no fluxo do documento e o espaço ocupado passa a não existir mais. Exemplo.
position:relative + position: absolute
Observem o seguinte código HTML:
<div id="div1"> <div id="div2"></div> </div>
Se definirmos position: relative para a div1 e position: absolute para a div2 a partir de agora a div2 se posicionará absolutamente em relação a div1, não mais em ralação ao body da página. Exemplo.
position: fixed
#div1 {
position: fixed;
top:40px;
left:10px;
}
Posiciona um elemento fixadamente na página em relação a janela, ou seja, independente de a pagina conter um scroll ou não, o elemento sempre ficará visíve ao usuário em relação as medidas definidas. Vale lembrar que esse tipo de posicionamento não funciona no Internet Explorer. Exemplo.
CSS Zen Garden
Já ensinei CSS para vários desenvolvedores, e a primeira coisa que procuro mostrar a eles é a capacidade que o CSS, juntamente com um HTML bem feitos, proporcionam uma maneira separar totalmente o conteúdo da formatação. A primeira coisa que procuro mostrar a eles antes de qualquer coisa é o CSS Zen Garden, um projeto criado por Dave Shea, onde você pode ver todo o porder do CSS.
Lá você pode ver o que pode ser conseguido visualmente por meio de um design baseado em CSS. Ou seja, o HTML da página será sempre o mesmo, são trocadas somente as folhas de estilo do site, desenvolvida pelos próprios usuários do site. Se você quer desenvolver um trabalho, basta estar efetuando o download do HTML, e da folha de estilos. A única coisa que você irá alterar alí é o CSS, onde você irá aplicar seu layout.
Abaixo você pode ver o layout original do Zen Garden:
Agora, veja algumas variações produzidas pelos usuários, como podem ver o HTML é o mesmo, a única coisa que muda é o arquivo CSS:
Veja aqui a galeria completa com os designs. Aqui no Brasil você pode encontrar uma espécie de variação do Zen Garden, desenvolvida por Henrique Costa Pereira, o Revolução do CSS. O funcionamento é o mesmo do Zen Garden, onde você baixa o HTML e CSS de exemplo e altera o CSS com o seu design.
Declarações curtas no CSS
Uma das grandes capacidades do CSS é de se utilizar declarações curtas. Ela permite que você especifique várias propriedades semelhantes utilizando apenas uma declaração. Se você entende CSS entenderá logo o propósito desse artigo. Através dele você entenderá como escrever o CSS de uma forma mais inteligente e legível.
Afim de obter o máximo de proveito desse artigo, você deverá saber a forma normal de escrita das propriedades CSS e seus valores, eles serão utilizados aqui mas não explicados.
A estrutura básica das CSS
Agora vamos a uma rápida demonstração de como escrever CSS para refrescar nossa memória:
_____________Seletor
| _________ Propriedade
| | ____ Valor
| | |
h1 { color: red }
|________|
Declaração
Folha de estilos default do W3C
Muitos desenvolvedores desconhecem que existe no W3C uma folha de estilos padrão para o HTML4 com base em uma análise em User Agents para ser usada como referência para desenvolvedores, até eu desconhecia sua existência, descobri apouco em uma de minhas insessantes buscas por conhecimento. Ela se resume nas seguintes especificações:
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A" }
:before, :after { white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}
Teoricamente falando então essa folha de estilos então é para ser usada como base no desenvolvimento de browsers. Se todos os fabricantes de browsers utilizassem esse padrão, com certeza não teríamos mais que quebrar a cabeça para consertar erros bizarros em alguns browsers.
Para vocês verem a diferença que a entre as folhas de estilo, dêem uma olhada na folha de estilo padrão do Firefox 2 e Firefox 3. Não consegui achar a folha de estilos padrão do Internet Explorer para efetuar uma comparação, mas se alguém souber onde conseguí-la, eu agradeceria.
