[SOLUCIONADO] Como hacer lo siguiente en CSS y html?

[jhonjaider1000]

Hola amigos me gustaría saber como hacer la ventanita flotante que aparece en html5 para validar pero en css, en verdad se como hacer que se vea asi bonito, pero me gustaria saber si me pueden ayudar a hacerlo con el triangulo que se ve arriba del recuadro en donde está el contenido:




en verdad me urge hacer esto se los agradecería un resto....

[baccxus]

usas required en el input:

Código HTML:

<input type="text" id="..." name="..." required/>
<button>Enviar<button>
 

Saludos

[fede5426]

Usando "required" logras esa ventanita idéntica a la que diste de ejemplo, solo en chrome.. va a depender del navegador porque es una ventana por defecto, tanto en mozilla, opera y explorer se va a ver diferente.

Si tu pregunta es como hacer la flechita, se hace con :after o :before (es indiferente cual uses).

Por ejemplo, una flechita a la derecha:

Código HTML:

<div class="cartelito">Soy Un Cartelito</div>
 

Código CSS:

.cartelito{
  padding:.5em 1em;
  background-color: #ff7461;
  color:#fff;
  font-family:Calibri;
  font-size:1.2em;
  width:150px;
  text-align:center;
  position:relative;
}
 
.cartelito:after{
  content:"";
  border-left: 10px solid #ff7461;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  position:absolute;
  left:100%;
  top: 10px;
}
 

--> http://codepen.io/anon/pen/doyQxx

* EDITO: Agregué 2 cartelitos más al codepen para que se entienda mejor *

Consiste en trabajar solo en los bordes, si te fijas los bordes a medida que se agrandan "chocan" entre si y forman una esquina:



Mira que pasa si colocamos bordes gruesos:



Entonces por deducción, para hacer la flecha hacia la derecha lo que hice fue aplicarle un border-left grueso y del color de la ventanita emergente, y bordes superior e inferior tambien gruesos para formar la flecha, pero indicando que sean transparentes:



Es cuestión de ir probando tamaños hasta que quede como te guste, se pueden hacer flechas flacas y largas, anchas y pequeñas, como a vos se te ocurra y en la posición que quieras. Por ejemplo, para hacer la flechita arriba como en la imagen que mostraste, usaría un border-bottom de color y bordes left y right transparentes para que formen la flecha, con un bottom de 100% y unos pocos pixeles de left.

Un detalle, siempre tiene que haber un "content" cuando asignas estilos a un after o un before.. para este caso en especial, lo dejas vacío, pero el atributo content tiene que estar sino la flecha no va a aparecer. Y para ubicarlo vas a tener que usar posición absoluta, siempre indicando que su padre tenga posición absoluta o relativa para que tome como referencia sus bordes, en mi ejemplo el div.cartelito tiene posición relativa.

Estaba inspirado jaja espero te sirva mi explicación, mejor que esto no lo puedo hacer :P

Saludos

[jhonjaider1000]

Iniciado por fede5426

Si tu pregunta es como hacer la flechita, se hace con :after o :before (es indiferente cual uses).

Muchas graciasssss :D investigué un poco también y es exactamente lo que quería, pues usar el required no es lo que deseo, pues en verdad precisamente por que no se verá en todos los navegadores, lo que quiero es lograr hacer un div flotante igualito al de html5 que nos muestra al validar con required.....

Muchas gracias en verdad campeón

[pzin]

Iniciado por jhonjaider1000

un div flotante igualito al de html5 que nos muestra al validar con required.....

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.

[fede5426]

Iniciado por pzin

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:

<div class="cartelito"><span>!</span>Completa este campo</div>
 

Código CSS:

body{
  background-color:#c2c2c2;
}
.cartelito{
  padding:.5em;
  background-color: #f5f5f5;
  color:#161616;
  font-family:Calibri;
  font-size:1.1em;
  width:185px;
  text-align:center;
  position:relative;
  margin:2em;
  border:1px solid #c2c2c2;
  border-radius:.3em;
  box-shadow:0 3px 5px #a2a2a2;
}
 
.cartelito > span{
  color:#fff;
  font-weight:bold;
  padding:0 .5em;
  background-color:#faab20;
  margin-right:5px;
  border-radius:.2em;
}
 
.cartelito:after{
  content:"";
  border-bottom: 10px solid #f7f7f7;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  position:absolute;
  bottom:100%;
  left: 10px;
}
 

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

[AngelKrak]

aqui lo tienes ammig@ codigo completo HTML5 ;)
http://codepen.io/AngelKrak/pen/oXNKab

[fede5426]

Iniciado por AngelKrak

aqui lo tienes ammig@ codigo completo HTML5 ;)
http://codepen.io/AngelKrak/pen/oXNKab

Angel no leíste nada, cierto?

[PHPeros]

fede5426, ¿hiciste tú el código? Porque realmente lo has clavado, e incluso viene a ser mejor que el nativo

[fede5426]

Iniciado por PHPeros

fede5426, ¿hiciste tú el código? Porque realmente lo has clavado, e incluso viene a ser mejor que el nativo

Jaja si, lo hice yo.. Gracias!

Espero que no sea sarcasmo

[PHPeros]

Iniciado por fede5426

Espero que no sea sarcasmo

Para nada +1

[AngelKrak]

yo lei que queria eso ._. como hacer la ventanita flotante que aparece en html5 para validar... tambien hacerlo con el triangulo que se ve arriba del recuadro pero ese triangulo a mi me sale con Google, Mozilla >_< y por cierto tu codigo esta bueno fede >_<

[fede5426]

Gracias de nuevo PHPeros..

Angel, lo que preguntó es cómo hacer la ventanita flotante de validación con CSS.. Y la flechita :P Gracias también por lo del código..

[AngelKrak]

haaa ya fede5426, no le habia entendido eso jajaja xD pero esta chido, me gusto tu codigo (Y) aun que me acuerdo que habia bajado un monton de esos mensajitos, unos con animaciones, otros con la flecha diferente, etc... jejeje xD

[pzin]

Iniciado por fede5426

Angel no leíste nada, cierto?

Yo empiezo a pensar que es su forma de ser.

[NueveReinas]

Iniciado por pzin

Iniciado por fede5426

Angel no leíste nada, cierto?

Yo empiezo a pensar que es su forma de ser.

Es un Taringuero, eso también hay que tenerlo en cuenta...

[AngelKrak]

Iniciado por NueveReinas

Es un Taringuero, eso también hay que tenerlo en cuenta...

Soy Diamond, Exigo Respeto

[NueveReinas]

Iniciado por AngelKrak

Soy Diamond, Exigo Respeto