رفتن به مطلب

بازی با css


AHF-victory

پست های پیشنهاد شده

سلام دوستان من چند تا سی اس اس پیدا کردم می خوام بزارم روی سایتم اما مشکل داره سایت وردپرس هست وقتی داخل style ya rtl میزارم اولاکه وردپرس ایراد میگیره(قرمز) و باید تیک بزنم که در هر صورت ویرایش کنه

بعد از ویرایش هم هیچی نمیشه

سی اس اس میزارم کنار سی اس اس های دیگه و داخل منو نام کلاس را عوض می کنم

 

یا مثلا این یکی هم همین طور دکمه درست کردم وقتی سی اس اس هارو میزارم و کلاس هم میزارم هیچی نمیشه یعنی کلا لود نمیکنه

 

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

 

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

  • 2 هفته پیش...

@AmiRoo @AHF-victory

درود.

دوستان دقت کنید این کدها SCSS و SASS هستند! از این کدها نمی تونید داخل فایل CSS استفاده کنید. چون نوع نگارش و استاندارد این زبان ها، از CSS پیشرفته تر هست و استفاده اینگونه دستورات در CSS امکان پذیر نیست. در SASS نماد جداکردن دستورات که ; هست وجود نداره، اما در CSS حتما باید دستورات یک کلس رو با این نماد از هم جدا کنید در غیراینصورت کار نخواهد کرد. یا اینکه شما در SCSS و SASS می تونید مثل PHP یک تابع تعریف کنید و توسط میانبر از اون در داخل دستورات استفاده کنید. مثل $primary-color ! پس این کدها رو به همین صورت نمی تونید توی CSS اجراشون کنید.

شما خیلی راحت می تونید این دستورات رو به CSS عادی تبدیل کنید ولی اینکه کار کنه یا نه رو اطلاع ندارم.

برای مثال کد دوم که در تاپیک اول هست رو به این صورت می تونید تبدیل و استفاده کنید :

کد HTML:

<a href="#" class="cta">
  <span>Click me</span>
  <svg width="13px" height="10px" viewBox="0 0 13 10">
    <path d="M1,5 L11,5"></path>
    <polyline points="8 1 12 5 8 9"></polyline>
  </svg>
</a>

و کد تبدیل شده SASS به CSS :

html, body {
  height: 100%;
  }
body {
  display: grid;
  font-family: Avenir, sans-serif;
  color: #111;
 } 
a {
  text-decoration: none;
  color: inherit;
}
.cta {
  position: relative;
  margin: auto;
  padding: 19px 22px;
  transition: all .2s ease;
  }
  .cta:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 28px;
    background: rgba(#FFAB9D,.5);
    width: 56px;
    height: 56px;
    transition: all .3s ease;
	}
  .cta span {
    position: relative;
    font-size: 16px;
    line-height: 18px;
    font-weight: 900;
    letter-spacing: .25em;
    text-transform: uppercase;
    vertical-align: middle;
	}
  .cta svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #111;
    stroke-width: 2;
    transform: translateX(-5px);
    transition: all .3s ease;
	}

    .cta:hover .cta:before {
      width: 100%;
      background: rgba(#FFAB9D,1);
	  }
    .cta:hover svg {
      transform: translateX(0);
	  }
  .cta:active {
    transform: scale(.96);
	}

البته شما در یک قالب آماده نباید از دستورات body و html یا حتی a کد بالا استفاده کنید. من کلا کدش رو تبدیل کردم براتون.

پیشنهاد من اینه که از انیمیشن های مخصوص CSS استفاده کنید که تعدادشون هم کم نیست.

 

و اگر قصد داشتید از SCSS توی قالب وردپرسی استفاده کنید، می تونید از این افزونه کمک بگیرید تا این فرمت رو به قالب معرفی کنید:

  • لینک ها تنها برای اعضای سایت قابل نمایش است.

موفق باشید.

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

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...