css

یکی از چالش های همیشگی طراحان وب طراحی و کدنویسی سربرگ (هدر Header) قالب های سایت، وبلاگ و... است، بدین منظور روش ها و تکنیک های زیادی وجود دارد و اینکه طراح از چه متدی استفاده کند تا حدود زیادی به سلیقه، مهارت، تجربه و مهمتر از همه به هدف از طراحی قالب برمی گردد، به طور مثال سربرگ یا هدر سایت ها و وبلاگ های کودکانه یا فانتزی معمولا باید ترکیبی از رنگ های شاد و شامل اِلمان های گرافیکی بیشتری باشد، در مقابل ممکن است به فرض برای سایت های اداری یا خبری از تکنیک های ساده، لوگوهای...

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

از کدها و استایل CSS علاوه بر کاربردهای معمول و روزمره برای خلق جلوه های خاص در بستر وب نیز استفاده می شود، یکی از این جلوه ها که محبوبیت زیادی نیز بین طراحان وب دارد خلق منوهای کشویی (بازشونده) یا به اصطلاح Dropdown مبتنی بر تگ های ul li و CSS است، عملکرد این امکان به این صورت است که لیستی از منوها با قابلیت داشتن زیر مجموعه هنگام بردن نشانه گر ماوس روی تگ والد ظاهر و با خارج کردن ماوس از محدوده تگ والد مجددا به طور خودکار محو می شوند، نوع پیشرفته تر این منوها با...

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

به عنوان کاربر دنیای وب اغلب با مرورگرهای متفاوت به سایت ها و وبلاگ های مختلف سر می زنیم و بیش از هر چیز رسیدن به محتوای مورد نظر برایمان اهمیت دارد و کمتر به ظاهر سایت و وبلاگی که در حال بازدید از آن هستیم و اشکالات و ایرادات آن توجه داریم، فارغ از مسائل فنی مطلب را می خوانیم و در آخر هم صفحه را بسته و وبگاه را ترک می کنیم، اما در پشت صحنه کار برای مدیران حرفه ای وبسایت ها و وبلاگ ها داشتن قالبی استاندارد و اینکه همه کاربرانشان صرف نظر از مرورگری که...

در ادامه مباحث آموزش مقدماتی استایل نویسی با زبان CSS می خواهیم با خواص کاربردی این زبان در نحوه تنظیم ویژگی های ظاهری لینک (Link) آشنا شویم، در صفحات مختلف فضای وب با لینک (Hyperlink یا ابرپیوند) آشنا هستیم که با بردن نشانه گر (ماوس) روی آنها به فرض رنگ متن تغییر می کند و یا پس از بازدید از صفحه ارجاع داده شده متن لینک به رنگ دیگری نشان داده می شود، جالب است که تمام این ویژگی ها با کمک خواص CSS خلق می شوند که در ادامه آموزش پیش رو به آن خواهیم پرداخت، یادآور می شویم...

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

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

پیش از این در بخش آموزش مقدماتی CSS از کاربرد این زبان استایل نویسی، نحوه تعریف و استفاده از سلکتور کلاس (Class) و آی دی (ID) صحبت کردیم، همچنین با نحوه کار رنگ ها و تصاویر پس زمینه (Background) و ویژگی های آنها بیشتر آشنا شدیم و مثال هایی را در این خصوص به صورت صفحاتی کمی و بیش ساده با الگوهای دلخواه مرور کردیم، اکنون در ادامه مباحث آموزش مقدماتی CSS می خواهیم با یکی دیگر از کاربردهای این زبان آشنا شویم و شیوه کار با فونت، متن و اعمال تنظیمات سفارشی بر روی آنها را بررسی کنیم، قابلیت...

باکس های گوشه گرد لایه هایی به صورت مستطیل یا مربع با کناره های گرد یا به اصطلاح نرم هستند که محتوایی را در خود نشان می دهند، این نوع باکس ها کاربردهای زیادی در طراحی صفحات وب دارند به عنوان مثال در قسمت سایدبار کناری قالب ها، فیلد جستجو یا در نمایش تبلیغات متنی به وفور از این تکنیک استفاده می شود، باکس گوشه گرد در مقایسه با باکس های عادی (با گوشه های مربعی) در شرایط یکسان و در صورت استفاده به جا، معمولا زیبایی خاصی به طرح مورد نظر می دهد و باعث حرفه ای تر به...

امروزه در طراحی صفحات وب استفاده از بلاک ها و تصاویر شفاف یا به اصطلاح Transparent امری مرسوم است، به طور مثال طراحان قالب سایت ها و وبلاگ ها می توانند در طراحی هایشان پس زمینه مطالب را کمی شفاف در نظر بگیرند تا تصویری که در زیر بلاک مطالب قرار دارد به صورت نیمه شفاف و در واقع مخلوط با رنگ پس زمینه دیده شود، پیاده سازی این تکنیک پیشتر با تصاویر فرمت png صورت می گرفت اما مشکل و مانع همیشگی، مرورگر غیر استاندارد و ضعیف اینترنت اکسپلورر (IE) بود که قادر به نمایش این تصاویر با زمینه...

بعد از آشنایی اولیه با CSS، تعریف کلاس (Class) و آی دی (ID)، نوبت به فراگیری ویژگی های مربوط به خاصیت Background در این زبان است، Background از جمله اولین خاصیت هایی است که در هنگام طراحی صفحات وب از آن استفاده می کنیم چرا که می تواند نقطه شروع طراحی ظاهر رابط کاربری ما باشد و به نوعی رنگ بندی پایه پروژه را مشخص کند، خوشبختانه قابلیت های CSS در این خصوص تقریبا کامل و بدون نقص است و هرآنچه که در طراحی وب مورد انتظار ما باشد با کدهای آن دست یافتنی است، در ادامه خواهیم گفت که...

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

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

در آموزش قبل اشاره شد که CSS به خودی خود کاربرد خاصی ندارد و در کنار تگ های HTML است که معنی و کاربرد پیدا می کند، در واقع CSS صرفا برای تعریف استایل تگ های مختلف HTML به وجود آمده است، اما CSS چگونه این تگ ها را در صفحات وب شناسایی می کند؟ به طور مثال اگر بخواهیم از بین دهها تگ div موجود در صفحه div مربوط به یک مطلب مشخص را استایل دهی کنیم، CSS چه راه حلی برای این موضوع در نظر گرفته است؟ پاسخ این نوع سوالات عبارت سلکتور (Selector) است، سلکتور راهکاری در...