myCloudCode

Tagged: -webkit-box-shadow RSS

• 

  Jay Kwong 6:48 am on February 9, 2010 Permalink | Reply
  Tags: -webkit-border-radius (2), -webkit-box-shadow   

  Inner shadows in CSS3 « Devthought 

  -webkit-box-shadow (in Webkit nightly) and -moz-box-shadow support inner shadows with the inset keyword. Both also support multiple shadow declarations separated by commas.

  

  div.box {
  -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.20), rgba(0,0,0,0.12) 0px 0px 10px inset;
  -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.20), rgba(0,0,0,0.12) 0px 0px 10px inset;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border: 1px solid #fff;
  padding: 6px;
  width: 200px;
  background: #fff;
  }
  

  via Inner shadows in CSS3 « Devthought.

   

  Reply Click here to cancel reply.

  Name (required)

  Email (required)

  Web Site

   
• 

  Jay Kwong 6:45 am on January 22, 2010 Permalink | Reply
  Tags: -webkit-box-shadow, -webkit-gradient, -webkit-transform, -webkit-transition   

  [CSS] The Fancy Modal 

  The Fancy Modal

  That modal is okay — it gets the job done and once you know it, the pieces can be put together in less than 5 minutes. We wanted to do a little more for Notable, so we cooked up a fancier style using a few other CSS tricks like -webkit-gradient and -webkit-transform.

  

  Modal-2 in Stronger, Better, Faster Design with CSS3

  This modal is a little flashier and more akin to a desktop app in terms of interaction: it slides down from the top and gets a little more chroming than the simple modal. We accomplish this through a couple of cool tricks.

  
  div#fancyModal {
  display: block; width: 560px;
  position: absolute; top: -310px; left: 170px;
  padding: 90px 20px 20px 20px;
  border: solid 1px #999;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(255,255,255)), to(rgb(230,230,230)));
  -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);
  -webkit-border-bottom-left-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -webkit-transition: -webkit-transform 0.25s ease-out;
  -webkit-transform: translateY(-570px);
  -moz-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);
  -moz-border-radius: 0 0 6px 6px;
  -moz-transform: translateY(-570px);
  }
  

  via Stronger, Better, Faster Design with CSS3 – Smashing Magazine.