[SOLUCIONADO] Estilo a formulario

[krlosh2]

Hola chicos, necesito su ayuda.
Me gustaria darle estilo a un formulario para que quedara como esta imagen
ayudenme con esto por favor.

[GusleonP]

Hola....bueno lo mas simple es hacer la imagen de fondo y dejarla como BG de un DIV, dentro de ese DIV creas los campos que necesites del FORM y con CSS los ubicas donde deben quedar y listo. Es muy simple. Espero te sea util.

[PHPeros]

A ver, puedes quitarle el borde a un input y rotarlo un poco... pero eso quedaría bastante cutre

Mejor usar canvas, o flash como último chance.

[Dalam]

No le hagas caso a PHPeros y haz lo que te dijo GusleonP.
Lo que si que te aconsejo esque el input debes quitarle bordes y stylos y en la imagen que tienes deberias quitarle lo de Dijita aqui, para luego incluirlo dentro del input como value y mediante javascript podrias agregarle que al hacer click en el input que borrara lo de digita aqui, para que asi el usuario no tubiera que borrar esa frase y lo haga automaticamente.

[EmpireFX]

Iniciado por Dalam

... en la imagen que tienes deberias quitarle lo de Dijita aqui, para luego incluirlo dentro del input como value y mediante javascript podrias agregarle que al hacer click en el input que borrara lo de digita aqui, para que asi el usuario no tubiera que borrar esa frase y lo haga automaticamente.

O utilizar placeholder

Código HTML:

<input type="text" placeholder="Escriba aqui...">
 

[jonni09lo]

Iniciado por EmpireFX

O utilizar placeholder

Código HTML:

<input type="text" placeholder="Escriba aqui...">
 

Y como editarías el estilo de un placeholder? (crossbrowser claro está)... Lo mas simple es usar una imagen de fondo tanto para el div como para el label del input... y simular un placeholder con javascript (aunque creo que con css se podría, sería un reto interesante). Lo mas complejo es usar canvas aunque claro eso es complicarse la vida...

Saludos.

[Dalam]

Con css no seria tanto reto jonni09lo.
Seria cuestion de ponerle un div con la imagen de fondo y luego el input sin fondo, ni bordes ni nada, lo unico definir el tipo de letra ese raro y posicionarlo para que cuadre en el espacio de escritura del fondo.
Luego lo del javascript que mencione se podria hacer con el evento onclick o con el evento hover.

[jonni09lo]

Iniciado por Dalam

Con css no seria tanto reto jonni09lo.
Seria cuestion de ponerle un div con la imagen de fondo y luego el input sin fondo, ni bordes ni nada, lo unico definir el tipo de letra ese raro y posicionarlo para que cuadre en el espacio de escritura del fondo.
Luego lo del javascript que mencione se podria hacer con el evento onclick o con el evento hover.

Ahhh y si no es tanto reto por qué nombras a javascript? (golpe de remo ) cuando hablé de un reto CSS fue hacer una simulación de placeholder usando únicamente css (sin una pizca de javascript)

Saludos

[EmpireFX]

Solo daba la idea de no tener que utilizar js... sobre editar el estilo, coincido con vos utilizando solo una imagen de fondo, el problema seria si queremos agregar un textarea pero si solo son casillas de formularios esta bien.
Sobre canvas... para que utilizarlo? solo tenemos que rotarlo un poco, se puede hacer con css3

Código CSS:

-webkit-transform: rotate(-90deg);
 

[jonni09lo]

Entonces se animan? hacer lo mismo que quiere el estimado con la menor cantidad de javascript posible (jQuery estaría prohibido) y que ofrezca la mayor cantidad de compatibilidad crossbrowser. Y se pondrían los demos en jsfiddle o en un pen que que todos saldríamos ganando

Saludos

[pzin]

Puedes usar border-image para los bordes.

• W3C
• MDN
• Artículo de Chris Coyier

Para simular la acción del placeholder puedes añadirlo usando content en un pseudo-elemento cuando le vayas a poner un label (no se puede al elemento del formulario ya que no es una etiqueta de contenido), y luego ocultarlo usando :focus (con un selector del tipo input:focus+label).

Iniciado por EmpireFX

Código CSS:

-webkit-transform: rotate(-90deg);
 

Con CSS sería en todo caso:

Código CSS:

transform: rotate(-90deg);
 

[Dalam]

Iniciado por jonni09lo

Entonces se animan? hacer lo mismo que quiere el estimado con la menor cantidad de javascript posible (jQuery estaría prohibido) y que ofrezca la mayor cantidad de compatibilidad crossbrowser. Y se pondrían los demos en jsfiddle o en un pen que que todos saldríamos ganando

Saludos

jonni09lo si lo necesitaras tu, solo por devolverte el palo de remo lo haria aunque no durmiera en unos cuantos dias para conseguirlo.
Pero creo que este sistema no lo integrarias en ningun proyecto.
Y e tiempo es oro.
Si el post lo hubieras iniciado tu te lo hubiera puesto mas dicifil por que sabemos lo que hacemos, pero no se lo e querido poner muy dificil al chabal y le e dicho una forma de que lo pueda solucionar rapidamente y sin darle mucho quebradero de cabeza.

Aparte si quieres otro golpe de remo te lo aceptaria eso de no usar jquery, pero seria un poco mas que tu y podria usar mootools, que no has dicho nada de no usarlo , jajajajajajajaja.
Pero bueno a lo dicho, sigo pensando que lo que le e propuesto es lo mas simple que podria hacer sin que nos este masacrando con preguntas en el foro y para que pudiera experimentar con los estilos y demas, sin complicarse demasiado la vida.

[jonni09lo]

jajajajaja estamos en un foro (concretamente en el de CSS) así que es natural proponer diversas soluciones a un mismo problema. ¿Por qué? porque es divertido, porque aprendemos cada día aún mas y porque (apoyando a un usuario) todos tenemos de desactivar javascript alguna vez y claro las ideas ya están dadas y el estimado ya sabrá que hacer y por donde seguir, pero por qué quedarse con únicamente lo que ya sabemos?, por qué no extendemos nuestras fronteras del conocimiento y vamos más allá, puede ser cierto que probablemente nunca lleguemos a usar eso en un proyecto (o puede que si) pero la idea de aprender más, a mi como programador, me satisface en demasía.

PD: gracias a la revelación divina que ha dado @pzin me pongo a hacer el fiddle... sería interesante que más gente participara

Saludos

[krlosh2]

Probaré lo del fondo en el div, lo de digite aqui pensaba hacerlo con javascript. Por otro lado el tema lo puse acá por que como es cosa de css, lo cual no manejo mucho, necesitaba la ayuda.
Gracias por las respuestas, les comentaré como me quedo.

[krlosh2]

Lo hice, así me quedo


Gracias por la ayuda