19Μάι

Βάλτε φόντο σε μια ιστοσελίδα που σχεδιάζετε με την χρήση CSS.

, 19 Μαΐου 2008 | WEB DESIGN - AUTHORING | 3 Σχόλια

Στο σημερινό άρθρο θα σας παρουσιάσουμε πως μπορείτε να βάλετε φόντο στην ιστοσελίδα που σχεδιάζετε με την χρήση CSS (Cascading Style Sheets). Ουσιαστικά η τεχνική που θα ακολουθήσουμε είναι απλή αλλά μπορούν να χρησιμοποιηθούν διάφορες παραλλαγές ώστε να πετύχετε το εικαστικό αποτέλεσμα που επιθυμείτε.

ΕΙΣΑΓΩΓΗ

Η φιλοσοφία στηρίζεται στην παραμετροποίηση του body tag και του background attribute οποιοδήποτε άλλου παρεμφερή στοιχείου (divs, block elements κ.α.) που φιλοξενεί περιεχόμενο στην διαδικτυακή εφαρμογή που σχεδιάζετε.

ΠΑΡΑΔΕΙΓΜΑΤΑ

1. Προσθέτοντας φόντο στο κέντρο μιας ιστοσελίδας (δείτε το παράδειγμα)

body {
background-color: #909090;
background-image: url(backimage.gif);
background-repeat: no-repeat;
background-position: center top;
}

2. Προσθέτοντας κάθετο degrade (gradient) φόντο σε μια ιστοσελίδα (δείτε το παράδειγμα)

body {
background-color: #909090;
background-image: url(backimage_gradient.gif);
background-repeat: repeat-x;
background-position: top;
}

3. Προσθέτοντας οριζόντιο degrade (gradient) φόντο σε μια ιστοσελίδα (δείτε το παράδειγμα)

body {
background-color: #909090;
background-image: url(backimage_gradient2.gif);
background-repeat: repeat-y;
background-position: top;
}

Παράμετροι

background-color = Χρώμα φόντου
background-image: Γραφικό φόντου
background-repeat: Τρόπος επανάληψης φόντου
background-position: Καθορισμός θέσεως φόντου

Το design αποτελεί έναν σημαντικό παράγοντα στην επιτυχία μιας ιστοσελίδας, μπορεί να δημιουργήσει θετικά ή αρνητικά συναισθήματα που θα διαμορφώσουν την τελική εικόνα ενός διαδικτυακού τόπου. Κάθε ιστοσελίδα πρέπει να είναι μια μοναδική εμπειρία που να μαγνητίζει οποιονδήποτε επισκέπτη.

Εκμεταλλευτείτε αυτού του είδους τεχνικές χρήσης CSS για να προσφέρετε περισσότερες εικαστικές λύσεις στους πελάτες σας, παράλληλα δίνοντας και μια ξεχωριστή αίσθηση.

ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Βάλτε φόντο σε μια ιστοσελίδα που σχεδιάζετε με την χρήση CSS. γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.

3 comments so far

Σχολιάστε

Back to top

Recent comments

  • Πολυ καλο αθρο πραγματικα!

    Η σωστή αρχιτεκτονική ενός website και τα οφέλη της
  • Πολύ χρήσιμη η λίστα με τα online tools. Ο επιτυχημένος σχεδιασμός μιας ιστοσελίδας βοηθά σε δύο κατευθύνσεις. Η πρώτη είναι ότι βελτιώνει την εμπειρία του επισκέπτη της ιστοσελίδας με συνέπεια ο τελευταίος να βλέπει περισσότερες σελίδες και να μένει περισσότερο χρόνο σε αυτή. Η δεύτερη είναι ότι επειδή ακριβώς βελτιώνονται τα στατιστικά στοιχεία της ιστοσελίδας, όπως το bounce rate, ο μέσος χρόνος παραμονής στην ιστοσελίδα και ο αριθμός των σελίδων ανά επίσκεψη, βελτιώνεται και η κατάταξη της ιστοσελίδας στα οργανικά αποτελέσματα της Google.

    10+1 Χρήσιμα website και on line tools

Latest From Twitter