Share
Im heutigen Quick-Tipp für Videos verwenden wir den weniger bekannten Einsatz Parameter beim Erstellen von CSS3-Boxschatten, um die schweben und aktiv Zustände einer Schaltfläche.
Denken Sie daran: Gehen Sie nicht immer so schnell zu Photoshop zurück, wenn Sie einige kleine Änderungen benötigen. Es ist besser für Sie (und das Web), wenn Sie sich zuerst fragen: "Können wir das mit einfachem CSS erreichen?"
body margin: 200px auto; a background: url (button.png) keine Wiederholung; Breite: 130px; Höhe: 130px; Marge: auto; Umriss: keine; Bildschirmsperre; Texteinzug: -10000px; -webkit-box-shadow: 0 0 8px 1px rgba (0,0,0, .2); -webkit-border-radius: 90px; -moz-box-shadow: 0 0 8px 1px rgba (0,0,0, .2); -moz-border-radius: 90px; Box-Schatten: 0 0 8px 1px rgba (0,0,0, .2); Grenzradius: 90px; a: hover -webkit-box-shadow: 0 0 8px 1px rgba (0,0,0, .2), Einschub 0 0 20px 6px rgba (0,0,0, .1); -moz-box-shadow: 0 0 8px 1px rgba (0,0,0, .2), Einschub 0 0 20px 6px rgba (0,0,0, .1); Box-Schatten: 0 0 8px 1px rgba (0,0,0, .2), Einschub 0 0 20px 6px rgba (0,0,0, .1); a: aktiv -webkit-box-shadow: 0 0 8px 1px rgba (0,0,0, .2), Einschub 0 0 20px 6px rgba (0,0,0, .2); -moz-box-shadow: 0 0 8px 1px rgba (0,0,0, .2), Einsatz 0 0 20px 6px rgba (0,0,0, .2); Box-Schatten: 0 0 8px 1px rgba (0,0,0, .2), Einschub 0 0 20px 6px rgba (0,0,0, .2);
Accentsconagua