Ver Mensaje Individual
  #6 (permalink)  
Antiguo 24/04/2015, 11:21
Avatar de fede5426
fede5426
 
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 10 años, 3 meses
Puntos: 208
Respuesta: Como hacer lo siguiente en CSS y html?

Cita:
Iniciado por pzin Ver Mensaje
Como ya han dicho, no es una cosa de HTML5 sino algo propio del navegador, en este caso Chrome. En otros se verá algo parecido o algo totalmente diferente.
Creo que eso ya le quedo claro pzin jaja lo que quiere es imitar la ventana que sale por defecto en chrome (o eso entendí yo).

Seria algo asi:

Código PHP:
Ver original
  1. <div class="cartelito"><span>!</span>Completa este campo</div>


Código CSS:
Ver original
  1. body{
  2.   background-color:#c2c2c2;
  3. }
  4. .cartelito{
  5.   padding:.5em;
  6.   background-color: #f5f5f5;
  7.   color:#161616;
  8.   font-family:Calibri;
  9.   font-size:1.1em;
  10.   width:185px;
  11.   text-align:center;
  12.   position:relative;
  13.   margin:2em;
  14.   border:1px solid #c2c2c2;
  15.   border-radius:.3em;
  16.   box-shadow:0 3px 5px #a2a2a2;
  17. }
  18.  
  19. .cartelito > span{
  20.   color:#fff;
  21.   font-weight:bold;
  22.   padding:0 .5em;
  23.   background-color:#faab20;
  24.   margin-right:5px;
  25.   border-radius:.2em;
  26. }
  27.  
  28. .cartelito:after{
  29.   content:"";
  30.   border-bottom: 10px solid #f7f7f7;
  31.   border-left:10px solid transparent;
  32.   border-right:10px solid transparent;
  33.   position:absolute;
  34.   bottom:100%;
  35.   left: 10px;
  36. }


http://codepen.io/anon/pen/jPOgGz