ASP.net

Gradient Page Background χωρίς καμία εικόνα!

Καλησπέρα σε όλους και καλή χρονιά! Το 2008 ξεκίνησε και ξεκίνησε δυναμικά! Ετσι λοιπόν και εγώ έπεσα πάνω σε κάτι καταπληκτικό την 1η μέρα του χρόνου!

Η ΑΡΧΗ

Πάντα μου άρεσαν τα background κάποιων σελίδων που ήταν Gradient (Δλδ είχαν 2 χρώματα. Ξεκίναγαν απο το ένα και κατέληγαν στο άλλο).

Όμως για να γίνει κάτι τέτοιο θα έπρεπε κάποιος να φτιάξει την εικόνα σε κάποιο πρόγραμμα επεξεργασιάς εικόνων να την ανεβάσει και να αλλάξει είτε το CSS είτε το style του element Που ήθελε. Και εκεί που κόλλαγα ήταν στη δημιουργία της εικόνας καθότι βαριόμουν (και ακόμα βαριέμαι ) να φτιάχνω εικόνες. Και έρχεται λοιπον αυτός ο από μηχανής θεός HttpHandler που μου λύνει τα χέρια!

ΔΗΛΑΔΗ ΤΙ? ΑΚΟΜΑ ΔΕΝ ΚΑΤΑΛΑΒΑ

Λοιπόν. Το θέμα είναι απλό. Μπορούμε προγραμματιστικά ή μη να δώσουμε εντολή στον Server να φτιάξει μία gradient εικόνα μόνος του και να την βάλει backround όπου του ζητήσουμε. Η εικόνα δημιουργείτε μέσω του HttpHandler και μετά απο κεί και πέρα χρησιμοποιούμε CSS για να την βάλουμε ως background.

ΩΡΑΙΑ ΤΟ ΚΑΤΑΛΑΒΑ. ΠΩΣ ΤΟ ΚΑΝΩ?

1. Βήμα 1ο. Βάζουμε στον φάκελο App_Code της εφαρμογής μου (Φάκελος που κρατάει ότι αρχεία κώδικα έχω και θέλω να είναι προσβάσιμα σε όλες τις σελίδες μου. ΠΡΟΣΟΧΗ : ΟΧΙ αρχεία κώδικα σελίδων.) δυό αρχεία."GradientHandler.cs" και "Utility.cs" τα οποία μπορούμε να τα προμηθευτούμε από εδώ.
2. Πηγαίνουμε στο Web.Config και προσθέτουμε το εξής :
   <system.web>
           <httpHandlers>
               <add path="Gradient.axd" verb="GET" type="Elsinore.Website.GradientHandler"/>
           </httpHandlers>
   </system.web>
   Προσοχή : Τα tags System.Web & httpHandler Μπορει να υπάρχουν. Αυτο που προσθέτουμε μόνο ειναι το <add path... .../>. Αν δεν υπάρχουν τα δημιουργούμε.
   Αυτό δηλώνει πως θα χρησιμοποιήσουμε αυτόν τον Handler που βρίσκεται στο μονοπάτι "http://mywebsite.com/Gradient.axd" και χρησιμοποιεί GET Μεθόδους. Αν δεν το καταλαβαίνετε απόλυτα δεν πειράζει απλά κάντε το Copy-Paste .
3. Στη συνέχεια διαλέγουμε ποιο στοιχείο της σελίδας μας θα έχει gradient background. Έστω ότι θέλουμε να έχει όλη η σελίδα. Τότε προσθέτουμε στο body ένα id="body" και ένα runat="server".
4. Στη συνέχεια πηγαίνουμε στο αρχείο που έχει των κώδικα της σελίδας μας (αν το κρατάμε σε διαφορετικό αρχείο) και προσθέτουμε στην συνάρτηση Page Load τα εξής :
   Color StartColor = ColorTranslator.FromHtml("#00ccff"); Color EndColor = ColorTranslator.FromHtml("#00cc00"); string backgroundUrl = GradientHandler.GetUrl(Orientation.Horizontal, 500, StartColor, EndColor); string backgroundCss = string.Format("{0} url({1}) repeat-y", "#00cc00", backgroundUrl); this.body.Style.Add("background", backgroundCss);
   Αρχικά ορίζουμε τα δύο χρώματα που θέλουμε να υπάρχουν στη σέλίδα μας. Στη συνέχεια ορίζουμε το background URL της εικόνας μας και τέλος το CSS που θα πρέπει να προσθέσουμε. Με την τελευταία εντολή το προσθέτουμε στο control που θέλουμε. Εδώ είναι το body. (Μπορούμε να το κάνουμε γιατι του δώσαμε ενα id και την ιδιότητα runat="server")

5. Ετσι λοιπόν έχουμε ένα αποτέλεσμα σαν αυτό
   

6. Μπορούμε φυσικά να κάνουμε το ίδιο πράγμα χωρίς να μπλέξουμε και κώδικα απλά προσθέτωντας στο style του control Που θέλουμε ή σε κάποιο CSS αρχείο το εξής
   background:#00cc00 url(Gradient.axd?Orientation=Horizontal&Length=500&StartColor=00CCFF&FinishColor=00CC00) repeat-y;

7. Και τα καταφέραμε. Φτιαξαμε gradient backround χωρίς τη χρήση javascript και χωρίς να δημιουργήσουμε καμία εικόνα. Και φυσικά το αποτέλεσμα ειναι Cross- Browser (είδατε τον browser απο πάνω νομίζω... )

Προσοχή αν θέλουμε να αλλάξουμε την διεύθυνση απο οριζόντια σε κάθετα αλλάζουμε το Orientantion=Horizontal σε Orientantion=Vertical και το repeat-y σε repeat-x. Το ίδιο γίνεται και προγραμματιστικά αλλά είναι τόσο απλό που πιστεύω οτι δεν χρειάζεται να το αναφέρω. Αν παρόλα αυτά έχετε πρόβλημα και δεν μπορείτε να το βρείτε ξαναδιαβάστε το post μου απο την αρχή .

CREDITS

Ένα μπράβο πραγματικά στον Jake Morgan που είχε αυτή την καταπληκτική ιδέα και την υλοποίησε! Ορίστε και το post του στο CodeProject για αυτόν τον Handler.