jquery - How would you achieve this 3d hover effect? -


i'm trying 3d mouseover effect when you're on div. here's it's now

http://jsfiddle.net/6tnbu/

i know how make in sort lower-left , top-right corner have cleaner shadow, oblique style. thought maybe load triangle on corners know if there's other way achieve that.

thanks

if don't mind using pseudo-elements, there's ::before , ::after (although note that, recall, ie doesn't recognise double-colon declaration, you'd have use :before , :after):

#box::before {     content: ' ';     position: absolute;     top: -10px;     left: -10px;     bottom: 0;     height: 100%;     background-color: #f90;     border-bottom: 10px solid white;     border-right: 10px solid black; }  #box::after {     content: ' ';     position: absolute;     top: -10px;     left: -10px;     right: 0;     width: 100%;     border-bottom: 10px solid black;     border-right: 10px solid white; } 

js fiddle demo.


Comments

Popular posts from this blog

jasper reports - Fixed header in Excel using JasperReports -

media player - Android: mediaplayer went away with unhandled events -

python - ('The SQL contains 0 parameter markers, but 50 parameters were supplied', 'HY000') or TypeError: 'tuple' object is not callable -