آموزش سایه دار کردن متن نوشته

یکی دیگر از امکانات CSS3 در استایل بندی تعریف کد سایه برای متون [Text-shadow] می باشد
این کد به ما اجازه می دهد افکتهای در خور توجهی به کلمات معمولی تایپ شده خود اضافه کنیم و در واقع کاربران را از این لحاظ از توسل به Photoshop یا رشته های پیچیده Javascriptبی نیاز می سازد
نمونه یک کد سده سایه برای متن:

< style  type=" text/css">
.text{text-shadow:1px 1px 2px #00f;color:#ff0;}
</style>

1.   اولین عدد فاصله سایه ما نسبت به محور xهاست هرچه به سمت پائین بیاییم عدد از صفر بالا می رود و هرچه بخواهیم بالا برویم از صفر کم می شود

2.عددد دوم فاصله تا محور Y هاست که به سمت راست زیاد و چپ کم می شود

3.عدد سوم قطر محوی سایه است

4.گزینه رنگ که به ازای مقدار داده شده رنگ سایه را معین می کند

در ادامه مطلب نمونه ها و کدها را ببینید

کد اضافه به علاقه مندی

کد اضافه کردن صفحه به علاقه مندیها

رایج ترین کدی که برای Favoritesوجود داره با توجه به اینکه شورت کاتی را به آدرسی مشخص در Documents and Settings ارسال می کند بر روی اغلب مرورگرها فعال نمی شود و کارایی ندارد

کد زیر در اغلب مرورگرها کار می کند و در معدودی غیر فعال است که در آنها کلید میانبر CTRL+D این کار را انجام می دهد :

بخش اول در Head و بخش دوم در محل مناسب کپی شود

<script type="text/javascript"> function bookmarksite(title,url){ if (window.sidebar) // firefox window.sidebar.addPanel(title, url, ""); else if(window.opera && window.print){ // opera var elem = document.createElement('a'); elem.setAttribute('href',url); elem.setAttribute('title',title); elem.setAttribute('rel','sidebar'); elem.click(); } else if(document.all)// ie window.external.AddFavorite(url, title); } </script>

<a href="javascript:bookmarksite('عنوان سایت شما', 'آدرس سایت شما')">Bookmark this site!</a>

فونت آنلاین بسم الله

C

به بسم الله فوق نگاه کنید این کلمه یک فونت است که وبلاگ  CSS3 با استفاده از قابلیت های جدید استایل بندی چندین نمونه آنرا در اختیار شما می گذارد

مهمترین خاصیت لینک به فونت این است که از هر سیستمی سایت شما خوانده شود این فونت را می بیند و نیازی به نصب فونت ندارد همینطور وزن پایین فونت و در مقابل کیفیت بالاتر تا حد دلخواه از دیگر مزیت ها هستند به نحوی که به اندازه ای که برای font-size مقدار تعریف کنید می توانید نوشته را بزرگ یا کوچک نمایید

نحوه قرار دادن در ادامه مطلب معادل کلیه حروف انگلیسی کوچک و بزرگ برای این فونت مشخص شده است  و دو پنجره کد یکی برای بخش HEAD – Style ویا صفحه CSS و دیگری در محل مورد نظر و در تگ های BODY

  ابتدا کد شماره یک را کپی و جاگذاری نمایید

کد نمایش برترین مطالب در بالای وبلاگ

کد رایگان از ایمان فخار    

نمونه متن نوشته شده شما شما می توانید از کدهای استایل بندی مختلف مانند برجسته کردن فونت (BOLD) یا تغییر فونت نوشته یا استفاده از خواص _ساب و ^ساپ و دیگر کدهای کاربردی HTML و CSS در این جعبه استفاده نمائید
همچنین شما می توانید عکس یا چارت gif شده را نیز در این جعبه نمایش  دهید برای مشاهده دستورالعمل ساخت به   اسلاید بعدی  در همین باکس یا ادامه مطلب در وبلاگ CSS3 مراجعه فرمائید

در صفحه اصلی مطلب در وبلاگ CSS3 سه پنجره کد مشاهده می کنید
محتوای اولین پنجره کدهای استایل بندی هستند عینا کپی و بدون نیاز به تغییز در بخش ویرایش قالب به قسمت <style type="text/css"> کپی نمایید و یا اگر از سایت با هاست شخصی استفاده می کنید فایل style.css را یافته و محتوا را در آن کپی نمایید
بخش دوم هم کدهای جاوا اسکریپت هستند که هم می توانند در داخل صفحه اصلی قالب بعد از نوشتن <script type="javascript/text"> و </script> کدها را در بین تگ اسکریپت قرار دهید و هم در صفحه ای جدا با پسوند js ذخیره کنید
بخش سوم کدهای داخل صفحه هستند که در جای مناسب برای نمایش قرار می گیرند شما می توانید رنگ پس زمینه و نوشته ها و متون را در این کد به راحتی تغییر دهید اما مراقب باشید ID و Class ها را تغییر ندهید

این نمونه یک متن آزمایشی است بر روی سومین اسلاید شما با تکثیر کلاس class="contentdiv" می توانید به تعداد دلخواه اسلاید داشته باشید
برای تغییر عرض در کدهای CSS در خط اول (sliderwrapper) گزینه Widht:600px; را به مقدار دلخواه تغییر دهید
و در خط دوم نیز این مقدار را با اختلاف ده پیکسل از اندازه ای که داده اید تغییر داده و در خط سوم نیز مجددا همان تغییر اولیه را انجام دهید

.sliderwrapper{....width:450px}
.sliderwrapper .contentdiv {.... width:440px*/ (450-10=440)}
.pagination {....width:450px}

دانلود منو ساز رایگان

امروز براتون لینک دانلود رایگان منو ساز CSS3 رو از سایت css3menu.com قرار دادم
با استفاده از این نرم افزار رایگان برای سایتتون منوهای دسترسی زیبا بسازید

جعبه سخنگو یا Hint

در این پست با استفاده از یکی از قابلیت های CSS3 یک جعبه هوشمند (Hint) طراحی می کنیم

دستور مورد استفاده  transition از دستورات حرکتی استایل بندیه و با پارامترهای موضوع (آیتم متحرک در شی) / مدت زمان انجام حرکت  / مسیر یا نوع حرکت / مدت زمان ایست قبل از حرکت /  تنظیم می شه در این جلبسه ما گزینه اختیارات رو بر روی all قرار داده مدت زمانی برای مکث تعریف نکردیم و به گزینه زمان انجام حرکت  اکتفا کردیم این دستور در نشانگرهای مختلف تعاریف گوناگونی داره :

ساخت یک کرکره نمایش مطلب (متحرک)

روش ساخت صفحه نمایش متن با افکت کرکره با استفاده از css3 و JavaScript
با کلیک بر روی گزینه ها ابتدا تفاوت های موجود را مشاهده نمایید 

به ادامه مطلب مراجعه فرمائید

آتشبازی

14 فایل آتشبازی برای بک گراند

دانلود در ادامه مطلب

آلبوم عکس ساده و جالب

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

به تصاویر زیر دقت کنید

اینجا می تونید توضیحات دلخواه برای عکس داشته باشید

اینجا می تونید توضیحات دلخواه برای عکس دوم داشته باشید

اینجا می تونید توضیحات دلخواه برای عکس سوم داشته باشید

اینجا می تونید توضیحات دلخواه برای عکس چهارم داشته باشید

آموزش در ادامه مطلب