مطالب با برچسب CSS

Codepen در هفته ای که گذشت! #6

Codepen در هفته ای که گذشت! #6
در مسیر پیاده سازی یک پروژه گاهی به المان هایی نیاز داریم که برای کدنویسی آنها از ابتدا , زمان زیادی را باید صرف کنیم مانند یک فرم ورود و ثبت نام یا یک اسلاید شو .اما می توان با جستجو در اینترنت از نمونه های رایگان و آماده استفاده کرد و...

بوت استرپی شو! 1#

بوت استرپی شو! 1#
اگر طراح وب باشین حتما با واژه "رسپانسیو" آشنایی دارین یا قبلا اسمش رو شنیدین. برای طراحی رسپانسیو باید با از مدیاکوئری استفاده کنیم ولی یک راه ساده تر و سریع تر پیش رومون هست که اونم استفاده از فریمورک هاست. فریمورک بوت استرپ...

نسخه چهارم از یک فریمورک فوق العاده

نسخه چهارم از یک فریمورک فوق العاده
بهترین فریمورک برای طراحی یک وب سایت رسپانسیو چیزی نیست جز بوت استرپ. با کدهای HTML و CSS در قالب این فریمورک محبوب میتونید به راحتی یک وب سایت کاملا واکنش گرا طراحی کنید. با گذشت زمان و پیشرفت تکنولوژی , این فریمورک هم پیشرفت کرده و...

24 قالب وب سایت منتخب

24 قالب وب سایت منتخب
خیلی از مواقع برای طراحی یک قالب به دنبال یک ایده هستیم. ایده ای که با مشاهده چندین قالب نمونه و بررسی اونا می تونه به ذهنمون برسه. امروز 24 قالب رو برای طراحان در سه دسته بندی مجزا معرفی می کنیم. امیدوارم این قالب ها رو ببینین و بتونین...

23 پن برتر از سایت Codepen

23 پن برتر از سایت Codepen
امروز 23 پن برتر از سایت Codepen رو براتون انتخاب کردیم و سعی کردیم در این سری دسته بندی های زیادی رو پوشش بدیم. امیدوارم از این سری از برترین های Codepen خوشتون بیاد و واستون مفید واقع بشه.

20 شاهکار با CSS

20 شاهکار با CSS
همونطور که میدونیم CSS یک زبان و یا یک روش برای نمایش المان ها به کاربر هست. CSS امکانات زیادی رو در اختیار ما میزاره تا بتونیم توسط این طرح های مناسبی رو در صفحاتمون ایجاد کنیم. امروز چندین نمونه و کتابخانه از چندین منبع مختلف رو...

16 پن برتر از سایت Codepen

16 پن برتر از سایت Codepen
هفته پیش به نقاط قوت Codepen و دلیل برتری این سایت نسبت به بقیه اشاره کردیم. در این سری از برترین های Codepen میخوایم چندین نمونه بهتون معرفی کنیم که مطمئنا تو طراحی هر سایتی خیلی به کارتون میاد و واستون مفید واقع میشه. با مجیدآنلاین...

9 دلیل برای استفاده از Codepen

9 دلیل برای استفاده از Codepen
سایت Codepen رو میشه یه محفل دوستانه و حرفه ای برای طراحان وب دونست. یک محل عالی برای تست باگ ها و یا همکاری در زمینه طراحی وب است و یا حتی جعبه ای پر از ایده های زیبا و مفید. تمام محتویات سایت بر پایه Pen قرار دارد. وجود پروفایل برای هر...

Codepen در هفته ای که گذشت! #5

Codepen در هفته ای که گذشت! #5
کیفیت بالای محتوا و در نتیجه سنگین بودن فایل های درون یک سایت و از طرفی سرعت نه چندان مطلوب اینترنت باعث می شه که خیلی از ماها برای باز کردن یک صفحه به صورت کامل برای چندین ثانیه منتظر بمونیم. خیلی بهتره که برای بارگذاری کامل صفحه یک...

Codepen در هفته ای که گذشت! #4

Codepen در هفته ای که گذشت! #4
دکمه ها تو طراحی ما نقش مهمی دارن. برای هر عملی که کاربر بخواد انجام بده باید یک دکمه ای طراحی بشه. مثل ثبت نام , ورود , جستجو و عملیات دیگه , در نتیجه کاربران تعاملات زیادی با دکمه ها دارن و می تونیم با یک طراحی ویژه ارزش سایت خودمون رو...

Codepen در هفته ای که گذشت! #3

Codepen در هفته ای که گذشت! #3
تقریبا تو تمامی سایت ها فرم های رو میبینیم اعم از فرم های ثبت نام  یا ورود کاربر و یا تنظیمات. تو بعضی از این فرم ها فیلدهایی داریم که دو حالتن و در نتیجه باید برای اونا از Checkbox و یا Radio Button استفاده کنیم. تو این سری از...

Codepen در هفته ای که گذشت! #2

Codepen در هفته ای که گذشت! #2
سایت Codepen محلی برای نمایش قطعه کدهای شماست. شما می توانید در این سایت با کمک CSS, HTML و جاوااسکریپت , هنر خود را به نمایش بگذارید. در این مقاله 10 نمونه برتر در هفته ای که گذشت را معرفی می کنیم.

Codepen در هفته ای که گذشت! #1

Codepen در هفته ای که گذشت! #1
سایت Codepen محلی برای نمایش قطعه کدهای شماست. شما می توانید در این سایت با کمک CSS, HTML و جاوااسکریپت , هنر خود را به نمایش بگذارید. در این مقاله 10 نمونه برتر در هفته ای که گذشت را معرفی می کنیم.

المنت های Sticky تنها با استفاده از CSS

المنت های Sticky تنها با استفاده از CSS
ساخت المنت های Sticky ( چسبنده ) خصوصا وقتی کاربر شروع به اسکرول صفحه میکند در صفحات وب رایج شده است، در صفحات وب المنت هایی را میبینید که به قسمت منو، ساید بار و ... چسبیده اند و حرکت نمیکنند یا حتی به عنوان باکس هایی برای تبلیغات...

آیا طراحان وب باید کدنویسی را یاد بگیرند ؟

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

30 سلکتور CSS که طراحان وب باید بدانند

30 سلکتور CSS که طراحان وب باید بدانند
حتما تا حالا به خوبی یاد گرفته اید که چگونه با سلکتور های ID ، Class و سلکتورهای پدر و فرزندی کار کنید، اما برای یک طراحی حرفه ای و بهینه نیاز به دانش بیشتری خواهید داشت، باید سلکتورهای بیشتری را یاد بگیرید تا بتوانید در کدهای جی کوئری...

رازهای لایه بندی صفحه بدون استفاده از Float

رازهای لایه بندی صفحه بدون استفاده از Float
اگر مدتیست که طراحی وب انجام میدهید، یقینا با خاصیت float در CSS آشنایی دارید، از زمانی که قاعده ی کلی استفاده نکردن از table در طراحی به وجود آمد، طراحی صفحه توسط float به سرعت جای آن را گرفت و در تمام طرح ها از float استفاده میشد، اما...

اسرار و ویژگی های CSS4

اسرار و ویژگی های CSS4
حدود 14 سال از انتشار نسخه ی IE6 میگذرد و پس از این مدت CSS 4 نیز درحال ورود به دنیای وب است، به نظرتان CSS 4 چه ویژگی هایی را برای طراحان وب به ارمغان آورده است ؟ چه مشکلاتی را حل کرده است ؟ چه امکانات جدیدی به طراحان وب داده است ؟ با...

ویژگی های جدید و شگفت انگیز CSS

ویژگی های جدید و شگفت انگیز CSS
به CSS هرسال ویژگی ها و خصوصیات جدیدی اضافه میشود و در این مقاله به بررسی جدیدترین ویژگی های CSS که توسط مرورگرها به خوبی پشتیبانی میشود میپردازیم، ممکن است از تمام این ویژگها در پروژه های اخیر خود استفاده نکنید اما دانستن آنها میتواند...

5 دلیلی که باید از Sass استفاده کرد!

5 دلیلی که باید از Sass استفاده کرد!
من مطمئنم که شما اسم sass را شنیدید ولی نمی دونید که شروع استفاده از آن به چه صورتی هستش! در حال حاضر صفحات وب سایت و اپلیکیشن ها همگی باید cssهای بزرگ و درون خودشون جا بدهند و نگه داری کنند، ولی sass این کار و برای ما راحتر می کنه! یکی...

شمارش با CSS را یاد بگیرید

شمارش با CSS را یاد بگیرید
در مقاله قبلی به توضیح ویژگی های CSS پرداختیم، اگر کمی مطالعاتمان را در زمینه ی CSS افزایش دهیم و به اعماق آن برویم با CSS Counter ها یا ساخت شمارنده با CSS میرسیم، در این مقاله میخواهیم یک شمارنده با CSS بسازیم به این صورت که با نشان...

ویژگهای CSS یا CSS Specificity را یاد بگیرید

ویژگهای CSS یا CSS Specificity را یاد بگیرید
اگر قصد دارید که از CSS استفاده کنید باید ویژگهای CSS و ترتیب اولویت بندی در CSS را به خوبی درک کنید، برای مثال باید بدانید کدها از بالا به پایین توسط مرورگر خوانده میشوند، در صورت ندانستن این قوانین CSS نوشتن شما کاملا بیهوده و بی ثمر...

کدهای CSS خود را بهینه کنید !

کدهای CSS خود را بهینه کنید !
داشتن فایل های CSS تمیز و بهینه شده بسیار مهم میباشد، مخصوصا اگر در آینده میخواهید بارها و بارها به فایلهای CSS خود مراجعه کنید و آنها را ویرایش کنید، یا حتی افراد دیگری پس از شما میخواهند فایلهای CSS را ویرایش کنند. خوشبختانه تکنیک های...

سه افکت فوق العاده برای Hover تصاویر

سه افکت فوق العاده برای Hover تصاویر
در دنیای مدرن وب امروزی، راه های خلاقانه و مفید زیادی داریم برای به وجود آوردن افکت های زیبا و خارق العاده و بهترین راه برای ایجاد این افکت ها CSS3 هست، برگردیم به روزای گذشته، برای ایجاد همچین افکت هایی در وب نیاز داشتیم که به خوبی به...

Transformهای دو بعدی در CSS3

Transformهای دو بعدی در CSS3
امکان Transform در CSS3 یک امکان جدید برای طراحان وب است که بتوانند خلاقانه تر طراحی کنند. Transform دو بعدی توابعی را در اختیار ما قرار می دهد که می توان یک المان را در صفحه انتقال داد یا آن را به اندازه خاصی در صفحه دوران داد. در این...

مرتب سازی تب ها با بوت استرپ

مرتب سازی تب ها با بوت استرپ
اگر طراحی رسپانسیو می کنید یا حتی فقط تو زمینه طراحی وب فعالیت دارید بدون شک اسم "بوت استرپ" رو شنیدید. بوت استرپ یه فریم ورک برای طراحی صفحات به صورت واکنش گراست که میاد با یه سری تکنیک ها مثل ستون بندی ,صفحاتمون رو واکنش گرا...

ایجاد مثلث با CSS

ایجاد مثلث با CSS
خیلی وقتا پیش میاد که تو طراحیامون به یک مثلث برای کامل تر شدن کار نیاز داریم. مثل زمانی که میخوایم بالون گفتگو طراحی کنیم یا برای تب های منوی سایت نیاز به مثلث پیدا میکنیم. میتونیم از تصاویر آماده استفاده کنیم اما این راه حرفه ای نیست....

طراحی قلب با CSS

طراحی قلب با CSS
​​خیلی از مواقع میشه به جای استفاده از عکس یک شکل, اون شکل رو با کدهای CSS طراحی کرد. هر شکل پیچیده ای رو میشه با اشکال ساده تو CSS پیاده سازی کرد. اینجوری هم تغییراتش خیلی آسون میشه و هم حجم کمتری استفاده میشه , چون از کد استفاده...

10 افکت متنی ایجاد شده با CSS

10 افکت متنی ایجاد شده با CSS
​​یک متن زیبا یا یک تایپوگرافی مناسب میتواند جذابیت طراحی شما را برای کاربر افزایش دهد. در طراحی وب از CSS برای استایل دادن به طراحی استفاده میشود;  از جمله افکت دادن به یک متن برای جذابیت بیشتر آن.  در ادامه, این 10 افکت ایجاد...