10.
Aplicando cor de fundo com a propriedade gradient e a propriedade
border-radius.
Nesta aula vamos aprender como aplicar cor de fundo utilizando a propriedade gradient e como criar um
elemento, por exemplo uma div com cantos arredondados.
Os browsers mais novos como Safari, Chrome, Opera e Firefox já aceitam a propriedade GRADIENT.
Para arredondar os cantos de um elemento, devemos utilizar a propriedade border-radius.
Com o uso destes recursos, iremos aprimorar os nossos projetos.
10.1. PROPRIEDADE GRADIENT
Uma das novidades no CSS é a criação de gradiente apenas utilizando CSS. Este recurso dispensa ter que criar
uma imagem no Photoshop, por exemplo, evitando assim o peso da página.
Até a versão 2 do CSS, não era possível definir um gradiente, apenas através de imagens do tipo jpg, gif ou png.
A partir do CSS 3 podemos definir um gradiente diretamente no código.
Para melhor aplicação deste recurso, devemos usar prefixos.
A necessidade de usar prefixos vem do fato que o CSS3 vem sendo adicionado gradativamente nos
navegadores.
Cada navegador tem um prefixo próprio e propriedades experimentais.
Os principais browsers e prefixos.
Safari -webkit-
Mozilla -moz-
Opera -o-
Chrome -chrome-
Pode parecer trabalhoso usar prefixos, mas além de ser uma parte importante no processo de padronização do
CSS3, você vai evitar retrabalho.
1
Linear-gradiente.
Para definir um elemento com cores gradiente linear, é necessário utilizar a função linear-
gradient.
Como usar:
Ângulo representa o valor de inclinação do gradiente.
Lado-ou-canto representa a região do box do gradiente na qual a última para parada-de-cor será posicionada.
É formado pelos pares left e right e/ou top e bottom, não importando a ordem que aparecem. A primeira será
posicionada na região simetricamente oposta da última.
Parada-de-cor representa uma cor e a posição em que deve aparecer sobre a linha do gradiente.
Exemplo:
linear-gradient(to top left, green, black)
Veja outros exemplos:
background:linear-gradient(to top right, green, black);}
2
Utilizando ângulo.
background:linear-gradient(90deg, black, green, black)
Para utilizar transparência vamos fazer uso da função RGBA().
A sintaxe da RGBA é:
R (red) = vermelho
G (green) = verde
B (blue) = azul
A (alpha) = opacidade
Os valores de RGB podem ser expressos por um número de 0 a 255. A opacidade varia de 0 (transparente) até
1 (opaco).
Neste exemplo inserimos uma imagem de fundo e acima uma área com duas cores e uma parte com opacidade.
body{background:url(foto.jpg) no-repeat; }
#gradiente1{width:200px; height:150px; background:linear-
gradient(rgba(255,255,0,0.5),rgba(255,255,255,0));}
Resultado:
3
10.2. PROPRIEDADE BORDER-RADIUS
A propriedade border-radius permite definir bordas arredondadas em um elemento, mesmo que um elemento
não tenha borda.
Exemplo de borda em todos os lados.
border-radius:20px;
Exemplo de borda no canto superior esquerdo e no canto inferior direito.
border-radius:20px 0 20px 0;
Exemplo de borda em uma imagem.
background:url(foto2.jpg); border-radius:0 40px 0 20px;
4
10.3. Exercícios de Conteúdo
Olá, seja bem-vindo, a nossa área de exercícios, desenvolvemos uma série de atividades, para que você domine
todo conteúdo abordado nesta aula, é muito importante você fazer todos os exercícios, qualquer dúvida, chame o
seu instrutor.
Observação: Salve os exercícios, se você precisar de orientação, de como localizar sua pasta, converse com seu
instrutor, para que ele lhe crie uma, ou oriente, onde a mesma se encontra.
As imagens estão na pasta Arquivos Auxiliares/Aula10/imagens-passo-a-passo.
Exercício 1:
Este exercício, tem como objetivo criar a área de cabeçalho com um gradiente.
1)Acesse o campo de busca do Windows e digite Notepad++
2)Na lista clique no aplicativo Notepad++
3)Clique no menu Formatar e em seguida na opção Codificação em UTF-8.
4)Clique no menu Linguagem e em seguida na letra “H” e por fim na opção HTML.
5)Pronto agora digite o código abaixo:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>Exercício 1</title>
<style>
*{margin:0; padding:0; font-family:arial; list-style:none; text-decoration:none;}
h1{color:white; font:normal 32px arial; float:left; line-height:100px;}
header{width:100%; height:100px; background:linear-gradient(180deg, black, white);}
nav{float:right;}
nav a{color:white; margin:0 5px; line-height:100px;}
</style>
</head>
<body>
<header>
<h1>Logotipo</h1>
<nav>
<a href="#">HOME</a>
<a href="#">EMPRESA</a>
<a href="#">PRODUTOS</a>
<a href="#">CONTATO</a>
</nav>
</header>
5
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e em seguida na opção Salvar como.
7)Salve na Área de trabalho com o nome aula12-exercicio1.
8)Para visualizar clique no menu Executar e em seguida na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.
Exercício 2:
Este exercício, tem como objetivo criar cantos arredondados em duas imagens.
1)Acesse o campo de busca do Windows e digite Notepad++
2)Na lista clique no aplicativo Notepad++
3)Clique no menu Formatar e em seguida na opção Codificação em UTF-8.
4)Clique no menu Linguagem e em seguida na letra “H” e por fim na opção HTML.
5)Pronto agora digite o código abaixo:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>Exercício 2</title>
<style>
*{margin:0; padding:0; font-family:arial; list-style:none; text-decoration:none; text-align:left; }
h1{color:#333; width:100%; margin-left:5px; font:normal 32px arial; float:left; line-height:100px; }
#foto1{border-radius:0 0 20px 0; float:left; margin:0 5px; }
#foto2{border-radius:0 0 0 20px; float:left; }
</style>
</head>
<body>
<div>
<h1>RESTAURANTE BOM GOSTO</h1>
<img src="imagens/foto1.png" id="foto1" />
<img src="imagens/foto2.png" id="foto2" />
</div>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e em seguida na opção Salvar como.
7)Salve na Área de trabalho com o nome aula12-exercicio2.
8)Para visualizar clique no menu Executar e em seguida na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.
6
Exercício 3:
Este exercício, tem como objetivo criar uma área para o menu de navegação com gradiente linear.
1)Acesse o campo de busca do Windows e digite Notepad++
2)Na lista clique no aplicativo Notepad++
3)Clique no menu Formatar e em seguida na opção Codificação em UTF-8.
4)Clique no menu Linguagem e em seguida na letra “H” e por fim na opção HTML.
5)Pronto agora digite o código abaixo:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>Exercício 2</title>
<style>
*{margin:0; padding:0; font-family:arial; list-style:none; text-decoration:none; text-align:left;}
nav{width:250px; height:300px; background:#DDD; margin:10px; background:linear-
gradient(rgba(153,51,51,0.5),rgba(255,255,255,0));}
nav a{width:100%; height:30px; display:block; text-align:center; padding:5px 0px;}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">Vídeos</a>
<a href="#">Serviços</a>
<a href="#">Editoriais</a>
<a href="#">Natureza</a>
<a href="#">Contato</a>
</nav>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e em seguida na opção Salvar como.
7)Salve na Área de trabalho com o nome aula12-exercicio3.
8)Para visualizar clique no menu Executar e em seguida na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.
Exercício 4:
Este exercício, tem como objetivo uma tarja de destaque da semana com cantos arredondados e transparência.
1)Acesse o campo de busca do Windows e digite Notepad++
7
2)Na lista clique no aplicativo Notepad++
3)Clique no menu Formatar e em seguida na opção Codificação em UTF-8.
4)Clique no menu Linguagem e em seguida na letra “H” e por fim na opção HTML.
5)Pronto agora digite o código abaixo:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>Exercício 4</title>
<style>
*{margin:0; padding:0; list-style:none; text-decoration:none; text-align:left; }
h1{width:800px; height:60px; font:normal 30px arial; color:yellow; padding-left:10px;
background:linear-gradient(90deg, #333399, white); line-height:60px; }
div{width:200px; height: 190px; background:#333; margin:0 20px; border-radius: 0 0 15px 15px; }
div a{color:yellow; font:normal 16px arial; display:block; width:100%; text-align:center; padding-
top:10px; height:30px;}
</style>
</head>
<body>
<h1>PRODUTOS EM DESTAQUE</h1>
<div>
<a href="#">Decorações</a>
<a href="#">Tapetes</a>
<a href="#">Iluminação</a>
<a href="#">Ferragens</a>
</div>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e em seguida na opção Salvar como.
7)Salve na Área de trabalho com o nome aula12-exercicio4.
8)Para visualizar clique no menu Executar e em seguida na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.
Exercício 5:
Este exercício, tem como objetivo criar um formulário com os campos arredondados.
1)Acesse o campo de busca do Windows e digite Notepad++
2)Na lista clique no aplicativo Notepad++
3)Clique no menu Formatar e em seguida na opção Codificação em UTF-8.
8
4)Clique no menu Linguagem e em seguida na letra “H” e por fim na opção HTML.
5)Pronto agora digite o código abaixo:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>Exercício 4</title>
<style>
*{margin:0; padding:0; list-style:none; text-decoration:none; text-align:left; }
h1{width:600px; height:60px; font:normal 30px arial; color:white; padding-left:10px; background:linear-
gradient(90deg, #000, white); line-height:60px;}
div{width:500px; height: 250px; background:#CCC; padding-top:5px; margin:10px; border-radius: 0 15px
0 15px; }
input{width:300px; height:30px; margin:5px; border:1px solid #999; border-radius:5px; display:block; }
textarea{width:300px; height:80px; margin:5px; border:1px solid #999; border-radius:5px; display:block;
}
</style>
</head>
<body>
<h1>FORMULÁRIO DE CADASTRO</h1>
<div>
<form>
<input type="text" placeholder="Nome"/>
<input type="text" placeholder="E-mail"/>
<input type="text" placeholder="Assunto"/>
<textarea placeholder="Comentário"></textarea>
</form>
</div>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e em seguida na opção Salvar como.
7)Salve na Área de trabalho com o nome aula12-exercicio5.
8)Para visualizar clique no menu Executar e em seguida na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.
Bom, concluímos aqui os exercícios passo a passo, lembre-se, pratique, essa é a única maneira de aprender,
refaça os exercícios, e qualquer dúvida, chame o instrutor.
Até a próxima aula!
