Curso HTML5 e CSS3 II: Turbinando as suas páginas : https://cursos.alura.com.br/course/avancando-html-css
A unidade % e "em" funciona da mesma maneira. Assim podemos deixar o site responsivo e mais flexivel possivel. podendo usar com varios elementos.
p {
font-size: 100%;
font-family: "arial", sans-serif;
} p {
font-size: 1em;
font-family: "arial", sans-serif;
}<p>text</p>Vai ter um tamanho de 100% com base na fonte padrao do navegador... onde 1em vamos obter o mesmo resultado
Podemos aplicar porcentagens em todos os elementos, mais lembrando que algumas vezes podem ta relacionado a largura do elemento pai, assim gerando algumas confusoes.
1,25 rem = 1,25 x tamanho da fonte
16px X 1,25rem = 20px
A unidade ch define o tamanho da fonte em relação à largura do caractere "0".
Supondo que o seu elementos filhos sao baseado na largura do pai, então podemos utilizar uma medida que facilita principalmente na edição de textos dentro de caixas, a medida ch:
Modificando o tamanho da fonte do navegador, esta medida também modifica-se. Essa medida é boa porque não importa muito a fonte que você está utilizando, ela se adequará muito bem.
1 ch = largura do caractere "zero" da fonte utilizada
Aqui vamos entender um pouco mais sobre as proriedades position.
Para posicionar seus elementos, você precisa inserir uma coordenada. Essas coordenadas são comandadas pelas propriedades: top, left, right ou bottom. Todos os valores de positions só trabalham com essas coordenadas
Lembrando que se for definir uma propriedade "left" não é preciso por "Right". O mesmo com top e bottom.
Um Exemplo:
<style>
div {
position: absolute;
top: 150px;
left: 150px;
}
</style>Nesse caso eu posicionei o elemento a 150 pixels do topo e 150px da esquerda.
Existem 3 tipos de valores que usamos na propriedade position: relative, absolute e fixed.
Essa propriedade faz com que o elemento que voce deseja ficará fixada em um determinado local da pagina web na qual voce definir...
Definindo isso:
<style>
div#sidebar {
width: 200px;
height: 300px;
background: #75AD45;
border: 2px solid black;
position: fixed; /* Fixa o elemento nas coordenadas seguintes */
top: 30px;
right: 30px;
color: white;
padding: 10px;
}
</style>Teremos um Resultado igual a esse. Voce pode ver um exemplo nesse link Exemplo de Position Fixed
O position relative posiciona o elemento em relação a si mesmo. Ou seja, o ponto zero será o canto superior esquerdo, e ele começará a contar a partir dali.
A um exemplo em uma imagem abaixo:
Position Absolute se utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai.
No caso, se o DIV pai não tivesse position definido, o div filho iria se referenciar pelo BODY mesmo. Se caso o div pai não tivesse position definido, e se ele também fosse envolvido por outro div com position, o div filho iria se referenciar por este terceiro div.
Uma outra propriedade Incrivel presente no css3, é como podemos arredondar bordas. Quando usamos uma tag tipo a "div" notamos que é uma caixa um quadrado. Podemos facilmente mudar isso com novas propriedade "border-radius"
Entao no CSS dizemos que queremos arrendondar a borda da "div" com o "border-radius".
Exemplo:
<style>
div {
border-radius: 10px;
}
</style>Então fica assim:
Quando pensamos em criar nosso site e por ate mesmo um estilo legal como o border-radius, pensamos, será que isso vai funcionar em todos os navegadores?.
Como será que os navegadores implementaram essas funcionalidades?
A gente como desenvolver queremos que nosso site funcione em todos os navegadores.
para isso basta apenas usar:
Para o google Chrome
-webkit-border-radius:
Para o FireFox
-moz-border-radius
Para o Explorer
-ms-border-radius
Para o Opera
-o-border-radius
Para o Safari
-webkit-border-radius
Muitos navegadores ja estao adaptando para uma so funcionalidade. Os três prefixos principais se resumem em: -webkit-, -ms- e -moz-.
Usando dessa maneira.
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
Garante Funcionalidade em todos os navegadores,e ate mesmo para alterações futuras. Sem precisar alterar nada no seu codigo.
Na verdade não, tratando-se do border-radius só é preciso:
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
Outros exemplos mais explicativo:
Como vimos, o border-radius nos permite fazer não apenas bordas redondas como também bordas elípticas.
Como exemplo abaixo:
A sintaxe para o border-radius criar bordas elípticas é a seguinte:
border-radius: <raios na horizontal> / <raios na vertical>;
Definido seria assim
border-radius: 10% 50% / 50% 10%
Imagine que uma nova especificação do CSS está surgindo para permitir a criação de elementos 3D na página
Seria nescessario a propriedade "depth" (profundidade)
Se quisermos testar essa propriedade num site nosso, fazendo um elemento com a classe botao ter uma profundidade de 10px, como deve ser a declaração para conseguirmos testá-la no maior número de usuários possível?
<style> .botao { -webkit-depth: 10px; -moz-depth: 10px; depth: 10px; } </style>
Com o valor "calc" conseguimos fazer calculos no css3.
Podemos fazer, por exemplo, com que um elemento tenha metade da largura da tela menos 10 pixels:
<style>
div {
width: calc(50% - 10px);
}
</style>E para Suportar bem nos navegadores, apenas atribuir os codigo como exemplo abaixo.
<style>
div {
width: -webkit-calc(50% - 10px);
width: -moz-calc(50% - 10px);
width: calc(50% - 10px);
}
</style>Mais exemplos: Exemplo do calc