امتیاز موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
ایجاد js با reflection بازتاب آینه ای و استفاده از css

ایجاد بازتاب آینه ای با استفاده از CSS و Reflection.js
#1
ایجاد بازتاب آینه ای با استفاده از CSS و Reflection.js
آموزش طراحی سایت
 



روش شگفت انگیز که می توانید با طراحی وب مدرن امروز   کمک کند یک اثر بازتاب تصویر   است.


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


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


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

نسخه CSS3

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

       undefined
   


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

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


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


با استفاده از کدهای بالا، شما یک تصویر بازتابی شبیه تصویر زیر دارید. 

مقالات مرتبط
undefined
چگونگی ایجاد آیکون ناوبری تخت در Adobe Photoshop
undefined
چگونه یک نوار پیشرفت جاوااسکریپت را با Pace.js ایجاد کنیم
undefined
چگونه یک نوار پیشرفت جاوااسکریپت را با Pace.js ایجاد کنیم
پاسخ


پرش به انجمن:


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

تهران پاتوق

انجمن تهران پاتوق

انجمن تهران پاتوق,انجمن,تالار گفتگو,پرسش و پاسخ کامپیوتری,بکلینک قوی,بکلینک ارزان,رپورتاژ اگهی,سوالات کامپیوتری,پاسخ به سوالات کامپیوتری,انجمن کامپیوتر,انجمن اینترنت,انجمن موبایل,انجمن نرم افزار,انجمن سخت افزار,انجمن علمی,انجمن موسیقی,انجمن فیلم

فروم تهران پاتوق,انجمن تخصصی كامپیوتر ،تالار گفتگو،بکلینک قوی،بکلینک ارزان،رپورتاژ اگهی، مكانی برای بحث و تبادل نظر با هزاران كاربر فارسی زبان

عکس,جدید95,جدید96,فیلم جدید,شهاب حسینی,جدید2016,محرم

تهران پاتوق,انجمن تهران پاتوق,اخبار موبایل,تالار گفتمان,شبکه اجتماعی.انجمن تهران پاتوق

دوستان ما