CSS Buttons

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

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

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

خوشبختانه برای این مساله هم راه حل هایی وجود دارد. سایت هایی هستند که از طریق یک محیط javascript به ما اجازه می دهند دکمه های دلخواه خود را به شیوه ی کاملا بصری یا Visual ایجاد کنیم و بعد کد CSS مربوطه را در اختیارمان می گذارند. کد ارائه شده در خروجی cross-browser بوده و بر روی همه ی مرورگرهای مدرن پشتیبانی می شود. در ضمن مرورگرهای قدیمی هم کلا از این دکمه ی جدید ما بی بهره نخواهند ماند. به بیان دیگر دکمه نمایش داده شده در مرورگرهای قدیمی تر کاملا شبیه آنچه در مرورگرهای جدید دیده می شود نیست ولی به هر حال زیبایی و کارآیی خود را خواهد داشت.

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

css3button.net


استفاده از فونت دلخواه در صفحات وب

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

اما به یمن معرفی اساندارد جدید CSS3 این مشکل حل شده و اکنون طراحان وب می توانند با خیالی آسوده از فونت دلخواه خود استفاده کنند. دستور @font-face از مجموعه ی دستورات CSS3 به کاربر اجازه می دهد که قلم دلخواه خود را به وب سایت خود اضافه نموده و به راحتی از آن استفاده کند. به عنوان نمونه می توان به دیوان حافظ روزهای خط خطی اشاره کرد که برای نمایش اشعار حافظ از قلم زر بهره می گیرد.

(بیشتر…)