Τρισδιάστατα μπλοκ και κείμενο δύο χρωμάτων - CSS-Κόλπα

Anonim

Μπορούμε να χρησιμοποιήσουμε πολλαπλές text-shadowκαι box-shadowτιμές για να δημιουργήσουμε μια τρισδιάστατη εμφάνιση σε μπλοκ ή κείμενο, όπως αυτό το στιγμιότυπο οθόνης του υποσέλιδου του David DeSandro. Ωστόσο, σε αυτό το παράδειγμα, το "τρισδιάστατο" μέρος είναι ένα συμπαγές χρώμα.

Εναλλάσσοντας τα χρώματα εμπρός και πίσω στη «σειρά στοίβαξης» του πλαισίου ή της δήλωσης σκιάς κειμένου, μπορούμε να προσομοιώσουμε ένα πιο τρισδιάστατο / φωτιζόμενο εφέ.

text-shadow: 1px 0px #eee, 0px 1px #ccc, 2px 1px #eee, 1px 2px #ccc, 3px 2px #eee, 2px 3px #ccc, 4px 3px #eee, 3px 4px #ccc, 5px 4px #eee, 4px 5px #ccc, 6px 5px #eee, 5px 6px #ccc, 7px 6px #eee, 6px 7px #ccc, 8px 7px #eee, 7px 8px #ccc, 8px 8px #eee;

Παράδειγμα