22 پست در این موضوع قرار دارد

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

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

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

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

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

Untitled-1.thumb.jpg.3a1b21821806b08c926

0

به اشتراک گذاری این پست


لینک به پست

سلام

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

.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

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

با استفاده از 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
2

به اشتراک گذاری این پست


لینک به پست
در 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;
}

 

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

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

ادرس عکس رو بدید تا کامل کدش رو براتون بنویسم .

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
3

به اشتراک گذاری این پست


لینک به پست

ممنون 

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

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

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

ویرایش شده در توسط mehdi.linus
1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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


.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
2

به اشتراک گذاری این پست


لینک به پست

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

درود ، 

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

1

به اشتراک گذاری این پست


لینک به پست

سلام

فوتر مرکز صفحه است ولی لوگو تو مرکز فوتر نیست

Untitled-1.png

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

ویرایش شده در توسط PRGAME
1

به اشتراک گذاری این پست


لینک به پست

سلام ممنون 

هنوز روی لوکال هست  آپلود نکردم 

0

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

دارم بررسی میکنم

1

به اشتراک گذاری این پست


لینک به پست

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

margin-right: 40px;

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

1

به اشتراک گذاری این پست


لینک به پست

کد رو اشتباها اول به قسمت هاور اضافه کردم موس که میرفت روش 40px میرفت به سمت راست بعد که کد بردم بردم بالا درست شد ممنون

0

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری