[-]
آخرین ارسالی ها
نمایندگی انحصاری شرکت کوکوم
شروع کننده:tarahimodern آخرین پست توسط:tarahimodern پاسخ ها:0 کامپیوتر- سخت افزار-نرم افزار- لپ تاپ - شبکه و طراجی سایت Computer, Hardware ,Software, Laptops, Network and WebDesign نمایش ها:1 زمان:۸-۲۱-۱۳۹۸
جذب ثروت با استفاده از قانون جذب و ارتعاش
شروع کننده:tarahimodern آخرین پست توسط:tarahimodern پاسخ ها:0 کامپیوتر- سخت افزار-نرم افزار- لپ تاپ - شبکه و طراجی سایت Computer, Hardware ,Software, Laptops, Network and WebDesign نمایش ها:4 زمان:۸-۲۱-۱۳۹۸
کاربرد لایت باکس در کسب و کار
شروع کننده:yaldaa آخرین پست توسط:rentlift پاسخ ها:1 خدمات Services نمایش ها:1245 زمان:۷-۲۹-۱۳۹۸
چگونه با صندلی اداری مناسب، دکوراسیون اداری خود را متحول کنیم؟
شروع کننده:tarahimodern آخرین پست توسط:tarahimodern پاسخ ها:0 کامپیوتر- سخت افزار-نرم افزار- لپ تاپ - شبکه و طراجی سایت Computer, Hardware ,Software, Laptops, Network and WebDesign نمایش ها:43 زمان:۸-۲۱-۱۳۹۸
10 ترفند در نوشتن رپورتاژ آگهی
شروع کننده:blackdrama آخرین پست توسط:blackdrama پاسخ ها:0 معرفی سایتها و وبلاگها Introducing sites and blogs نمایش ها:44 زمان:۷-۵-۱۳۹۸
پیشنهاد فیلم ایرانی + عکس
شروع کننده:blackdrama آخرین پست توسط:blackdrama پاسخ ها:0 معرفی سایتها و وبلاگها Introducing sites and blogs نمایش ها:46 زمان:۷-۵-۱۳۹۸
رؤیاها علایق و آرزوهای ناخودآگاه ما را آزاد می‌کنند
شروع کننده:blackdrama آخرین پست توسط:blackdrama پاسخ ها:0 عمومی General نمایش ها:47 زمان:۶-۲۹-۱۳۹۸
رپورتاژ آگهی دقیقا چیست
شروع کننده:blackdrama آخرین پست توسط:blackdrama پاسخ ها:0 عمومی General نمایش ها:82 زمان:۶-۲۹-۱۳۹۸
ترکیب احتمالی رئال مادرید و لوانته
شروع کننده:blackdrama آخرین پست توسط:blackdrama پاسخ ها:0 ورزشی Sports نمایش ها:49 زمان:۶-۱۷-۱۳۹۸
پست رایگان مطالب مفید و تبلیغ کسب و کار با عضویت سریع
شروع کننده:elena آخرین پست توسط:blackdrama پاسخ ها:0 معرفی سایتها و وبلاگها Introducing sites and blogs نمایش ها:71 زمان:۷-۵-۱۳۹۸
جهت حرکت: - سرعت: - (توقف | حرکت) - بارگذاری مجدد

[-]
آخرین ارسالی ها
نمایندگی انحصاری شرکت کوکوم
شروع کننده:tarahimodern آخرین پست توسط:tarahimodern پاسخ ها:0 کامپیوتر- سخت افزار-نرم افزار- لپ تاپ - شبکه و طراجی سایت Computer, Hardware ,Software, Laptops, Network and WebDesign نمایش ها:1 زمان:۸-۲۱-۱۳۹۸
جذب ثروت با استفاده از قانون جذب و ارتعاش
شروع کننده:tarahimodern آخرین پست توسط:tarahimodern پاسخ ها:0 کامپیوتر- سخت افزار-نرم افزار- لپ تاپ - شبکه و طراجی سایت Computer, Hardware ,Software, Laptops, Network and WebDesign نمایش ها:4 زمان:۸-۲۱-۱۳۹۸
کاربرد لایت باکس در کسب و کار
شروع کننده:yaldaa آخرین پست توسط:rentlift پاسخ ها:1 خدمات Services نمایش ها:1245 زمان:۷-۲۹-۱۳۹۸
چگونه با صندلی اداری مناسب، دکوراسیون اداری خود را متحول کنیم؟
شروع کننده:tarahimodern آخرین پست توسط:tarahimodern پاسخ ها:0 کامپیوتر- سخت افزار-نرم افزار- لپ تاپ - شبکه و طراجی سایت Computer, Hardware ,Software, Laptops, Network and WebDesign نمایش ها:43 زمان:۸-۲۱-۱۳۹۸
10 ترفند در نوشتن رپورتاژ آگهی
شروع کننده:blackdrama آخرین پست توسط:blackdrama پاسخ ها:0 معرفی سایتها و وبلاگها Introducing sites and blogs نمایش ها:44 زمان:۷-۵-۱۳۹۸
پیشنهاد فیلم ایرانی + عکس
شروع کننده:blackdrama آخرین پست توسط:blackdrama پاسخ ها:0 معرفی سایتها و وبلاگها Introducing sites and blogs نمایش ها:46 زمان:۷-۵-۱۳۹۸
رؤیاها علایق و آرزوهای ناخودآگاه ما را آزاد می‌کنند
شروع کننده:blackdrama آخرین پست توسط:blackdrama پاسخ ها:0 عمومی General نمایش ها:47 زمان:۶-۲۹-۱۳۹۸
رپورتاژ آگهی دقیقا چیست
شروع کننده:blackdrama آخرین پست توسط:blackdrama پاسخ ها:0 عمومی General نمایش ها:82 زمان:۶-۲۹-۱۳۹۸
ترکیب احتمالی رئال مادرید و لوانته
شروع کننده:blackdrama آخرین پست توسط:blackdrama پاسخ ها:0 ورزشی Sports نمایش ها:49 زمان:۶-۱۷-۱۳۹۸
پست رایگان مطالب مفید و تبلیغ کسب و کار با عضویت سریع
شروع کننده:elena آخرین پست توسط:blackdrama پاسخ ها:0 معرفی سایتها و وبلاگها Introducing sites and blogs نمایش ها:71 زمان:۷-۵-۱۳۹۸
جهت حرکت: - سرعت: - (توقف | حرکت) - بارگذاری مجدد


ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امیتازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
ایجاد بازتاب آینه ای با استفاده از CSS و Reflection.js .
نویسنده پیام
hostcode آفلاین
Junior Member
**

ارسال‌ها: 31
تاریخ عضویت: شهر ۱۳۹۶
اعتبار: 0
ارسال: #1
ایجاد بازتاب آینه ای با استفاده از CSS و Reflection.js .
ایجاد بازتاب آینه ای با استفاده از 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 قرار می دهیم.
<img align="center" alt="rocket" src="http://magbot.ir/%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d8%a8%d8%a7%d8%b2%d8%aa%d8%a7%d8%a8-%d8%a7%d8%ab%d8%b1-%d9%82%d8%a7%d8%a8%d9%84-%d8%aa%d9%88%d8%ac%d9%87%db%8c-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-CSS-%d9%88-Reflection.js/img/rocket.png" />


برای 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 ایجاد کنیم
۵-۴-۱۳۹۸ ۰۳:۲۲ صبح
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
ارسال پاسخ 


پرش به انجمن:


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