رفتن به مطلب

پست های پیشنهاد شده

سلام خسته نباشید

من یه لوگو دارم که میخوام پایین وبسایتم در قسمت فوتر به صورت هاور افکت قرارش بدم میشه کمک کنید یه توضیح مختصر بدید که چطور باید انجامش بدم؟ 

لوگو تو حالت عادی خاکستری هست و وقتی موس میره روش به صورت رنگی نمایش داده میشه

نمونه ش تو سایت همیار وردپرس هست

پیشاپیش ممنون از توجه تون

Untitled-1.thumb.jpg.3a1b21821806b08c926

لینک به ارسال

سلام

به هاور تصویر زمینه دادن و کار خاصی نکردن !

.ronakweb{
	width: 150px;
	height: 200px;
	background-image: url(images/rkianoosh.png) no-repeat center;
}
.ronakweb:hover{
	width: 150px;
	height: 200px;
	background-image: url(images/rkianoosh-hover.png) no-repeat center;
}

 

لینک به ارسال

با استفاده از 2تا عکس میشه این کارو کرد .

ولی روش حرفه ای تر این هست که از کد استفاده کنید که بازم هم روش های بسیار مختلفی داره . من روشی غیر از روش سایت همیار وردپرس رو میگم :

میتونید همون لوگوی اصلی رو به صورت عکس بزارید و استایل زیر رو براش تعریف کنید :

.logo{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
opacity:0.2;
}

.logo:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
opacity:1;
}

 

البته نمیدونم که این کد روی همه مرورگر ها کار میکنه یا نه . تست کنید خودتون میفهمید .

ویرایش شده توسط PRGAME
لینک به ارسال
در 17 ساعت قبل، PRGAME گفته است :

با استفاده از 2تا عکس میشه این کارو کرد .

ولی روش حرفه ای تر این هست که از کد استفاده کنید که بازم هم روش های بسیار مختلفی داره . من روشی غیر از روش سایت همیار وردپرس رو میگم :

میتونید همون لوگوی اصلی رو به صورت عکس بزارید و استایل زیر رو براش تعریف کنید :


.logo{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
opacity:0.2;
}

.logo:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
opacity:1;
}

 

البته نمیدونم که این کد روی همه مرورگر ها کار میکنه یا نه . تست کنید خودتون میفهمید .

ممنون از اینکه زود جواب دادید

میشه توضیح بدید که چطور باید براش استایل تعرف کنم؟ 

لطفا مرحله به مرحله بگید تصویر اصلی روی کتابخانه است دقیقا باید چه کارهایی انجام بدم؟

لینک به ارسال

چشم . 

ببینید کلا برای اینکه عکسی رو بزارید توی یک صفحه باید از تگ img استفاده کنید که برای ادرس شما بصورت زیر هست :

<img src="http://localhost/wordpress/wp-content/uploads/2016/03/logo-sam-1.jpg" alt="logo" width="tool" height="ertefa">

که در کد بالا بجای کلمه ی tool باید طول عکستون رو بزارید و بجای ertefa هم باید ارتفاع عکستون رو بزارید .

حالا برای اینکه به عکس استایل بدیم به صورت زیر میشه (این کد رو کپی کنید جایی که میخاید عکس نمایش داده بشه ):

<style>
.logo{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
opacity:0.2;
}

.logo:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
opacity:1;
}
</style>
<img class="logo" src="http://localhost/wordpress/wp-content/uploads/2016/03/logo-sam-1.jpg" alt="logo" width="tool" height="ertefa">

 

اگر فایل style.css دارید ، کد های موجود در تگ style رو در اخرین قسمت فایل style.css کپی کنید و اگر هم همچین فایلی ندارید در قالبتون ( که فکر نمیکنم اینطور باشه !) فقط کافیه کد بالا رو در جایی که میخاید لوگو به نمایش در بیاد کپی کنید .

برای استایل دهی از class استفاده میکنیم . اگر کد رو نگاه کنید خوتون متوجه میشید .

مشکلی بود بنده در خدمتم .

ویرایش شده توسط PRGAME
لینک به ارسال

ممنون 

خیل لطف کردید انجام دادم و نتیجه داد در کل با توضیحی که دادید متوجه شدم که چی شد

ما یه استایل به اسم logo توفایل style.css ایجاد کردیم و از این به بعد هر وقت عکسی را با کلاس لوگو توی صفحه قرار بدیم اون عکس از استایل که برای لوگو از قبل تعریف کردیم استفاده میکنه بازم ممنون 

لینک به ارسال

فقط یه سوال این استایل رو میشه جوری تنظیم کرد که وقتی لوگو هاور میشه لوگو یه دفعه رنگی نشه و وقتی موس از روی لوگو میره کنار یه دفعه خاکستری نشه منظورم اینه که یه کم دیلی داشته باشه

ویرایش شده توسط mehdi.linus
لینک به ارسال

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


.logo{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
opacity:0.2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

.logo:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
opacity:1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

میتونید با تغییر 0.3 سرعت انجام شدن افکت رو تنظیم کنید .

ویرایش شده توسط PRGAME
لینک به ارسال

واقعا ممنون از راهنمایی تون این مشکل هم حل شد

فقط یه سوال دیگه دارم من این کد رو بوسیله یه ویجت html که داخل ابزارک ها بود داخل فوتر وسط، قرار دادم مشکلم اینه که هر کار میکنم و از هر تگی استفاده میکنم این لوگو دقیق وسط فوتر قرار نمیگیره دقیقا چی باید بزنم 

ممنون که وقت میگذارید

لینک به ارسال

درود ، 

خب شاید به مکان عکس درون ابزارک ربطی ندارد که تأثیری ندارد ، شاید مکان خود ابزارک درون ناحیه ابزارک های پانوشت صحیح نیست!

لینک به ارسال

سعی کنید سایت رو انلاین کنید تا بتونم خوب بررسی کنم. الان اینطوری چیزی نمیتونم بگم

ویرایش شده توسط PRGAME
لینک به ارسال

با استفاده از گزینه Inspect در راست کلیک مرورگر گوگل کروم میتونید کد های ایجاد شده رو مشاهده کنید . از کد های اون قسمت یه عکس بگیرید و بفرستید تا بررسی کنم .

لینک به ارسال

من اینطوری خیلی خوب نمیتونم بررسی کنم . ولی میتونید توی همون استایل logo با استفاده از دستور زیر فاصله از راست رو زیاد تر کنید (مقدارش رو خودتون عوض کنید تا فیکس بشه ) :

margin-right: 40px;

اینو به همون استایل لوگو اضافه کنید .

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...