Posted By

LukeLux on 09/08/10


Tagged

textmate CSS3


Versions (?)

Webkit - CSS3 themple to use


 / Published in: Other
 

  1. /*
  2. Project: ---Name----
  3. subject: CSS3
  4. version: 1.1
  5. Author: Lucas Di Carlo
  6. Twitter: @lukelux
  7. URI: http://libertestudio.com
  8. email:lucas[at]libertestudio[dot]com
  9. last editor: Lucas Di Carlo
  10. firstVersion: 10.02.2010
  11. lastUpdateVersion: 10.02.2010
  12. copyrighted to Lucas Di Carlo.
  13. */
  14.  
  15. /*--- Border-radious ---*/
  16. /*Safari*/
  17. {-webkit-border-radius: 0px ;-webkit-border-bottom-right-radius: 0px;}
  18. /* -moz */
  19. {-moz-border-radius-bottomright:0px;-moz-border-radius-bottomleft:0px;-moz-border-radius-topright:0px;-moz-border-radius-topleft:0px;}
  20. /*Chrome*/
  21. {border-radius:;}
  22. /*Opera*/
  23.  
  24. /*IE*/
  25.  
  26. /*--- Box-shadow ---*/
  27. /*Safari*/
  28. {-webkit-box-shadow: 0px 2px 4px gray;}
  29. /* -moz */
  30. {-moz-box-shadow: 0 0 0 gray;}
  31. /*Chrome - Opera*/
  32. {box-shadow: 0px 0px 0px #999;}
  33. /*IE*/
  34. {filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');}
  35.  
  36. /*--- Text-shadow ---*/
  37. /*Safari*/
  38. #header p, #text_thumbs p {text-shadow:0 1px 0 #3c4146;} /*Header paragraph*/
  39. .thanks p {text-shadow:1px 1px 1px #000;} /*Footer thanks*/
  40. #nav ul span
  41. /*IE*/
  42. #header p,#text_thumbs p {filter: glow(color=#3c4146,strength=2); filter: dropshadow(color=#3c4146,offX=2,offY=2);}
  43.  
  44. .thanks p {filter: glow(color=#000,strength=2); filter: dropshadow(color=#000,offX=1,offY=1);}
  45.  
  46. /* --- Multiple text-shadow ---*/
  47. /*Opera 9.5*/
  48. {text-shadow: -1px -2px 0.5em #000 , 3px 2px #FFF;}
  49.  
  50. /*--- Multi-column Layout ---*/
  51. /*Safari*/
  52. #header p {-webkit-column-count: 2;-webkit-column-gap: 20px;}
  53. /* -moz */
  54. #header p {-moz-column-count:2;-moz-column-gap: 20px;}
  55. /*Chrome*/
  56. #header p {column-count: 2;column-gap: 20px;}
  57. /*Opera*/
  58. /*IE*/
  59. /*
  60. end
  61. */
  62.  
  63.  
  64. /*--- Opacity ---*/
  65. /*
  66. Safari - Chrome - Opera
  67. */ /* Comments in the 1st chunk only*/
  68.  
  69. .thanks p {opacity: .6;} /*Footer - thanks text*/
  70. .download .icon_download {opacity: .6;} /*All pages - Download Icon*/
  71. .download .icon_download:hover {opacity: 1}
  72. /*
  73. IE 8
  74. */
  75. .thanks p {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";}/
  76. .download .icon_download {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";}
  77. .download .icon_download:hover {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
  78. /*
  79. /*
  80. IE 5-7
  81. */
  82. .thanks p {filter: alpha(opacity=50);}
  83. .download .icon_download {filter: alpha(opacity=50);}
  84. .download .icon_download:hover{filter: alpha(opacity=100);}
  85. /*
  86. end
  87. */
  88.  
  89. /*--- Gradients ---*/
  90. /*
  91. Safari
  92. */
  93. /*.thanks_gradient{background-image: -webkit-gradient(radial, 50% 40%, 700, 50% 40%, 0, from(rgba(0, 0, 0, 0.898438)), to(transparent));}*/
  94.  
  95. .gradient {background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.296094)), to(transparent));} /*Footer- border*/
  96. /*
  97. -moz
  98. */
  99. .gradient {background-image:-moz-linear-gradient(rgba(255, 255, 255, 0.2), transparent);}
  100. /*
  101. Opera*
  102. /
  103.  
  104. /*
  105. IE
  106. /
  107.  
  108. /*
  109. end
  110. */
  111.  
  112. /*--- Background-color ---*/
  113. /*
  114. Safari
  115. */
  116. {background-color: rgba(0, 54, 105, .5);}
  117. /*
  118. -moz
  119. */
  120.  
  121. /*
  122. Chrome
  123. */
  124.  
  125. /*
  126. Opera
  127. */
  128.  
  129. /*
  130. IE
  131. */
  132.  
  133.  
  134. /*--- Background-size ---*/
  135. /*Safari*/
  136. {-webkit-background-size:50%;}
  137. /* -moz */
  138. {-moz-background-size:;}
  139. /*Chrome*/
  140.  
  141. /*Opera*/
  142. {-o-background-size:100%;}
  143. /*IE*/
  144.  
  145. /*--- Animation - Transition ---*/
  146. /*Safari*/
  147. {
  148. -webkit-animation-name: spin;
  149. -webkit-transition-property: background, border;
  150. -webkit-transition-duration: 2s, 1s;
  151. -webkit-transition-timing-function: linear, ease-in; ease-in-out;
  152. -webkit-animation-iteration-count: infinite; }
  153. /* -moz */
  154. {-moz-transition:color 1s ease-in;}
  155. /*Chrome*/
  156. {transition:color 1s ease-in;}
  157. /*Opera*/
  158. {-o-transition:color 1s ease-in;}
  159. /*IE*/
  160. {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
  161.  
  162. /*--- Animation - Transform ---*/
  163. /*Safari*/
  164. {-webkit-transform: scale(0.98);}
  165. /* -moz */
  166. {-moz-transform: scale(1.15);}
  167. /*Chrome*/
  168.  
  169. /*Opera*/
  170.  
  171. /*IE*/

Report this snippet  

You need to login to post a comment.