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

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







MAGBOT +
D8A7DB8CD8ACD8A7D8AF D8A8D8A7D8B2D8AAD8A7D8A8 D8A7D8ABD8B1 D982D8A7D8A8D984 D8AAD988D8ACD987DB8C D8A8D8A7 D8A7D8B3D8AAD981D8A7D8AFD987 D8A7D8B2 CSS D988 Reflectionjs


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

خوب شروع کنید.
نسخه CSS3

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

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


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

مقالات مرتبط
DA86DAAFD988D986DAAFDB8C D8A7DB8CD8ACD8A7D8AF D8A2DB8CDAA9D988D986 D986D8A7D988D8A8D8B1DB8C D8AAD8AED8AA D8AFD8B1 Adobe Photoshop


DA86DAAFD988D986D987 DB8CDAA9 D986D988D8A7D8B1 D9BEDB8CD8B4D8B1D981D8AA D8ACD8A7D988D8A7D8A7D8B3DAA9D8B1DB8CD9BED8AA D8B1D8A7 D8A8D8A7 Pacejs D8A7DB8CD8ACD8A7D8AF DAA9D986DB8CD985


DA86DAAFD988D986D987 DB8CDAA9 D986D988D8A7D8B1 D9BEDB8CD8B4D8B1D981D8AA D8ACD8A7D988D8A7D8A7D8B3DAA9D8B1DB8CD9BED8AA D8B1D8A7 D8A8D8A7 Pacejs D8A7DB8CD8ACD8A7D8AF DAA9D986DB8CD985