Μικρές ασκήσεις CSS

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

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

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