یکی از ساده ترین روش ها برای زیباسازی وبسایت ها و وبلاگ ها ایجاد افکتی برای تصاویر موجود است. بعنوان مثال، تعریف افکتی که هنگام قرار گیری پوینتر (ماوس) بر روی عکس، ظاهر میشود.به عمل قرار گرفتن پوینتر بر روی اجزاء، اصطلاحا 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.) میباشد. لذا در صورتیکه به کد نویسی آشنایی ندارید، از طراح وبسایت خود بخواهید این چنین افکت هایی را به سایت شما بیفزاید.
نحوه استفاده در وبلاگ (پرشین بلاگ)
برای وبلاگ نویسان این کار به راحتی قابل اجرا است.
-
وارد قسمت کاربری شوید.
-
به صفحه کدهای اختصاصی (جاوا) بروید.
-
قطعه کد دلخواهتان را قرار دهید.
-
پس از ذخیره، با بارگذاری مجدد (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>