Fade σε textarea

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Dr_Java
Δημοσιεύσεις: 218
Εγγραφή: 15 Αύγ 2003 16:42
Τοποθεσία: πειραιας
Επικοινωνία:

Fade σε textarea

Δημοσίευση από Dr_Java » 25 Αύγ 2004 13:49

Καλημέρα...
Εχω δει πάρα πολλές φορές σε σελίδες μέσα σε φόρμες τα textarea σε μηχανές αναζήτησης και οχι μόνο, αντί για το κλάσικό ασπρο χρώμα
να έχουν ενα fade σε διάφορα χρώματα.... Αυτό έχω καταφέρει να το κάνω μόνο σε πίνακες.

Ο κώδικας για να κάνεις κατι τέτοιο ποιός είναι?
Εικόνα

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Fade σε textarea

Δημοσίευση από chchrist » 25 Αύγ 2004 14:39

Αν θέλεις να αλλάξεις το χρώμα του input μπορείς με css
Δοκίμασε αυτό:

<form>
<input type="text" style="background:green;border:2px solid red;" />
</form>

Τώρα άμα θες animated fade μπορείς με flash, δεν ξέρω άμα γίνεται με javascript.

Άβαταρ μέλους
ArchangelX
Honorary Member
Δημοσιεύσεις: 2430
Εγγραφή: 24 Μαρ 2004 13:33
Τοποθεσία: 7ος Ουρανός
Επικοινωνία:

Fade σε textarea

Δημοσίευση από ArchangelX » 25 Αύγ 2004 14:55

H opencube dinei pola tetoia paradeigmata kwdika. Exei ena free arxeio baroys 1mb. Mesa exei ta kerata... Poly syn8eta bebaia alla poly kala...
Εικόνα

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Fade σε textarea

Δημοσίευση από ThyClub » 26 Αύγ 2004 11:52

google για filter alpha opacity και βάλτο μέσω css στην textarea

Άβαταρ μέλους
Dr_Java
Δημοσιεύσεις: 218
Εγγραφή: 15 Αύγ 2003 16:42
Τοποθεσία: πειραιας
Επικοινωνία:

Fade σε textarea

Δημοσίευση από Dr_Java » 28 Αύγ 2004 18:14

Παιδια δοκίμασα τα πάντα σε αυτά που μου είπατε αλλα δεν είχε τπτ το παρακάτω αποτέλεσμα. Κοιτάξτε την φωτό και θα καταλάβαιτε καλύτερα ίσως τι θέλω να κάνω

Εικόνα

Θέλω συγκεκριμένα το Fade που κάνει μέσα στο textarea. Ο κώδικας που δοκίμασα είναι
1ον:
<form>
<input type="text" style="background:green;border:2px solid red;" />
</form>

και 2ον:
<form>
<input type="text" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#CCFFFF', startColorstr='#3333FF', gradientType='0');" />
</form>

Κανένας απο τους δυο δεν έχει το αποτέλεσμα της φωτο παραπάνω...
Καμια ιδέα ια το πως μπορει να γίνει ????
Εικόνα

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Fade σε textarea

Δημοσίευση από chchrist » 28 Αύγ 2004 18:19

Μπορείς να μας δώσεις λίγο το link;

Άβαταρ μέλους
Dr_Java
Δημοσιεύσεις: 218
Εγγραφή: 15 Αύγ 2003 16:42
Τοποθεσία: πειραιας
Επικοινωνία:

Fade σε textarea

Δημοσίευση από Dr_Java » 28 Αύγ 2004 18:22

Ναι φυσικά ειναι:
www.150m.com
Εικόνα

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Fade σε textarea

Δημοσίευση από chchrist » 28 Αύγ 2004 18:37

Λοιπόν ο κώδικας του form είναi:


<div class="frm">
<form name="signup_user" action="http://signup.150m.com/signup" method="get">
<input type="hidden" name="p" value="150m">
<input class="input" type="text" name="username" value="yourname" size="12">.150m.com
<input type="image" src="images/click-to-search.gif" alt="Click to Search">
</form>


To μυστικό βρίσκεται στο <div class="frm">.


Δημιουργεί μια class σε ένα external css και λογικά εκεί θα έχει βάλει ένα background image για το textarea. 'Αρα κατεμε είναι απλά μια εικόνα.

Προσπάθησε λοιπόν αυτο:

<form>
<input type="text" style="background:url(i_eikona_pou_theleis.gif) no-repeat;" />
</form>

Άβαταρ μέλους
Dr_Java
Δημοσιεύσεις: 218
Εγγραφή: 15 Αύγ 2003 16:42
Τοποθεσία: πειραιας
Επικοινωνία:

Fade σε textarea

Δημοσίευση από Dr_Java » 28 Αύγ 2004 18:59

Μου κάνει φέναιτε περίεργο να έχει βάλει εικόνα στο input που έχει... απλά γιατί το έχει δει και σε άλλες σελίδες πχ κοίτα στο www.bravenet.com δηλαδή ο μόνος τρόπος είναι αυτός?!?!?!??!
Τέσπα θα το δοκιμάσω και βλέπουμε..
Εικόνα

Άβαταρ μέλους
grjava
Δημοσιεύσεις: 387
Εγγραφή: 13 Μαρ 2002 01:00
Τοποθεσία: athens
Επικοινωνία:

Fade σε textarea

Δημοσίευση από grjava » 29 Αύγ 2004 03:07

Το fade το κάνει το filter

Κώδικας: Επιλογή όλων

filter&#58;progid&#58;DXImageTransform.Microsoft.Gradient&#40;endColorstr='#CCFFFF', startColorstr='#3333FF', gradientType='0'&#41;;"
Για να γίνει αυτό ο server σου πρέπει να δουλεύει με Windows OS :-?

Βέβαια υπάρχει και άλλη λύση αλλά με 2 μειονεκτήματα.. είναι το alpha filter και ο κώδικας είναι ο παρακάτω:

Κώδικας: Επιλογή όλων

<form> 
<INPUT type="text" style="background-color&#58;#CCFFFF;filter&#58;alpha&#40;Opacity=80, FinishOpacity=0, Style=1, StartX=200, StartY=0, FinishX=500, FinishY=100&#41;&#125;border-width &#58; 1px 1px 1px 1px;border-style &#58; solid solid solid solid;"> 
</form>
Το 1ο μειονέκτημα είναι ότι "παίζει" μόνο σε explorer..
και το δεύτερο είναι το εξής:
Το πρώτο χρώμα που παίρνει για να κάνει το εφέ του fade είναι στην περίπτωση του παραδείγματος το #CCFFFF.. το δεύτερο χρώμα είναι το background της σελίδας μας!! :hammer:

Άβαταρ μέλους
softius
Script Master
Δημοσιεύσεις: 241
Εγγραφή: 11 Ιαν 2004 19:07
Επικοινωνία:

Fade σε textarea

Δημοσίευση από softius » 29 Αύγ 2004 11:18

Dr_Java έγραψε:Μου κάνει φέναιτε περίεργο να έχει βάλει εικόνα στο input που έχει...
O chchrist έχει δίκαιο. Στο link που μας έχεις δώσει χρησιμοποιείται μία εικόνα για το background του input. Να και η εικόνα

Ακολουθώντας την μέθοδο που σου παράθεσε ο chchrist,

Κώδικας: Επιλογή όλων

<form>
<input type="text" style="background&#58;url&#40;i_eikona_pou_theleis.gif&#41; no-repeat;" />
</form>
όλα πρέπει να δουλεύουν μια χαρά - ανεξάρτητα με το τι λογισμικό τρέχει ο server σου ή τι είδος φυλλομετρητή έχεις.

Άβαταρ μέλους
Dr_Java
Δημοσιεύσεις: 218
Εγγραφή: 15 Αύγ 2003 16:42
Τοποθεσία: πειραιας
Επικοινωνία:

Fade σε textarea

Δημοσίευση από Dr_Java » 30 Αύγ 2004 02:56

Παιδιά χίλια ευχαριστώ... πραγματικά μου λύσατε τα χέρια απο ψάξιμο για πολλές μέρες... ( γιατι εαν δεν το έβρησκα θα έσκαγα!!!) Αλήθεια softius πως βρήκες το path της εικόνας?
Εικόνα

Άβαταρ μέλους
softius
Script Master
Δημοσιεύσεις: 241
Εγγραφή: 11 Ιαν 2004 19:07
Επικοινωνία:

Fade σε textarea

Δημοσίευση από softius » 30 Αύγ 2004 10:41

Όπως έγραψε και ο chchrist, ο κώδικας της φόρμας είναι:

Κώδικας: Επιλογή όλων

<form name="signup_user" action="http&#58;//signup.150m.com/signup" method="get">
  <input type="hidden" name="p" value="150m">
  <input class="input" type="text" name="username" value="yourname" size="12">.150m.com
  <input type="image" src="images/click-to-search.gif" alt="Click to Search">
</form> 
Αυτό που έψαχνες βρίσκεται εδώ:
<input class="input" type="text" name="username" value="yourname" size="12">

Αφού ανοίξουμε το css αρχείο (http://www.150m.com/style.css) της σελίδας, ψάχνουμε για την κλάση input. Να και ο κώδικας:

Κώδικας: Επιλογή όλων

.input &#123;
	padding-left&#58; 5px;
	background&#58;  url&#40;images/shadow.gif&#41; no-repeat;
&#125;
Αυτό τα λέει όλα νομίζω. Αν θες μπορείς να το κάνεις κι εσύ με παρόμοιο τρόπο. ;)

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες