Avisos em CSS // 25.04.16 13:12
Olá pessoal,
Avisos e seu código HTML e CSS:
alguns avisos em CSS para o site/forum e achei eles tão legais que irei compartilhar com vocês.
Base do CSS (Todo aviso tem que ter esse código no início):
- Código:
@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
.box {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #ffffff;
font-family: 'Open Sans', sans-serif;
margin-bottom: 25px;
padding: 10px 14px 10px 44px;
position: relative;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.box:before {
font-family: FontAwesome;
font-size: 21px;
left: 14px;
position: absolute;
}
Avisos e seu código HTML e CSS:
Aviso de sucesso
Este é um aviso de sucesso!
Este é um aviso de sucesso!
- Código:
[ltr]<center>
<div class="sucesso box">
<strong>Aviso de sucesso</strong><br>
Este é um aviso de sucesso!
</div>
</center>[/ltr]
[ltr].sucesso {
background-color: #2ecc71;
}
.sucesso:before {
content: "\f00c";
margin-left: -2px;
}[/ltr]
Aviso de falha
Este é um aviso de falha!
Este é um aviso de falha!
- Código:
[center][ltr]<center>
<div class="falha box">
<strong>Aviso de falha</strong><br>
Este é um aviso de falha!
</div>
</center>[/ltr]
[/center]
[center][ltr].falha {
background-color: #e74c3c;
}
.falha:before {
content: "\f00d";
}[/ltr][/center]
Aviso
Este é um aviso!
Este é um aviso!
- Código:
[center][ltr]<center>
<div class="aviso box">
<strong>Aviso</strong><br>
Este é um aviso!
</div>
</center>[/ltr]
[/center]
[center][ltr].aviso {
background-color: #e67e22;
}
.aviso:before {
content: "\f12a";
margin-left: 5px;
}[/ltr][/center]
Aviso de informação
Este é um aviso de informação!
Este é um aviso de informação!
- Código:
[center][ltr]<center>
<div class="info box">
<strong>Aviso de informação</strong><br>
Este é um aviso de informação!
</div>
</center>[/ltr]
[/center]
[center][ltr].info {
background-color: #3498db;
}
.info:before {
content: "\f129";
margin-left: 4px;
}[/ltr][/center]
Questão
Esta é uma questão!
Esta é uma questão!
- Código:
[center][ltr]<center>
<div class="questao box">
<strong>Questão</strong><br>
Esta é uma questão!
</div>
</center>[/ltr]
----------------------------------------------------------------------[/center]
[center][ltr].questao {
background-color: #f1c40f;
}
.questao:before {
content: "\f128";
margin-left: 2px;
}[/ltr][/center]
Dica
Esta é uma dica!
Esta é uma dica!
- Código:
[center][ltr]<center>
<div class="dica box">
<strong>Dica</strong><br>
Esta é uma dica!
</div>
</center>[/ltr]
[/center]
[center][ltr].dica {
background-color: #16a085;
}
.dica:before {
content: "\f0eb";
margin-left: 2px;
}[/ltr][/center]
Anúncio
Este é um anúncio!
Este é um anúncio!
[ltr]<center>
[/ltr]
[/ltr]
- Código:
[center][ltr]<div class="anuncio box">
<strong>Anúncio</strong><br>
Este é um anúncio!
</div>
</center>[/ltr]
[/center]
[center][ltr].anuncio {
background-color: #bea474;
}
.anuncio:before {
content: "\f0a1";
margin-left: -1px;
}[/ltr][/center]
Creditos :
Joao - Por postar aqui
Secreto - Por ser concorrente nao irei falar !
Demo de alguns info box : Aqui
Demo de alguns info box : Aqui
