Posted By

sspitler01 on 10/16/09


Tagged

css google corners Analytics notched


Versions (?)

google analytics buttons


 / Published in: CSS
 

URL: http://www.askthecssguy.com/examples/notchedcorners/index.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. <title>google analytics buttons</title>
  7. <style type="text/css">
  8. /* default stuff */
  9. body {padding:20px; font-family:arial; text-align:center;}
  10. p, li {font-size: 12px; line-height:18px;}
  11. h3 {margin-bottom:6px;}
  12. .examplesGoHere {text-align:left; margin:0 auto; }
  13. .letsGiveItAFixedWidthOf200Pixels { width:200px; }
  14. ul {list-style:none;margin-left:0;padding-left:0;margin-top:0;}
  15. ul li {margin-bottom:8px; margin-left:0;padding-left:0; }
  16.  
  17.  
  18.  
  19. /* notched effect for links in the unordered list */
  20. .notchedListItems a {
  21. display:block;
  22. border: solid #666;
  23. border-width: 0 1px;
  24. text-decoration: none;
  25. outline:none;
  26. color: #000;
  27. background: #e4e4e4;
  28. }
  29. .notchedListItems a b {
  30. display: block;
  31. position:relative;
  32. top: -1px;
  33. left: 0;
  34. border:solid #666;
  35. border-width:1px 0 0;
  36. font-weight:normal;
  37. }
  38. .notchedListItems a b b {
  39. border-width:0 0 1px;
  40. top: 2px;
  41. padding:1px 6px;
  42. }
  43. .notchedListItems a:hover,
  44. .notchedListItems a:hover b {background:#666;color:white;}
  45.  
  46.  
  47.  
  48. .feature {
  49. border:solid #647aae;
  50. border-width:0 1px;
  51. background:#b0c0e6;
  52. }
  53. .feature div {
  54. position:relative;
  55. top: -1px;
  56. left: 0;
  57. border:solid #647aae;
  58. border-width:1px 0 0;
  59. }
  60. .feature div div {
  61. top: 2px;
  62. border-width:0 0 1px;
  63. padding: .3em .3em .1em;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68.  
  69. <div class="examplesGoHere letsGiveItAFixedWidthOf200Pixels">
  70.  
  71. <h3>A list</h3>
  72.  
  73. <ul class="notchedListItems">
  74. <li><a href="#"><b><b>About</b></b></a></li>
  75. <li><a href="#"><b><b>Contact</b></b></a></li>
  76. <li><a href="#"><b><b>Buy Pie</b></b></a></li>
  77. </ul>
  78.  
  79.  
  80. <h3>A div</h3>
  81.  
  82. <div class="feature">
  83. <div>
  84. <div>
  85. <p>This is an example of the notched corners as applied to a div container.</p>
  86. <p>This is an example of the notched corners as applied to a div container.</p>
  87. <p>This is an example of the notched corners as applied to a div container.</p>
  88. </div>
  89.  
  90. </div>
  91. </div>
  92.  
  93.  
  94.  
  95.  
  96. </div><!-- end .examplesGoHere -->
  97.  
  98.  
  99.  
  100.  
  101.  
  102.  
  103. </body>
  104. </html>

Report this snippet  

You need to login to post a comment.