Ασφαλώς και θα έχετε παρατηρήσει στις σελίδες όλων των περιοδικών -αλλά και σε εφημερίδες- κάποια “παραθυράκια” που περιέχουν αποσπάσματα από το άρθρο που δημοσιεύεται στη σελίδα. Αυτά τα “παραθυράκια κειμένου” ονομάζονται pullquotes [στα ελληνικά;].

“We have about 50 percent of the world’s wealth but only 6.3 percent of its population. In this situation, we cannot fail to be the object of envy and resentment. Our real task in the coming period is to devise a pattern of relationships which will permit us to maintain this position of disparity.”
George Kennan, 1948

Αυτό το πολύ όμορφο χαρακτηριστικό μπορούμε να το χρησιμοποιήσουμε και για τον αισθητικό εμπλουτισμό των ιστολογίων μας.

Πώς το κάνουμε; Αντιγράφουμε τον παρακάτω κώδικα [Αντιγραφή: CTRL+C, Επικόλληση: CTRL+V. Επικολλούμε τον κώδικα στην αρχή, συνήθως, μιας παραγράφου στον Code Editor.]

<p style="float: right; width: 190px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; padding-bottom: 10px; font-family: Arial,Helvetica,Georgia; font-size: 18px; line-height: 24px; color: crimson; text-align: right">Κείμενο 1<span style="color: blue">Κείμενο 2</span>

Αλλαγές που μπορούμε να κάνουμε:

float: αντί για right μπορούμε να γράψουμε left, αν θέλουμε το “παραθυράκι” μας να είναι στα αριστερά [παράδειγμα προς το τέλος αυτής της σελίδας].

width: μπορείτε να αλλάξετε το πλάτος του παραθύρου, για να ταιριάζει, για παράδειγμα, με το μήκος της παραγράφου. Πειραματιστείτε με όποια τιμή px [πίξελ] θέλετε μέχρι να σας ικανοποιήσει το αποτέλεσμα. Μπορείτε επίσης να χρησιμοποιήσετε και τιμές επί τοις εκατό: αντικαταστήστε το 190px του παραδείγματος με το 30% για παράδειγμα και δείτε το αποτέλεσμα.

margin: ορίζουν τις τιμές περιθωρίου [τα κενά δηλαδή] γύρω από το παράθυρό μας. Στο παράδειγμα έχω καθορίσει να είναι 10px. Πειραματιστείτε με διάφορες τιμές και δείτε τα αποτελέσματα.

font-family: άφησα στο παράδειγμα αυτή την επιλογή για την περίπτωση που θέλετε η γραμματοσειρά του παραθύρου σας να είναι διαφορετική από εκείνη του κυρίως σώματος του ιστοσημειώματος. Αν σβήσετε αυτή την επιλογή, οι γραμματοσειρές [παραθύρου και κυρίως σώματος] θα είναι οι ίδιες.

font-size: το μέγεθος της γραμματοσειράς. Πειραματιστείτε.

line-height: Το κενό ανάμεσα στις σειρές. Βλέποντας και κάνοντας

color: το χρώμα της γραμματοσειράς του παραθύρου. Κωδικοί [και ονόματα] χρωμάτων υπάρχουν παντού στο διαδίκτυο. Μια καλή σελίδα για χρώματα. Μπορείτε να χρησιμοποιήσετε είτε τον κωδικό [μην ξεχνάτε το # στην αρχή!] είτε το όνομα του χρώματος [που είναι και εύκολο να το θυμάστε].

text-align: Η περασιά του κειμένου. Στο παράδειγμα δεξιά. Μπορείτε να έχετε αριστερή περασιά [left] ή κεντραρισμένο κείμενο [center].

<span style="color: blue">: Για να αλλάζετε το χρώμα της γραμματοσειράς μέσα στο παράθυρο. Μπορείτε να αλλάξετε χρώμα όσες φορές θέλετε. Αλλά μην το κάνετε και καρνάβαλο… Μην ξεχάσετε στο τέλος το </span>

Κάποια παραδείγματα από το άλλο μου ιστολόγιο και από το ιστολόγιο του Greg, για να δείτε πώς δουλεύει στην πράξη και να πάρετε ιδέες. Το παράδειγμα pullquote που υπάρχει στην αρχή αυτού του ιστοσημειώματος προέρχεται από εδώ. Άλλο παράδειγμα εδώ. Κι άλλα δύο σ’ αυτή τη σελίδα. Και μια διαφορετική εφαρμογή από τον Greg εδώ.

Τι έκανε ο Greg; [φαίνεται στην παρακάτω εικόνα]

---

---

Απλά πρόσθεσε γύρω από το παράθυρό του μια γραμμή πλαισίου και ένα διαφορετικό χρώμα για το background του παραθύρου.Πώς το έκανε; Πρόσθεσε την παράμετρο border: 1px solid black; και την παράμετρο background-color: whitesmoke; Δηλαδή μαύρη γραμμή γύρω από το παράθυρό του και χρώμα παραθύρου whitesmoke.

«Αμ και το πόπολο;! “Ζήτω οι αλυσίδες!” φώναζαν χτες. Ζήτω οι αλυσίδες… Σκλάβοι… Έχουν τώρα κι άποψη για το ποιον θέλουν γι’ αφέντη τους… Αυτή την Επανάσταση εξάγουν τώρα οι Γάλλοι… » Η Επανάσταση καταβρόχθισε τα παιδιά της, όπως ο Κρόνος τα δικά του…

Ας δούμε στην πράξη κάποιες αλλαγές. Τις βλέπουμε ήδη στα αριστερά. Τι έχω αλλάξει, πέραν των όσων έχω ήδη αναφέρει; Το padding. Είναι η απόσταση του κειμένου από τη γραμμή πλαισίου. Παρατηρείστε ότι το κείμενο στα αριστερά εφάπτεται στη γραμμή. Αυτό γιατί δεν πρόσθεσα το padding-left. Επίσης πρόσθεσα και το margin [οι τιμές είναι για αριστερά, δεξιά, πάνω, κάτω, αντίστοιχα], που αφορά το περιθώριο που υπάρχει μεταξύ του pulloquote και των υπόλοιπων στοιχείων του ιστοσημειώματος.

Το αισθητικό αποτέλεσμα είναι ολίγον τι για τα… πανηγύρια. But you got my point. Το κείμενο προέρχεται από ένα δικό μου ιστοσημείωμα, όπου μπορείτε να δείτε ακόμη ένα παράδειγμα πολύχρωμου pullquote.

Ο κώδικας του pullquote με πλαίσιο:

<p style="border: 2px solid darkred; margin: 10px 30px 10px 10px; background-color: aliceblue; float: left; width: 190px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; font-size: 14px; line-height: 20px; color: darkblue; text-align: left"><strong>Κείμενο 1<span style="color: firebrick">Κείμενο 2</span></strong></p>

Με την ευγενική χορηγία του Mandarin Design.

Και μην ξεχνάτε: το κείμενο είναι αυτό που μετράει. Πρώτα γράφουμε το κείμενό μας, και στο τέλος ασχολούμαστε με τις όποιες αισθητικές ανησυχίες μας…

Και αν εφαρμόσετε κάτι από όλα τα παραπάνω προσθέστε ένα λινκ στα σχόλια για να βλέπουν και οι επόμενοι το τι ακριβώς κάνατε και να μαθαίνουν…

Φυσικά όλα τα παραπάνω έχουν εφαρμογή σε όλες τις πλατφόρμες. Και στον blogger.