قرار دادن بلوک نوشته بر روی عکس در طراحی وب

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

آنچه که در این آموزش میبینید استفاده از تکنیک های CSS3 برای تغییر نمایش Tag های Html است و مطمئنا ایده مناسبی برای امور مشابه است . در این مثال شما نوشته ای را بصورت بلوک نوشته , بر روی سمت چپ تصویر قرار میدهید البته با اندکی ست کردن مشخصه padding موقعیت آنرا بهتر میکنید .

شاید در وهله اول بنظر برسد که استفاده ظرفی مانند div  و ست کردن تصویر پس زمینه برای آن آسان ترین راه باشد اما در این مثال من به تصویر را دید محتوا نگاه میکنم و تگ div  را به عنوان ظرفی برای ایجاد یک positioning از نوع absolute بکار میبرم .

HTML مثال چنین چیزی خواهد شد :  

 

 

<div>
      <img src="images/sampleimagename.jpg"   />
      <h2>Websaz sample</h2>
</div>

 

 

 

با استفاده از کد css زیر موقعیت تصویر و متن داخل آنرا با استفاده از style ای برای تصویر و تگ h2 (که قرار است ظرف متن ما باشد ) تعیین میکنیم :

 


.image {
   position: relative;
   width: 100%; /* البته برای  IE 6 */
}
h2 {
   position: absolute; /*  برای قرار دادن در موقعیتی متناسب با نقطه شروع */
   top: 200px; /*  از بالا 200 پیکسل فاصله*/
   left: 0;  /*  از چپ 0 پیکسل فاصله*/
   width: 100%;
}

 

حال نوبت به ایجاد پس زمینه تیره زیر نوشته است که نیاز به تگی با خصوصیت inline در html دارد که خوب ما در این جا معمولا به سراغ span میرویم .کد css زیر این پس زمینه را با آلفای 0.7 ایجاد میکند :


h2 span {
   color: white;
   font: bold 24px/45px Helvetica, Sans-Serif;
   letter-spacing: -1px;
   background: rgb(0, 0, 0); /* رنگ پس زمینه در صورت ناهماهنگی مرورگر*/
   background: rgba(0, 0, 0, 0.7);
   padding: 10px;
}


آنچه که در اینجا خیلی مهم است توجه به ویژگی آلفا(تنظیم میزان شفافى المان) در تنظیمات رنگ در css3 است . فضای رنگ جدیدی که ارائه شده براحتی مشکل ما را برطرف میکند !

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

موفق باشید