Front-end Web Developer

I am a Mid Front-end Web Developer and IT Trainer

Η Ελληνική σημαία

Categories
Δεξιότητες: CSS, HTML, Front-End Development
Εργαλείο Ανάπτυξης Adobe Dreamweaver

Η σχεδίαση της Ελληνικής σημαίας με html & CSS

webdesign-i-elliniki-simaiaΟ σκοπός του έργου αυτού είναι η εφαρμογή τεχνικών CSS για την σχεδίαση της Ελληνικής σημαίας.

Το HTML

Όσον αφορά το κομμάτι του html χρησιμοποιήθηκαν divs γραμμών ένα για κάθε μια λωρίδα της σημαίας. Για τις 5 πρώτες λωρίδες, κάθε γραμμή διαιρείται σε αντίστοιχα divs. Οι τελευταίες 4 γραμμές αποτελούν ένα ενιαίο div.

Τα CSS

Όσον αφορά το κομμάτι του css ξεκινάμε τον ορισμό κουτιού για κάθε έναν τύπο φυλλομετρητή ώστε να υπάρχει πλήρης κάλυψη των φυλλομετρητών. Στην συνέχεια ορίζουμε μια κλάση .row με πλήρες πλάτος η οποία χρησιμοποιείται μια σε κάθε λωρίδα της σημαίας. Για να πετύχουμε ένα ορισμένο responsiveness χρησιμοποιούμε την ιδιότητα max-width. Με την ιδιότητα flex ορίζουμε τα εσωτερικά κουτιά του row σε μια σειρά το ένα δίπλα στο άλλο. Στην συνέχεια ορίζουμε της κλάσεις, οι οποίες μπαίνουν μέσα στο row με βασικές ιδιότητες:

  • Το χρώμα παρασκηνίου το οποίο ορίζει αντίστοιχα το μπλε και το λευκό χρώμα.
  • Το πλάτος της κλάσης ώστε αφ’ ενός να πετύχουμε την αναλογία των επιμέρους κομματιών της σημαίας και αφ’ ετέρου να βγει το άθροισμα σε σύνολο όλων των κλάσεων.

HTML & CSS

Για κάθε μια λωρίδα λοιπόν καλούμε την κλάση row. Για τον ορισμό του σταυρού ορίζουμε μέσα στην row divs με τις αντίστοιχες κλάσεις. Η σχεδίαση της Ελληνικής σημαίας πετυχαίνεται αθροιστικά με τις λωρίδες, η μία μετά την άλλη. Τέλος, για να πετύχουμε ένα ύψος της κάθε λωρίδας χρησιμοποιούμε ως περιεχόμενο ένα γράμμα, το 1. Το γράμμα παίρνει το αντίστοιχο χρώμα κειμένου, color, το οποίο έχει οριστεί στην ανάλογη κλάση.

Μπορείτε να δείτε το έργο στο CodePen.