Advertisement
mendes8010

Mountain Lion CSS

Sep 18th, 2012
48
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.20 KB | None | 0 0
  1. <div class="notification">
  2.   <img src="" alt="">
  3.  
  4.   <div class="message">
  5.   </div>
  6.  
  7.   <div class="buttons">
  8.   </div>
  9.  
  10. </div>
  11.  
  12.  
  13.  
  14. <div class="notification">
  15.   <img src="http://cl.ly/J49B/3951818241085781941.png" alt="Calendar icon">
  16.  
  17.   <div class="message">
  18.     <h2>Follow the white rabbit</h2>
  19.     <p>90 Minutes Ago</p>
  20.   </div>
  21.  
  22.   <div class="buttons">
  23.     <a href="#">Close</a>
  24.     <a href="#">Snooze</a>
  25.   </div>
  26.  
  27. </div>
  28.  
  29.  
  30. * {
  31.   padding: 0;
  32.   margin: 0;
  33. }
  34.  
  35. body {
  36.   background:#222 url(http://cl.ly/J3q4/universe.jpg);
  37. }
  38.  
  39.  
  40. .notification {
  41.   height: 100px;
  42.   width: 410px;
  43.   margin: 20px;
  44.   border-radius: 10px;
  45.   position: relative;
  46. }
  47.  
  48.  
  49. .notification {
  50.   height: 100px;
  51.   width: 410px;
  52.   margin: 20px;
  53.   border-radius: 10px;
  54.   position: relative;
  55.  
  56.   color: #4d4d4d;
  57.   font-family: Helvetica, Arial, sans-serif;
  58. }
  59.  
  60.  
  61.  
  62. .notification {
  63.   height: 100px;
  64.   width: 410px;
  65.   margin: 20px;
  66.   border-radius: 10px;
  67.   position: relative;
  68.  
  69.   color: #4d4d4d;
  70.   font-family: Helvetica, Arial, sans-serif;
  71.  
  72.   @include background-image(linear-gradient(rgba(255,255,255,0.9), rgba(235,235,235,0.9)));  
  73.   -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
  74.           box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
  75. }
  76.  
  77.  
  78. .notification img {
  79.   float: left;
  80.   padding: 10px 15px 0 15px;
  81.   width: 60px;
  82. }
  83.  
  84.  
  85. .notification h2 {
  86.   padding: 20px 0 0 0px;
  87.   font: bold 18px Myriad, Helvetica, Arial, sans-serif;
  88.   text-shadow: 0px 2px 1px #fff;
  89. }
  90.  
  91. .notification p {
  92.   font: bold 13px Myriad, Helvetica, Arial, sans-serif;
  93.   text-shadow: 0px 1px 1px #fff;
  94. }
  95.  
  96.  
  97. .buttons a {
  98.   display: block;
  99.   width: 60px;
  100.   margin: 5px;
  101.   padding: 8px;
  102.   position: absolute;
  103.   border: 1px solid #999;
  104.   border-radius: 5px;
  105.  
  106.   color: #222;
  107.   font: 13px Helvetica, Arial, sans-serif;
  108.   text-align: center;
  109.   text-decoration: none;
  110.  
  111.   -webkit-box-shadow: 0px 1px 1px #fff;
  112.   box-shadow: 0px 1px 1px #fff;
  113.   @include background-image(linear-gradient(rgba(255,255,255,0.5), rgba(235,235,235,0.5)));
  114. }
  115.  
  116.  
  117.  
  118. .buttons a:hover {
  119.    @include background-image(linear-gradient(rgba(255,255,255,1), rgba(235,235,235,1)));
  120. }
  121.  
  122.  
  123. .buttons a:nth-child(1) {
  124.   right: 10px;
  125.   top: 8px;
  126. }
  127.  
  128. .buttons a:nth-child(2) {
  129.   right: 10px;
  130.   top: 50px;
  131. }
  132.  
  133.  
  134. $(function() {
  135.     $( ".notification" ).draggable();
  136. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement