افکت قرار دادن سایه در بالای تگ body

دسته بندی: HTML و CSS
زمان مطالعه: 2 دقیقه
۱۸ مرداد ۱۳۹۳

با سلام خدمت تمامی دوستان سون لرنی

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

این افکت باعث میشه که قبل از تگ body (بالای تگ body) یک سایه ایجاد بشه ، که باعث میشه سایتتون زیباتر جلوه داده بشه.در تصویر زیر میتونید پیش نمایش اون رو مشاهده کنید. در تصویر با استفاده از فلش اون سایه ای که ایجاد میشه رو نشون دادم.

topedge

خب برای اینکار فقط کافیه که کدهای CSS زیر رو در کدهاتون قرار بدین :

body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;

          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
              -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                         box-shadow: 0px 0px 10px rgba(0,0,0,.8);

          z-index: 100;
}

خب به این صورت افکت مورد نظر رو ایجاد کردیم.

امیدوارم خوشتون اومده باشه.

موفق باشین.یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

na3r

کلی ایده به ذهنم اومد با این ترفند! مرسی ..

محمد اسفندیاری

وظیفه ما همین ایده دادن به شما دوستان هست 🙂
امیدوارم موفق باشید
یا علی

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل