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

Fadeout with CSS

View previous topic View next topic Go down

Fadeout with CSS

Post by meys@m on 17/8/2009, 4:23 am

سلام
در اکثر اوقات اگه بخواین زمینه اکتیوی داشته باشین (به صورتی که در مراحل مختلف تغییر کنه) باید از چند عکس و div های تو در تو استفاده کنید، اما با استفاده از css میشه راحت‌تر اینکارو انجام داد، اونم با یه عکس.
برای شروع استایل خودتون رو به صورت زیر تغییر بدین :
Code:
body                { background: #404143 url(bodytiletop.jpg) repeat-x; margin: 0; padding: 0;  }
h3 { color:#b400ff; direction: rtl;}
p { direction: rtl;}
b { color:#ff00e4;}

#page-section          { background: url(bodytilebottom-tall.jpg) repeat-x left bottom; }
#back        { background: url(back_1.png) fixed no-repeat 0px bottom; }
#inner-wrap        { width: 550px; background: white; margin: 0 auto; min-height: 2000px; direction: rtl; }

در هر قسمت شما :
رنگ زمینه را تغییر داده و یک عکس را برای زمینه انتخاب نموده‌اید : background: #404143 url(bodytiletop.jpg)
چینش عکس را مشخص نموده‌اید : repeat-x
چینش حروف را برای فارسی تغییر داده‌اید : direction: rtl
موقعیت‌ها را مشخص کرده‌اید : left bottom

حال html خود را به این صورت بازسازی نمائید :
Code:
<div id="page-section">
      <div id="back">
          <div id="inner-wrap">
ٰVRU UniverSity
</div>
</div>
</div>

یک نمونه آماده : http://meysam.anarnet.ir
دانلود سورس : http://dl1anarnet.persiangig.com/Programming/ThinkGeekFade.tar.gz

منبع : CSS-Tricks

_________________
If at first you don't succeed; call it version 1.0
avatar
meys@m
Admin

تعداد پستها : 131
اعتبار : 8
Join date : 2009-05-06
Age : 27

در مورد من
رشته تحصیلی: ریاضی کاربردی

http://anarnet.ir

Back to top Go down

Re: Fadeout with CSS

Post by meys@m on 17/8/2009, 4:45 am

یه نکته اساسی هم که آموزش داشا این بود که در عکس تنها دو رنگ به کار میرود :
۱ . رنگ بک اصلی
۲ . مشکی
اون رنگی که بک اصلی باهاش رنگ شده رو به عنوان نوشته‌ای که باید نمایش داده بشه انتخاب و سیاه رو برای اون نوشته‌ای که باید محو بشه.

_________________
If at first you don't succeed; call it version 1.0
avatar
meys@m
Admin

تعداد پستها : 131
اعتبار : 8
Join date : 2009-05-06
Age : 27

در مورد من
رشته تحصیلی: ریاضی کاربردی

http://anarnet.ir

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum