shadow input si textarea

Aici postaţi orice este legat de tehnologiile "client side". HTML, HTML5, XHTML, CSS, CSS3, XML, Standarde
Manual JS: http://www.phpromania.net/jsmanual/index.html

Moderatori: eyecon, Moderatori

oarecare
PHPRomania Supporter
Mesaje: 18
Membru din: Mie Iul 11, 2007 12:02 am

shadow input si textarea

Mesajde oarecare » Joi Apr 09, 2009 6:22 pm

as vrea sa fac o umbra la orice input (fie el text, textarea, select). Sa porneasca de la culoarea border-ului cu un degrade pana la alb (background) in aproximativ 10 pixeli, si sa apara in dreapta si dedesubt)
Exista ceva proprietate css pt asta? sau trebuie sa fac cate un div mai mare cu 10x10, caruia sa ii pun background?



Avatar utilizator
kleampa
Senior Member
Mesaje: 2774
Membru din: Dum Iul 10, 2005 2:12 pm
Localitate: Bucuresti
Contact:

Mesajde kleampa » Joi Apr 09, 2009 6:52 pm

doar cu imagine

oarecare
PHPRomania Supporter
Mesaje: 18
Membru din: Mie Iul 11, 2007 12:02 am

Mesajde oarecare » Joi Apr 09, 2009 7:03 pm

aia e clar, dar pot sa o atasez cumva la input, fara sa fac div-uri wrapper?

Avatar utilizator
kleampa
Senior Member
Mesaje: 2774
Membru din: Dum Iul 10, 2005 2:12 pm
Localitate: Bucuresti
Contact:

Mesajde kleampa » Joi Apr 09, 2009 8:20 pm

o pui ca background image, dai padding ca sa nu apara textul fix pana unde se termina umbra si dai border:0

oarecare
PHPRomania Supporter
Mesaje: 18
Membru din: Mie Iul 11, 2007 12:02 am

Mesajde oarecare » Joi Apr 09, 2009 9:19 pm

aia ar presupune sa fac imaginile pentru fiecare dimensiune de input... si cross-browser ma omoara. plus ca la textarea va fi scrollul fix peste border-ul meu facut cu multa sudoare. Mai multe complicatii decat rezolvari. (probabil ca si la select va fi sagetuta peste)
am facut un div, am pus imaginea aliniata bottom right si lunga cat o zi de post. Se pare ca merge, dar... am un pixel mai mare div-ul decat input-ul



Cod: Selectaţi tot

<html>
<br/><br/>
<div style=' padding:0px; margin:0px; width:0px; height:0px;padding-right:10px; padding-bottom:10px; background:#CCCCCC;'>
<input name=exemplu style='padding:0px; margin:0px;width:100px; height:20px; border:1px solid red;'>
</div>
</html>

(a se vedea deasupra de input)

cum scot pixelu' ala?
LE: daca pun size la div, apare ok in ff, dar in ie ramane pixelu' ala blestemat
le2: am gasit... trebuie vertical-align:top la input ca sa mearga si in ie

Avatar utilizator
Seotop
PHPRomania Supporter
Mesaje: 25
Membru din: Mie Mar 25, 2009 10:56 pm
Localitate: Brasov
Contact:

Mesajde Seotop » Sâm Apr 11, 2009 11:08 am

Cu mici modificari cred ca asa vrei sa arate.

Cod: Selectaţi tot

<html>
<br/><br/>
<div style='border-right:2px solid #c4c4c4; border-bottom:2px solid #c4c4c4; height:30px; width:102px;'>
<input name='exemplu' style='width:100px; height:28px; border:1px solid red; padding:4px; background:#fff;'>
</div>
</html>
Caut in Romania

oarecare
PHPRomania Supporter
Mesaje: 18
Membru din: Mie Iul 11, 2007 12:02 am

Mesajde oarecare » Lun Apr 13, 2009 4:41 pm

da, dar la ie trebuie sa ii spui vertical-align (css) sau valign (html) top ca sa nu se puna la un pixel sub div.


Înapoi la “HTML/JavaScript/CSS”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Google [Bot] și 19 vizitatori