بتوانید از فايل هاي پيوست به صورت نامحدود استفاده کنید.
اگر مصرف کننده هستید بتوانید از اعضای با تجربه انجمن مشاوره بگیرید.
اگر در کسب و کار مرتبط هستید به دیگران مشاوره بدهید تجربیات خود را با دیگران به اشتراک بگذارید و با مشتریان ارتباط بگیرید.
به تمام بخش هاي ويژه مخصوص کاربران سايت دسترسی پیدا کنید.


مهمان گرامی، خوش‌آمدید!
شما قبل از این که بتوانید در این انجمن مطلبی ارسال کنید باید ثبت نام کنید.


  

گذرواژه‌
  





جستجوی انجمن‌ها

(جستجوی پیشرفته)

آخرین موضوع‌ها
٢٢٠متر زعفرانیه(عمید)فول ...
انجمن:
آخرین ارسال توسط: zibazist
امروز
» پاسخ: 0
» بازدید: 1
ثبت موسسه و تشکیلات غیر ا...
انجمن:
آخرین ارسال توسط: kare
۱۳۹۸/۱۱/۲۹
» پاسخ: 0
» بازدید: 16
ثبت شرکت در استرالیا
انجمن:
آخرین ارسال توسط: comreg
۱۳۹۸/۱۱/۲۹
» پاسخ: 0
» بازدید: 5
آپارتمان فول ۷۸ متری جهاد...
انجمن:
آخرین ارسال توسط: zibazist
۱۳۹۸/۱۱/۲۶
» پاسخ: 0
» بازدید: 11
Stretch of acquire constr...
انجمن:
آخرین ارسال توسط: baidai8300
۱۳۹۸/۱۱/۲۶
» پاسخ: 0
» بازدید: 39
Stresses und lso are also
انجمن:
آخرین ارسال توسط: baidai8300
۱۳۹۸/۱۱/۲۶
» پاسخ: 0
» بازدید: 38
Stressed football represe...
انجمن:
آخرین ارسال توسط: baidai8300
۱۳۹۸/۱۱/۲۶
» پاسخ: 0
» بازدید: 40
Strasburg broadcast excel...
انجمن:
آخرین ارسال توسط: baidai8300
۱۳۹۸/۱۱/۲۶
» پاسخ: 0
» بازدید: 44
Straight along day set wi...
انجمن:
آخرین ارسال توسط: baidai8300
۱۳۹۸/۱۱/۲۶
» پاسخ: 0
» بازدید: 38
Stock enterprise
انجمن:
آخرین ارسال توسط: baidai8300
۱۳۹۸/۱۱/۲۶
» پاسخ: 0
» بازدید: 10
Stock enterprise
انجمن:
آخرین ارسال توسط: baidai8300
۱۳۹۸/۱۱/۲۶
» پاسخ: 0
» بازدید: 11
آپارتمان فروشی
انجمن:
آخرین ارسال توسط: zibazist
۱۳۹۸/۱۱/۲۰
» پاسخ: 0
» بازدید: 15
دکوراسیون فضای داخلی شرکت...
انجمن:
آخرین ارسال توسط: پیرامیدطرح
۱۳۹۸/۱۱/۲۰
» پاسخ: 0
» بازدید: 17
ترخیص کالا از گمرک
انجمن:
آخرین ارسال توسط: webone20
۱۳۹۸/۱۱/۱۵
» پاسخ: 0
» بازدید: 27
درب ضد سرقت
انجمن:
آخرین ارسال توسط: webone20
۱۳۹۸/۱۱/۱۵
» پاسخ: 0
» بازدید: 15
مبلمان اداری
انجمن:
آخرین ارسال توسط: webone20
۱۳۹۸/۱۱/۱۵
» پاسخ: 0
» بازدید: 13
کابینت هایگلاس
انجمن:
آخرین ارسال توسط: webone20
۱۳۹۸/۱۱/۱۵
» پاسخ: 0
» بازدید: 18
فروش 195متر آپارتمان فول ...
انجمن:
آخرین ارسال توسط: zibazist
۱۳۹۸/۱۱/۱۳
» پاسخ: 0
» بازدید: 13
مزایای ساخت سایت صنعتی...
انجمن:
آخرین ارسال توسط: sedaghatbar
۱۳۹۸/۱۱/۰۷
» پاسخ: 2
» بازدید: 335
ایده های نو در دکوراسیون ...
انجمن:
آخرین ارسال توسط: پیرامیدطرح
۱۳۹۸/۱۱/۰۳
» پاسخ: 0
» بازدید: 42
قیمت روز حبوبات را از کجا...
انجمن:
آخرین ارسال توسط: lemonn
۱۳۹۸/۱۱/۰۱
» پاسخ: 0
» بازدید: 20
بهترین فروشگاه اینترنتی خ...
انجمن:
آخرین ارسال توسط: lemonn
۱۳۹۸/۱۱/۰۱
» پاسخ: 0
» بازدید: 20
نکاتی برای طراحی دکوراسیو...
انجمن:
آخرین ارسال توسط: sefidgroup
۱۳۹۸/۱۰/۲۸
» پاسخ: 0
» بازدید: 26
ثبت نام تجاری، اجباری است...
انجمن:
آخرین ارسال توسط: kare
۱۳۹۸/۱۰/۲۶
» پاسخ: 0
» بازدید: 32
درباره اهمیت نام تجاری
انجمن:
آخرین ارسال توسط: comreg
۱۳۹۸/۱۰/۲۶
» پاسخ: 0
» بازدید: 24

امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
ایجاد بازتاب آینه ای با استفاده از CSS و Reflection.js .
#1
ایجاد بازتاب آینه ای با استفاده از CSS و Reflection.js
آموزش طراحی سایت
 


[تصویر: http://magbot.ir//%D8%A7%DB%8C%D8%AC%D8%...ion.js.jpg]


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


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


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


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

نسخه CSS3

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

       [تصویر: http://magbot.ir/%d8%a7%db%8c%d8%ac%d8%a...rocket.png]
   


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

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


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


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

مقالات مرتبط
[تصویر: http://magbot.ir//%DA%86%DA%AF%D9%88%D9%...toshop.jpg]

چگونگی ایجاد آیکون ناوبری تخت در Adobe Photoshop
[تصویر: http://magbot.ir//%DA%86%DA%AF%D9%88%D9%...%D9%85.jpg]

چگونه یک نوار پیشرفت جاوااسکریپت را با Pace.js ایجاد کنیم
[تصویر: http://magbot.ir//%DA%86%DA%AF%D9%88%D9%...%D9%85.jpg]
چگونه یک نوار پیشرفت جاوااسکریپت را با Pace.js ایجاد کنیم
پاسخ


پرش به انجمن:


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