logo
درود مهمان گرامی! (ورودثبت نام)
 

 
[-]
آخرین ارسالی ها
موارد مصرف پروفیل:
شروع کننده:avaseo آخرین ارسال توسط:avaseo پاسخ ها:0 مباحث تلفن های همراه متفرقه مشاهده:2 زمان:امروز
تعمیرات انواع لباسشویی تمام اتوماتیک
شروع کننده:avaseo آخرین ارسال توسط:avaseo پاسخ ها:0 مباحث تلفن های همراه متفرقه مشاهده:1 زمان:امروز
طریقه چاق نمودن گوسفندان لاغر
شروع کننده:gosfand آخرین ارسال توسط:gosfand پاسخ ها:0 گفتگوي آزاد مشاهده:4 زمان:امروز
هتل چهار ستاره سمینال استانبول
شروع کننده:bisungasht آخرین ارسال توسط:bisungasht پاسخ ها:0 مباحث متفرقه مشاهده:4 زمان:امروز
دانلود فیلم از یوتیوب در شصت ثانیه
شروع کننده:rabineduction آخرین ارسال توسط:rabineduction پاسخ ها:0 قوانين سايت مشاهده:22 زمان:۲۲-۶-۱۳۹۸
انواع چای ایرانی
شروع کننده:Somaye.m آخرین ارسال توسط:Somaye.m پاسخ ها:0 گفتگوي آزاد مشاهده:35 زمان:۲۱-۶-۱۳۹۸
enjoy new website
شروع کننده:adriansg3 آخرین ارسال توسط:adriansg3 پاسخ ها:0 مقالات کامپیوتر مشاهده:29 زمان:۲۱-۶-۱۳۹۸
کلاد لینوکس چیست و مزایای آن – بخش دوم
شروع کننده:webpouyanii آخرین ارسال توسط:webpouyanii پاسخ ها:0 مقالات کامپیوتر مشاهده:401 زمان:۲۰-۶-۱۳۹۸
Free Porn Galleries - Hot Sex Pictures
شروع کننده:abbyjt11 آخرین ارسال توسط:abbyjt11 پاسخ ها:0 حكايت هاي شنیدنی و آموزنده مشاهده:35 زمان:۱۸-۶-۱۳۹۸
روش صحیح نصب و جا زدن بلبرینگ
شروع کننده:nik952148 آخرین ارسال توسط:nik952148 پاسخ ها:0 گفتگوي آزاد مشاهده:68 زمان:۱۷-۶-۱۳۹۸
Plugin By Hamed


ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امیتازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
ایجاد بازتاب آینه ای با استفاده از CSS و Reflection.js
۱۹-۳-۱۳۹۸, ۰۲:۰۶ صبح
ارسال: #1
ایجاد بازتاب آینه ای با استفاده از CSS و Reflection.js

ایجاد بازتاب آینه ای با استفاده از CSS و Reflection.js


ایجاد بازتاب آینه ای  با استفاده از CSS و Reflection.js
روش شگفت انگیز که می توانید با طراحی وب مدرن امروز   کمک کند یک اثر بازتاب تصویر   است.
با این حال، ایجاد یک اثر انعکاسی تصویر با استفاده از CSS  برای سایت شما می تواند زمان زیادی صرف کند، هنگامی که شما نیاز به تغییر تصاویر در سایت خود دارد ، شما همچنین نیاز به تغییر برخی از بخش های CSS خود را را دارید. یکی دیگر از مشکلات که شما ممکن است  با آن مواجه شوید این است که در تمام مرورگرها کار نکند. 



 یک ابزار جاوا اسکریپت جدید به نام Reflection.js برای  جی کوئری  و MooTools  موجود است. باعث می شود ایجاد انعکاسی برای سایت شما بسیار ساده تر و سریعتر باشد.


خوب شروع کنید. 


نسخه CSS3



برای HTML ما، ما به سادگی یک تصویر اضافه می کنیم و آن را بر روی یک عنصر HTML5 قرار می دهیم. 

rocket

برای CSS ما قصد داریم به موارد زیر عمل کنیم: 

1. با استفاده از مقدار خودکار، حاشیه 60px را در بالای صفحه قرار دهید و آن را روی صفحه قرار دهید. 


2. بعد، از منوی -webkit-box-reflect CSS برای نشان دادن تصویر به پایین استفاده کنید. 
3. سپس تصویر را با استفاده از -webkit-gradient ماسک می کنیم تا تصویر را در پایین پایین بیاوریم و فقط یک قسمت یا کمتر از تصویر را نمایش می دهیم.
با استفاده از کدهای بالا، شما یک تصویر بازتابی شبیه تصویر زیر دارید. 
مقالات مرتبط
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان

 Quick Theme:


 


زمان کنونی: ۲۴-۶-۱۳۹۸, ۰۳:۳۴ عصر