در مسیر پیاده سازی یک پروژه گاهی به المان هایی نیاز داریم که برای کدنویسی آنها از ابتدا , زمان زیادی را باید صرف کنیم مانند یک فرم ورود و ثبت نام یا یک اسلاید شو .اما می توان با جستجو در اینترنت از نمونه های رایگان و آماده استفاده کرد و...
اگر طراح وب باشین حتما با واژه "رسپانسیو" آشنایی دارین یا قبلا اسمش رو شنیدین. برای طراحی رسپانسیو باید با از مدیاکوئری استفاده کنیم ولی یک راه ساده تر و سریع تر پیش رومون هست که اونم استفاده از فریمورک هاست. فریمورک بوت استرپ...
بهترین فریمورک برای طراحی یک وب سایت رسپانسیو چیزی نیست جز بوت استرپ. با کدهای HTML و CSS در قالب این فریمورک محبوب میتونید به راحتی یک وب سایت کاملا واکنش گرا طراحی کنید. با گذشت زمان و پیشرفت تکنولوژی , این فریمورک هم پیشرفت کرده و...
خیلی از مواقع برای طراحی یک قالب به دنبال یک ایده هستیم. ایده ای که با مشاهده چندین قالب نمونه و بررسی اونا می تونه به ذهنمون برسه. امروز 24 قالب رو برای طراحان در سه دسته بندی مجزا معرفی می کنیم. امیدوارم این قالب ها رو ببینین و بتونین...
امروز 23 پن برتر از سایت Codepen رو براتون انتخاب کردیم و سعی کردیم در این سری دسته بندی های زیادی رو پوشش بدیم. امیدوارم از این سری از برترین های Codepen خوشتون بیاد و واستون مفید واقع بشه.
همونطور که میدونیم CSS یک زبان و یا یک روش برای نمایش المان ها به کاربر هست. CSS امکانات زیادی رو در اختیار ما میزاره تا بتونیم توسط این طرح های مناسبی رو در صفحاتمون ایجاد کنیم. امروز چندین نمونه و کتابخانه از چندین منبع مختلف رو...
هفته پیش به نقاط قوت Codepen و دلیل برتری این سایت نسبت به بقیه اشاره کردیم. در این سری از برترین های Codepen میخوایم چندین نمونه بهتون معرفی کنیم که مطمئنا تو طراحی هر سایتی خیلی به کارتون میاد و واستون مفید واقع میشه. با مجیدآنلاین...
سایت Codepen رو میشه یه محفل دوستانه و حرفه ای برای طراحان وب دونست. یک محل عالی برای تست باگ ها و یا همکاری در زمینه طراحی وب است و یا حتی جعبه ای پر از ایده های زیبا و مفید. تمام محتویات سایت بر پایه Pen قرار دارد. وجود پروفایل برای هر...
کیفیت بالای محتوا و در نتیجه سنگین بودن فایل های درون یک سایت و از طرفی سرعت نه چندان مطلوب اینترنت باعث می شه که خیلی از ماها برای باز کردن یک صفحه به صورت کامل برای چندین ثانیه منتظر بمونیم. خیلی بهتره که برای بارگذاری کامل صفحه یک...
دکمه ها تو طراحی ما نقش مهمی دارن. برای هر عملی که کاربر بخواد انجام بده باید یک دکمه ای طراحی بشه. مثل ثبت نام , ورود , جستجو و عملیات دیگه , در نتیجه کاربران تعاملات زیادی با دکمه ها دارن و می تونیم با یک طراحی ویژه ارزش سایت خودمون رو...
تقریبا تو تمامی سایت ها فرم های رو میبینیم اعم از فرم های ثبت نام یا ورود کاربر و یا تنظیمات. تو بعضی از این فرم ها فیلدهایی داریم که دو حالتن و در نتیجه باید برای اونا از Checkbox و یا Radio Button استفاده کنیم. تو این سری از...
سایت Codepen محلی برای نمایش قطعه کدهای شماست. شما می توانید در این سایت با کمک CSS, HTML و جاوااسکریپت , هنر خود را به نمایش بگذارید. در این مقاله 10 نمونه برتر در هفته ای که گذشت را معرفی می کنیم.
سایت Codepen محلی برای نمایش قطعه کدهای شماست. شما می توانید در این سایت با کمک CSS, HTML و جاوااسکریپت , هنر خود را به نمایش بگذارید. در این مقاله 10 نمونه برتر در هفته ای که گذشت را معرفی می کنیم.
ساخت المنت های Sticky ( چسبنده ) خصوصا وقتی کاربر شروع به اسکرول صفحه میکند در صفحات وب رایج شده است، در صفحات وب المنت هایی را میبینید که به قسمت منو، ساید بار و ... چسبیده اند و حرکت نمیکنند یا حتی به عنوان باکس هایی برای تبلیغات...
درحال حاضر با وجود زمانی زیادی که از پیشرفت دنیای وب میگذرد هنوز بحث های زیادی در گوشه و کنارها راجع به کد زدن همراه با طراحی یا طراحی مطلق و صرف نظر از کدنویسی مطرح است و این موضوع باعث کل کل سختی بین دو طرف شده است، در سال 2015، طراحی...
حتما تا حالا به خوبی یاد گرفته اید که چگونه با سلکتور های ID ، Class و سلکتورهای پدر و فرزندی کار کنید، اما برای یک طراحی حرفه ای و بهینه نیاز به دانش بیشتری خواهید داشت، باید سلکتورهای بیشتری را یاد بگیرید تا بتوانید در کدهای جی کوئری...
اگر مدتیست که طراحی وب انجام میدهید، یقینا با خاصیت float در CSS آشنایی دارید، از زمانی که قاعده ی کلی استفاده نکردن از table در طراحی به وجود آمد، طراحی صفحه توسط float به سرعت جای آن را گرفت و در تمام طرح ها از float استفاده میشد، اما...
حدود 14 سال از انتشار نسخه ی IE6 میگذرد و پس از این مدت CSS 4 نیز درحال ورود به دنیای وب است، به نظرتان CSS 4 چه ویژگی هایی را برای طراحان وب به ارمغان آورده است ؟ چه مشکلاتی را حل کرده است ؟ چه امکانات جدیدی به طراحان وب داده است ؟ با...
به CSS هرسال ویژگی ها و خصوصیات جدیدی اضافه میشود و در این مقاله به بررسی جدیدترین ویژگی های CSS که توسط مرورگرها به خوبی پشتیبانی میشود میپردازیم، ممکن است از تمام این ویژگها در پروژه های اخیر خود استفاده نکنید اما دانستن آنها میتواند...
من مطمئنم که شما اسم sass را شنیدید ولی نمی دونید که شروع استفاده از آن به چه صورتی هستش! در حال حاضر صفحات وب سایت و اپلیکیشن ها همگی باید cssهای بزرگ و درون خودشون جا بدهند و نگه داری کنند، ولی sass این کار و برای ما راحتر می کنه! یکی...
در مقاله قبلی به توضیح ویژگی های CSS پرداختیم، اگر کمی مطالعاتمان را در زمینه ی CSS افزایش دهیم و به اعماق آن برویم با CSS Counter ها یا ساخت شمارنده با CSS میرسیم، در این مقاله میخواهیم یک شمارنده با CSS بسازیم به این صورت که با نشان...
اگر قصد دارید که از CSS استفاده کنید باید ویژگهای CSS و ترتیب اولویت بندی در CSS را به خوبی درک کنید، برای مثال باید بدانید کدها از بالا به پایین توسط مرورگر خوانده میشوند، در صورت ندانستن این قوانین CSS نوشتن شما کاملا بیهوده و بی ثمر...
داشتن فایل های CSS تمیز و بهینه شده بسیار مهم میباشد، مخصوصا اگر در آینده میخواهید بارها و بارها به فایلهای CSS خود مراجعه کنید و آنها را ویرایش کنید، یا حتی افراد دیگری پس از شما میخواهند فایلهای CSS را ویرایش کنند. خوشبختانه تکنیک های...
در دنیای مدرن وب امروزی، راه های خلاقانه و مفید زیادی داریم برای به وجود آوردن افکت های زیبا و خارق العاده و بهترین راه برای ایجاد این افکت ها CSS3 هست، برگردیم به روزای گذشته، برای ایجاد همچین افکت هایی در وب نیاز داشتیم که به خوبی به...
امکان Transform در CSS3 یک امکان جدید برای طراحان وب است که بتوانند خلاقانه تر طراحی کنند. Transform دو بعدی توابعی را در اختیار ما قرار می دهد که می توان یک المان را در صفحه انتقال داد یا آن را به اندازه خاصی در صفحه دوران داد. در این...
اگر طراحی رسپانسیو می کنید یا حتی فقط تو زمینه طراحی وب فعالیت دارید بدون شک اسم "بوت استرپ" رو شنیدید. بوت استرپ یه فریم ورک برای طراحی صفحات به صورت واکنش گراست که میاد با یه سری تکنیک ها مثل ستون بندی ,صفحاتمون رو واکنش گرا...
خیلی وقتا پیش میاد که تو طراحیامون به یک مثلث برای کامل تر شدن کار نیاز داریم. مثل زمانی که میخوایم بالون گفتگو طراحی کنیم یا برای تب های منوی سایت نیاز به مثلث پیدا میکنیم. میتونیم از تصاویر آماده استفاده کنیم اما این راه حرفه ای نیست....
خیلی از مواقع میشه به جای استفاده از عکس یک شکل, اون شکل رو با کدهای CSS طراحی کرد. هر شکل پیچیده ای رو میشه با اشکال ساده تو CSS پیاده سازی کرد. اینجوری هم تغییراتش خیلی آسون میشه و هم حجم کمتری استفاده میشه , چون از کد استفاده...
یک متن زیبا یا یک تایپوگرافی مناسب میتواند جذابیت طراحی شما را برای کاربر افزایش دهد. در طراحی وب از CSS برای استایل دادن به طراحی استفاده میشود; از جمله افکت دادن به یک متن برای جذابیت بیشتر آن. در ادامه, این 10 افکت ایجاد...
