Fichas
CSS3
Fichas del conjunto (14)
- 1Como funciona a propriedade 'border-radius'?'border-radius' nos permite aplicar curvas arredondadas as nossas bordas.
border-radius: 15px;
podemos especificar para cada lado também pelo shortcode:
border-radius: 4px 15px 12px 10px;
, ,
podemos utilizar %, em, rem... - 2Como funciona a propriedade 'box-shadow'?'box-shadow' nos permite adicionar sombreado em um elemento.
box-shadow: 1px 2px 2px #000;
valores possiveis da propriedade box-shadow:
box-shadow:
é opcional, uma sombra para baixo é criada, em vez de uma sombra inset.
-> Move a sombra no eixo x, left-right. -positivo right
-> move a sombra no eixo y, top-bottom. -positivo baixo
-> opcional, define a quantidade de blur, como uma expansão
é como o tamanho da nossa sombra. - 3Como podemos criar varias box-shadows em um elemento?Separando as declarações com uma virgula:
.box {
box-shadow:
1px 1px 2px #000,
inset 1px 1px 2px blue;
}
/2 box-shadow em uma declaração. - 4Como funciona a propriedade 'text-shadow'?A propriedade 'text-shadow' é muito similar com a box-shadow, mas sua sombra é aplicada ao texto, como o nome implica.
text-shadow:
- optional - 5Como funciona o 'box model' no css?* O CSS box model se refere ao design e layout de um dado elemento HTML.
*Cada elemento HTML é uma 'box', que consiste em margens, bordas, paddings e o contéudodo elemento.
*O 'box model' se refere á como essas propriedades são calculadas em conjunto um com o outro e a ordem de configurar as dimensões.
*LEMBRAR DO QUE APARECE NO CHROME DEV TOOLS, AQUILO É O BOX MODEL... calculando o tamanho de um elemento - 6Como funciona a propriedade 'box-sizing'?A propriedade box-sizing é usada para mudar o CSS padrão do box model, que é usado para calcular as widths e heights dos dados elementos.
*A propriedade box-sizinha é usada para mudar o valor padrão do CSS box model, que é usado apra calcular a altura e largura dos elementos.
onde podemos ter 3 valores:
content-box - É o valor padrão, a largura e altura são medidas incluindo somente o conteúdo, sem border, margem ou padding.
padding-box - Nesse valor é incluindo a padding, mas não inclui a border e a margem.
border-box - Nesse valor é incluido o padding e a border, mas não a margem:
dessa forma, nossa width declarada pode contabilizar ou não o valor da padding, e boder
width: 300px
border: 2px;
padding: 10px ;
com border-box, vai resultar em:
276px para o contéudo - 7Como funciona os 'Multiple Backgrounds' em CSS3?'CSS3 permite você aplicar multiplos backgrounds a um elemento, eles estão empilhados na ordem que você especificou para eles '
background-position: definimos a posição dos backgrounds
Exemplo:
.element {
background-image: url(bg1.png), url(bg2.png);
background-position: top left, center right;
background-repeat: no-repeat, no-repeat ;
}
O especificado primeiro fica por cima.
pela shorthand:
background :
url(bg1.png) top left no-repeat,
url(bg2.png) center right no-repeat; - 8Como funciona a função color' em CSS3?CSS3 provem multiplos caminhos para trabalhar com cores:
RGBa, HSLa
RGBa é red, green and blue e o a com representação de opacidade temos o 'a' ou valor alpha.
HSLa (hue, saturation, lightness). em adição ao HUE,SATURATION e LIGHTS, você pode especificar também um alpha value para opacidade. - 9Como funciona a função 'opacity' em CSS3?opacity: 0.45;
45% opaco, afetando a transparencia de um elemento.
* importante notar que a opacidade de um elemento afeta todos os elementos que estão inseridos nele. - 10Como funciona a função gradients em CSS3?CSS3 oferece a oportunidade fazer transições entre 2 ou mais cores, criando gradientes:
Os navegadores suportam 2 tipos de gradientes:
Linear gradients: Para criar um 'linear gradient' nos vamos especificar um ponto de inicio, fim e um ponto opcional de parada de cor.
background: linear-gradient(to bottom, red, yellow)
linear-gradient( to , s)
Radial gradients:
background: radial-gradient(aqua, blue);
radial-gradient( at , s) - 11Como funciona o @font-face?Usando @font-face, nos temos a habilidade prover fontes online para serem utilizadas em nosso site.
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansRegular-wefont.eot');
font-style: normal ;
font-weight: normal ;
}
para usar o @font-face:
h1 {
font-family: 'OpenSansRegular', Helvetica, Arial, Sans-serif ;
} - 12Como funciona o 'transform' em CSS3?Usar a propriedade transform em CSS3, nos podemos translate, rotate, scale and skew elementos em CSS.
- 13Como funciona o 'transform' - transalte?Permite transições 2D:
translate(, );
Uma pode ser em comprimento(px,em,rem) ou porcentagem, se nada for especificado o padrão será ZERO. - 14Como funciona o 'Progressive enhancement'?O termo 'Progressive enhancement' refere-se ao uso de novas ferramentas que adicionam experiencia em modernos web browsers que possuem suporte para essas ferramentas, mas não diminui a experiencia em browsers antigos.
Información
- Descripción
- asa (Front-End Foundations ) Technical Skills Fichas sobre CSS3, creado por Victor Bini el 07/01/2017.
- Creado por
- Victor Bini
- Visitas
- 5
- Valoración