نگاهی به Combinator ها در Css
17 دی 1390
بعد از مدت ها بلاخره فرصتی پیش اومد تا مجددا مقاله ای بنویسم. این بار قصد دارم با مقاله ای در خصوص CSS اما خارج از دنیای طراحی و ساخت آیتم های مختلف در خدمت شما باشم.
شاید تا به حال کمتر نام Combinator ها را در CSS شنیده باشید، اما مطمئنا به وفور از برخی از آن ها استفاده کرده اید. در واقع همانطور که از نام Combinator بر می آید، تنها یک ترکیب کننده است، ترکیب کننده ی چند گزینشگر ساده مثل Tag Selector و یا Class Selector که به عنوان تعیین کننده ی ارتباط بین دو آن ها ایفای نقش می کند. به طور کلی Combinator ها به چهار گروه مختلف تقسیم می شوند که در ادامه به بررسی هر کدام خواهیم پرداخت.
CSS 3.0 را با اینترنت اکسپلورر تجربه کنید
19 تیر 1390
طراحی و سازگاری قالب سایت ها با اینترنت اکسپلورر، به خصوص نسخه های 6 و 7 آن، همواره یکی از معضلاتی بوده است که طراحان وب با آن دست و پنجه نرم می کنند، البته ie9 را از این مورد مستثنی کنید، چون تا حد زیادی مشکلات ورژن های قبل در آن رفع شده است. به دلیل استفاده زیاد از نسخه های قبل همچون 6، 7 و 8 و عدم پشتیبانی این نسخه ها از css3، ابزار های متفاوتی برای پیاده سازی خصوصیات ورژن سوم css در ie طراحی شده اند. یکی از این ابزار ها که قصد معرفی آن را دارم، PIE نام دارد.
BonBon، دکمه هایی از جنس CSS 3.0
12 فروردین 1390
نگاهی به دکمه های زیر بیندازید، این ها دکمه هایی هستند که با خصوصیات CSS 3 طراحی شده اند و طراح اون ها نام BonBon را برای این دکمه ها در نظر گرفته. جالبه نه؟
BonBon به صورت مجموعه ای از کلاس های css مختلف پیاده سازی شده و به راحتی قابل استفاده است و تنها با اختصاص دادن نام کلاس مربوطه می توان دکمه هایی با اشکال و رنگ های مختلف ایجاد کرد. البته هنوز کمی زود است که بخواهیم از این دکمه ها در پروژه های طراحی وب استفاده کنیم اما بررسی استایل های نوشته شده و درک قدرت و انعطاف پذیری CSS 3 مسلما برای بعضی از افراد علاقه مند جالب است.
پیاده سازی یک صفحه وب با HTML5 و CSS 3.0
27 آذر 1389
چند وقت پیش مقاله ای در مورد آشنایی با html5 نوشتم که در آن به برخی از تگ های جدید این نسخه از html پرداخته شد. همانطور که وعده داده بودم در ادامه ی مقاله ی قبلی تصمیم دارم یک صفحه ی نسبتا ساده ی html را به کمک نسخه 5ام طراحی کنم و مراحل ساخت را گام به گام باهم پیش برویم.
نگاهی به HTML 5 و برخی از خصوصیات آن
14 شهریور 1389
فکر می کنم حدودا سه سال پیش بود که خبری رو خوندم مبنی بر انتشار نسخه ی پیش نویس HTML 5، اون موقع فکرشم نمی کردم که نسخه ی جدید html به این سرعت رشد کنه، به شکلی که در حال حاضر کم کم باید به سمت این نسخه حرکت کرد. جدا از این صحبت ها اگر تا حدودی در مورد نسخه 5 ام html تحقیق کرده باشید حتما می دونید که تغییراتی که در این نسخه اعمال شده تا حد زیادی در راستای مفهومی کردن ساختار کد های html و وب هست. در ادامه جهت آشنایی بیشتر در مورد برخی از تگ های جدید صحبت خواهد شد و انشالله در قسمت بعد یک صفحه ی html ساده را به کمک هم پیاده سازی خواهیم کرد.
طراحی لوگوی مرورگر اپرا با CSS 3.0
15 فروردین 1389
اگر از علاقه مندان به طراحی وب باشید احتمالا از نسخۀ جدید CSS و خصوصیات فوق العاده ای که به آن اضافه شده است مطلع هستید. در یکی از آموزش های قبل (ساخت گالری عکس) 2 خصوصیت از CSS 3.0 به صورت ساده معرفی شد. در این مقاله نیز دو خصوصیت دیگر به همراه ساخت طرحی به مراتب جذاب تر از قبل معرفی خواهد شد. بله این طرح همانطور که در تصویر زیر مشاهده می کنید، ساخت لوگوی مرورگر اپرا، تنها با استفاده از خصوصیات CSS 3.0 و بدون استفاده از هیچ تصویری است.
ساخت سیستم رتبه بندی ستاره ای با CSS
13 بهمن 1388
نمونه ای از سیستم رتبه بندی که قصد آموزش آن را دارم در این سایت نیز قابل مشاهده است. این سیستم ها علاوه بر زیبایی، کمک می کنند تا ارزیابی بهتری از مطالب یک سایت انجام شود. در ساخت این نوع سیستم از اشکال مختلفی می توان استفاده کرد، اما نمونه ای از آن که بیشتر رواج یافته است، سیستم ستاره ای می باشد که با کلیک بر روی ستاره مورد نظر، رتبه داده شده به سرور منتقل شده و ثبت می گردد. البته در این مقاله تنها قصد دارم نحوۀ ساخت آن را به کمک CSS آموزش دهم و پیاده سازی کد های سمت سرور به عهدۀ خود شما خواهد بود.
یک گالری عکس بسازید
28 شهریور 1388
گالری عکس یکی از قسمت هایی است که معمولا در سایت های مخصوص wallpaper و تصاویر استفادۀ زیادی دارد. صرف نظر زیبایی تصاویر، نوع و استایل گالری هم می تواند بر روی کاربر تاثیرات متفاوتی بگذارد. علاوه بر جاوا اسکریپت و یا فریم ورک های آن مثل jQuery و ... که امروزه استفادۀ زیادی برای ایجاد جلوه های جذاب دارند، CSS نیز به عنوان یک عنصر پایه نقش به سزایی ایفا می کند. در این مقاله هم قصد ساخت یک گالری عکس به کمک HTML و CSS را دارم. در انتهای مقاله 2 خصوصیت جدید CSS 3.0 نیز برای ایجاد زیبایی بیشتر معرفی خواهد شد.
ساخت منو های Drop Down با CSS
1 مرداد 1388
منو ها یکی از مواردی هستند که امروزه در بسیاری از سایت ها مورد استفاده قرار می گیرند و علاوه بر زیبایی، انسجام خاصی نیر به بخش های مختلف یک سایت می دهند. در این آموزش قصد دارم نحوه ساخت منو های drop down یا پایین افتادنی را تنها با استفاده از CSS و بدون جاوا اسکریپت آموزش دهم. ضمنا این مقاله در شماره دوم مجله برنامه نویس نیز درج شده است.
چگونگی ساخت تب (سربرگ) با CSS
21 تیر 1388
مطمئنا در سایت های مختلف قسمت هایی را دیده اید که به صورت تب کنار هم قرار گرفته اند. تب ها گزینه ای مناسب برای نمایش بخش های مختلف در یک سایت، در حین فشردگی و زیبایی می باشند. در این مقاله قصد دارم نحوه ی ساخت این نوع تب ها را به کمک CSS و اندکی جاوا اسکریپت آموزش بدم هرچند که نسبتا ساده است اما سعی کردم توضیخات کامل باشد. ناگفته نماند که این مقاله رو سال قبل نوشتم و در انجمن برنامه نویس منتشر کردم، اما به دلیل اضافه شدن بخش css به سایت تصمیم گرفتم مقاله رو در اینجا هم قرار بدم.