Advanced Search

Shadow and gradient fill for IE6, IE7, IE8

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. See full code working on: http://www.cssplay.co.uk/menus/css3-ie-dropdown.html
  2.  
  3.  
  4. CSS:
  5. ===============
  6. /* ================================================================ 
  7. This copyright notice must be untouched at all times.
  8.  
  9. The original version of this stylesheet and the associated (x)html
  10. is available at http://www.cssplay.co.uk/menus/css3-ie-dropdown.html
  11. Copyright (c) 2005-2010 Stu Nicholls. All rights reserved.
  12. This stylesheet and the associated (x)html may be modified in any 
  13. way to fit your requirements.
  14. =================================================================== */
  15.  
  16. .shadow {float:left; width:650px;}
  17. .color {position:relative; background:#fff; display:block; background:#0bf;
  18. -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  19. -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  20. box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  21. background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
  22. background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
  23. }
  24. .menu {padding:0; margin:0; list-style:none; height:35px;}
  25. .menu .subHolder {position:absolute; left:-9999px;}
  26. .menu ul {padding:5px 0; margin:0; list-style:none; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#20000000', EndColorStr='#A0000000');}
  27. .menu li {float:left;}
  28. .menu li a {color:#ccc; line-height:35px; display:block; float:left; padding:0 20px; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;}
  29. .menu li:hover {position:relative;}
  30. .menu li a:hover {color:#fff; white-space:nowrap; position:relative; text-decoration:none;}
  31. .menu li:hover > a {color:#fff;}
  32. .menu :hover .subHolder {left:0; top:34px;}
  33.  
  34. .menu .subShadow {float:left;}
  35. .menu .subColor {position:relative; display:block; margin-left:4px; margin-top:5px; height:100%;
  36. -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  37. -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  38. box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  39. }
  40. .menu .col1 {background:#fb1;
  41. background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
  42. background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
  43. }
  44. .menu .col2 {background:#8c8;
  45. background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
  46. background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
  47. }
  48. .menu .col3 {background:#f31;
  49. background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
  50. background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
  51. }
  52. .menu .col4 {background:#79b;
  53. background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
  54. background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
  55. }
  56.  
  57. .menu ul li {float:none;}
  58. .menu ul li a {white-space:nowrap; line-height:20px; padding:0 30px 0 10px; float:none;}
  59.  
  60. .menu table {border-collapse:collapse; width:0; margin:0 0 -1px 0;}
  61. </style>
  62.  
  63. <!--[if IE]>
  64. <style type="text/css">
  65. .menu ul li {float:left;}
  66.  
  67. .color {left:4px; top:4px;}
  68. .shadow {float:left; display:block; background:#000; margin:-5px -5px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='4', MakeShadow='true', ShadowOpacity='0.60');}
  69. .menu {filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#20000000', EndColorStr='#A0000000');}
  70. .menu ul {height:100%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#20000000', EndColorStr='#A0000000');}
  71.  
  72. .menu .subShadow {background:#000; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='true', ShadowOpacity='0.40');}
  73. .menu li a:visited {color:#ccc;}
  74. .menu li a:visited:hover {color:#fff;}
  75.  
  76. * html .menu .subColor {width:1px;}
  77. * html .menu ul {width:1px;}
  78.  
  79. </style>
  80. <![endif]-->

URL: http://www.cssplay.co.uk/menus/css3-ie-dropdown.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.