sass و less و مجموعه افکت برای css
sass css چیست؟
پیش پردازنده های sass و less همچنین چندین افکت برای css در قسمت زیر توضیح داده‌شده‌است. برای درک هر کدام از موارد گفته‌شده ، پیشنهاد می شود تا پایان این مقاله همراه ما باشید.
Lessچیست؟
یک کتابخانه پیش پردازنده برای css است تا از تکرار برخی کدها جلوگیری کند.اگر برای نوشتن کدهای css به زبان جاوا احتیاج داشته باشید اما استفاده از این زبان را بلد نباشید می توانید با استفاده از less کدهای جاوا را بنویسید بدون آنکه احتیاج به یادگیری این زبان داشته باشید. در css نمی توان توابع و یا متغیرهایی برای آن تعریف کرد اما از طریق قابلیت هایی که less به آن اضافه می کند می توان متغییر و توابع را اضافه کنیم. حتی با افزودن قابلیت های دیگری می توان نوشتار های تو در تویی را اضافه کنیم.
در قسمت زیر یک مثال برای تعریف متغییر که css قادر به ساخت آن نبود ، نوشته شده است برای تعریف متغیرها از @ استفاده می شود و برای مقداردهی علامت : به کار برده می شود.
@width: 17px;
@height: @width + 8px;
#header {
width: @width;
height: @height;
}
خروجی این قسمت به صورت زیر است.
#header {
width: 17px;
height: 25px;
}
چگونه باید از less استفاده کنیم؟
ابتدا باید 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 هم مانند less یک پیش پردازنده است در sass می توان از فایل های بزرگ به سادگی نگهداری کرد و کدهای قدرتمند و با ظرافت بسیاری را خلق کنید. همچنین برای تعریف متغییرها و نوشتارتو در تو استایل ها از آن استفاده کرد.
سینتکس های sass دو نوع هستند ولی هردو یک خروجی دارند.
- SASS
- SCSS
نوع اول با فرمت.sass و نوع دوم با فرمت .scss است هر دوی آنها با css سازگار هستند ولی نوع اول سریع تر نوشته می شود.
در sass برای تعریف یک متغیر باید ابتدا از$ استفاده کرد و برای مقداردهی از : استفاده کنید.
$red: # d52816; (یک متغیر تعریف شد)
در قسمت زیر یک نمونه sass نوشته شده است.
body {
background-color: $background;
}
h1 {
color: $red;
}
p {
color: $blue;
}
بهترین پیش پردازنده موجود sass می باشد که قابلیت های وسیعی دارد. مرورگرها قادر به درک فایل های sass نیستند و نیاز به کامپایل کردن دارند که به css تبدیل شوند. برای انجام این کار می توان از ابزارهای موجود مانند sass meister استفاده کرد. روش دیگر برای انجام این کار استفاده از محیط cmd است که برای اجرای sass باید کد زیر در cmd نوشته شود.
node-sass input.scss output.css
- image hover
- Qhover
- ihover
در قسمت بالا سه نوع hover نوشته شده است که همه ی آن ها مربوط به افکت های hover برای css است.
Image hover
یک کتابخانه برای اعمال افکت بر روی تصاویر است که 40 افکت برای آن موجود است و شما با دانلود کردن این افکت ها می توانید در scc از آن ها استفاده کنید.
این افکت از scss و less پشتیبانی می کنند.
برای دریافت افکت های موجود imagehover می توانید به سایت imagehover.css مراجعه کنید و از افکت ها استفاده نمایید.
ویژگی های ihover
بدون وابستگی، می تواند در هر پروژه ای استفاده شود.
ساخته شده با Scss CSS (فایل شامل)، تغییر آسان با متغیرها.
کد ماژولار، بدون نیاز به گنجاندن کل فایل.
بیش از 30 افکت در یک بسته
با Bootstrap به خوبی کار کنید (بوت استرپ ضروری نیست)
برای دانلود افکت های ذکر شده می توانید به وب سایت gudh.github.io مراجعه کرده و افکت های دلخواه تان را دانلود کنید.
Css buttons
عملکرد دکمه ها به این گونه می باشد که با کلیک ، کاربر به صفحات دیگر هدایت میشود پس باید در کدنویسی برای آن ها مسیر درستی نوشته شده‌باشد. برای آنها می توانید ویژگی های مختلفی تعریف کنید. مثلا می توانید برای دکمه ها رنگ سفارشی یا گرد بودن یا مستطیل بودن را مشخص کنید حتی می توانید افکت دلخواهی را بربا استفاده از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 می‌باشد. از اینکه تا پایان این مقاله هم همراه تیم وب یار بودید. از شما متشکریم‌جهت سفارش طراحی سایت و یا سئو سایت خود میتوانید. با مشاورین ما تماس بگیرید.
ساخت سایت رایگان خارجی یکی از دغدغه‌های مهم افراد برای پیشبرد اهداف کاری است. در واقع ایجاد سایت توسط شرکت‌های معتبر، هزینه‌های زیادی در بر دارد، به همین دلیل است که افراد تلاش می‌کنند از طریق یادگیری نحوه ایجاد سایت به صورت رایگان و یا کمک گرقفتن از شرکت‌هایی که اقدام به ساخت سایت رایگان می‌کنند، این هزینه‌ها را برای خود به میزان قابل توجهی کاهش دهند. اما برای انجام این کار چه باید کرد؟ به طور کلی در فضای اینترنت آموزش‌های مختلفی برای این منظور ارائه شده است که مشاهده آنها می‌تواند تا حد زیادی به شما برای این منظور کمک کند، اما راهنمایی گرفتن از شرکت‌های فعال طراحی سایت در این امر نیز یک مسئله ضروری است. در وهله اول لازم است که شما نوع سایتی را که می‌خواهید ایجاد کنید، انتخاب کنید. پس از آن یک قالب را به صورت سفارشی تعیین کنید و کار را آغاز کنید. برای ساخت سایت رایگان به چه چیزهایی نیاز است؟ ابتدا باید به دنبال یک سازنده سایت باشید، در واقع چنین شرکت‌هایی این امکان را به شما می‌دهند که پس از ساخت سایت، در فضای اینترنت جایگاه مناسبی برای خود به دست آورید. البته در هنگام تلاش برای کمک گرفتن از یک شرکت معتبر و باتجربه در این زمینه، حتما به چند نکته از جمله داشتن نمونه کار معتبر، داشتن […]
طراحی وب‌سایت به ساخت، راه‌اندازی و دیزاین صفحات وب گفته میشود که در ادامه با مزیت ساخت سایت در اصفهان آشنا می شویم. وب‌سایت‌ها با استفاده از زبان کدنویسی طراحی می‌شوند. اما امروزه با پیشرفت فناوری، توانایی‌ها و ویژگی‌های برنامه‌های ساخت وب‌سایت‌ها افزایش یافته و کار را برای برنامه‌نویسان و طراحان وب آسان‌تر کرده است. با توسعه فناوری و استفاده روز افزون مردم از تکنولوژی‌های پیشرفته و همینطور تاثیر شیوع کرونا، باعث شد تا مردم نیازهای خود را به صورت آنلاین و حضوری برطرف کنند. همینطور اکثر شرکت‌ها و حتی فروشگاه‌ها کلیه خدمات خود را به صورت اینترنتی در اختیار کاربران و مشتریان خود قرار می‌دهند. از این رو وب‌سایت‌ها اهمیت بسیار زیادی دارند. وب‌سایت‌ها انواع مختلفی از جمله وب‌سایت‌های فروشگاهی، شرکتی، خدماتی و… دارند. طراحی یک وب‌سایت حرفه‌ای می‌تواند شما را در جذب مشتری در اصفهان و شهر‌های دیگر کمک کند، مشتریانی که هم می‌توانند توریست باشند و هم از افراد خود اصفهان. طراحی یک وب‌سایت به خدماتی بستگی دارد که افراد می‌توانند به مشتریان خود ارائه دهند. افراد با طراحی یک وب‌سایت می‌تواند محصولات و یا خدمات خود را به همه مردم ایران و یا حتی جهان معرفی کنند. این خدمات می‌تواند خدمات فروشگاهی و راهبردی باشند. از این رو انتخاب شرکتی که بهترین و به روزترین خدمات ساخته وب‌سایت در اصفهان برای طراحی انواع وب‌سایت‌های تجاری را […]
دنیای امروزه دنیای ارتباطات می باشد واهمیت رسانه ها بیشتر از همیشه احساس می شود. شبکه های اجتماعی با هدف ارتباط گرفتن افراد به وجود آمد و امروزه برای تبلیغات کسب و کارها بسیار مهم تلقی می شود. درعصر ارتباطات اغلب کسب وکارها برای پیشرفت زمینه ی شغلی خود به سمت تبلیغات در شبکه های اجتماعی روی آورده اند.شبکه های اجتماعی محبوب در اطلاع رسانی برای خبرهای روزانه نقش بسیار مهمی را ایفا می کنند. با وب یار همراه باشید تا با بهترین شبکه های اجتماعی در ایران آشنا شویم. در جامعه ی امروزی شبکه های اجتماعی جزئی از زندگی مردم شده که برای تبلیغات ،اطلاع رسانی ها و آموزش و…از این شبکه ها بهره می برند.باتوجه به همگانی شدن شبکه های اجتماعی بین مردم لازم است که در مورد هر کدام از این شبکه ها اطلاعاتی کسب کنیم تا از جوامع امروز عقب نمانیم. تاریخچه مختصری در مورد شبکه های اجتماعی : ریشه شکل گرفتن مفهوم شبکه های اجتماعی در سال 1960در دانشگاه ایلی نویز در آمریکا بود.و بعد از روی کار آمدن مفهوم شبکه های اجتماعی در سال 1997سایتی تشکیل شد که اجازه ایجاد پروفایل به افرادمختلف را داد هدف این سایت جمع کردن لیستی از دوستان در کنار هم بود و بعد از آن هم شبکه های اجتماعی مختلفی با اهداف متنوع روی کار آمد. در سال […]
طراحی قالب وردپرس امروزه طرفداران زیادی پیدا کرده است. وردپرس یک سیستم مدیریت محتوای قوی است که می توان با آن قالب های زیبایی طراحی کرد. در مطلب امروز وب یار می خواهیم با نحوه طراحی قالب وردپرس آشنا شویم. بیشتر سایت های دنیای وب امروزی با این سیستم مدیریت طراحی می شودو بازار کار خوبی دارد به ویژه اگر این قالب مختص کسب وکار شما باشد و با توجه به نیاز ها و سلایق شما طراحی شده باشد در این صورت است که علاوه برتکراری نبودن پاسخگوی نیازهای مجموعه شما می باشد. بررسی انواع قالب سایت قالب سایت چیست؟ ابتدا بهتر است کمی به تاریخچه آن بپردازیم. در آغاز قرن جاری و در زمانی که اینترنت هنوز در ابتدای راه خود بود، صفحات سایت‌ها به شکل ساده‌ای طراحی می‌شدند که از چند متن ساده، چند باکس رنگارنگ و شاید یک یا دو تصویر تشکیل شده بودند. تنها افرادی که دارای صفحات وب بودند، کسانی بودند که تخصص فنی در اچ‌تی‌ام‌‌ال برای ساختن یک صفحه سایت را داشتند یا می‌توانستند هزینه انجام این کار را به افرادی که این کار را می‌کردند، پرداخت کنند. اما از آن زمان تاکنون تغییرات زیادی صورت گرفته است و اکنون پلتفرم‌های آنلاین زیادی وجود دارند که به افرادی که تجربه طراحی یا برنامه‌نویسی نسبتا کمی دارند، توانایی اجرای یک وب‌سایت کاملاً کارآمد را می‌دهند. […]
ساخت نرم افزار بدون کد نویسی و با استفاده از کدنویسی انجام میشود. در این مقاله از وب یار قصد داریم تا به چگونگی ساخت نرم افزار تحت ویندوز بدون کد نویسی و مزایای آن نسبت به روش‌های قدیمی بپردازیم. با پیشرفت تکنولوژی بستر استفاده از موبایل‌ها و کامپیوترها گسترده‌تر شده است، زیرا روز به روز به تعداد کاربران آنها افزوده میشود. اگر شما نیز ایده‌ای برای تولید نرم افزار و سرویس‌دهی در این بستر را دارید، بهتر است هر چه سریعتر دست به کار شوید و از این فضا که پتانسیل بالایی دارد برای کسب درآمد استفاده کنید. ساخت نرم افزار بدون کد نویسی چگونه ممکن است؟ این روزها دیگر نیاز نیست تا پروسه‌ی طولانی آموزش برنامه نویسی را طی کنید تا بتوانید به ساخت نرم افزارها بپردازید. در گذشته اگر قصد ساخت برنامه‌ای را داشتید باید ساعت‌ها زمان صرف می‌کردید تا با استفاده از کدها دستور العمل‌هایی را برای برنامه تعریف کنید تا عملکرد درستی داشته باشد. همچنین پس از تعریف آن دستور العمل‌ها باید مراحل آزمون و خطا را طی می‌کردید تا به اصطلاح برنامه‌ای که ساخته‌ای را باگ گیری (اشکال‌گیری) کنید. اما دیگر ساخت نرم افزار بدون کد نویسی یک رویا نیست! متخصصان نرم افزارهای زیادی را به عنوان ابزارهای کمکی طراحی کرده‌اند تا کاربران بتوانند بدون نوشتن حتی یک خط کد، نرم افزار ایده‌آل خود […]
در این لینک مقالات مرجع جاوا اسکریپت برای شما عزیزان فراهم شده تا دسترسی راحت تری به مطالب حوزه جاوااسکریپت داشته باشید. آموزش زبان جاوا اسکریپت javascript + جلسه اول زبان برنامه نویسی جاوا اسکریپت یک زبان سمت کلاینت (کاربر) است و روی اکثر مرورگر های امروزی کار می کند. این زبان به تمام خصوصیت های عناصر html و css دسترسی داشته و نسبت به رویدادهای کاربر واکنش نشان می دهد محل قرار گیری کدهای جاوا اسکریپت + جلسه دوم تگ های جاوا اسکریپت این توانایی را دارند که در هر جایی از صفحات html به کار روند. آموزش دستورات مهم جاوا اسکریپت + جلسه سوم دستور جاوا اسکریپت شامل مقادیر، عملگرها،کلمات کلیدی و توضیحات است.دستورات جاوا اسکریپت زیر همان کلمات کلیدی رزرو شده ای هستند که نمی توانند به عنوان نام متغیر به کار روند. آموزش توضیحات در جاوا اسکریپت + جلسه چهارم توضیحات در جاوا اسکریپت به دو صورت به کار می روند: 1- توضیحات تک خطی 2- توضیحات چند خطی تعریف متغیرها در جاوا اسکریپت + قسمت پنجم متغیرها در javaScript حافظ و حامل اطلاعات هستند. یعنی این متغیرها اطلاعاتی را در خود ذخیره نموده و در حین اجرای برنامه با شرایط مختلف تغییر می کنند. انواع داده ها در JavaScript + جلسه ششم زبان جاوا اسکریپت نیز همانند سایر زبان های برنامه نویسی از انواع داده های عددی (Number) ، رشته ای (String) ، […]