Questões de Concurso Sobre css (cascading style sheets) em programação

@font-face

{

font-family: 'MinhaFonteLinda';

src: url('MinhaFonteLinda-webfont.eot?#iefix') format('embedded-opentype'),

url('MinhaFonteLinda.woff') format('woff'; ttf),

font-weight: normal;

font-style: normal;

}

{

@font-face

font-family: 'MinhaFonteLinda';

src: url('MinhaFonteLinda-webfont:'eot,woff,ttf')

src: url('MinhaFonteLinda-webfont#iefix')

format: regular;

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'MinhaFonteLinda';

src: url('MinhaFonteLinda-webfont.eot')

src: url('MinhaFonteLinda-webfont.eot?#iefix') format('embedded-opentype'),

url('MinhaFonteLinda-webfont.woff') format('woff'),

url('MinhaFonteLinda-webfont.ttf') format('truetype'),

url('MinhaFonteLinda-webfont.svg#MinhaFonteLindaRegular') format('svg');

font-weight: normal;

font-style: normal;

}

{

@font-face

<font-family: 'MinhaFonteLinda'>

<href: 'http://www.RepositoriodeFontes.com/MinhaFonteLinda/'>

<webfont: 'eot,woff,ttf,svg'>

font-weight: normal;

font-style: normal;

}

É possível transformar a imagem com efeitos de escala, rotação, translação e distorção angular (skew). O código abaixo exemplifica isto:

img {

-webkit-transform: scale(1.5) skew(30deg); /*webkit*/

-moz-transform: scale(1.5) skew(30deg); /*gecko*/

-o-transform: scale(1.5) skew(30deg); /*opera*/

transform: scale(1.5) skew(30deg); /*browsers sem prefixo*/

}

Existe a possibilidade de inclusão de imagens, mas sem alterações que deformem a imagem. O exemplo abaixo demonstra somente as operações possíveis:

img {

-webkit-transform: scale(1.5) translate(1.5) /*webkit*/

-moz-transform: scale(1.5) translate (1.5) /*gecko*/

-o-transform: scale(1.5) translate (1.5) /*opera*/

transform: scale(1.5) translate (1.5) /*browsers sem prefixo*/

}

As alterações na imagem dependem sempre da definição de uma origem, não há como ativar estas operações sem antes definir o ponto de referência, que é feito da seguinte forma:

img {

transform-origin: X10px Y10px;

}

Repare que não há necessidade de indicar qual o motor de layout.

As alterações na imagem são em relação a uma origem ou referência. Como padrão sempre ocorrem tendo como âncora o centro da imagem. O código abaixo exemplifica a definição da âncora:

img {

-webkit-transform-origin: X10px Y10px Z10px; /* para webkit */

-moz-transform-origin: X10px Y10px Z10px; /* para webkit */

-o-transform-origin: X10px Y10px Z10px; /* para webkit */

transform-origin: X10px Y10px Z10px; /* para webkit */

}

As alterações na imagem são em relação a uma origem, ou referência. Como padrão sempre ocorrem tendo como âncora o centro da imagem. O código abaixo exemplifica a definição da âncora:

img {

transform-origin: X10px Y10px Z10px;

}

Repare que não há necessidade de indicar qual o motor de layout.