Cześć.
Bawię się css i tak pomyślałem, że pewno to co piszę to makaron wychodzi.
Dla przykładu. Czy poniższe da się jakoś uprościć ?
#icon_active { fill: rgb(239, 179, 29); opacity: 1; width: 45%; height: 45%; margin: auto; } .deactivate #icon_active #icon_active_layer_2 { fill: rgba(220,20,60,1); transition: fill 0.4s ease-in-out; -webkit-transition: fill 0.4s ease-in-out; -moz-transition: fill 0.4s ease-in-out; -o-transition: fill 0.4s ease-in-out; } .deactivate #icon_active #icon_active_layer_1 { transform: translate(0px, 0px); fill: darkgrey; transition: transform 0.4s ease-in-out; -webkit-transition: transform 0.4s ease-in-out; -moz-transition: transform 0.4s ease-in-out; -o-transition: transform 0.4s ease-in-out; } .deactivate a:hover #icon_active #icon_active_layer_1, .deactivate a:active #icon_active #icon_active_layer_1 { transform: translate(180px, 0px); transition: transform 0.4s ease-in-out; -webkit-transition: transform 0.4s ease-in-out; -moz-transition: transform 0.4s ease-in-out; -o-transition: transform 0.4s ease-in-out; } .deactivate a:hover #icon_active #icon_active_layer_2, .deactivate a:active #icon_active #icon_active_layer_2 { fill: rgb(81, 142, 48); transition: fill 0.4s ease-in-out; -webkit-transition: fill 0.4s ease-in-out; -moz-transition: fill 0.4s ease-in-out; -o-transition: fill 0.4s ease-in-out; } .activate #icon_active #icon_active_layer_2 { fill: rgb(81, 142, 48); transition: fill 0.4s ease-in-out; -webkit-transition: fill 0.4s ease-in-out; -moz-transition: fill 0.4s ease-in-out; -o-transition: fill 0.4s ease-in-out; } .activate #icon_active #icon_active_layer_1 { transform: translate(180px, 0px); fill: darkgrey; transition: transform 0.4s ease-in-out; -webkit-transition: transform 0.4s ease-in-out; -moz-transition: transform 0.4s ease-in-out; -o-transition: transform 0.4s ease-in-out; } .activate a:hover #icon_active #icon_active_layer_1, .activate a:active #icon_active #icon_active_layer_1 { transform: translate(0px, 0px); transition: transform 0.4s ease-in-out; -webkit-transition: transform 0.4s ease-in-out; -moz-transition: transform 0.4s ease-in-out; -o-transition: transform 0.4s ease-in-out; } .activate a:hover #icon_active #icon_active_layer_2, .activate a:active #icon_active #icon_active_layer_2 { fill: rgba(220,20,60,1); transition: fill 0.4s ease-in-out; -webkit-transition: fill 0.4s ease-in-out; -moz-transition: fill 0.4s ease-in-out; -o-transition: fill 0.4s ease-in-out; }
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)