CSS3: Degradê com CSS3

Esquemas de cores em degradê sempre foram muito utilizados no design, lembro que quando conheci o CorelDRAW adorava deixar os objetos em degradê (risos).

Para por fundos com essa coloração utilizando o CSS3 utilizamos a propriedade background, a mesma utilizada para outros tipos de coloração e também para imagens. Após a propriedade devemos declarar o tipo do gradiente que queremos, existem dois tipos, linear e radial. Depois de declararmos o tipo podemos na forma mais simples especificar duas cores, mas podemos definir mais cores e também podemos antes das cores estabelecer valores como, angulo (deg) e direção e ainda após as cores antes da próxima vírgula podemos estabelecer o espaço a ser ocupado por aquela cor.

Deixarei aqui alguns exemplos comentados e um link para a pag. da propriedade no site da w3c school.

background: linear-gradient(red, yellow); /*gradiente do tipo linear do vermelho para o amarelo em direção ao bottom (default)*/

background: radial-gradient(red, yellow); /*gradiente do tipo radial do vermelho para o amarelo*/

background: radial-grandient(red, rgb(555,0,190), rgba(545,283,875,0.5), blue, black); /*Gradiente do tipo radial com várias cores*/

background: linear-gradient(70deg, red, blue); /*Gradiente linear com 70º de inclinação*/

background: linear-gradient(to left, red, orange); /*Gradiente linear em direção à esquerda*/

background: linear-gradient(to top, red 90%, orange); /*Grandiente linear em direção ao topo com a cor vermelha ocupando 90% do espaço*/

https://www.w3schools.com/css/css3_gradients.asp

CSS3: Margin e Padding

Margin: Essa propriedade é aplicada automáticamente nos elementos html ou inseridas pelo desenvolvedor. Por padrão cada elemento html tem um valor próprio (valor inicial) e esse valor pode sofrer pequenas variações de navegador para navegador, por isso é recomendável utilizar algo como um CSS reset para ter valores de margem e de outras propriedades com poucas ou mesmo nenhuma diferença na visualização de browser para browser.

A propriedade margin aplica um espaço EXTERNO ao box (formação visual resultante de um elemento html) afastando-o da margem do browser e ou de qualquer elemento vizinho.

Essa propriedade pode ser declarada conforme exemplos das seguintes formas:

margin: TOPpx RIGHTpx BOTTOMpx LEFTpx; (Inves de exemplificar com valores númericos estou usando as posiçoes que são alteradas pela ordem de declaração) 

margin: TOPeBOTTOMpx LEFTeRIGHTpx;
margin: TODASpx;

Ou ainda pode-se declarar uma única margem em especifico como:
margin-top: px; (Declaração de margem no topo do elemento).

Vale resaltar que as margens podem ser estabelecidas não apenas utilizando px mas outras medidas também.

Padding: O padding (preenchimento) a semelhança do margin também tem valores padrão para os elementos html, ou seja, na não declaração pelo desenvolvedor permanecerá o valor padrão (inicial) que o browser determina para aquele elemento. O que difere um padding de um margin é que enquanto o margin determina o espaçamento externo ao elemento o padding determina o espaço interno do box para seus elementos contidos. Se temos uma div com um h1 dentro e aplicamos a essa div um padding de 50px então teremos 50px da borda da div até o box do h1.

Vale resaltar que quando aplicamos uma padding a um elemento esse valor é somado ao seu width e heigth então se o elemento tem 300X300px ao se declarar 50px de padding ele terá agora 400x400px. Para contornar isso, se assim o desenvolvedor desejar, ele poderá utilizar a propriedade e valor "box-sizing: border-box;" isso dirá ao navegador que as medidas do padding devem estar incluídas nas medidas já estabelecidas para largura e altura.

Exemplos de declaração:

padding: TOPpx RIGHTpx BOTTOMpx LEFTpx;
padding: TOPeBOTTOMpx LEFTeRIGHTpx;
padding: TODASpx;

Ou um único padding como:

padding-top: px; (Declaração de preenchimento no topo do elemento).

Assim como nas margens as declarações de padding podem ser feitas com outros tipos de medidas.

HTML5: Display Block, Inline e Inline-block

Existem 3 propriedades de display na CSS3, são elas: Inline, block e inline-block. Pode ser difícil num primeiro momento perceber a diferença entre esses três valores, eu pessoalmente demorei um pouco para entender de maneira clara como cada um funciona.

Então vamos de forma rápida e direta explicar cada uma das três e o que as diferencia:

- display: block; Esse é um valor padrão para a maioria das tags html (<div> por exemplo) e é o que mais costumamos usar. Um objeto com esse valor se comporta como um bloco ocupando todo o espaço possível, assim não admite permanecer do lado de outro elemento. Sempre que um elemento estiver com esse valor, imediatamente após ele vem uma quebra de linha. O que faz desse elemento muito útil é o fato de que por ser um bloco podemos editar suas margens (margin), largura (width) e altura (height);

- display: inline; Esse é o valor padrão, por exemplo da tag "span", um elemento com esse valor fica contido em uma linha e por tanto não pode ter suas margens top e bottom configuradas e nem sua largura e altura. Elementos com este valor ocuparão apenas o espaço necessário para sua exibição e podem ter um elemento vizinho na mesma linha;

- display: inline-block; Bom, este valor é uma mistura das caracteristicas de amobos os valores anteriores, ou seja, a linha não será quebrada imediatamente após o elemento e ainda poderemos configurar todas as margens, widht e height do elemento.