در ادامه نوشته قبل بحث اصلی در مورد فریم ورک های CSS را شروع می کنیم. باید به این نکته اشاره کنم که استفاده از فریم ورک های سی اس اس مزیت ها و معایبی داره که ابتدا به آنها خواهیم پرداخت.
مزیت های استفاده از فریم ورک های سی اس اس
بهره وری خودتان را بالا می برید و اشتباهات رایج را انجام نمی دهید
اگر شما سایت های را طراحی می کنید که تقریبا هم نوع یکدیگر هستند ، می توانید با استفاده از فریم ورک های سی اس اس سرعت کار خود را بالا ببرید و از طرفی دیگر از خطا هایی که به صورت معمول طراحان وب انجام می دهند دوری کنید. Read more…
عمومی
سی اس اس, طراحی وب
نمی دونم چند دسته از شما تا به حال به این مسئله دقت کرده اید ، اما درصد بسیار زیادی ، مخصوصا اونهایی که طراحی از صفر را انجام می دهند ، حتما با مشکلات بسیار زیادی در طراحی خود و تنظیم طرح خودشون جهت مطابقت در مرورگر های مختلف ، روبرو شده اند. دلیل اصلی این است که هر مرورگر به صورت پیشفرض درک مختلفی از وضعیت هر عنصر در صفحه وب دارد و به همین دلیل صفحات وب در مرورگر های مختلف ، به صورت های مختلف نمایش داده می شوند.
به عنوان مثال اگر فایرفاکس برای عنصر form مقدار margin بالا و پایین را ۴px حساب کند این مقدار در IE ممکن هست کمتر یا بیشتر باشد و همین مقدار باعث می شود که وضعیت عناصر form صفحه در مرورگر های مختلف کاملا با یکدیگر فرق داشته باشند.
فریم ورک های CSS کمک زیادی در جهت جلوگیری از بروز این گونه مسائل می کنند. ضمن اینکه همیشه ریست کردن وضعیت عناصر در صفحه کار بسیار زمان بری است ، تصور کنید شما برای هر طرح را بخواهید این کار را انجام دهید!
Read more…
Uncategorized
سی اس اس, طراحی وب
احتمالا تعداد زیادی از شما با Css ها و نقش مهمی که در طراحی وب بر عهده دارند ، آشنا هستید. با کمک Css می توانید محتوایات html صفحات خود را به شکل های مختلفی نشان دهید. یادگیری Css برای طراحان وب مسئله ای بسیار مهم است.
همانند دیگر مهارت ها ، داشتن مهارت در Css نیز می تواند از سطوح ابتدایی شروع شود و تا سطوح پیشرفته و حرفه ای ادامه پیدا کند.
در این نوشته می خواهم درمورد تکنیکی صحبت کنم که طراحان حرفه ای به مراتب بیشتر از آن استفاده می کنند و از آن بهره می برند.
سودو المنت ها در Css جهت اضافه کردن قابلیت های خاصی به عناصر صفحه استفاده می شوند. با کمک این قابلیت ها می توانید در محتوای صفحات به صورت غیر مستقیم تغییر ایجاد کنید.
سینتکس و یا نحوه کارکرد سودو المنت ها به شکل زیر است:
selector:pseudo-element {property: value}
selector.class:pseudo-element {property: value}
اولین عنصر سودو first-line است. این عنصر برای اضافه کردن یک ویژگی خاص به خط اول عناصر انتخاب شده ، به کار می رود. به مثال زیر توجه کنید:
p:first-line {color:#0000ff;font-variant:small-caps}
Some text that ends up on two or more lines
نحوه نمایش این مثال در مرورگر می تواند چیزی شبیه این باشد:
Some text that ends
up on two or more lines
Read more…
Uncategorized
pseudo, xhtml, سی اس اس, طراحی وب
در این نوشته می خواهیم کمی در مورد Css و Table ها صحبت کنیم. اکثر طراحان وب می دانند که این روز ها متد های طراحی در حال تغییر است و طرح های حرفه ای محسوب می شوند که در ساختار آنها تا آنجا که امکان دارد از Table کمتر استفاده شده باشد و یا در اصطلاح Table less باشند.
شاید پیاده سازی بسیار از موارد مورد نیاز در یک طراح با استفاده از دیگر عناصر XHTML بسیار ساده تر از استفاده از Table ها باشد اما در برخی مواقع هیچ راه گریزی نیست.
یکی از خواسته های که پیاده سازی آن با Table می تواند راحت ترین راه ممکن باشد ، نمایش جداول اطلاعاتی است که در برخی از کارها نیاز به استفاده از آنها می شود. در برخی از این موارد ، کاربران و یا طراحان فکر می کنند که استفاده Table نمی تواند آنگونه که می خواهند طرح را نمایش دهد به عبارت دیگر فکر می کنند که Table ها زیاد انعطاف پذیر نیستند.
اما با استفاده از Css می توان به عناصر Table نیز ظاهری متعارف داد تا هم حجم کمتری را به خود اختصاص دهند و هم بهتر نمایش داده شوند. اکنون می خواهیم یک نمونه جدول را با استفاده از Css پیاده سازی کنیم و ظاهری متناسب به آن دهیم.
Read more…
Uncategorized
xhtml, سی اس اس, طراحی وب