info [@] afydwebdesign.ir

 

09032832415

کد زیباسازی وبلاگ (دانلود رایگان)

نوشته شده توسط
این مورد را ارزیابی کنید
(0 رای‌ها)

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

یکی از ساده ترین روش ها برای زیباسازی وبسایت ها و وبلاگ ها ایجاد افکتی برای تصاویر موجود است. بعنوان مثال، تعریف افکتی که هنگام قرار گیری پوینتر (ماوس) بر روی عکس، ظاهر میشود.به عمل قرار گرفتن پوینتر بر روی اجزاء، اصطلاحا Hover (شناور) گفته میشود و از آن میتوان در CSS برای اجزا یا المان های زیادی بهره گرفت.

و اما در اینجا چند افکت ساده و زیبا را به شما پیشنهاد میکنیم.

  • چرخش (Rotate)

  • وضوح {شفافیت} (Opacity)

  • گوشه های گرد یا نوک تیز (Border-Radius)

  • خط حاشیه (Border)

  • سایه (Box-Shadow)

  • فیلتر های رنگی (Filters)

زیباسازی وبسایت و وبلاگ
Rotate
زیباسازی وبسایت و وبلاگ
Opacity
زیباسازی وبسایت و وبلاگ
Radius

زیباسازی وبسایت و وبلاگ
Border
زیباسازی وبسایت و وبلاگ
Shadow
زیباسازی وبسایت و وبلاگ
Padding

زیباسازی وبسایت و وبلاگ
Grayscale
زیباسازی وبسایت و وبلاگ
Blur
زیباسازی وبسایت و وبلاگ
Brightness
زیباسازی وبسایت و وبلاگ
Contrast

زیباسازی وبسایت و وبلاگ
Hue Rotation
زیباسازی وبسایت و وبلاگ
Invert
زیباسازی وبسایت و وبلاگ
Saturate
زیباسازی وبسایت و وبلاگ
Sepia

این افکت های زیبا را میتوانید در وبسایت و وبلاگ خود به صورت کدهای CSS جایگذاری و استفاده کنید. نکته اینکه این افکت ها تنها بر روی عکسها اجرا خواهند شد، نه تصاویر پس زمینه (یعنی Background).

نحوه استفاده در وبسایت

لزوم اجرای این قطعه کدها، قرار گرفتن آنها در فایل استایل وبسایت شما (css.) میباشد. لذا در صورتیکه به کد نویسی آشنایی ندارید، از طراح وبسایت خود بخواهید این چنین افکت هایی را به سایت شما بیفزاید.

نحوه استفاده در وبلاگ (پرشین بلاگ)

برای وبلاگ نویسان این کار به راحتی قابل اجرا است.

  1. وارد قسمت کاربری شوید.

  2. به صفحه کدهای اختصاصی (جاوا) بروید.

  3. قطعه کد دلخواهتان را قرار دهید.

  4. پس از ذخیره، با بارگذاری مجدد (refresh) صفحه وبلاگتان میتوانید قطعه کد را تست کنید.

قطعه کد برای وبلاگ 

شما میتوانید کد های مورد نظرتان را از طریق لینک دانلود در آخر همین مطلب دانلود کنید.

در حالت عادی برای عکس ها اعمال میشود:

<style>
img{
کد مورد نظر شما
}
</style>

 در این حالت هنگام Hover بر روی عکس، افکت ظاهر میشود:

<style>
img:hover{
کد مورد نظر شما
}
</style>

 نمونه:

<style>
img:hover{
-webkit-filter: opacity(30%); /* Safari */
filter: opacity(30%); }
</style>

 نکات:

  • رنگ ها با علامت # (هشتگ) مشخص شده اند و شما برای تغییر رنگها میتوانید از نرم افزار فتوشاپ و یا از انتخاب رنگ از این سایت اقدام کنید.

  • مقادیری که با علامت % (درصد) مشخص شده اند، قابل تغییر هستند.

  • علامت deg به معنای درجه (degree) است و شما میتوانید از آن برای چرخاندن تصاویر استفاده کنید.

  • علامت px به معنای پیکسل (pixel) است و براساس این معیار، مقدارش تغییر میکند.

  • برای border ها میتوانید از سه کلمه ی thin، medium و thick استفاده کنید و یا اندازه خط را اب پیکسل (2px) وارد کنید.

  • توجه داشته باشید که دو فیلتر رنگی را نباید به صورت همزمان استفاده کنید. (فیلتر های رنگی: هشت تصویر آخر)

  • برای اینکه در هنگام hover افکت شما زیبا جلوه کند از تکه کد زیر استفاده کنید تا به صورت تاخیری و آرام، افکت ظاهر شود.
<style>
img{
transition: all 0.3s ease 0s;
}
</style>

اطلاعات تکميلي

  • دانلود رایگان:
    شما میتوانید فایل حاوی کد ها را به رایگان دانلود کنید.
    رمز فایل: afydwebdesign.ir
بارگیری پیوست‌ها:
آخرین ویرایش در جمعه, 27 اسفند 1395 ساعت 13:02
محتوای بیشتر در این بخش: « اهمیت CSS در طراحی سایت