استفاده از CSS های جذاب برای زیبایی دادن به المنتور

از زمانی که توسعه وب به مرحله پیشرفته‌تری رسیده، استفاده از CSS ها به عنوان یک ابزار اساسی در طراحی ظاهری اهمیت بیشتری پیدا کرده است.

css چیست؟

CSS (Cascading Style Sheets) یک زبان برنامه‌نویسی است که با استفاده از CSS می‌توانیم طرح بندی، رنگ، فونت و سایر ویژگی‌های ظاهری صفحات وب را تعیین کنیم.

ویژگی استفاده از css های جذاب در افزونه المنتور

یکی از ویژگی‌های بسیار مهم و قدرتمند استفاده از CSS در افزونه المنتور، قابلیت سفارشی‌سازی بی‌نهایت ظاهری المان‌ها است. با استفاده از CSS، کاربران می‌توانند طرح بندی، رنگ، سبک فونت، حاشیه‌ها و دیگر ویژگی‌های ظاهری المان‌ها را به دلخواه خود تغییر دهند.

معرفی 10 کد css جذاب برای اضافه کردن به افزونه المنتور

در دنیای طراحی وب، زیبایی و کارایی دست به دست هم می‌دهند. افزونه‌ی Elementor به عنوان یک ابزار قدرتمند برای ایجاد وب‌سایت‌های بصری‌فوق‌العاده در وردپرس به چشم می‌آید. اگرچه Elementor گزینه‌های متعددی برای سفارشی‌سازی ارائه می‌دهد، بهره‌برداری از قدرت CSS می‌تواند طراحی‌های شما را به سطحی بالاتر ببرد. در این مقاله، ۱۰ کد جذاب CSS را ارائه می‌دهیم که به طور سهولت با افزونه‌ی Elementor ترکیب می‌شوند تا طراحی وب شما را به سطح جدیدی ارتقا دهند.

۱. پس‌زمینه با تغییرات رنگی:

.selector-class {
    background: linear-gradient(to right, #ff9a9e, #fad0c4);
}

استفاده: این کد پس‌زمینه‌ای با تغییرات رنگی روان را به هر بخش یا ویجت Elementor اعمال می‌کند و عمق و بعد به طراحی شما اضافه می‌کند.

۲. افکت سایه‌ی جعبه در حالت هاور:

.selector-class {
    transition: box-shadow 0.3s ease-in-out;
}

.selector-class:hover {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

ستفاده: با اعمال این کد، افکت سایه‌ی نرمی ایجاد می‌شود که ظاهر می‌شود هنگامی که کاربران روی یک عنصر خاص هاور می‌کنند و تجربه تعاملی و جذابی را ایجاد می‌کند.

۳. تایپوگرافی شیک:

.selector-class {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #333;
    letter-spacing: 1px;
    text-transform: uppercase;
}

استفاده: با استفاده از این کد، تایپوگرافی خود را ارتقا دهید. این کد به شما امکان تنظیم فونت، اندازه، رنگ، فاصله بین حروف و تبدیل متن به حروف بزرگ را می‌دهد.

۴. افکت تاریک‌شدگی بر روی تصاویر

.selector-class {
    transition: opacity 0.3s ease-in-out;
}

.selector-class:hover {
    opacity: 0.8;
}

استفاده: با استفاده از این کد، افکت ظاهری تاریک‌شدگی بر روی تصاویر ایجاد می‌شود که زمانی که کاربران با محتوای شما تعامل دارند، انتقال آرام به وجود می‌آورد.

۵. استایل سفارشی برای لیست‌ها:

.selector-class ul {
    list-style: none;
    padding: 0;
}

.selector-class li {
    position: relative;
    padding-left: 20px;
}

.selector-class li:before {
    content: "\2022";
    position: absolute;
    left: 0;
}

استفاده: با استفاده از این کد، لیست‌های ساده HTML را با نمادهای سفارشی جایگزین نمایید تا به لیست‌های جذابی تبدیل شوند.

۶. عناصر شناور در هنگام اسکرول:

.selector-class {
    position: relative;
}

.selector-class::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    background-color: #fff;
    transform: translateY(-50px);
    z-index: -1;
}

استفاده: با اعمال این کد، اثر شناوری به عناصر در هنگامی که کاربران اسکرول می‌کنند اضافه می‌شود و به طراحی وب شما دینامیسمی می‌بخشد.

۷. افکت جذاب برای دکمه‌ها:

.selector-class {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s ease-in-out;
}

.selector-class:hover {
    transform: scale(1.1);
}

استفاده: با استفاده از این کد، دکمه‌های ساده به عناصر تعاملی چشم‌گیری تبدیل می‌شوند و افکت کوچکی به صورت مقیاسی در هنگام هاور اضافه می‌کنند.

۸. بخش تمام عرض با تصویر پس‌زمینه:

.selector-class {
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
    padding: 100px 0;
}

استفاده: با استفاده از این کد، بخش‌های تمام عرض با تصاویر پس‌زمینه ایجاد کنید که به طور پاسخگویی تطابق پیدا کنند و در اندازه‌های مختلف صفحه جذابیت ظاهری خود را حفظ کنند.

۹. طراحی کارت به سبک نئومورفیک:

.selector-class {
    background-color: #f0f0f0;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1),
                -5px -5px 10px rgba(255, 255, 255, 0.5);
}

استفاده: با استفاده از این کد، طراحی مدرن و لمس‌پذیر به عناصر کارت وب‌سایت‌تان ببخشید و به طراحی‌های نئومورفیک رونق دهید.

۱۰. افکت زیرخط لینک‌ها با حرکت:

.selector-class {
    position: relative;
    text-decoration: none;
    color: #333;
}

.selector-class::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #3498db;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
}

.selector-class:hover::before {
    transform: scaleX(1);
}

استفاده: با اعمال این کد، لینک‌های خود را با افکت زیرخطی کشویی در هنگام هاور تغییر دهید تا تجربه کاربری جذاب و بصری فهمی را ارتقا دهید.

استفاده از این ۱۰ کد CSS در وب‌سایت‌هایی که با Elementor طراحی می‌شوند، بدون شک جذابیت بصری و درگیری کاربر را افزایش می‌دهد. هر کدی هدف خاصی را پیگیری می‌کند، از ایجاد افکت‌های هاور جذاب گرفته تا ارتقا تایپوگرافی یا دنبال کردن جدیدترین ترندهای طراحی. با ترکیب قدرت Elementor و ظرافت CSS، مسیر طراحی وب شما بدون شک به اوج جدیدی خواهد رسید.

راستی اگه دوست داری که طراحی وب سایت بصورت حرفه ای یاد بگیری، دکمه پایین رو بزن:‌