topmihan

کد css این تبلیغ ؟!

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

سلام دوستان

چندی پیش قالبی در انجمن هدیه شد

قالبیست زیبا ولی متاسفانه دیگه همش کد هستش و ماژول توش به ندرت یافت میشه:21:

اتحادیه سازندگان کلیشه و لیتوگراف، مهر و پلاک و چاپ اسکرین

در موقعیت چپ تبلیغات متنی وجود داره که با هاور شدن کادرش تغییر رنگ داده و به لرزش در میاد

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

اگه میشه کد مربوط به بخش css و html اونو بدین

ممنون

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

لرزشی که در حالت شناور یا hover اون باکسها دیده میشه توسط کدهای animation زبان css3 طراحی شده که کد هاش به صورت زیر هست

کد تعریف animation :

@-moz-keyframes buzz-out {
10% {
   transform: translateX(3px) rotate(2deg);
}
20% {
   transform: translateX(-3px) rotate(-2deg);
}
30% {
   transform: translateX(3px) rotate(2deg);
}
40% {
   transform: translateX(-3px) rotate(-2deg);
}
50% {
   transform: translateX(2px) rotate(1deg);
}
60% {
   transform: translateX(-2px) rotate(-1deg);
}
70% {
   transform: translateX(2px) rotate(1deg);
}
80% {
   transform: translateX(-2px) rotate(-1deg);
}
90% {
   transform: translateX(1px) rotate(0deg);
}
100% {
   transform: translateX(-1px) rotate(0deg);
}

}

کد فراخوانی انیمیشن در سلکتور .moduletable.text__ads li a:hover :

.moduletable.text__ads li a:hover {
   animation-duration: 0.75s;
   animation-iteration-count: 1;
   animation-name: buzz-out;
   animation-timing-function: linear;
}

حالت های دیگه انیمیشن های css3 رو هم میتونید در این لینک ببینید : Hover.css - A collection of CSS3 powered hover effects

اگر میخواهید درباره ی خاصیت Animation در css3 هم بیشتر سر در بیارین میتونید از این لینک استفاده کنید :CSS3 Animations

کد ها گویاست و به نظرم لازم به توضیح بیشتر نیست

ولی اگر توضیح بیشتر خواستین بگید تا براتون توضیح بدیم

موفق باشید

Share this post


Link to post
Share on other sites

سلااااااااااااااام

این تاپیک رو دیدم خیلی خوشحال شدم

اخه حدودا یک ماه پیش همین سوال یرای من پیش اومد و من سوال رو تو انجمن پرسیدم و :image177: ........................ ( مهم نیست ولش کنید )

همین بس که از اسپم دادن برای جواب خسته شده بودم

Share this post


Link to post
Share on other sites
سلااااااااااااااام

این تاپیک رو دیدم خیلی خوشحال شدم

اخه حدودا یک ماه پیش همین سوال یرای من پیش اومد و من سوال رو تو انجمن پرسیدم و :image177: ........................ ( مهم نیست ولش کنید )

همین بس که از اسپم دادن برای جواب خسته شده بودم

متاسفانه این چیزا پیش میاد و هیچ انجمنی رو نمیتونید پیداکنید که از این مشکلات نداشته باشه

خوشحالم که با مطرح کردم این مطالب شما هم به پاسختون رسیدید :did2:

Share this post


Link to post
Share on other sites

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

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

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

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


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

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

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


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