کد باکس های زیبا و سایه دار زیبا

box-shadow

توجه داشته باشید که این کدها در مرورگر مذخرف اینترنت اکسپلورر عمل نمی کنه و بیهترین نمایش خودشو داخل مرورگر فایرفاکس داره.

این کد ها بر اساس css طراحی شده که با استایل خارجی کار می کنه.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: CSS drop-shadows without images – Nicolas Gallagher</title> <meta name="description" content="Using CSS pseudo-elements, box-shadows, and transforms to create drop-shadow effects without images from semantic HTML"> <center>by: <a href="http://moisrex.r98.ir">moisrex.r98.ir</a></center> <style> body { padding:20px 0 0; font:14px/1.5 Arial, sans-serif; text-align:center; color:#333; background:#FAF0D9; } a { font-weight:bold; color:#346AA8; } a:hover, a:focus, a:active { text-decoration:none; } .container { position:relative; z-index:1; width:600px; padding:20px; margin:0 auto; background:#FAF0D9; } .container:after { content:""; display:block; clear:both; visibility:hidden; height:0; font-size:0; } /* Shared styles */ .drop-shadow { position:relative; float:left; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-2; } .drop-shadow p { font-size:16px; font-weight:bold; } /* Lifted corners */ .lifted { -moz-border-radius:4px; border-radius:4px; } .lifted:before, .lifted:after { bottom:15px; left:10px; width:50%; height:20%; max-width:300px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .lifted:after { right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); } /* Curled corners */ .curled { border:1px solid #efefef; -moz-border-radius:0 0 120px 120px / 0 0 6px 6px; border-radius:0 0 120px 120px / 0 0 6px 6px; } .curled:before, .curled:after { bottom:12px; left:10px; height:55%; max-width:200px; -webkit-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); -moz-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); -webkit-transform:skew(-8deg) rotate(-4deg); -moz-transform:skew(-8deg) rotate(-4deg); -o-transform:skew(-8deg) rotate(-4deg); transform:skew(-8deg) rotate(-4deg); } .curled:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(4deg); -moz-transform:skew(8deg) rotate(4deg); -o-transform:skew(8deg) rotate(4deg); transform:skew(8deg) rotate(4deg); } /* Perspective */ .perspective:before { left:80px; bottom:8px; width:50%; height:35%; max-width:200px; -webkit-box-shadow:-80px 5px 10px rgba(0, 0, 0, 0.4); -moz-box-shadow:-80px 5px 8px rgba(0, 0, 0, 0.4); box-shadow:-80px 5px 8px rgba(0, 0, 0, 0.4); -webkit-transform:skew(50deg); -moz-transform:skew(50deg); -o-transform:skew(50deg); transform:skew(50deg); -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; } .perspective:after { display:none; } /* Raised shadow - no pseudo-elements needed */ .raised { -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } /* Curved shadows */ .curved:before { top:10px; bottom:10px; left:0; right:50%; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-box-shadow:0 0 15px rgba(0,0,0,0.6); box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-border-radius:10px / 100px; border-radius:10px / 100px; } .curved-vt-2:before { right:0; } .curved-hz-1:before { top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .curved-hz-2:before { top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } /* Rotated box */ .rotated { -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .rotated :first-child:before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } </style> <script> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-7489188-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.async = true; ga.src = 'http://www.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <div class="container"> <div class="drop-shadow lifted"> <p>Lifted corners</p> </div> <div class="drop-shadow curled"> <p>Curled corners</p> </div> <div class="drop-shadow perspective"> <p>Perspective</p> </div> <div class="drop-shadow raised"> <p>Raised box</p> </div> <div class="drop-shadow curved curved-vt-1"> <p>Single vertical curve</p> </div> <div class="drop-shadow curved curved-vt-2"> <p>Vertical curves</p> </div> <div class="drop-shadow curved curved-hz-1"> <p>Single hozitonal curve</p> </div> <div class="drop-shadow curved curved-hz-2"> <p>Horizontal curves</p> </div> <div class="drop-shadow lifted rotated"> <p>Rotated box</p> </div> </div> </body> </html>

0 نظر

2338 بازدید

یکشنبه 03 اردیبهشت 1391 - 21:01

کلاس های آنلاین فعال

برای افزایش دانش عمومی کاربران سعی بر این داریم که کلاس های آنلاینی برگزار کنیم. لیست این کلاس (ها) را می توانید در زیر ببینید. این قسمت را هر روز چک کنید تا از کلاس ها و اخبار جدید با خبر شوید. کلاس ها توسط همین کاربران و دوستان شما برگزار میشود. اگر مایل به برپایی کلاس آموزشی ای در هر زمینه ای هستید با مدیر تماس بگیرید.

آموزش PHP - جلسه اول

پنجشنبه 04 تیر 1394 - 17:00

هیچ کلاس فعالی موجود نیست.

کاربران آنلاین

آمار

مطالب : 792
نظرات : 4504
تعداد اعضا : 37335
افراد آنلاین : 6
بازدید امروز : 1,620
بازدید دیروز : 4,064
گوگل امروز : 2
گوگل دیروز : 41
بازدید هفته : 1,620
بازدید ماه : 32,850
بازدید سال : 195,080
بازدید کلی : 14,195,417

عنوان کد:
توضیحات: