Pizza Box CSS

Denna lilla ”snippet” kommer från början från http://markdotto.com/playground/3d-text/ som visar hur man gör 3D-text med hjälp av text-shadow attributet. När jag satt och arbetade med vår webbshop som släpps i februari så ville jag göra något extra med produktbilderna. Först så var det en klassisk vit ram och en subtil box-shadow, vilket såg bra ut. Men rastlös som man är ville jag göra något mer av det hela.

Jag tog värdena från 3D-texten och applicerade dem på bilderna med box-shadow attributet istället för text-shadow. Modifierade det lite tills det blev en upphöjd effekt. Eftersom jag åt pizza denna dag (äter pizza väldigt sällan bör påpekas), så fick det mig att tänka på att effekten påminde lite om just en pizzakartong. Så jag kallar effekten för ”Pizza Box CSS”

Med det som grund kan man också göra en del roliga ”hover” effekter, t.ex. att kartongen/ramen öppnas, eller sjunker ner. Bara att leka på!

Kompatibilitet: Safari, Chrome, Firefox, Opera, IE10DEV (men inte IE9).

Exempel 1

---

Exempel 2

---

---

CSS

Exempel 1:

box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 1px rgba(0,0,0,.25), 0 3px 1px rgba(0,0,0,.2), 0 5px 1px rgba(0,0,0,.15); -webkit-box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 1px rgba(0,0,0,.25), 0 3px 1px rgba(0,0,0,.2), 0 5px 1px rgba(0,0,0,.15); -moz-box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 1px rgba(0,0,0,.25), 0 3px 1px rgba(0,0,0,.2), 0 5px 1px rgba(0,0,0,.15);

 

Exempel 2:

 box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); -webkit-box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); -moz-box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

 

---

Credits: http://www.markdotto.com/