Φυσικά ο τίτλος του άρθρου είναι παραπλανητικός. H CSS είναι κάτι που δεν μαθαίνεται σε 30 δευτερόλεπτα, αντίθετα είναι μια γλώσσα που απαιτεί συνεχή εξάσκηση και αμέτρητους πειραματισμούς.

Όμως, στην ιστοσελίδα 30 seconds of CSS, εξαιρετικά καλαίσθητη και καλοστημένη, μπορείς να δεις μερικά “κόλπα”, ταξινομημένα ανά κατηγορίες, για συνηθισμένες -και όχι τόσο- λειτουργίες του web design που απαιτούν CSS κώδικα.

Παρατίθεται ο HTML κώδικας, ο αντίστοιχος CSS και υπάρχει παραπομπή στο σχετικό Codepen για να κάνεις τους δικούς σου πειραματισμούς.

Για παράδειγμα:

See the Pen Bouncing loader by Thodoris (@teokarts) on CodePen.

Το παραπάνω pen φτιάχνει ένα bouncing loader, ένα, ας πούμε, ειδικό εφέ κατά τη διάρκεια φόρτωσης μιας σελίδας.

Στο 30 seconds CSS, πέρα από τον κώδικα, σου παραθέτει και αναλυτική επεξήγηση για το τι ακριβώς κάνει αυτό το τμήμα του κώδικα, όπως επίσης και από ποιους browsers υποστηρίζεται η λειτουργία αυτή (το screenshot παρακάτω αφορά στην επεξήγηση του παραπάνω παραδείγματος).

Για τον συντάκτη

Θοδωρής Λ. Καρτσιώτης

Υπεύθυνος Πληροφορικής & Νέων Τεχνολογιών ΔΔΕ Πιερίας.
"Μανιακός" της οργάνωσης, του web design και μουσικόφιλος.
Ενίοτε και... κιθαρίστας! :-)

Leave a Comment