در این آموزش به کمک CSS به شما یاد دادم که چجوری باکس هایی مشابه تصویر زیر ایجاد کنید .
نحوه کار باکس حرفه ای
با قراردادن موس روی هر قسمت نمای پس زمینه آن تغییر میکند . این کار باعث میشود با جلوه ویژه ای به محصولات یا نوشته های بدهد.
کد CSS مربوط به پس زمینه
:root{
--color: #ffffff;
}
selector{
position: relative;
z-index: 9;
}
selector .elementor-inner-column{
overflow: hidden;
}
selector:before,
selector:after
{
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
background: var(--color);
transition: 0.5s;
z-index: -1;
}transform: rotate(20deg);
box-shadow: 0 2px 20px rgba(0,0,0,.2);
}
selector:hover:after{
transform: rotate(10deg);
box-shadow: 0 2px 20px rgba(0,0,0,.2);
}
نکته مهم : با تغییر کد رنگ در کد بالا در قسمت root میتوانید به رنگ مورد نظرتان تغییر دهید .
کد CSS مربوط به نوشته و یا همان تیتر
.y-content {
position: absolute;
bottom: -12vh;
transition: all 0.4s ease-in-out;
}
selector:hover .y-content{
bottom: 0vh;
}
21 پاسخ
سلام خسته نباشید ممنون بابت آموزش های خوبتون من تو المان های ورد پرسم گزینه بخش داخلی ندارم از چ المانی میتونم استفاده کنم؟
سلام درود بر شما بخش داخلی از قبل وجود داشته برای سایت های جدید فعال نمی شود
سلام.
من یه کانتینر 4 ستونه برای طراحی چیزی شبیه به همین باکس ها، با این تفاوت که آیکون، عنوان و یه پاراگراف متن داره، درست کردم ولی نمیدونم چرا توی خود صفحه نمایش دسکتپ، لپ تاپ یا حتی تبلت به خاطر کوچیک و بزرگ شدن عرض و به هم ریختن متن پاراگراف، این باکس ها به هم ریزین و همشون در یه راستا نیستن و انتهاشون بزرگ و کوچیک میشن. چیکار باید بکنم که اندازه این باکس ها بدون کم و زیاد کردن مارجین، باکس ها همه یه اندازه باشن؟؟؟
سلام وقت بخیر
برای این کار روی کانتینر گزینه Stretch Section یا تراز ارتفاعها رو فعال کنید یا از تنظیمات ستونها گزینه Equal Height استفاده کنید، همچنین میتونید برای باکسها حداقل ارتفاع بذارید تا همه یکسان بمونن و بدون دستکاری مارجین، ردیف مرتب و منظم نمایش داده بشه.
سلام خسته نباشید کد بک گراند کار کرد ولی کد تیتر را که زدم متن مخفی نشد و فقط اومد بیرون کادر با اینکه کلاس را هم برای تصویرم تعریف کردم
سلام وقت بخیر
کدی که برای پس زمینه گذاشتید رو وقتی میزارم یه صفحه سفید میاد روی کار و تصویر پشت اونه
باید چکار کنم؟
سلام وقتتون بخیر باشه ببخشید کد سی اس اس که گذاشتید درست کار نمیکنه و متن رو مخفی نمیکنه میشه بی زحمت دوباره کد صحیح سی اس اس رو بفرستید
سلام وقت بخیر
بررسی شد کد ها کار کردند
کار نمی کنه کد سی اس اس که میزارم متن میاد بیرون از کادر و قابل دیدن است چجوری می گید کار میکنه؟
سلام همه اینکارها را انجام دادم ولی فقط بک گراند نوشته می چرخد و متن مخفی نمی شود
سلام لطفا کد مخفی شدن نوشته را لطف بفرمایید چون کد CSS مربوط به نوشته و یا همان تیتر برای من کار نکرد
سلام درود بر شما
شما میتوانید از کد زیر استفاده نمایید
.hidden {
display: none;
}
چگونه این کار را در بخش نوشته ها پیاده کنم؟
یعنی نوشته ها همچنین ظاهری بگیرند
سلام خدمت شما با استفاده از ویجت لوپ میتوانید ایجاد نمایید
سلام.بدرستی اجرا شد.دستتون درد نکنه.یک همچین کاری رو اگر میخواستیم قبلا انجام بدیم باید یک پلاگین ویرایشی نصب می کردیم.ضمنا تست کردم نیاز نیست برای اجراش ،همیشه کانتینر فلکس باکس غیر فعال باشه بعد از درست کردن این باکس باز می تونیم کانتینر فلکس باکس رو فعال کنیم.
من چرااالمنتورم ویجت قسمت داخلی رو نداره
سلام در نسخه جدید کانتینر جایگزین شده برای فعال سازی باید از پیشخوان > المنتور > تنظیمات وارد تب ویژگی شوید و کانتینر فلکس باکس را غیر فعال نمایید .
با سلام
ممنون از اموزش خوبتون
جناب بنده باکس محصولی در بخش حلقه ele custom ساختم
ولی وقتی میخوام در بخشی از سایت نمایش داده بشه ( از بخش سفارسی ویجت پست ها استفاده میکنم) از کادر بیرون زده میشه و عرضی که برای بخش داخلی ام تعیین کردم عملا بی توجه به اون عرض کاملا از کادر خارج و تمام عرض میشه
فرموده بودید از کانتینر استفاده کنم ولی این مشکل همچنان وجود داشت
درود بر شما
ممنونیم ، ممکن از باگ از سمت ویجت باشد در حال طبیعی این مشکل را ندارد اگر که از لوپ های خوده المنتور استفاده کنید
سلام استاد باکس دانلود بخوایم درست کنیم کلیک میکنن یکی اضافه میشه المنتور یا افزونهاش چنین امکانی میدن?
سلام خدمت شما
شما میتوانید با فیلد های سفارشی باکس دانلود درست کنید