You are on page 1of 10

Html5 and css3

Professor Jolvani

Aula 03
Criar uma nova Página e novo Css =
anima.css e html5agorasim
 HTML 5 agora sim


 <!-- O que antes era assim... -->
 <link rel="stylesheet" href="normalize.css" type="text/css" />
 <script src="prefixfree.min.js" type="text/javascript"></script>

 <!-- ...pode ser escrito assim -->
 <link rel="stylesheet" href="normalize.css">
 <script src="prefixfree.min.js"></script>
<li><a href="html5agorasim.html">HTML5 agora sim</a></li>
Refatoração da página
 Altere as divs borda por article o html e as respectivas classes no css
 <div class=“borda”> <article>
 Altere o css também.
 Altere também o rodapé tirando o div e colocando Footer
 <footer class='clear'>
 ... Code ...
 </footer>

 <!-- ...pode ser escrito assim -->
<aside>
<h3>Componentes do Html5 e CSS</h3>
<ol>
<li><a href="reset.html">Reset</a></li>
<li>A Sala Soledade.</li>
<li>E mais!</li>
<li>Borda lateral</li>
<li><a href="html5css3jquery.html">Voltar</a></li>
</ol>
</aside> ** Troque no css também
Componentes do Html5 e CSS
 Nova pagina denominada reset.html

 Visualize-a nos diferentes navegadores, observe as diferenças e
incompatibilidades.





 Agora adicione a biblioteca normalize.css
 <link rel="stylesheet" href="lib/normalize.css">
<fieldset>
<legend>Campos do formulário</legend>
<abbr title="Hypertext Markup Language">HTML</abbr>
<p><label>Faça a sua pesquisa:</label><input type="search"></p>
<textarea>Um pouco de texto</textarea>
</fieldset>
Componentes do Html5 e CSS
 Nessa mesma pagina “reset.html” crie um elemento com o mesmo valor de width, mas um
com padding outro sem. Observe que com o padding deixa o elemento com 300 px de
largura






.box {
background-color: LimeGreen;
width: 250px;
}
.box-with-padding {
background-color: LightBlue;
padding: 0 25px;
width: 250px;
}
<div class='box'>elemento sem padding</div>
<br>
<div class='box-with-padding'>elemento com padding</div>
Componentes do Html5 e CSS Pseudo Elemento
Desenhado faixas com “before” e “after”
 Pseudo Elementos servem para criar formas de botões que antes só era possível com o
uso de imagens de fundo.

 Crie e Visualize






<section>
<h1>Um exemplo de pseudo elementos</h1>
</section>

section {
border: 1px solid #000;
height: 100px;
margin: 40px auto;
width: 400px;
}
h1 {
font-size: 1.2em;
text-align: center;
}

Componentes do Html5 e CSS Pseudo Elemento
Transformando h1
 Laterais da faixa para fora da seção








 Criando efeito pelo lado esquerdo usando before
 Content define o conteúdo mas não esta sendo usado
 Criamos uma borda na parte superior do elemento.
h1 {
background-color: #990000;
color: #FFF;
font-size: 1.2em;
left: -10px;
padding: 5px 0;
position: relative;
text-align: center;
width: 420px;
}
h1::before {
border: 5px solid #7C0000;
content: "";
left: 0;
position: absolute;
top: -10px;
}

Componentes do Html5 e CSS Pseudo Elemento
Transformando h1
 Ajustamos um pouco para dar o efeito







h1::before {
border: 5px solid #7C0000;
content: "";
left: 0;
position: absolute;
top: -10px;
}

h1::before {
border-color: transparent #7C0000 #7C0000 transparent;
border-style: solid;
border-width: 5px;
content: "";
left: 0;
position: absolute;
top: -10px;
}
Componentes do Html5 e CSS Pseudo Elemento
Transformando h1
 Colocando o efeito no lado esquerdo – after








 Inverter alguns detalhes;
 Left para Right
 Posições da lista de cores (transparent transparent #7C0000 #7C0000;)








h1::before {
border-color: transparent #7C0000
#7C0000 transparent;
border-style: solid;
border-width: 5px;
content: "";
left: 0;
position: absolute;
top: -10px;
}
h1::after {
border-color: transparent transparent #7C0000 #7C0000;
border-style: solid;
border-width: 5px;
content: "";
position: absolute;
right: 0;
top: -10px;
}
Próxima Aula: Formulários