Εικόνες φόντου σώματος Έγινε εύκολα

html

Ένα ωραίο χαρακτηριστικό που θα βρείτε σε πολλούς ιστότοπους είναι όπου η κεντρική περιοχή περιεχομένου φαίνεται να επικαλύπτει τη σελίδα με μια σκιά πίσω από αυτήν. Είναι στην πραγματικότητα μια αρκετά απλή μέθοδος για να κάνετε το blog σας να φαίνεται ωραίο (ή άλλο ιστότοπο) με μία εικόνα φόντου.

Πώς γίνεται;

  1. Μάθετε πόσο ευρύ είναι το περιεχόμενό σας. Παράδειγμα: 750 εικονοστοιχεία.
  2. Δημιουργήστε μια εικόνα στην εφαρμογή απεικόνισης (χρησιμοποιώ το Illustrator) ευρύτερη από την περιοχή περιεχομένου. Παράδειγμα: 800 εικονοστοιχεία.
  3. Ορίστε το φόντο της εικόνας στο φόντο που θέλετε να έχετε σε κάθε πλευρά του ιστολογίου.
  4. Προσθέστε μια λευκή περιοχή πάνω από το φόντο.
  5. Εφαρμόστε μια σκιά στη λευκή περιοχή που εκβάλλει από κάθε πλευρά της περιοχής.
  6. Ρυθμίστε την περιοχή περικοπής σε πλάτος κατά 1 pixel σε ύψος. Αυτό θα κάνει την εικόνα να κατεβάσει ωραία και συμπαγής για γρήγορη απόδοση.
  7. Έξοδος της εικόνας.

Δείτε πώς το έφτιαξα χρησιμοποιώντας το Illustrator (σημειώστε ότι έχω την έκταση της καλλιέργειας πολύ ψηλότερη… για να δείτε τι κάνω)
Φόντο με εικονογράφο

Ακολουθεί ένα παράδειγμα για το πώς θα φαίνεται η έξοδος με την εικόνα φόντου:
Παράδειγμα εικόνας φόντου

Δείτε πώς μπορείτε να εφαρμόσετε την εικόνα χρησιμοποιώντας την ετικέτα στυλ σώματος στο δικό σας CSS αρχείο.

φόντο: # B2B2B2 url ('images / bg.gif') κέντρο επανάληψης;

Ακολουθεί μια ανατομή της ετικέτας στυλ φόντου:

  • # B2B2B2 - ορίζει το συνολικό χρώμα φόντου της σελίδας. Σε αυτό το παράδειγμα, είναι γκρι για να ταιριάζει με το γκρι στην εικόνα φόντου.
  • url ('images / bg.gif') - ορίζει την εικόνα φόντου που θέλετε να χρησιμοποιήσετε.
  • repeat-y - ρυθμίζει την εικόνα να επαναλαμβάνεται στον άξονα y. Έτσι, η εικόνα φόντου θα επαναληφθεί από το πάνω προς το κάτω μέρος της σελίδας.
  • center - ορίζει την εικόνα στο κέντρο της σελίδας.

Ωραία και εύκολη… μία εικόνα, μια ετικέτα στυλ!

2 Σχόλια

  1. 1
  2. 2

Ποια είναι η γνώμη σας;

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.