بایگانی دستهٔ css

CSS Sprite چیست ؟

اشاره : نوشته ای رو تو وبلاگ چهار گوشه دیدیم مقاله خوبی بود امیدوارم شما هم لذت ببرید با تشکر از امیر عباس نویسنده این نوشته

صمیم داشتم در مورد CSS Sprite بنویسم. مقالات زیادی در این مورد در وب موجود بود ولی مقاله chris coyier برای این کار مناسب بود. بر اساس نوشته کریس این مقاله را نوشتم و فایل ها رو برای زبان فارسی آماده کردم که در پایان مقاله برای دانلود قرار گرفته است.

شاید از CSS Sprite را شنیده باشید. آیا تا به حال از آن استفاده کرده اید ؟ شاید نامی که برای این تکنیک انتخاب شده مناسب نباشد. آیا تا به حال جلو های CSS rollover را دیده اید ؟  در این تکنیک معمولا دو وضعیت یک دکمه را داخل یک تصویر قرار می دهند و با استفاده از CSS زمانی که ماوس روی دکمه قرار می گیرد، تصویر پس زمینه رو جا به جا می کنند تا جلوه مورد نظر ساخته شود. CSS Sprite نیز در اصل توسعه یافته همین تکنیک هست. تفاوت این شیوه با CSS rollover در این است که در اینجا ما محدود به دو یا سه تصویر نیستیم و می توانیم تعداد بسیار زیادی از تصاویر را داخل یک تصویر جای دهیم.

چرا باید تصاویر را با هم ادغام کنیم ؟ اگر هر تصویر به طور مجزا دانلود شود ، سریعتر و بهتر نیست ؟

خیر، نیست. در طراحی های قدیمی ، طراحان، تصاویر بزرگ را slice می کردند و هر کدام را در پس زمینه یکی از خانه های یک table قرار می دادند تا load شدن صفحه سریعتر شود. ولی این شیوه فقط چشم را فریب می دهد و عملا تاثیری در زمان لود شدن صفحه ندارد. تنها این توهم ایجاد می شود که با استفاده از این شیوه ، صفحه سریعتر load می شود. در اصل در زمان لود شدن هر یک از این تصاویر یک HTTP-Request به server ارسال می شود و هر چقدر تعداد این درخواست ها بیشتر باشد، سرعت لود صفحه شما پایینتر می آید !!

در این مقاله در وبلاگ yahoo user interface به طور مفصل در این مورد بحث شده است. در بخشی از این مقاله آمده است.
به این تصویر دقت کنید. در این جدول در ستون سمت چپ زمان دانلود فایل HTML و در ستون سمت راست زمان دانلود باقی اجزای صفحه به شکل درصدی نمایش داده شده است: ادامهٔ این ورودی را بخوانید »

Advertisements

, ,

بیان دیدگاه

5 شیوه جایگزینی متن با تصویر با استفاده از CSS

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

هر کدام از این شیوه ها مزایا و معایبی دارند که سعی میکنیم هر یک را به طور مجزا بررسی کنیم. در ضمن فقط شیوه هایی را توضیح می دهیم که با زبان فارسی مشکلی نداشته باشد.

تکنیک 1

<h1 id="one">4goosh.com</h1>

h1#one {
width: 150px; height: 50px;
background: url('4goosh.png') no-repeat;
text-indent: -9999px;
overflow: hidden

} ادامهٔ این ورودی را بخوانید »

, , , ,

بیان دیدگاه

سمینار تخصصی CSS (رایگان)

هفته پیش با یکی از دوستان، مجتبی دشتی نژاد صحبت کردم. قرار شد که دوره جدید کلاس های CSS فانتازیو را من تدریس کنم. به احتمال زیاد کلاس های CSS در ماه آبان تشکیل می شود . در اولین دوره ، CSS در سطح مبتدی و متوسطه برگزار خواهد شد. برای تدریس در کلاس ها هم کتاب CSS the missing manual را انتخاب کردم که یکی از کامل ترین کتاب ها در زمینه آموزش CSS است.

در ضمن به جز این کتاب ها، 26 مهر، سمینار CSS هم برگزار می شود که در این سمینار من فصل اول کتاب bulletproof web desgin نوشته آقای دن سدرهولم را آموزش می دهم. این کتاب برای افرادی نوشته شده که با CSS آشنایی دارند و مایلند که شیوه های مناسب طراحی وب با CSS را بیاموزند. در این سمینار به شما آموزش خواهم داد که سایز متن صفحه را به شکلی تنظیم کنید که در تمامی مرورگر ها قابل تنظیم باشد. در خلال آموزش این تکنیک ها، برخی از باگ های مرورگر IE نیز توضیح داده می شود و هک های مورد استفاده نیز توضیح داده خواهد شد.

برای این سمینار، حدود 70 دقیقه فیلم آموزش با فرمت AVI و با کیفیت بسیار بالا و سایز 1024 در 768 نیز آماده شده که بعد از پایان سمینار به شرکت کنندگان اهدا خواهد شد. سعی می کنیم این فیلم ها رو با codec H.264 نیز فشرده کنیم تا کم حجم شود و آن را بر روی وب نیز قرار دهیم تا عزیزانی که نمی توانند در سمینار شرکت کنند نیز از این فیلم ها استفاده کنند.

این سمینار کاملا رایگان بوده و شرکت در آن برای عموم آزاد است.

برای درخواست ثبت نام در سمینار تنها کافیست که در بخش کامنت های مطلب مربوط به سمینار CSS در وبلاگ آقای دشتی نژاد ، کامنت بگزارید و ایمیل خود را قرار دهید.

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

انتشارکننده

, , , ,

بیان دیدگاه