خوش آمدید به انجمن ای فری

بازدیدکننده گرامی برای دسترسی به تمامی امکانات در انجمن عضو شوید. پس از ثبت نام و ورود به سیستم ، می توانید موضوعات ایجاد کنید ، پاسخ به موضوعات موجود ارسال کنید ، به اعضای انجمن امتیاز دهید ، اقدام به خرید و فروش کنید ، و موارد دیگر. عضویت، سریع و کاملاً رایگان است ، پس منتظر چی هستی؟

درخواست راهنمایی

اگر نیاز به راهنمایی دارید درخواست خود را ثبت کنید

فروشگاه

قالب و افزونه و محصولات خود را میتوانید اینجا خرید و فروش کنید

دانلود منابع

قالب و افزونه های جدید و بروز را میتوایند از اینجا دانلود کنید

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

  • شروع کننده موضوع magbot
  • تاریخ شروع

magbot

کاربر اخراجی
عضویت
5/31/19
ارسال ها
10
امتیاز واکنش
4
ایجاد بازتاب آینه ای با استفاده از CSS و Reflection.js
آموزش طراحی سایت


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


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

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



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


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


نسخه CSS3

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


rocket



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

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


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

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


مقالات مرتبط
چگونگی ایجاد آیکون ناوبری تخت در Adobe Photoshop

چگونگی ایجاد آیکون ناوبری تخت در Adobe Photoshop
چگونه یک نوار پیشرفت جاوااسکریپت را با Pace.js ایجاد کنیم

چگونه یک نوار پیشرفت جاوااسکریپت را با Pace.js ایجاد کنیم
چگونه یک نوار پیشرفت جاوااسکریپت را با Pace.js ایجاد کنیم

چگونه یک نوار پیشرفت جاوااسکریپت را با Pace.js ایجاد کنیم
 
ارسال کننده موضوعات مشابه انجمن پاسخ ها تاریخ
ariamovie مباحث و مشکلات مشکل در ایجاد کردن پیشوند پشتیبانی زنفورو 1
alirahmani7443 درخواست راهنمایی برای ایجاد بروزرسانی خودکار برای افزونه ها و قالب های ترجمه شده آموزشهای وردپرس 2
WALKER دانلود افزونه ایجاد قابلیت چند ارز در ووکامرس - Aelia Currency Switcher for WooCommerce افزونه های وردپرس 0
sslri دانلود افزونه ایجاد تور آموزشی در وردپرس - WP Ultimate Tours Builder افزونه های وردپرس 0
J درخواست ایجاد بخشی برای دانلود المنت های graphicriver در انجمن گفتگوی آزاد 4
alirahmani7443 مباحث و مشکلات درخواست راهنمایی در مورد ایجاد شورت کد نمایش آواتار کاربر وردپرس 5
soheilnew XF درخواست افزونه ایجاد وبلاگ در زنفورو 2 درخواست قالب و افزونه 2
WALKER دانلود Page Generator Pro v2.1.3 - Content Generator for WordPress | افزونه ایجاد صفحات و پست های سفارشی نامحدود در وردپرس افزونه های وردپرس 1
WALKER دانلود Justified Image Grid - Premium WordPress Gallery v4.0.1 | افزونه ایجاد گالری تصاویر پیشرفته در وردپرس افزونه های وردپرس 4
WALKER دانلود UberChart v1.20 - WordPress Chart Plugin افزونه ایجاد نمودار وردپرس افزونه های وردپرس 1
WALKER دانلود LearnDash LMS v3.1.1.1 + Addons | افزونه ایجاد آموزشگاه مجازی وردپرس افزونه های وردپرس 14
WALKER دانلود Slick Menu - Responsive WordPress Vertical Menu v1.2.8 افزونه ایجاد منوی عمودی و واکنش‌گرا در وردپرس افزونه های وردپرس 13
WALKER دانلود WP Timeline – Responsive Vertical and Horizontal timeline plugin v3.5.2 افزونه ایجاد تایم لاین وردپرس افزونه های وردپرس 7
WALKER دانلود X Docs Wordpress Product Documentation Creator v1.0.9 افزونه ایجاد فایل راهنما برای محصولات در وردپرس افزونه های وردپرس 2
WALKER دانلود Super Interactive Maps v1.9 افزونه ایجاد نقشه کشورها در وردپرس افزونه های وردپرس 4
WALKER دانلود Modal Form - WordPress Plugin v1.0.2 افزونه ایجاد فرم تماس و خبرنامه برای وردپرس افزونه های وردپرس 0
WALKER دانلود Events Schedule – WordPress Plugin v2.5.16 افزونه ایجاد تقویم رویدادها و رزرو آنلاین در وردپرس افزونه های وردپرس 4
WALKER دانلود MemberPress Pro v1.8.6 + Addons افزونه عضویت و ایجاد رابط کاربری وردپرس افزونه های وردپرس 10
WALKER دانلود Knowledge Base | Helpdesk | Support | Wiki WordPress Plugin v4.2.0 افزونه ایجاد دانشنامه آنلاین در وردپرس افزونه های وردپرس 3
WALKER آموزش ایجاد سیستم تیکت و پشتیبانی در وردپرس با Awesome Support آموزشهای وردپرس 7
WALKER دانلود User Profiles Made Easy - WordPress Plugin v2.3.09 افزونه ایجاد پروفایل برای کاربران وردپرس افزونه های وردپرس 0
WALKER دانلود WP One Time File Download v2.5 افزونه ایجاد لینک دانلود یکبار مصرف وردپرس افزونه های وردپرس 1
WALKER دانلود Directory Pro v2.1.2 - WordPress Directory Plugin افزونه ایجاد دایرکتوری در وردپرس افزونه های وردپرس 13
WALKER دانلود TotalPoll Pro - Responsive WordPress Poll Plugin v4.3.1 افزونه ایجاد نظرسنجی پیشرفته در وردپرس افزونه های وردپرس 18
WALKER دانلود Modal Login Register Forgotten Wordpress Plugin v2.0.5 افزونه ایجاد فرم ورود و عضویت در وردپرس افزونه های وردپرس 2
WALKER دانلود Woocommerce Tabs Pro: Extra Tabs for Product Page v3.0 افزونه ایجاد تب دلخواه در صفحه محصولات ووکامرس افزونه های وردپرس 0
WALKER دانلود Go Pricing - WordPress Responsive Pricing Tables v3.3.17 افزونه ایجاد لیست قیمت وردپرس افزونه های وردپرس 3
WALKER دانلود Tablenator - Advanced Tables for WordPress & WP Bakery Page Builder v2.1.5 ایجاد جدول در صفحه ساز WPBakery با افزونه Tablenator افزونه های وردپرس 1
J O K E R آموزش آموزش ایجاد فایل پشتیبان (فایل نصبی) برنامه نصب شده آموزش های نرم افزار 0
WALKER دانلود Vision Interactive - Image Map Builder for WordPress v1.4.1 ایجاد تصاویر و نقشه تعاملی در وبسایت افزونه های وردپرس 3
WALKER آموزش جلوگیری از ایجاد error log در وردپرس آموزشهای وردپرس 0
WALKER دانلود افزونه ایجاد منوهای کشویی در وردپرس Nest - Flyout Sliding Panels for WordPress v2.2 افزونه های وردپرس 1
WALKER دانلود افزونه ایجاد گالری حرفه ای در وردپرس Media Grid - Wordpress Responsive Portfolio v6.493 افزونه های وردپرس 11
WALKER دانلود افزونه وردپرس ایجاد لودینگ و درصد بارگذاری صفحات PageLoader: Loading Screen and Progress Bar for WordPress v4.1 افزونه های وردپرس 2
WALKER دانلود افزونه ایجاد گرید و شبکه در وردپرس Essential Grid WordPress Plugin v3.0.7 افزونه های وردپرس 7
WALKER دانلود افزونه ایجاد پاپ آپ وردپرس Green Popups - Popup Plugin for WordPress (formerly Layered Popup) v7.09 افزونه های وردپرس 21
WALKER دانلود افزونه‌ ایجاد اعلان برای ووکامرس WooCommerce Notification | Boost Your Sales v1.4.2 افزونه های وردپرس 7
WALKER دانلود ایجاد اپلیکیشن پیشرفته برای وردپرس Progressive Web Apps For WordPress v3.0 افزونه های وردپرس 3
WALKER دانلود افزونه ایجاد نقشه های سفارشی گوگل در وردپرس Responsive Styled Google Maps - WordPress Plugin v5.0 افزونه های وردپرس 3
WALKER آموزش ایجاد برگه فرزند یا Child Page در وردپرس و دلیل انجام آن آموزشهای وردپرس 0
WALKER دانلود WP AMP - Accelerated Mobile Pages for WordPress & WooCommerce v9.3.9 | افزونه ایجاد نسخه موبایل سایت وردپرس افزونه های وردپرس 25
WALKER دانلود افزونه ایجاد کتاب های سه بعدی در وردپرس Real3D FlipBook WordPress Plugin v3.17.1 افزونه های وردپرس 25
WALKER دانلود YITH WooCommerce PDF Invoice and Shipping List v2.0.17 افزونه ایجاد فاکتور به صورت PDF در ووکامرس افزونه های وردپرس 19
WALKER دانلود افزونه ایجاد گالری تصاویر حرفه ای در وردپرس Global Gallery - Wordpress Responsive Gallery v7.052 افزونه های وردپرس 18
WALKER دانلود افزونه ایجاد مجموعه محصولات مورد علاقه مشتریان برای ووکامرس WooCommerce Collections - WordPress Plugin v1.3.5 افزونه های وردپرس 4
WALKER دانلود Directories Pro plugin for WordPress v1.3.35 افزونه ایجاد دایرکتوری در وردپرس افزونه های وردپرس 70
WALKER دانلود افزونه ایجاد باکس لینک های مفید در وردپرس Useful Links Collections - WordPress Plugin v1.3.9 افزونه های وردپرس 2
WALKER دانلود افزونه ایجاد سیستم بازاریابی پیشرفته در ووکامرس AutomateWoo - Marketing Automation for WooCommerce v4.8.3 افزونه های وردپرس 16
WALKER دانلود افزونه وردپرس ایجاد کلون از سایت WP Staging Pro v3.1.0 افزونه های وردپرس 9
WALKER دانلود Master Popups - Popup Plugin for Lead Generation v3.5.3 افزونه ایجاد پاپ آپ افزونه های وردپرس 43

موضوعات مشابه

shape1
shape2
shape3
shape4
shape7
shape8
بالا