[بارون، خیلی بیشتر از اون‌چیزی که فکر می‌کنیم، خوبه]

برای انجام همچین کاری روش‌ها و راه‌های زیادی وجود داره، که من اینجا چندتا از مناسب‌ترین روش‌ها رو میگم و احیانا معایب‌ش رو هم ذکر می‌کنم. نکته‌ای که وجود داره اینه که این روش‌ها در تمام مرورگرها(حتی اینترنت اکسپلورر ۶) هم به خوبی کار می‌کنه و از نظر با مشکلی مواجه نیستیم.

×

← روش یک:

<h1 id="technique-one">
<span>seventeenth-version</span>
</h1>

h1#technique-one {
width: 250px;
height: 25px;
background-image: url(logo.gif); }
h3#technique-one span {
display: none; }

توضیحات: در این روش، اول تصویر دلخواه‌مون رو با طول و عرض مناسب به عنوان پس‌زمینه تعریف می‌کنیم و بعد متن‌مون رو که تو تگ span تعریف شده رو با استفاده از دستور display: none پنهان می‌کنیم. روش خوب و ساده‌ای‌ه؛ اما چون اینجا از دستور display: none استفاده شده، نوشته داخل تگ span علاوه بر اینکه از دید خواننده‌ها پنهان میشه، از دید موتوهای جستجو هم پنهان خواهد موند؛ واین چندان جالب نیست.

×

← روش دو:

<h1 class="technique-two">
seventeenth-version
</h1>

h1.technique-two {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px; }

توضیحات: این روش که به تکنیک فارک معروفه، یکی از بهترین، ساده‌ترین و پراستفاده‌ترین روش‌ها برای جایگزینی تصویره. تو اینجا ما یک پس‌زمینه برای تگ h1 تعریف می‌کنیم، و با استفاده از دستور indent متن موجود رو حذف می‌کنیم، به همین سادگی. درکل از بی‌عیب‌ترین روش‌های موجود هم هست.

×

← روش سه:

<h1 class="technique-three">
<a href="#">
<img src="images/header-image.jpg" alt="Seventeenth Version" />
</a>
</h1>

h1.technique-three {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;
}

توضیحات: این روش در حقیقت تعمیمی از تکنیک فارک‌ه. تو این روش به‌جای اینکه ما یک متن رو بخوایم از نظر خواننده حذف کنیم، ابتدا یک تصویر که دارای خاصیت alt هست رو ایجاد کرده و سپس اون تصویر رو با استفاده از indent پنهان می‌کنیم. حالا چرا این کار رو می‌کنیم؟ ساده‌ست؛ درنظر بگیرید وقتی سایت ما در مرورگری به نمایش دربیاد که بنا به دلایلی هم قابلیتِ نمایش سی‌اس‌اس اون مرورگر و هم قابلیت نمایش تصاویر اون مرورگر خاموش‌ه(تعجب نکنید، امکان پیش اومدن همچین موقعیتی هست) در این صورت، چون ما برای تصویرمون alt تعریف کردیم، متنی که در دستور alt وجود داره به نمایش درمیاد و صفحه‌ی ما خالی نمی‌مونه.

×

← روش چهار:

<h1 class="technique-four">
<span>seventeenth version</span>
</h1>

h1.technique-four {
width: 350px; height: 75px;
background: url("images/header-image.jpg") no-repeat;
}
h1.technique-seven span {
display: block;
width: 0;
height: 0;
overflow: hidden;
}

توضیحات: در ای روش، ما متن موردنظر رو در یک باکس، با طول و عرض صفر قرار می‌دیدم، و برای تگ h1 بک‌گراندی شامل تصویر مورد نظر تعریف می‌کنیم. روش بدی نیست در هرصورت.

— این چهار روش، تقریبا بهترین و ساده‌ترین روش‌های جایگزینی توصیر به وسیله سی‌اس‌اس بودن. اما یکی دو نکته:

نکته یک/ همه‌ی این روش‌ها در نهایت یک نوع خروجی(از لحاظ ظاهری) رو تحویل ما میدن، اما چیزی که به لحاظ تکنیکی یه روش رو برتر از دیگری می‌کنه در دو نکته‌س:

1. راحتی کدنویسی و ساده‌تر بودن
2. بازدهی بهتر در زمانی که سی‌اس‌اس و نمایش تصویر یک مرورگر، یا هر دو خاموش باشن یا یکی از این دو. یعنی اینکه اگر برفرض در یک مرورگر قابلیت نمایش سی‌اس‌اس خاموش، و قابلیت نمایش تصویر روشن بود، چه خروجی رو ما خواهیم داشت؛ و اگر سی‌اس‌اس روشن و تصویر خاموش بود چه خروجی‌یی. برای درک بهتر این موضوع به تصویر زیر که روش دوم رو توضیح میده، دقت کنید:

نکته دو/ مسلما این چهار روش، تمامی روش‌های جایگزینی تصاویر نیست؛ برای نکات و روش‌های بیشتر لینک‌های زیر لینک‌های زیر رو نگاه کنید:

• روش‌های Dave Shea
• وبلاگ Stop Design

پ.ن: اگر نقصی در مطلب می‌بینید؛ حتما توی کامنت‌ها بگید :)

- John Dillinger / Public Enemies

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

سه/ یه فکری هم که خیلی وقته تو ذهنم‌ه؛ اینه که این پست‌های آموزشی و شبه آی‌تی و اینا رو منتقل کنم به یه وبلاگ دیگه(مثلا یه ساب‌دامین از همین version17.com) و اونجا یه‌مقدار بیشتر در مورد این مسائل بنویسم، اینجا هم خیلی قروقاطی نباشه. این هم در نوع خودش مسئله‌ای‌ه. حالا احتمالا هیچ‌کدوم هم عملی نخواهد شد. :)

[این پست‌های این مدلی که بدون هیچ‌فکر کردن و یلخی نوشته میشه خیلی مزه میده]

دستور transform به صورت زیر مقداردهی میشه:

transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

به دلیل اینکه این دستور، از دستوراتِ موجود در سی‌اس‌اس۳ به‌حساب میاد و هنوز هیچ مرورگری به طور کامل از سی‌اس‌اس۳ پشتیبانی‌ش نمی‌کنه، باید در ابتدای این دستور از عبارات -moz-(برای مرورگرهای برپایه gecko مثل فایرفاکس) و -webkit-(برای مرورگرهایی مثل برپایه‌ی وب‌کیت مثل گوگل‌کروم و سافاری) استفاده کنیم.

مثال کاربردی

خب حالا برفرض ما می‌خوایم باکس تاریخ مربوط به پست‌های یه وبلاگ رو با استفاده از دستور transform، بسازیم. به‌طبع اینجا فقط نحوه ساختن شکل و شمایل یه همچین چیزی رو خواهم گفت، گرچه ایجاد یه همچین باکسی توی مثلا ورپرس هم چندان کار سختی نیست و تنها احنیاج به گذاشتن کدهای وردپرس توی قالب اچ‌تی‌ام‌ال داره. اول یه اچ‌تی‌ام‌ال واسه‌ش می‌نویسیم. یه چیزی مث این پایینی:

<div class="example-date">
<span class="day">24</span>
<span class="month">october</span>
<span class="year">2009</span>
</div>

اینجا ما یه div داریم، که از سه‌تا زیرجزء که تو تگ span قرار داده شدن تشکیل شده. حالا برای اینکه به اون شکل دلخواه(تصویر اول این پست) درش بیاریم، از سی‌اس‌اس پایین استقاده می‌کنیم:

.example-date {
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #888;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 5px #888;
background: #F0EEE7;
box-shadow: 0px 0px 5px #888;
height: 120px;
margin: 5em auto;
padding: 3px;
position: relative;
width: 150px; }
.day {
color: #FE4902;
font-size: 7em;
line-height: 80px;
position: absolute;
right: 5px;
top: 0; }
.month {
bottom: 5px;
font-size: 30px;
left: 15px;
position: absolute;
text-align: center;
text-transform: uppercase; }
.year {
*right: 10px;
-moz-transform: rotate(-90deg); /* Firefox */
-webkit-transform: rotate(-90deg); /* Safari and Chrome */
display: block;
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
font-size: 30px;
left: -5px ;
margin-top: 25px;
position: absolute;
transform: rotate(-90deg); }

همونطور که می‌بینید، برای اینکه حاصل کارمون تو اینترنت اکسپلورر هم به‌درستی نمایش داده بشه از فیلتر چرخش BasicImage(توضیحات کامل) استفاده می‌کنیم. این فیلتر می‌تونه سه مقدار ۰، ۱، ۲ و ۳ رو دریافت کنه که به‌ترتیب چرخش‌هایی با زاویه‌های ۰، ۹۰، ۱۸۰ و ۲۷۰ درجه رو ایجاد می‌کنه، به صورت زیر:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

برای اینکه بهتر درک بکنید، از اینجا نمونه زنده‌ی این تکنیک رو ببینید. همین.

نکته مهم: متاسفانه به دلیل عدم ثبات و یکپارچگی در نوع پردازش متون در مرورگرهای مختلف، نوع نمایش این تکنیک در مرورگرهای مختلف کمی متفاوت خواهد بود. مثلا اینترنت اکسپلورر از تکنولوژی ClearType برای پردازش متون استفاده می‌کنه، به همین دلیل این چرخش باعث کمی دفرمه شدن متن موردنظر میشه.

الغرض؛ صاحاب‌وبلاگ «دیفال مستراح»، تو پست آخرش، اینطور می‌نویسه:

آقا دقیقاً کدوم احمقی، یعنی واقعاً کدوم احمق احمقی ممکنه واسه بچه اش از این ماشین اسباب بازیا که شبیه سمند نیرو انتظامیه بخره؟!

واقعا نمی‌دونم این آقا(خانم؟) خودش رو زده به کوچه علی‌چپ یا نه، واقعاً در جریان نیست. جناب «دیفال مستراح»؛ مردم ایران، فقط دور واطرافیان تو نیستن. کسی هم هست تو سیستان‌بلوچستان که پول نداره بده لگویِ صدهزار تومنی بخره، میده «از این ماشین اسباب‌بازیا که شبیه سمند نیرو انتظامیه» می‌خره. هستن آدم‌هایی توی همین تهرانِ پایتختِ پر زرق‌وبرق که اون‌قدر درآمد ندارن که برای بچه‌هاشون حتی همون «ماشین اسباب‌بازیا که شبیه سمند نیرو انتظامیه» رو بخرن و تفریح بچه‌هاشون، سنگ‌زدن به سگ‌وگربه و فوتبال‌بازی کردن با سنگ و پرسه‌زدن تو کوچه‌هاس. درک و فهم هم خوب‌چیزی‌ه، شعور هم خوب چیزی‌ه. نمی‌دونم واقعا، تو مغز تو و امثال تو چی می‌گذره اما اگه یه‌طوری شد و به این مطلب رسیدی و خوندیش، ازت عاجزانه خواهش می‌کنم کمی «بفهمی»، شاید برات سخت باشه، اما سعی‌ت رو بکن؛ خواستن، توانستن است.