Vous êtes sur la page 1sur 10

Html5 and css3

Professor Jolvani

Aula 03
Criar uma nova Pgina 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>
Refatorao da pgina
Altere as divs borda por article o html e as respectivas classes no css
<div class=borda> <article>
Altere o css tambm.
Altere tambm 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 tambm
Componentes do Html5 e CSS
Nova pagina denominada reset.html

Visualize-a nos diferentes navegadores, observe as diferenas e
incompatibilidades.





Agora adicione a biblioteca normalize.css
<link rel="stylesheet" href="lib/normalize.css">
<fieldset>
<legend>Campos do formulrio</legend>
<abbr title="Hypertext Markup Language">HTML</abbr>
<p><label>Faa 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 botes que antes s era possvel 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 seo








Criando efeito pelo lado esquerdo usando before
Content define o contedo mas no 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
Posies 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;
}
Prxima Aula: Formulrios