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

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

سلام دوستان این هم یک آموزش ساده وکاربردی (ساخت پیشوند با زمینه متحرک وآیکون)
ابتدا کد زیر را در extra.less کپی کنید

.badge {
background: url(https://i.imgur.com/AdlnXNi.gif);
color: #fff;
border: 1px solid red;
fontawesome: abcd;
}

سپس در کادر cssصفحه پیشوندها این کد رو وارد کنید

badge fa fa-graduation-cap

​

این روش کلی کار هست وبا کمی ویرایش با تغییر آیکون و تصویر زمینه میتونین به سلیقه خودتون پیشوندهای زیبایی بسازین
امیدوارم مفید به فایده باشه.

 

[Queen]

سلام خسته نباشید.
تصویر های متحرک رو از کجا می‌تونم پیدا کنم؟سایتی هست که این جلوه ها رو قرار داده باشه؟

 

[Dariush]

بله تصاویر متحرک یا گیف هست gif


دانلود جلوه های متحرک

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

 

[Queen]

آها خیلی ممنون

 

[Kohyar]

میشه اسکرین شات بذارید؟!

 

[Kohyar]

ارور میده لینک اول

 

[Dariush]

سلام ببخشید متوجه نشدم کدوم لینک رو می فرمایید ارور میده؟

 

[Dariush]

اون قسمت مدیر سایت میشه نتیجه این کد ولی الان چون تصویر ثابته جلوه خاصی نداره ما خودمون از خیلی از کدها استفاده نمیکنیم واسه همین اسکرین شات گذاشتن یه کم مشکله
به هر صورت تقدیم به شما

 

[Dariush]

دوستان سوال کرده بودن که فایل تصاویر متحرک رو کجا آپلود کنیم؟
توی هاستتون توی پوشه public_html آپلود کنید
الان این پوشه ای که من براتون در بالا گذاشتم اسمش هست sparkles
پس مسیر میشه اینpublic_html/sparkles
ولی شما توی مسیر دهی میتونید اینطور عمل کنید
فرض کنید آدرس این انجمن رو میخوایم بدیم به این نحو عمل میکنیم

https://xffa.ir/sparkles/fire_black.gif

 

[Telma_<]

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

سلام دوستان این هم یک آموزش ساده وکاربردی (ساخت پیشوند با زمینه متحرک وآیکون)
ابتدا کد زیر را در extra.less کپی کنید

.badge {
background: url(https://i.imgur.com/AdlnXNi.gif);
color: #fff;
border: 1px solid red;
fontawesome: abcd;
}

سپس در کادر cssصفحه پیشوندها این کد رو وارد کنید

badge fa fa-graduation-cap

​

این روش کلی کار هست وبا کمی ویرایش با تغییر آیکون و تصویر زمینه میتونین به سلیقه خودتون پیشوندهای زیبایی بسازین
امیدوارم مفید به فایده باشه.

سلام خسته نباشید
من کد رو وارد کردم جواب داد ولی انگار با سیستم دیده نمیشه.
بی رنگ‌هست ولی با گوشی متحرک هست و دیده میشه.