Background tricks

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

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

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

Background tricks

Δημοσίευση από ArchangelX » 12 Μαρ 2005 16:31

Το λευκό ή πολύ ανοιχτό γκρι background είναι κλασικό κομμάτι των περισσότερων ιστοσελίδων που βλέπουμε και ειδικά των ιστοσελίδων εμπορικού τύπου.

Αυτό είναι σωστό γιατί προσπαθούμε να προσανατολίσουμε τον επισκέπτη μας στο περιεχόμενο και όχι να τον κουράσουμε με έντονα χρώματα. Περιστασιακά, μπορεί να δούμε και κάποια άλλα ενδιαφέρον χρώματα όπως σκούρο κόκκινο/κυανό/μουσταρδί και άλλα τα οποία αν πετύχουμε τον συνδυασμό τους, φαίνονται πιο επαγγελματικά και από τα επαγγελματικά.

Κάπου όμως αυτή η μονοτονία αρχίζει και καταντάει κουραστική. Εκεί αρχίζουν τα paterns δηλαδή κομματάκια γραφικών τα οποία επαναλαμβάνονται κατά μήκος και πλάτος του site ή έστω κατά μήκος και πλάτος του κομματιού όπου βρίσκονται τα περιεχόμενα. Παρακάτω αναφέρονται 5 κολπάκια για να πετύχετε ένα αξιόλογο bgrd.

Ο βασικός κώδικας για προσθήκη bgrd σε όλη την σελίδα είναι πολύ απλός:

<body background=image.jpg>

Ενώ για να κάνετε το ίδιο μέσα σε ένα table και ίσως να το κάνετε να ξεχωρίζει από την υπόλοιπη σελίδα είναι :

<table background=image.jpg> [για όλο το table]

ή

<td background=image.jpg> [μόνο για ένα κελί]

[μπορείτε να τα χρησιμοποιήσετε και τα 2, ταυτόχρονα ;-) ]

Η εικόνα με το όνομα image.jpg έχει γίνει πλέον το bgrd σας. Αυτό βέβαια σημαίνει ότι θα πρέπει να είναι σχεδόν διαφανής ώστε οι λέξεις που θα πέσουν από επάνω (ή οτιδήποτε άλλο) να φαίνονται καλά και όχι να μπερδεύονται με τις αποχρώσεις του bgrd από πίσω. Η τυπική μέθοδος με την οποία γεμίζει όλο το site ή μόνο το table ή cell είναι η επανάληψη του image.jpg κατά μήκος και πλάτος, η οποία μέθοδος ονομάζεται tiled. Το κακό είναι ότι δεν δείχνει πολύ επαγγελματικό. Οπότε...

1. Χρησιμοποιήστε γραμμές. Κάθετες ή οριζόντιες ντεγκραντε γραμμές οι οποίες πιάνουν από την μία πλευρά της οθόνης στην άλλη. Όταν επαναλαμβάνονται το κάνουν τοποθετώντας τον εαυτό τους η μία κάτω από την άλλη ή δίπλα. Ο τρόπος παραμένει ίδιος. Το αποτέλεσμα όμως είναι πού διαφορετικό. Από άσπρο σε γκρι, από κόκκινο σκούρο σε μαύρο... οτιδήποτε χρώματα ταιριάζουν. Κάθετες γραμμές με διαστάσεις 1px*1500px και οριζόντιες με διαστάσεις 1500px*1px. Tα 1500px είναι γιατί δεν έχουν όλοι ίδιες αναλύσεις οθόνης. Προσπαθούμε να τους καλύψουμε όλους. Δεν θα θέλαμε εκεί που η γραμμή ενός gradient bgrd φαίνετε τόσο όμορφα, ξαφνικά να αρχίσει να επαναλαμβάνετε! Φανταστείτε ένα bgrd από άσπρο σε μπλέ/γκρι, ξαφνικά να κόβεται και να ξαναρχίζει το άσπρο... Όσο για τα 2000 pixel, μην σας τρομάζουν. Τα kb της γραμμής που χρησιμοποιείτε για bgrd δεν θα ξεπεράσουν ποτέ τα 4...

2. Κρατήστε το bgrd σας στην θέση του. Μην κουράζετε τον επισκέπτη σας με την συνεχή αλλαγή χρωμάτων καθώς κάνει scroll σε μία σελίδα της οποίας το background δεν είναι στατικό. Μην του αποσπάτε την προσοχή από αυτά που θέλετε να πείτε. Ο κώδικας για να το κάνετε αυτό είναι απλός:

<BODY background="image.jpg" bgproperties="fixed">

Αυτό, ναι μεν "δουλεύει" με patterns αλλά είναι ιδανικό για background όπως το εταιρικό σας λογότυπο στην ημιδιαφανής μορφή του και κατά προτίμηση σε grayscale (ασπρόμαυρο). Θυμηθείτε ότι ο σκοπός σας είναι να κάνετε το background σας όμορφο, και όχι να τραβήξετε την προσοχή του επισκέπτη πάνω του, γι αυτό και πρέπει να είναι ασπρόμαυρο και αρκετά διαφανές.

3. Ένα άλλο ενδιαφέρον κολπάκι είναι όταν θέλουμε να βάλουμε πχ το λογότυπο που λέγαμε πιο πριν αλλά όχι να επαναλαμβάνετε σε όλη την οθόνη. Ο τρόπος για να το κάνουμε είναι ο :

<BODY background="image.jpg" style="background-repeat: no-repeat;">

Το αντίστοιχο ισχύει και για τα table :

<table background=image.jpg style="background-repeat: no-repeat;">


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

<table background=image.jpg style="background-repeat: no-repeat;
background-position: top right;">


Βουαλά. Το γραφικό που δώσαμε για background τοποθετήθηκε στο πάνω δεξιά μέρος, χωρίς να επαναλαμβάνετε. Αν το μέγεθος του είναι και αρκετά μεγάλο? Μπορεί να πιάσει το μεγαλύτερο μέρος μίας οθόνης με ανάλυση 800*600 και σε μεγαλύτερες αναλύσεις όπως 1800*1600, θα κάτσει εκεί που είναι.

5. Ένας άλλος τρόπος να αξιοποιήσουμε τις δυνατότητες ενός background, σχετίζετε με τις μηχανές αναζήτησης. Η μηχανή αναζήτησης θα μπορέσει να ακολουθήσει πολύ καλύτερα ένα απλό text link παρά κάποιο javascript εναλλαγής κουμπιών τα οποία είναι γραφικά. Οπότε, τι καλύτερο από το να σχεδιάσετε ένα κενό "κουμπί" και να το τοποθετήσετε σαν background σε ένα κελί απόλυτων διαστάσεων (μήκος πλάτος σε pixel και όχι σε %) και από επάνω να βάλετε το text link? Σημειωτέον ότι θα είστε καλυμμένοι και σε θέματα αισθητικής και σε θέματα προώθησης της σελίδας σας.

Αν χρησιμοποιηθούν σωστά, τα background μπορούν να ομορφύνουν κατά πολύ το website σας. Ελπίζω αυτά τα κολπάκια να σας βοηθήσουν.
Εικόνα

Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Background tricks

Δημοσίευση από geraki » 12 Μαρ 2005 17:01

Πολύ καλό.

Θα ήθελα μόνο να κάνω μια παρατήρηση, ότι αφού ούτως ή άλλως χρησιμοποιείς styles στα τελευταία παραδείγματα, μπορείς να βάλεις και το background image ως style. Δηλαδή:
<table style="background-image: url('image.jpg'); background-repeat: no-repeat; background-position: top right;">
Έτσι είσαι και valid, και στους browsers που δεν υποστηρίζουν styles (υπάρχουν ακόμη; ), αντί να φαίνεται άσχημα, τουλάχιστον να μην φαίνεται καθόλου.
Εικόνα &#8592; Αυτό το έκλεψα απ'τον Eneme.

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

Background tricks

Δημοσίευση από ArchangelX » 12 Μαρ 2005 17:15

Σωστός. :wink:

Sorry αλλα το ξέχασα οτι έχω να κάνω και με FIREFOXάκηδες. Γεροπαράξενοι άνθρωποι παιδί μου...
Εικόνα

Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Background tricks

Δημοσίευση από geraki » 12 Μαρ 2005 17:24

:)
Δεν έχει σχέση με τον Firefox. Άλλωστε τα δείχνει σωστά και με τους δύο τρόπους.
Απλώς έχεις μεγαλύτερη ευελιξία έτσι. (Ειδικά αν το κάνεις class)

Έ, όχι και γέροι, ούτε 30 δεν είμαι ακόμα... ;)
Εικόνα &#8592; Αυτό το έκλεψα απ'τον Eneme.

Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Background tricks

Δημοσίευση από geraki » 12 Μαρ 2005 17:33

Τώρα που το θυμήθηκα, μπορούμε να χρησιμοποιήσουμε ταυτόχρονα background-color και background-image, έτσι ώστε εκεί που σταματά το background image, έχουμε το χρώμα που θέλουμε (προφανώς ανάλογα με το φόντο του image). π.χ. στο www.firefighters.gr έχουμε στο logo κόκκινο στο φόντο του jpg που είναι background-image και έχω δώσει κόκκινο στο background-color. Έτσι μπορούμε να χρησιμοποιήσουμε gradients και anti-aliasing, πράγμα που αν χρησιμοποιούσαμε transparent gif θα ήταν αδύνατο. (Σ'αυτό το παράδειγμα είναι div και όχι table, αλλά είναι ο ίδιος τρόπος)
π.χ.
<table style="background-color: red; background-image: url('image.jpg'); background-repeat: no-repeat; background-position: top left;">
Εικόνα &#8592; Αυτό το έκλεψα απ'τον Eneme.

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27626
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Background tricks

Δημοσίευση από cordis » 12 Μαρ 2005 19:25

ωραίο.. έγινε Βοήθημα.. ;)
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Matrox
Δημοσιεύσεις: 287
Εγγραφή: 26 Ιούλ 2004 04:28

Background tricks

Δημοσίευση από Matrox » 12 Μαρ 2005 19:29

Βρε ιέραξ, πυροσβέστης είσαι?

Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Background tricks

Δημοσίευση από geraki » 12 Μαρ 2005 19:53

Γες αϊ εμ. Γουάϊ;
Εικόνα &#8592; Αυτό το έκλεψα απ'τον Eneme.

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27626
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Background tricks

Δημοσίευση από cordis » 12 Μαρ 2005 19:58

του έχει ανάψει φωτιά μια μικρούλα και δε ξέρει πως να την σβήσει.. :P :P :lol: :P
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

Background tricks

Δημοσίευση από xmavidis » 12 Μαρ 2005 20:25

Ωραίο το tut! :P
I want to know God’s thoughts; the rest are details.
Albert Einstein

Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Background tricks

Δημοσίευση από geraki » 12 Μαρ 2005 20:29

cordis έγραψε:του έχει ανάψει φωτιά μια μικρούλα και δε ξέρει πως να την σβήσει.. :P :P :lol: :P
Ας την στείλει προς τα δω... :kaloe: :yea:
Εικόνα &#8592; Αυτό το έκλεψα απ'τον Eneme.

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

Background tricks

Δημοσίευση από ArchangelX » 12 Μαρ 2005 20:37

Βασικά αυτό που ήθελα να πετύχω έιναι να έχω 2 εικόνες για bgrd μέσα σε ένα cell το οποίο έχει σταθερό width. Δηλαδή ένα οριζόντιο line που να επαναλαμβάνεται κατα ύψος του cell και άλλο ένα το οποίο είναι σταθερό στον πάτο του cell και μοιάζει με κλείσιμο του. Δυστηχώς δέν μπορούμε να τα έχουμε όλα...

ΠιΕς. Πήρα θάρος απο το γεγονός οτι υπάρχουν παραπάνω απο μία εντολές για event τύπου mouseover. Υπάρχει το onMouseOver και το onMouseout. Υπάρχουν όμως και τα onMouseEnter και onMouseClear τα οποία φαίνετε να κάνουν ακριβώς την ίδια δουλειά (Αυτά είναι για το επόμενο tut). Τί να πείς. Σε λα βί...
Εικόνα

Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Background tricks

Δημοσίευση από geraki » 13 Μαρ 2005 00:20

Έχω μια ιδέα γι'αυτό που λες. Δυό divs με absolute positioning και με z-index το ένα πάνω από το άλλο, το απο κάτω μόνο το line background που λες, και το από πάνω το περιεχόμενο και το σταθερό background στον πάτο. Δοκίμασε και πες μας το αποτέλεσμα.
Εικόνα &#8592; Αυτό το έκλεψα απ'τον Eneme.

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

Background tricks

Δημοσίευση από ThyClub » 13 Μαρ 2005 05:13

Αυτό που είπε το γεράκι θα δουλέψει. Δοκιμάζεις και με μπερδεμένα css rules.

ΠΧ:

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

<table class="mix1 mix2">...
και :

CSS:

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

.mix1&#123;
εδώ τον κώδικα για το κάθετο BG
&#125;

mix2&#123;
εδώ για το κάτω κάτω
&#125;
hack αλλά μπορεί να δουλέψει :wink:

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Background tricks

Δημοσίευση από skeftomilos » 13 Μαρ 2005 08:35

Ο geraki έκανε την πολύ σωστή παρατήρηση ότι είναι ορθότερη η τοποθέτηση του background-image ως style παρά ως attribute. Με εντελώς κρύα καρδιά πρέπει να αναφέρω ένα λόγο να μην ακολουθήσουμε τη συμβουλή του. Απ'ό,τι φαίνεται στους browsers δεν αρέσει τόσο πολύ το style "background-image: url('...')" και γι'αυτό δεν σώζουν το image όταν κάνουμε save τη σελίδα για off-line χρήση! Αντίθετα το σώζουν κανονικά μαζί με τα υπόλοιπα γραφικά της σελίδας όταν χρησιμοποιηθεί η παλαιά μέθοδος background="...". Ισχύει τόσο για τον IE όσο και για τον Firefox. Τι να πει κανείς?
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

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

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

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