Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> style css - prostsza forma
topcio
post 14.02.2018, 13:26:02
Post #1





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 14.01.2017

Ostrzeżenie: (0%)
-----


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ć ?

  1. #icon_active {
  2. fill: rgb(239, 179, 29);
  3. opacity: 1;
  4. width: 45%;
  5. height: 45%;
  6. margin: auto;
  7. }
  8.  
  9. .deactivate #icon_active #icon_active_layer_2 {
  10. fill: rgba(220,20,60,1);
  11. transition: fill 0.4s ease-in-out;
  12. -webkit-transition: fill 0.4s ease-in-out;
  13. -moz-transition: fill 0.4s ease-in-out;
  14. -o-transition: fill 0.4s ease-in-out;
  15. }
  16.  
  17. .deactivate #icon_active #icon_active_layer_1 {
  18. transform: translate(0px, 0px);
  19. fill: darkgrey;
  20. transition: transform 0.4s ease-in-out;
  21. -webkit-transition: transform 0.4s ease-in-out;
  22. -moz-transition: transform 0.4s ease-in-out;
  23. -o-transition: transform 0.4s ease-in-out;
  24. }
  25.  
  26. .deactivate a:hover #icon_active #icon_active_layer_1,
  27. .deactivate a:active #icon_active #icon_active_layer_1 {
  28. transform: translate(180px, 0px);
  29. transition: transform 0.4s ease-in-out;
  30. -webkit-transition: transform 0.4s ease-in-out;
  31. -moz-transition: transform 0.4s ease-in-out;
  32. -o-transition: transform 0.4s ease-in-out;
  33. }
  34.  
  35. .deactivate a:hover #icon_active #icon_active_layer_2,
  36. .deactivate a:active #icon_active #icon_active_layer_2 {
  37. fill: rgb(81, 142, 48);
  38. transition: fill 0.4s ease-in-out;
  39. -webkit-transition: fill 0.4s ease-in-out;
  40. -moz-transition: fill 0.4s ease-in-out;
  41. -o-transition: fill 0.4s ease-in-out;
  42. }
  43.  
  44. .activate #icon_active #icon_active_layer_2 {
  45. fill: rgb(81, 142, 48);
  46. transition: fill 0.4s ease-in-out;
  47. -webkit-transition: fill 0.4s ease-in-out;
  48. -moz-transition: fill 0.4s ease-in-out;
  49. -o-transition: fill 0.4s ease-in-out;
  50. }
  51.  
  52. .activate #icon_active #icon_active_layer_1 {
  53. transform: translate(180px, 0px);
  54. fill: darkgrey;
  55. transition: transform 0.4s ease-in-out;
  56. -webkit-transition: transform 0.4s ease-in-out;
  57. -moz-transition: transform 0.4s ease-in-out;
  58. -o-transition: transform 0.4s ease-in-out;
  59. }
  60.  
  61. .activate a:hover #icon_active #icon_active_layer_1,
  62. .activate a:active #icon_active #icon_active_layer_1 {
  63. transform: translate(0px, 0px);
  64. transition: transform 0.4s ease-in-out;
  65. -webkit-transition: transform 0.4s ease-in-out;
  66. -moz-transition: transform 0.4s ease-in-out;
  67. -o-transition: transform 0.4s ease-in-out;
  68. }
  69.  
  70. .activate a:hover #icon_active #icon_active_layer_2,
  71. .activate a:active #icon_active #icon_active_layer_2 {
  72. fill: rgba(220,20,60,1);
  73. transition: fill 0.4s ease-in-out;
  74. -webkit-transition: fill 0.4s ease-in-out;
  75. -moz-transition: fill 0.4s ease-in-out;
  76. -o-transition: fill 0.4s ease-in-out;
  77. }
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 13:59