آموزش کدهای وردپرس در طراحی سایت
آموزش کدهای وردپرس در طراحی سایت با نوشته ها شروع میشوند.این بخش بسیار مهم می باشد. شما می توانید با استفاده از ...
پیش پردازنده های sass و less همچنین چندین افکت برای css در قسمت زیر توضیح دادهشدهاست. برای درک هر کدام از موارد گفتهشده ، پیشنهاد می شود تا پایان این مقاله همراه ما باشید.
یک کتابخانه پیش پردازنده برای css است تا از تکرار برخی کدها جلوگیری کند.اگر برای نوشتن کدهای css به زبان جاوا احتیاج داشته باشید اما استفاده از این زبان را بلد نباشید می توانید با استفاده از less کدهای جاوا را بنویسید بدون آنکه احتیاج به یادگیری این زبان داشته باشید. در css نمی توان توابع و یا متغیرهایی برای آن تعریف کرد اما از طریق قابلیت هایی که less به آن اضافه می کند می توان متغییر و توابع را اضافه کنیم. حتی با افزودن قابلیت های دیگری می توان نوشتار های تو در تویی را اضافه کنیم.
در قسمت زیر یک مثال برای تعریف متغییر که css قادر به ساخت آن نبود ، نوشته شده است برای تعریف متغیرها از @ استفاده می شود و برای مقداردهی علامت : به کار برده می شود.
@width: 17px;
@height: @width + 8px;
#header {
width: @width;
height: @height;
}
خروجی این قسمت به صورت زیر است.
#header {
width: 17px;
height: 25px;
}
ابتدا باید less را نصب کنید برای این کار فایل آن را از سایت lesscss.org دانلود کنید و مراحل نصب آن را طی کنید سپس به دو روش می توان از آن استفاده نمود.
در محیط node.js دستور زیر وارد نمایید.
npm install -g less
> lessc styles.less styles.css
روش دیگری برای انجام این کار وجود دارد می توانید در قسمت head کد زیر را وارد نمایید.
<link rel="stylesheet/less" type="text/css" href="styles.less"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
زیرا less با زبان جاوا اسکریپت نوشته شده است و نود جی اس محیطی برای اجرا کدهای جاوا می باشد.
از طریق mixin ها سرعت کدنویسی شما افزایش می یابد و بایدکدهای مربوط را کامپایل کرده و به کدهای css تبدیل کنید.
Sass هم مانند less یک پیش پردازنده است در sass می توان از فایل های بزرگ به سادگی نگهداری کرد و کدهای قدرتمند و با ظرافت بسیاری را خلق کنید. همچنین برای تعریف متغییرها و نوشتارتو در تو استایل ها از آن استفاده کرد.
سینتکس های sass دو نوع هستند ولی هردو یک خروجی دارند.
نوع اول با فرمت.sass و نوع دوم با فرمت .scss است هر دوی آنها با css سازگار هستند ولی نوع اول سریع تر نوشته می شود.
در sass برای تعریف یک متغیر باید ابتدا از$ استفاده کرد و برای مقداردهی از : استفاده کنید.
$red: # d52816; (یک متغیر تعریف شد)
body {
background-color: $background;
}
h1 {
color: $red;
}
p {
color: $blue;
}
بهترین پیش پردازنده موجود sass می باشد که قابلیت های وسیعی دارد. مرورگرها قادر به درک فایل های sass نیستند و نیاز به کامپایل کردن دارند که به css تبدیل شوند. برای انجام این کار می توان از ابزارهای موجود مانند sass meister استفاده کرد. روش دیگر برای انجام این کار استفاده از محیط cmd است که برای اجرای sass باید کد زیر در cmd نوشته شود.
node-sass input.scss output.css
در قسمت بالا سه نوع hover نوشته شده است که همه ی آن ها مربوط به افکت های hover برای css است.
یک کتابخانه برای اعمال افکت بر روی تصاویر است که 40 افکت برای آن موجود است و شما با دانلود کردن این افکت ها می توانید در scc از آن ها استفاده کنید.
این افکت از scss و less پشتیبانی می کنند.
برای دریافت افکت های موجود imagehover می توانید به سایت imagehover.css مراجعه کنید و از افکت ها استفاده نمایید.
بدون وابستگی، می تواند در هر پروژه ای استفاده شود.
ساخته شده با Scss CSS (فایل شامل)، تغییر آسان با متغیرها.
کد ماژولار، بدون نیاز به گنجاندن کل فایل.
بیش از 30 افکت در یک بسته
با Bootstrap به خوبی کار کنید (بوت استرپ ضروری نیست)
برای دانلود افکت های ذکر شده می توانید به وب سایت gudh.github.io مراجعه کرده و افکت های دلخواه تان را دانلود کنید.
عملکرد دکمه ها به این گونه می باشد که با کلیک ، کاربر به صفحات دیگر هدایت میشود پس باید در کدنویسی برای آن ها مسیر درستی نوشته شدهباشد. برای آنها می توانید ویژگی های مختلفی تعریف کنید. مثلا می توانید برای دکمه ها رنگ سفارشی یا گرد بودن یا مستطیل بودن را مشخص کنید حتی می توانید افکت دلخواهی را بربا استفاده ازcss روی button ها اعمال کنید.
دو نمونه افکت
برای استفاده کردن از افکت های موجود می توانید به سایت getcssscan.com بروید و تنها کافی ست تا بر روی افکت دلخواه تان کلیک کنید تا کد مربوط به آن کپی شود.
cssکدهای
.button{
Border: none ;
background-color: #c77320 ;
color: #000 ;
padding: 25px ;
text-decoration: none ;
display: inline-block ;
cursor: pointer ;
border-radius: 8px ;
}
.button:hover {
background-color: #C8C10D ;
}
htmlکدهای
<h3>با کلیک به سایت وب یار ارجاع داده می شود</h3>
<a href="https://www.webyar.net/feed/" class="button">کلیک کنید</a>
در قطعه کد نوشته شده در قسمت اول کلاس button تعریف شده و ویژگی های button مانند رنگ زمینه شیء ، رنگ متن ، padding و… داده شدهاست. در بخش دوم یک ویژگی برای زمانی که button در حال انتخاب است تعریف شدهاست. و در انتها در بخش سوم به button حرکتی اعمال شدهاست که با کلیک بر روی آن به سایت وب یار ارجاع دادهمیشود.
در این مقاله به less ، sass ، Qhaver ، ihaver ، image hover ، css button به صورت مختصر پرداخت شد. تمامی مطالب ذکرهشده به منظور افزایش زیبایی در طراحی با استفاده از css میباشد. از اینکه تا پایان این مقاله هم همراه تیم وب یار بودید. از شما متشکریمجهت سفارش طراحی سایت و یا سئو سایت خود میتوانید. با مشاورین ما تماس بگیرید.