Λύσεις — Εφαρμογή 11 · Προχωρημένο στυλ — φόντο, θέση, μετασχηματισμοί (σελ. 54–60) – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Λύσεις — Εφαρμογή 11 · Προχωρημένο στυλ — φόντο, θέση, μετασχηματισμοί (σελ. 54–60)

Ο κώδικας-λύση και ασκήσεις (background-image & attachment:fixed, position:fixed & z-index, transform:rotate, text-shadow). Γλώσσες HTML5+CSS.

Ο κώδικας-λύση της Εφαρμογής 11

Ερώτηση: Βάλτε σταθερή εικόνα φόντου, σκιά στον τίτλο, και μια σταθερή «γωνία» πάνω-δεξιά με περιστροφή.

Απάντηση:

• body {
• background-image: url("summer.jpg");
• background-repeat: no-repeat;
• background-position: center;
• background-attachment: fixed;
• }
• h1 { text-shadow: 1px 1px 4px white; font-style: italic; }
• .gonia {
• position: fixed; top: 20px; right: 10px;
• transform: rotate(-8deg);
• }

Σύνοψη: (ενδεικτική) background-image (+no-repeat/center/fixed) στο body, text-shadow στην h1, position:fixed+top/right & transform:rotate στη γωνία.

Κριτήρια αξιολόγησης:

• Κριτήριο: σωστές ιδιότητες background-*, text-shadow, position:fixed+offsets, transform.

Ιδιότητες φόντου

Ερώτηση: Ποιες ιδιότητες ελέγχουν την εικόνα φόντου και τι κάνει η background-attachment: fixed;

Απάντηση:

• background-image: url(...) (η εικόνα), background-repeat (επανάληψη ή no-repeat), background-position (θέση, π.χ. center).
• background-attachment: fixed: η εικόνα φόντου μένει σταθερή ενώ κυλάει το περιεχόμενο.

Σύνοψη: (ενδεικτική) background-image/-repeat/-position ελέγχουν την εικόνα φόντου· το background-attachment: fixed την κρατά σταθερή στην κύλιση.

Κριτήρια αξιολόγησης:

• Κριτήριο: οι ιδιότητες φόντου + ρόλος του fixed.

position ΚΑΙ z-index

Ερώτηση: Τι κάνει η position: fixed; και το z-index;

Απάντηση:

• position: fixed: τοποθετεί το στοιχείο σε σταθερή θέση στο παράθυρο (δεν κινείται κατά την κύλιση), με ακριβή θέση μέσω top/bottom/left/right.
• z-index: ορίζει τη στρώση (layer) — μικρότερο z-index = πιο πίσω (π.χ. -1 πίσω από το περιεχόμενο).

Σύνοψη: (ενδεικτική) position:fixed: σταθερό στο παράθυρο (με top/left/... offsets). z-index: σειρά στρώσεων (μικρό=πιο πίσω).

Κριτήρια αξιολόγησης:

• Κριτήριο: fixed=σταθερό στο παράθυρο + z-index=στρώσεις.

transform ΚΑΙ text-shadow

Ερώτηση: Τι κάνουν οι transform: rotate(-8deg); και text-shadow;

Απάντηση:

• transform: rotate(-8deg): περιστρέφει το στοιχείο κατά -8 μοίρες (και: scale(), translate()).
• text-shadow: 1px 1px 4px white: προσθέτει σκιά στο κείμενο — οριζόντια μετατόπιση, κατακόρυφη, θόλωμα, χρώμα.

Σύνοψη: (ενδεικτική) transform: rotate() περιστρέφει το στοιχείο. text-shadow προσθέτει σκιά (x, y, θόλωμα, χρώμα).

Κριτήρια αξιολόγησης:

• Κριτήριο: rotate=περιστροφή + text-shadow=σκιά με τις 4 τιμές.