شما وارد حساب خود نشده و یا ثبت نام نکرده اید. لطفا وارد شوید یا ثبت نام کنید تا بتوانید از تمامی امکانات انجمن استفاده کنید.
اخطار‌های زیر رخ داد:
Warning [2] Use of undefined constant inline_ad - assumed 'inline_ad' (this will throw an Error in a future version of PHP) - Line: 331 - File: inc/plugins/my_ad_manager.php PHP 7.3.33 (Linux)
File Line Function
/inc/plugins/my_ad_manager.php 331 errorHandler->error
/inc/class_plugins.php 139 myads_inline
/inc/functions_post.php 785 pluginSystem->run_hooks
/showthread.php 1063 build_postbit
Warning [2] Use of undefined constant inline_ad - assumed 'inline_ad' (this will throw an Error in a future version of PHP) - Line: 44 - File: inc/functions_post.php(799) : eval()'d code PHP 7.3.33 (Linux)
File Line Function
/inc/functions_post.php(799) : eval()'d code 44 errorHandler->error
/inc/functions_post.php 799 eval
/showthread.php 1063 build_postbit



اعلانات

- توجه: بخش لینک سازی و بخش کاملا آزاد ایجاد شد تا کاربران برای لینک سازی مطالب و موضوعات مرتبط با سایت خودشون رو با بقیه و موتورهای جستجو به اشتراک بگذارند توجه کنید اگر کاربری روزانه بالای 5 مطلب و لینک ارسال نمایید اکانت کاربری مسدود خواهد شد.

- توجه: دوستان لطفا سوالات خود را از طریق شماره تماس موجود در سایت اعلام نکنید با پیامک یا تلگرام و... این شماره برای تماس های ضروری مشتریان فروشگاه قرار گرفته است.

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


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


[تصویر:  %D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%A8%D8...ion.js.jpg]


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


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


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


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

نسخه CSS3

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

       resim
   


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

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


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


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

مقالات مرتبط
[تصویر:  %DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8...toshop.jpg]
چگونگی ایجاد آیکون ناوبری تخت در Adobe Photoshop
[تصویر:  %DA%86%DA%AF%D9%88%D9%86%D9%87-%DB%8C%DA...%D9%85.jpg]
چگونه یک نوار پیشرفت جاوااسکریپت را با Pace.js ایجاد کنیم
[تصویر:  %DA%86%DA%AF%D9%88%D9%86%D9%87-%DB%8C%DA...%D9%85.jpg]
چگونه یک نوار پیشرفت جاوااسکریپت را با Pace.js ایجاد کنیم
تبلیغات
ads


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  دستگاه‌ ایجاد پارازیت GPS ،تهدید جدی برای کوادکوپترها flystation 0 60 ۱۴۰۰-۰۷-۱۲، ۰۴:۴۰ ب.ظ
آخرین ارسال: flystation
  دلایل ایجاد تاول leylakarimi 0 59 ۱۴۰۰-۰۷-۱۰، ۰۱:۵۱ ب.ظ
آخرین ارسال: leylakarimi
  کهیر و دلایل ایجاد آن mohsennn 0 51 ۱۴۰۰-۰۷-۱۰، ۰۱:۱۹ ب.ظ
آخرین ارسال: mohsennn
  چرا استفاده از سیستم کنترل تردد ضروری است؟ saeedso 0 38 ۱۴۰۰-۰۷-۰۴، ۱۱:۳۰ ق.ظ
آخرین ارسال: saeedso
  چگونگی استفاده از پرده های ساده و شیک در منزل bade 0 52 ۱۴۰۰-۰۵-۱۱، ۱۱:۳۳ ق.ظ
آخرین ارسال: bade
  مزایای استفاده از خدمات تعمیرگاه دیباسازان باران baroni55 0 45 ۱۴۰۰-۰۵-۰۲، ۰۱:۲۳ ق.ظ
آخرین ارسال: baroni55
  استفاده از قطعات ارجینال rahado 0 62 ۱۴۰۰-۰۵-۰۱، ۱۲:۰۱ ب.ظ
آخرین ارسال: rahado
  راهنمای استفاده از فعل Take و ساختارهای متفاوت آن iraneurope01 0 62 ۱۴۰۰-۰۴-۱۳، ۱۱:۱۹ ق.ظ
آخرین ارسال: iraneurope01
  مزایای استفاده از چراغ خطی روکار toseafraz 0 65 ۱۴۰۰-۰۳-۲۹، ۱۱:۰۲ ق.ظ
آخرین ارسال: toseafraz
  چرا از وردپرس برای طراحی سایت فروشگاهی استفاده کنیم؟ daredu 1 69 ۱۴۰۰-۰۲-۰۱، ۰۳:۵۲ ب.ظ
آخرین ارسال: shinaweb

پرش به انجمن:


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