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

آموزش طراحی سایت

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

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


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

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

نسخه CSS3

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

rocket


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

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


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

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


پیام‌های این موضوع
ایجاد بازتاب آینه ای با استفاده از CSS و Reflection.js - magbot - 2019/06/14, 12:15 AM

موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  ایجاد وب سرویس در cakephp amin0256 1 1,937 2015/04/23, 11:23 PM
آخرین ارسال: saleh
  استفاده از توابع کیک در فایل php ساده masud 7 4,912 2014/09/24, 10:30 AM
آخرین ارسال: saleh
  استفاده از session در قایل mobintmu 10 6,573 2014/08/09, 07:27 PM
آخرین ارسال: saleh
  مشکل در استفاده از فونت فارسی jamal13647850 2 2,350 2014/06/11, 10:56 AM
آخرین ارسال: jamal13647850
  مشکل در ارسال آرایه ای از textbox ها با استفاده از آژاکس و تابع json peiman 1 2,093 2014/03/23, 09:06 PM
آخرین ارسال: saleh
  سوال درباره موارد استفاده از loadModel و ClassRegistry و requestAction ؟ cake php 3 3,392 2013/11/15, 08:28 PM
آخرین ارسال: saleh
  مشکل در استفاده از Theme irandiablo 3 3,445 2013/09/21, 03:29 AM
آخرین ارسال: saleh
Question برای backup گیری از پایگاه داده شما چی استفاده می کنید؟ fery 6 6,061 2013/07/15, 12:47 PM
آخرین ارسال: saleh
  استفاده از AJAX DeadSpace 6 5,389 2013/05/15, 10:41 AM
آخرین ارسال: saleh
  استفاده از کش در هر جا؟ masoud.pezeshkzade 19 15,911 2013/05/01, 06:02 PM
آخرین ارسال: saleh

پرش به انجمن:


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