Ετικέτα: Σχεδιασμός και Ανάπτυξη Ιστοτόπων

Οι παρακάτω ασκήσεις είναι φτιαγμένες πάνω στο Θέμα Twenty Seventeen του WordPress, το οποίο θα πρέπει να ενεργοποιήσετε πριν ξεκινήσετε. Για να γράψετε κώδικα CSS, θα επιλέξετε το μενού Προσαρμογή στον Πίνακα Ελέγχου.

Αυτός εδώ ο ιστότοπος περιέχει όλες τις ρυθμίσεις που ζητούνται.

1. Μορφοποίηση του τίτλου
   • Μεγαλώστε τον τίτλο του ιστοτόπου σας στα 80px.
   • Προσθέστε σκιά στον τίτλο.
   • Δυσκολία: Για αρχάριους
2. Μέγεθος του Λογότυπου
   • Στην Προσαρμογή >> Ταυτότητα ιστοτόπου επιλέξτε μια εικόνα για λογότυπο
   • Μεγαλώστε την εικόνα ώστε να εμφανίζεται διπλάσια από την προεπιλεγμένη.
   • Δυσκολία: Επιλογέας και κατάλληλοι κανόνες
3. Φόντο με κλιμακούμενο χρώμα (gradient)
   • Αν δεν έχετε Κεντρικό Μενού, δημιουργήστε ένα.
   • Αλλάξτε το χρώμα φόντου του μενού σε κλιμακούμενο (gradient) χρώμα.
   • Δυσκολία: Κανόνες
4. Πλαίσιο στις πλαϊνές μικροεφαρμογές
   • Αν δεν έχετε κάποια μικροεφαρμογή στην πλαϊνή στήλη, προσθέστε μια.
   • Βάλτε πλαίσιο με κουκίδες στην κάθε μικροεφαρμογή.
   • Αφήστε τα κατάλληλα περιθώρια, ώστε να απομακρύνετε το πλαίσιο από το κείμενο που περιέχει και τα γειτονικά του στοιχεία.
   • Δυσκολία: Χαμηλή
5. Χρώμα στους τίτλους των μικροεφαρμογών
   • Ορίστε πορτοκαλί χρώμα για το φόντο του κάθε τίτλου μικροεφαρμογής.
   • Δυσκολία: Για αρχάριους
6. Σκουρόχρωμη λειτουργία στο υποσέλιδο
   • Βάλτε σκουρόχρωμο φόντο και ανοιχτόχρωμα γράμματα σε όλο το υποσέλιδο.
   • Δυσκολία: Για αρχάριους
7. Απόκρυψη στοιχείου
   • Στο τέλος της σελίδας γράφει “Με την υποστήριξη του WordPress”. Κρύψτε αυτό το στοιχείο.
   • Πειραματιστείτε με τους κανόνες display και visibility και βρείτε τη διαφορά.
   • Δυσκολία: Για αρχάριους
8. Περιστροφή και μετακίνηση του υπότιτλου
   • Μετακινήστε τον Υπότιτλο του ιστοτόπου σας στη δεξιά άκρη της σελίδας και περιστρέψτε τον κατά 90°.
   • Δυσκολία: Κανόνες τοποθέτησης στοιχείου
9. Χρώμα ενεργού Μενού
   • Το μενού της σελίδας όπου βρισκόμαστε θα πρέπει να έχει χρώμα royalblue.
   • Δυσκολία: Επιλογέας
10. Μεγέθυνση εικόνας κάτω από το ποντίκι
    • Ρυθμίστε τις εικόνες που περιέχονται στα άρθρα να κάνουν εφέ μεγέθυνσης καθώς περνάει το ποντίκι από πάνω τους.
    • Δημιουργήστε εφέ αργής μετάβασης του ζουμ.
    • Δυσκολία: Μεγάλη

Για να δουλέψει ο κώδικας για το εφέ που βλέπετε παραπάνω, χρειάζεται η παρακάτω δομή στην HTML:

<div id="accordion">

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

</div>

Η εξωτερική περιοχή <div id=”accordion”> ορίζει και ονοματίζει την περιοχή του εφέ. Για κάθε εικόνα χρειάζεται ένα στοιχείο <div>, το οποίο περιέχει άλλο ένα <div>, που περιέχει την εικόνα <img>.

Ο κώδικας CSS που δημιουργεί το εφέ είναι ο ακόλουθος:

/* χρήση των κανόνων διάταξης flex */
#accordion {
  display:flex;
  justify-content:space-between;
}

/* αρχική κατάσταση των στοιχείων */
#accordion > div {
  width:25%;
  transition:width 1s;
  overflow:hidden;
  display:flex;
  margin:0 1px;
}
#accordion > div > div {
  height: 100%;
  top:0%;
  transition:height 1s, top 1s;
  display:flex;
  position:relative;
  right:-50%;
}
#accordion img {
  left:-50%;
  position:relative;
  max-width: unset;
}

/* εφέ μεγέθυνσης της περιοχής κάτω από το ποντίκι */
#accordion > div:hover {
  width:75%;
  transition:width 1s;
}
#accordion > div > div:hover {
  height: 104%;
  top:-2%;
  transition:height 1s, top 1s;
}