23/06/2017

Propriedades: Background

||

Yo queridos leitores! Faz tempo que venho prometendo fazer aulas explicativas sobre algumas propriedades de CSS, porém exigiriam bastante do meu tempo, então aproveitando que estou de férias decidi fazer algumas nessa temporada. E decidi começar do básico mesmo, o Background.  Aquela imagem ou cor que colocamos no fundo do site, porém não vou ensinar só colocar mais dizer e explicar inúmeras coisas que podemos fazer com ele.
A palavra "backgound" que dizer fundo. Ele é uma parte essencial da criação de qualquer coisa que você possa imaginar, dentro ou fora do html. Uma foto tem background, sua casa tem background e seu blog/site não é diferente.  

Normalmente o usamos  em uma folha de estilo externa (a extensão do arquivo CSS ) dentro de uma tag <style> </ style> (ou <b: skin> </ b: skin> no Blogger ) ou parâmetro em uma tag usando style = "". Por sua vez, todas essas propriedades podem ser fixados ou alterados usando JavaScript que faz deles muito flexível porque podemos lidar com eles à vontade. Um exemplo todos nós temos visto é para mostrar e ocultar itens quando você clica ; Como você faz isso? Alterando as propriedades CSS .

A propriedade fundo estabelece todas e cada uma das propriedades que afetam o fundo de um elemento, ao mesmo tempo. Ou seja, nós usamos isso para evitar escrever cada um separadamente: background-color | background-image | background-repeat | background-attachment | background-position.


sintaxe HTML

Utilizando somente cor:
● elemento {background: #FFCC80;}

Utilizando transparente:
● elemento  {background: transparent;}

Utilizando imagem com cor de fundo:
● elemento {background: #FFCC80 url(endereço da imagem) no-repeat left top;}

Utilizando imagem sem cor de fundo:
● elemento {background: url(endereço da imagem) no-repeat left top;}

OBS: Pode observar que utilizando imagem como background, tem alguns valores/comandos após o endereço. É esses comandos que complementarão o resultado do fundo com a imagem. Ela pode repetir por todo fundo, pode não repetir, ficar somente a direita ou a esquerda sem repetir, ou repetir somente a um dos lados, para cima ou para baixo. Tudo isso irei explicar mais para baixo da postagem. Fixo ou ajustado.

sintaxe Java/Script

Utilizando background no JavaScript / Style:
●  elemento . style.background = 'valores';
por exemplo this.style.background='#FFCC80 url(imagen.jpg) no-repeat left top';

Aqui pode observar que é quase a mesma coisa no modo HTML a única coisa que muda e seu formato, tanto no elemento, quanto nas chaves. Esse modo é muito utilizando dentro de postagens e gadgets.


Diferença entre o HTML e Java/Script no background

A diferença entre ambos, é  seu corpo e onde aplicamos. O HTML é dividido em duas partes, enquanto o Javascript é apenas uma parte, sendo um pouco mais estendido os código. Para não complicar irei explicar um por vez e de forma direta:

HTML: Nesse modo o código é dividido em duas parte. A primeira parte do código é aplicado dentro do HTML do blog, a fonte o corpo do seu layout/template. Seu corpo é assim:

elemento  {
outros códigos...
}

A segunda parte é o CSS. No caso do background ele vai automático sem precisa adicionar o segundo código em algum lugar, se for aplicado como um menu, ele é adicionado dentro de postagens ou gadget's, seu corpo é assim:

<div class="elemento ">Aqui vai ou conteúdo</div>

A parte em vermelho chamamos de tag, ela é como um mapa.  É importante ser um nome único dentro do HTML para não haver conflito. A parte em verde é as chaves que abre e fecha o estilo. Em amarelo é o estilo, onde fica a cor, fonte, tamanho etc...

 Javascript: Ele é um corpo único. Ele é tanto o corpo, quanto o css:

elemento . style.background = 'valores'; por exemplo this.style.background='#FFCC80 url(imagen.jpg) no-repeat left top';

assim:

<" style="background: #FFCC80; padding: 5px; width: 387px; height: 216"/>

ou assim:

<" style="background: url(endereço da imagem); padding: 5px; width: 387px; height: 216"/>


background-color

Aplicando cor com RGB, Nome de cor, um valor hexadecimal ou transparente:

Aplicando transparente:
● elemento  {background: transparent;}

Aplicando com nome de cor (funciona somente em inglês e com cores primarias)
● elemento  {background: red;}

Aplicando com RBG:
● elemento {background: rgb (105, 105, 105);}

Também é possível deixar semi-transparente com RBG:
● elemento {background: rgb (105, 105, 105,.9);}

Basta adicionar ,. e um numero de 1 á 9. Que é o nível de transparência.


background-image

A propriedade background-image configura a imagem de fundo de um elemento.

HTML
● elemento { background-image : url | nenhum;}
por exemplo: body {fundo-imagem: URL (imagem.jpg);}

JAVASCRIPT
● elemento . style.backgroundImage = 'url | none ';
por exemplo: 'url (imagem.jpg)' this.style.backgroundImage =;

Ao colocar uma imagem de fundo, ele também deve estabelecer uma cor que deve ser usada se a imagem não está acessível.

background-repeat

A propriedade background-repeat determina se a imagem de fundo de um elemento se repete e se sim, como.

HTML
● elemento { background-repeat : valor;}
por exemplo: body {background-repeat: valor;}

JAVASCRIPT
● elemento . style.backgroundRepeat = 'valor';
por exemplo: this.style.backgroundRepeat = 'valor';

Sempre que possível, os valores são os seguintes:
repeat (a imagem é repetida horizontalmente e verticalmente) e é o padrão
repeat-x (a imagem é repetida horizontalmente)
repeat-y (imagem verticalmente repeties)
no-repeat (não imagem repete)


background-attachment

A propriedade background-attachment determina se a imagem de fundo permanece fixo ou se é movido ao rolar a pagina.

HTML
● elemento {background-attachment: scroll | fixed;}
por exemplo:  body {background-attachment: scroll;}

JAVASCRIPT
● elemento .style.backgroundAttachment='scroll | fixed';
por exemplo: this.style.backgroundAttachment='scroll';


background-position

HTML
● elemento {background-position: valor1 valor2;}
por exemplo: body {background-position: left top;}

JAVASCRIPT
● elemento.style.backgroundPosition='valor1 valor2';
por exemplo: this.style.backgroundPosition='left top';


valores

Os valores possíveis são:

porcentaje | medida (positivos o negativos) ] {1,2} | 0% 0%
ou: left | center | right | top | center | bottom


equivalências

left top = 0% 0%
top = center top = 50% 0%
right top = 100% 0%
left = left center = 0% 50%
center = center center = 50% 50%
right = right center = 100% 50%
left bottom = 0% 100%
bottom = center bottom = 50% 100%
right bottom = 100% 100%

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram