SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can anyone make box-shadow like this image?

    Can anyone make box-shadow like this image?

    2ikzkvs.jpg
    Last edited by ralph.m; Aug 12, 2012 at 00:50.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi dileepma. Welcome to the forums.

    Here's a rough attempt:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Box Shadder</title>
    	
    <style media="all">
    div {
      width: 215px; 
      height: 80px; 
      border: 1px solid #ccc; 
      position: relative; 
      border-radius: 15px; 
      background: white;
    }
    
    div::before, div::after {
      box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
      -webkit-transform: rotate(-8deg);
      transform: rotate(-8deg);
      position: absolute;
      left: 10px;
      bottom: 12px;
      z-index: -1;
      width: 50%;
      max-width: 100px;
      height: 20px;
      content: "";
    }
    
    div::after {
      -webkit-transform: rotate(8deg);
      transform: rotate(8deg);
      right: 10px;
      left: auto;
    }
    </style>
    </head>
    
    <body>
    	<div>
    	</div>
    </body>
    </html>
    It's only tested on webkit browsers (Chrome/Safari) so you'd need to add in other vendor prefixes etc for other browsers.

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi dileepma. Welcome to the forums.

    Here's a rough attempt:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Box Shadder</title>
    	
    <style media="all">
    div {
      width: 215px; 
      height: 80px; 
      border: 1px solid #ccc; 
      position: relative; 
      border-radius: 15px; 
      background: white;
    }
    
    div::before, div::after {
      box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
      -webkit-transform: rotate(-8deg);
      transform: rotate(-8deg);
      position: absolute;
      left: 10px;
      bottom: 12px;
      z-index: -1;
      width: 50%;
      max-width: 100px;
      height: 20px;
      content: "";
    }
    
    div::after {
      -webkit-transform: rotate(8deg);
      transform: rotate(8deg);
      right: 10px;
      left: auto;
    }
    </style>
    </head>
    
    <body>
    	<div>
    	</div>
    </body>
    </html>
    It's only tested on webkit browsers (Chrome/Safari) so you'd need to add in other vendor prefixes etc for other browsers.
    Thanks Thanks Thanks !!! No words to say say !!! Thank you again!!!!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You're welcome.

    Remember that it won't work in all browsers, though—even with vendor prefixes for Firefox etc. (CSS3 is still experimental, and some old browsers like IE8 and under hang around like a bad smell.) You could use an image instead to create that effect if you need it to work in all browsers.

  5. #5
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You're welcome.

    Remember that it won't work in all browsers, though—even with vendor prefixes for Firefox etc. (CSS3 is still experimental, and some old browsers like IE8 and under hang around like a bad smell.) You could use an image instead to create that effect if you need it to work in all browsers.
    I used browser vendors hacks for work it on all browsers..I just need to display it on IE9 , Chrome/Safari latest version, Firefox latest version & Opera latest version.All the hacks works for me.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Great, glad to hear it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •