Smashing Magazine از آن مجله‌های نو پایی است که پیرامون توسعه و طراحی وب و با هدف بهره‌گیری از تکنیک‌های جدید، مطالب جالبی منتشر می‌کند. کم و بیش مطالبش را می‌خوانم. این مجله آنلاین دیروز مقاله جالبی با عنوان “35 طراح و 5 سئوال” منتشر کرد که خواندنش را به همه طراحان و علاقمندان به وب توصیه می‌کنم.

این مجله 35 طراح و کمپانی برتر در سرتاسر جهان را در ماه مارس انتخاب کرده و از آن‌ها خواسته تا به 5 سئوال در رابطه با طراحی پاسخ‌ دهند تا از این طریق دانش و تجربه‌هایشان را با دیگر توسعه‌دهندگان تقسیم کنند. پنج سئوال به این صورت بوده است:

• 1- یک جنبه از طرح که بیشترین ارجحیت را به آن می‌دهید.
  2- یکی از مفیدترین تکنیک‌های CSS که اغلب از آن استفاده می‌کنید.
  3- یک فونت که اغلب در پروژه‌ها بکار می‌برید.
  4- یک کتاب عالی در زمینه طراحی که خواندن آن را توصیه می‌کنید.
  5- یک مجله در زمینه طراحی که بصورت روانه یا هفتگی می‌خوانید.

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

اصل مقاله را خودتان بخوانید، فرصت اندکم اجازه ویرایش و نگارش آن را نمی‌دهد. باید در لینکدونی بالا معرفی می‌شد ولی جذابیتش ایجاب می‌کرد کمی در موردش توضیح دهم.

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

تغییر سایز متن بدون استفاده از واحد پیکسل
(در این پست سعی می کنم بیشتر در مورد تایپوگرافی بنویسم) قدیما هر وقت طرح های حرفه ای رو نگاه می کردم می دیدم بیشترشون برای سایز متن ها از واحد em بجای px استفاده می کنن. حالا دلیل این کار بماند آخر مقاله؟ اما جالب اینجا بود که اگر المانی رو که مثلا اندازش 12px بود رو می خواستی معادل کنی به واحد em بجاش می نوشتن 1.2em یعنی تقسیم بر ده می کردنش. کار ساده ای به نظر می رسید. ما هم گفتیم همه المان هایی که به واحد پیکسل هستند رو بر ده تقسیم و بجاش از em استفاده می کنیم. ولی دیدم خیلی سایزش متفاوت شد. دو تا کلاس ساده به شکل زیر ایجاد کنید: ادامه مطلب …

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

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

تصورش عجیب است که حتی Favicon صفحات شما حالت دینامیک و پویا داشته باشد. فکر کنم اولین باری است که مطلبی مانند این درباره ایجاد Favicons آن هم به صورت پویا بر روی وب منتشر می شود. تنها مشکل، عدم پشتیبانی کامل مرورگری مثل IE از این خاصیت است. مرورگرهایی نظیر فایرفاکس و اپرا از بر چسپ link برای تعیین Favicon استفاده می کنند در حالی که IE و Safari از این الگو برای تشخیص Favicon بی بهره اند.

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

یک نمونه آزمایشی در اینجا آورده شده است. کافی است پس از لود کامل صفحه شروع به تایپ کردن کنید. با تایپ هر حرف، Favicon هم به همان فرم تغییر خواهد کرد (با فایرفاکس امتحان کنید) حتی می توان همزمان عنوان صفحه رو هم با این متد عوض کرد.

در میان عناصر تعریف شده در CSS مجموعه ی انگشت شماری از عناصر قرار داد که به عناصر کاذب یا Pseudo Elements معرف اند ( گاهی اوقات آن ها را کلاس های کاذب هم می نامند) با اینکه کاربرد های متنوع و جالبی دارند اما کمتر کسی را دیده ام که از آن استفاده کند. شاید دلیل آن این باشد که هنوز اینترنت اکسپلورر آن ها را به طور کامل پشتیبانی نمی کند، اما برای کسانی که زیاد به IE علاقه ای ندارند ایده مناسبی است.

معروفترین آن ها دو عنصر before و after است. اما قبل از توضیح این دو لازم است عنصر content را نیز بشناسید. این عنصر در CSS2 تعریف شده و به طور خودکار محتویات را قبل یا بعد از یک انتخابگر CSS پیوست می کند. به عبارت دیگر نوع مولفه را تعیین و متعاقبا چگونگی نمایش آن را بیان می کند و همیشه با before و after بکار می رود.

اما خود before و after برای کنترل مقدار عنصر content به کار می رود. به طوری که after مقدار را بعد از مولفه قرار می دهد و before مقدار را قبل از آن. معروفترین مقادیری که عنصر content می تواند اختیار کند به شرح زیر است:

String : همانطور که از نامش پیداست یک رشته را اختیار می کند که می تواند یک علامت خاص یا یک واژه باشد. نمونه زیر را ببینید، عنصر نامبرده علامت ~ را اختیار کرده است. به طوری که این علامت قبل از مولفه li قرار می گیرد: ادامه مطلب …