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

  • Palpatine Says: Μαΐου 19, 2008 at 9:59 μμ

    Γιάννη σ’ ευχαριστώ πολύ για τα πολύ χρήσιμα άρθρα που γράφεις. Είμαι νέος με τα divs και αυτά που γράφεις με βοηθάνε αρκετά. Έχεις γράψει ή σκοπεύεις να γράψεις κανα άρθρο για το πως να τοποθετεί κάποιος divs και το περιεχόμενό τους σε μια σελίδα. Με μπερδεύουν λίγο αυτά τα margins κλπ. Θα σου είμουν ευγνώμων αν έγραφες κάτι τέτοιο.
    Ευχαριστώ

    Απάντηση
  • Γιάννης Ευσταθίου | Internet Specialist Says: Μαΐου 21, 2008 at 8:22 μμ

    Αγαπητέ φίλε,
    Αρχικά να σε ευχαριστήσω για το σχόλιο σου και την συμμετοχή σου στο web design blog. Σχετικά με το θέμα που έθεσες, σίγουρα θα προβάλλουμε κάποιο άρθρο στο μέλλον το οποίο να καλύπτει το κεφάλαιο που ονομάζεται divs (layers). Θα αναλύσουμε την τοποθέτηση των divs και γενικότερα το semantic mark up ώστε να μπορείς να σχεδιάζεις ιστοσελίδες εύκολα και γρήγορα με σωστό στήσιμο σύμφωνα με τα παγκόσμια πρότυπα.
    Καλή συνέχεια.

    Απάντηση
  • Stavros Says: Ιούνιος 19, 2010 at 9:52 μμ

    Φοβερά αρθράκια συνέχισε τη καλή δουλειά by the way να ρωτήσω το background-position: center top; είναι cross ; Φαίνεται το ίδιο σε όλους τους φυλλομετρητές ;

    Απάντηση

Σχολιάστε

Back to top

Recent comments

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter