۲استایل بندی برای Tooltip ها
سلام به همگی.شرمنده خیلی وقته پست ندادم و البته علتش درگیری بیش از حد هستش.امروز هم با یه پست تقریبا متفاوت در خدمتتون هستم.
tooltips در واقعا یه نوع توضیح دهنده برای عناصر خاص در وب سایتهاتون هست.حالا این توضیح دهنده می تونه مثل مثال ما حالت ابتدایی و ساده داشته باشه و یا اینکه با ترکیب چند اسکریپ و افکت حالتی بسیار زیبا به خودش بگیره!
یه صفحه HTML ساده و سفید بسازید و این کد رو در قسمت BODY قرار بدید:
<a href="#" class="tooltip"><span>This is a pure CSS tooltip!</span>Tooltip 1</a>
این کد مربوط به قسمتی بود که ما میخوایم اون حالت رو ایجاد کنیم.یعنی در خود صفحه.بعدش فایل استایل .CSS رو باز می کنیم و این کدها رو بهش اضافه می کنیم و البته می تونیم در قسمت HEAD بین تگهای <stayle> قرار بدیمش.
.tooltip { position:relative; z-index:24; }
.tooltip span { display:none;}
.tooltip:hover {z-index:25;}
.tooltip:hover span {
display:block;
position:absolute;
width:120px;
top:25px;
left:20px;
background-color:#FCFBDC;
border:1px solid #333333;
padding:5px;
font-size:11px;
color:#333333;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
مثالی که در مطلب زده شده بسیار ابتدایی و ساه هست.و البته فارسی نشده! برای فارسی کردنش کافیه استایل اون رو راست به چپ و فونتش رو هم tahoma بذارید.برای کامل شدن این بحث فایل زیر رو بگیرید و محتویات Tooltip اولی رو با دومی نگاه کنید:
دانلود فایل نمونه - ۸ کیلو بایت!
اگر مقدار کمی هم در بحث استایل اطلاعات داشته باشید می تونید کارهای جالبی با این tooltip انجام بدید.منبع اولیه این مطلب هم این هست.
توضیحاتی در باب نویسنده
سعید هستم یکی از اولین های تک تمپ ، متخصص طراحی وردپرس و تا حدودی گرافیک کار البته خیلی وقته که فرصت نمی کنم مطلب جدید تو تک تمپ منتشر کنم!
آموزش اسرار فتوشاپ به زبان فارسی Photoshop Top Secret
پجموعه
پیش رو یکی از کامل ترین و برترین مجموعه های آموزشی در زمینه فتوشاپ می باشد که
ویژگی های خاص این مجموعه آن را از سایر مجموعه های مشابه متمایز نموده، از جمله
این ویژگی ها قرار گیری هفت دوره آموزشی Adobe Photoshop CS4 ارائه شده توسط برترین
اساتید جهان، به همراه مجموعه ای از نکات و ترفند های کار با فتوشاپ در قالب 101
پروژه آموزشی توسط آقای Mark Monciardini مدرس مجموعه Photoshop
Top Secret، همچنین مجموعه ی بی نظیر و نفیس Photoshop Top Secret با زبان و محیط
100% فارسی (با کمترین دستکاری)، در قالب 6 دی وی دی است، که در بسته بندی اختصاصی
تقدیم شما می گردد.
چگونه در فتوشاپ کمربند مشکی بگیریم؟!
مجموعه
ی نفیس Photoshop Top Secret همان گونه که از نامش می توان حدس زد مجموعه ای کم
نظیر، حرفه ای و محرمانه است که دریچه ای از اسرار و ترفند های ناشناخته فتوشاپ را
پیش روی کاربران قرار می دهد. اکثر کاربران نرم افزار فتوشاپ همیشه دنبال آموزش ها
و در واقع یادگیری نکات جدید و ترفندهایی از این نرم افزار در جهت ارتقاء سطح کار و
توانائی های خود بوده اند که این امر باعث بوجود آمدن هزاران سایت آموزشی در این
زمینه، کتب مختلف آموزش ترفند ها، نکته ها و نیز دوره های آموزشی با هزینه های بالا
تحت عناوینی مانند جلوه های ویژه فتوشاپ و ... شده است. این مجموعه گرانبها که شامل
بیش از 18 گیگابایت فیلم آموزش است در بردارنده ی آموزش های فوق العاده کاربردی و
حرفه ای در زمینه های مختلفی، مانند آموزش ترکیب تصاویر، ساخت پوستر های سینمایی و
تبلیغاتی، آموزش های حرفه ای روتوش تصاویر، ایجاد جلوهای ویژه، ساخت افکت های هیجان
انگیز و رویایی، کار با متون، گرافیک وب و
Digital Painting و موارد دیگری است. که در ادامه تصاویر آنها، به همراه توضیحات
اجمالی از هر آموزش قرار داده شده است.
"کمربند مشکی" در نرم افزار Adobe Photoshop را از آن خود کنید !
قیمت : 10000 تومان
تعداد: DVD 5
پروژه های آموزشی این مجموعه ی نفیس عبارتند از: :: پروژه های DVD 1
Movie Poster Design I : در این پروژه شما با هنر مونتاژ تصاویر افراد که یکی از بارزترین کارها در ساخت پوستر فیلم های سینمایی می باشد آشنا می شوید.
Movie Poster Design II : دراین آموزش شما مشاهده می کنید که چگونه با تصاویری بسیار ساده و فقط با اعمال افکت ها و ترکیب تصاویر با یکدیگر پوستر فیلم بسیار حرفه ایی طراحی می شود.
Movie Poster Credits : دراین پروژه شما با نحوه درست نمودن یک بلوک اعتباری یا همان Credit Block واقعی جهت پوستر فیلم های خود آشنا می شوید.
Dark Faces : در این پروژه شما با خلق تصویر ترسناک آشنا می شوید که کاربرد این افکت در شکل های دیگر در مجلات و تصاویر تبلیغاتی زیاد می باشد.
.
دستتون درد نکنه ! خیلی عالی بود ! واقعا خسته نباشید ! ;)
سلام وبسایت خیلی خوبی دارید
خوشحال می شم تبادل کنید
http://www.4malite.com
ارسال دیدگاه