Μάθετε πώς να κάνετε αναδίπλωση κειμένου γύρω από μια κινούμενη εικόνα με CSS.
Για να κάνετε το κείμενό σας να τυλίγεται γύρω από την εικόνα στα δεξιά, παρόμοια με τον τρόπο που είναι στη φωτογραφία που παρουσιάζει αυτό το άρθρο, χρησιμοποιήστε έναν κανόνα CSS όπως αυτός:
Ο κανόνας float: αριστερά κάνει την εικόνα να μετακινείται στο αριστερό περιθώριο. Ο κανόνας padding-right εμποδίζει το κείμενο να χτυπήσει πάνω στη δεξιά πλευρά της εικόνας. Εάν προστεθεί ένα περίγραμμα σε αυτήν την εικόνα, η πλήρωση θα ερχόταν μεταξύ της εικόνας και του περιγράμματος. Δείτε την Ενότητα 2 για να εργαστείτε με μια εικόνα με περίγραμμα.
Στη συνέχεια, προσθέστε περιθώρια στα αριστερά και δεξιά της εικόνας για να την κεντράρετε. Η σωστή τιμή για το αριστερό και το δεξί περιθώριο για να κεντράρουν οτιδήποτε είναι αυτόματο.
Για να δημιουργήσετε ένα παχύ περίγραμμα σαν πλαίσιο χρησιμοποιώντας το στυλ περιγράμματος αυλάκωσης, μπορεί να χρησιμοποιηθεί ένας κανόνας όπως αυτός:
Άλλα στυλ περιγράμματος είναι συμπαγής, διακεκομμένη, διακεκομμένη, διπλή, κορυφογραμμή, ένθετη και αρχή. Το πλάτος μπορεί να εκφραστεί σε pixel, ems ή ποσοστά.
Τα περιγράμματα μπορούν να εφαρμοστούν επιλεκτικά στο επάνω, δεξιά, κάτω και αριστερά της εικόνας. Μπορείτε να χρησιμοποιήσετε αυτή τη γνώση για να δημιουργήσετε ένα εφέ σαν σκιά.
Χρησιμοποιώντας ένα συμπαγές περίγραμμα σε 2 αποχρώσεις του γκρι ακριβώς στο δεξί και στο κάτω περίγραμμα, έχετε ένα εφέ σκιάς.
img { float: αριστερά; περίγραμμα-δεξιά-στυλ: συμπαγής; περίγραμμα-δεξιά-πλάτος: 8px; περίγραμμα-δεξιά-χρώμα: #CCCCCC; σύνορα-κάτω-στυλ: συμπαγής; περίγραμμα-κάτω-πλάτος: 8 εικονοστοιχεία; περίγραμμα-κάτω-χρώμα: #999999; περιθώριο-δεξιά: 1em; περιθώριο-κάτω: 1em; }
Υπόδειξη
Εάν έχετε εικόνες σε περισσότερες από μία υποδιαιρέσεις (div) μιας σελίδας, χρησιμοποιήστε επιλογείς καταγωγής για να τις διαμορφώσετε μεμονωμένα. Πιθανοί επιλογείς: #content img, #sidebar img, #feature img.
