ruanmed

Pokémon Types CSS

Dec 25th, 2016
132
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.45 KB | None | 0 0
  1. .typeICON {
  2. text-transform: uppercase;
  3. font-size: 10px;
  4. text-align: center;
  5. display: inline-block;
  6. width: 54px;
  7. line-height: 1;
  8. padding: 3px 0;
  9. margin-bottom: 1px;
  10. border: 1px solid #aaa;
  11. border-radius: 2px;
  12. color: #fff;
  13. text-shadow: 1px 1px 1px #333;
  14. }
  15. .typeTTABLE {
  16. color: white;
  17. text-shadow: 1px 1px #333;
  18. border-radius: 2px;
  19. }
  20. .typeGRASS {
  21. background-color: #ACEA8C;
  22. background: linear-gradient( #ACEA8C, #82DA55);
  23. border-color: #4a892b;
  24. }
  25. .typePOISON {
  26. background-color: #D878D8;
  27. background: linear-gradient( #D878D8, #D654D6);
  28. border-color: #662966;
  29. }
  30. .typeFIRE {
  31. background-color: #F9D2B6;
  32. background: linear-gradient( #F19756, #EC8439);
  33. border-color: #b4530d;
  34. }
  35. .typeWATER {
  36. background-color: #9BB8FE;
  37. background: linear-gradient( #9BB8FE,#91ADF1);
  38. border-color: #1753e3;
  39. }
  40. .typeFLYING {
  41. background-color: #CEBFFB;
  42. background: linear-gradient( #CEBFFB, #B7A2F8);
  43. border-color: #7762b6;
  44. }
  45. .typeBUG {
  46. background-color: #CEDE48;
  47. background: linear-gradient( #D2E24D, #BECC35);
  48. border-color: #616b13;
  49. }
  50. .typeNORMAL {
  51. background-color: #E0E0CF;
  52. color: white;
  53. text-shadow: 1px 1px #333;
  54. background: linear-gradient( #E0E0CF,#D1D1C0);
  55. border-color: #79794e;
  56. }
  57. .typeELECTRIC {
  58. background-color: #FCEEB6;
  59. background: linear-gradient( #ECE536, #DFD719);
  60. border-color: #c19b0
  61. }
  62. .typeGROUND {
  63. background-color: #F8DD92;
  64. background: linear-gradient( #F8DD92, #E2C572);
  65. border-color: #aa8623;
  66. }
  67. .typeFIGHTING {
  68. background-color: #E5524A;
  69. background: linear-gradient( #E5524A, #DA3930);
  70. border-color: #82211b;
  71. }
  72. .typeSTEEL {
  73. background-color: #A2958D;
  74. background: linear-gradient( #A2958D, #8A817B);
  75. border-color: #7a7aa
  76. }
  77. .typePSYCHIC {
  78. background-color: #F99CB8;
  79. background: linear-gradient( #F99CB8, #E785A2);
  80. border-color: #d60945;
  81. }
  82. .typeROCK {
  83. background-color: #E6DDB9;
  84. background: linear-gradient( #B8A038,#A79134);
  85. border-color: #746523;
  86. }
  87. .typeICE {
  88. background-color: #BDF3F3;
  89. background: linear-gradient( #BDF3F3,#AAE7E7);
  90. border-color: #45b6b6;
  91. }
  92. .typeGHOST {
  93. background-color: #A18DC4;
  94. background: linear-gradient( #A18DC4, #937BBD);
  95. border-color: #413359;
  96. }
  97. .typeDRAGON {
  98. background-color: #9F77FF;
  99. background: linear-gradient( #9F77FF, #8453F8);
  100. border-color: #3d07c0;
  101. }
  102. .typeDARK {
  103. background-color: #685F51;
  104. background: linear-gradient( #685F51,#585349);
  105. border-color: #362a23;
  106. }
  107. .typeFAIRY {
  108. background: #e898e8;
  109. background-image: linear-gradient(#e898e8,#de6ede);
  110. border-color: #d547d5;
  111. }
Add Comment
Please, Sign In to add comment