CSS

Página 1

pixels

-------

.titulo-principal {

font-size: 68px;

}

Utiliza-se a porcentagem para ter um controle do tamanho da fonte da página com base no tamanho padrão da fonte do navegador.

body {

font-family: "Crimson Text", "Times New Roman", serif;

background-color: #F2FFFC;

font-size: 120%; line-height: 1.5;

}

rem: tem como padrão a fonte do navegador;

em: tem como padrão a fonte do elemento pai;

ch: tem como base a largura do caractere zero da fonte usada;

position absolute

------------------

A propriedade float

A propriedade position, com valor absolute ou fixed

<html> <body> <- [position: relative/absolute/fixed (referência] <div> <- [position: absolute] position relative; que vai referenciar o posicionamento dos elementos.

ex:

header { position: relative; }

Propriedade border radius -----------------------

div { border-radius: 10px; } todas as opções --------------------

-webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;

mas o correto -----------------

-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

outro exemplo:

border-radius: 10% 50% / 50% 10% (rx, ry / rx /ry )

opção beta -------------- depth: profundidade

.botao { -webkit-depth: 10px; -moz-depth: 10px; depth: 10px; }

div { width: -webkit-calc(50% - 10px); width: -moz-calc(50% - 10px); width: calc(50% - 10px); }

A propriedade transform

div { transform: rotate(30deg); }

div { transform: scale(1.5); }

div { transform: skew(20deg); // entortar, ângulos crescem ou diminuem 20 graus }

div { transform: translate(10px, 50px); //transladar objts }

div { -webkit-transform: skew(20deg) rotate(30deg) scale(1.2); transform: skew(20deg) rotate(30deg) scale(1.2); }

implementando 3d no cod. ------------------------ exemplo:

<div class="bolas"> <div class="bola1"></div> <div class="bola2"></div> <div class="bola3"></div> </div>

As translações positivas trazem o objeto para "perto" da tela e as negativas para longe.

A perspectiva é implementada no elemento pai, ou seja, em "bolas"

.bolas { perspective: 4px; } .bola1 { transform: translateZ(2px); } .bola2 { transform: translateZ(-1px); }

Barra de rolagem para cenas em 3D / propriedade overflow, podemos ter diversas cenas 3D em nossa página.

Cada uma delas pode ter sua própria barra de rolagem. Para tal, utilizamos a propriedade overflow com o valor scroll.

O conteúdo desse elemento vai aparecer cortado e o usuário poderá rolar para visualizá-lo

<main> <section> ... overflow: scroll ... </section> <section> ... overflow: scroll ... </section> <section> ... overflow: scroll ... </section> </main> Os objetos que estiverem "mais perto" se deslocarão mais rápido que aqueles que estiverem "mais longe", dando o efeito de uma movimentação. Chamamos esse efeito de Paralaxe.

Sombras e opacidade -------------------

h1 { text-transform: uppercase; font-size: 3em; text-shadow: 5px 5px #000; }

.foto-home { height: 200px; border-radius: 50%; box-shadow: 0 0 1em #000; }

.botao-index { font-size: 1.25em; background-color: #851944; color: #FFF; padding: .5em; border: .2em solid black; width: 40ch; margin: 2em auto; display: block; text-align: center; box-shadow: 0 0 1em #000, inset 0 0 .5em #FFF; //Inserimos uma sombra preta externa no botão e uma branca interna } opacidade ---------

.acessibilidade { top: 30%; left: 35%; opacity: .8;//Sua escala vai de 0 a 1, sendo 0 totalmente invisível e 1 totalmente visível. ... }

.rodape-pagina { background-color: rgba(0, 0, 0, .3); //O "a" logo após a sigla RGB significa a opacidade da cor e ela é definida após definirmos o vermelho (R), o verde (G) e o azul (B). ... }

box-shadow para simular um modal

------------------------------- exemplo{

width: 40%; background-color: #FFF;

position: fixed; top: 50%; left: 50%;

transform: translate(-50%, -50%);

z-index: 9999;

box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.75);

padding: 10% 3%; text-align: center; font-size: 2em;

}

Gradientes ---------

.titulo-principal { background-image: linear-gradient(to bottom, #F00, #000); }

.titulo-principal { background-image: linear-gradient(to bottom, #F00, #888, #000); }

Queremos aqui que a mudança de vermelho para cinza ocorra a uns 80% da altura da imagem, de cima para baixo:

.titulo-principal { background-image: linear-gradient(to bottom, #F00, #888 80%, #000); } Usamos a propriedade background-size para redimensionar a imagem ou o gradiente:

.titulo-principal { background-image: linear-gradient(to bottom, #F00, #888 80%, #000); background-size : 100% 200px; } O gradiente se repete automaticamente. Podemos desligar esse comportamento utilizando a propriedade background-repeat:

.titulo-principal { background-image: linear-gradient(to bottom, #F00, #888 80%, #000); background-size : 100%, 200px; background-repeat: no-repeat; }

propriedade background-attachment, com o valor "fixed". Ela dá aquele efeito de paralaxe na imagem ou

na textura do background. É como se elas estivessem fixas à tela do computador.

.titulo-principal { ... background-attachment: fixed; } teste esse exemplo no http://dabblet.com/

min-height: 100%; background-color: black; background-image: linear-gradient(to right, black, #C00, black); background-repeat: no-repeat; background-size: 80% 5px; background-position: 50% 50%; O navegador também é capaz de gerar gradientes radiais, nos quais a cor muda a partir de um ponto em todas as direções.

background-image: radial-gradient(yellow, red);

Seletores -----------

tag

id

classe

irmão ~ irmão

irmão + irmão seguinte

pai > filho

exemplo:

para selecionar autor e data

usa-se: h1 + p

<body> <section> <h1>Notícia mega importante!</h1> <p>por Maria, hoje de manhã</p> <p>Texto da notícia...</p> </section> <section> <h1>Outra notícia</h1> <p>por João, ontem</p> <p>Texto da notícia...</p> </section> </body>

Como podemos fazer para, dada a estrutura abaixo, selecionar parágrafos

menos o primeiro?

usa-se: p + p ou p ~ p

<article> <h1>Um artigo importantíssimo</h1> <p>Texto texto texto...</p> <p>Texto texto texto...</p> <p>Texto texto texto...</p> </article> seletor de atributo -------------------

[href="http://www.alura.com.br"]

[src$=".jpg"]

[href^="http://"]

<img src="foto.jpg" alt="Foto bonita" class="foto-destaque">

Pseudoclasses -------------