Μεγάλη νότα εδώ! Οι συρόμενες πόρτες είναι μια πολύ παλιά τεχνική. Είχε την ώρα του στο Διαδίκτυο, αλλά πιθανότατα δεν είναι ο πιο έξυπνος τρόπος να πάμε αυτές τις μέρες. Έχουμε ακτίνα συνόρων τώρα και φόντο κλίσης και όλα αυτά, που ξεκλειδώνουν τα περισσότερα από αυτά που προσπαθούσαμε να επιτύχουμε πίσω στην ημέρα των συρόμενων θυρών.
Αλλά είναι ακόμα διασκεδαστικό να τεκμηριώνεται πώς λειτουργεί, οπότε εδώ είναι:
Sliding Doors Button .button ( float: left; clear: both; background: url(RIGHT_SIDE.png.webp) top right no-repeat; margin: 5px; padding-right: 20px; color: white; text-decoration: none; ) .button span ( background: url(LEFT_SIDE.png.webp) top left no-repeat; line-height: 22px; padding: 7px 0 5px 18px; display: block; ) .button:hover ( background-position: right -34px; ) .button:hover span ( background-position: 0 -34px; color: #fff; )Που υποθέτει γραφικά ως εξής:
Δείτε τα κουμπιά συρόμενων πορτών από τον Chris Coyier (@chriscoyier) στο CodePen.