وب از نگاه سوم

احتمالا تعداد زیادی از شما با 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, سی اس اس, طراحی وب