چند استایل بسیار زیبا برای تصاویر وردپرس

موضوع هک وردپرس امروز: با استایل دهی به تصاویر وردپرس، آنها را زنده کنید.

سلام دوستان؛

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

در مورد شیوه نامه یا همان فایل Style.css بار ها گفته ایم که استایل یا CSS به این دلیل به وجود آمده است تا بتواند HTML را زنده کرده و با آن طراحی HTML را کنترل کرد و عناصر بصری را پیاده کرد. حال به نظر شما نمیتوان از ویژگی های بسیار زیاد CSS به خصوص CSS3 برای زیبا سازی رسانه ها و عناصر در یک وبسایت وردپرسی استفاده کرد.

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

استایل اول:  سایه برای تصاویر

استفاده از این استایل بسیار ساده بوده و در واقع مهمترین استایل این آموزش نزی به شمار میرود شما میتوانید با استفاده از این استایل تمامی تصاویر وبسایت وردپرس خود را با یک استایل بسیار زیبا زنده کنید. نمونه این استایل را همانند زیر است:

img {


          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

[button color=”white” size=”medium” link=”https://xaankoo.com/melone/highlight-authors-comment/” icon=”fa-graduation-cap” target=”true”]   متمایز ساختن دیدگاه مدیریت از دیدگاه کاربران[/button]

استایل دوم: گرفتن حاشیه تصاویر و خم کردن گوشه ها

کد این نوع طراحی یا استایل برای تصویر به شکل زیر است:

img {
    border-radius: 8px;
}

خب اگر عدد 8 را در این استایل برای افزایش خمیدگی بالا ببریم تصویر به چه شکلی میشود؟ مثلا برای عدد 50 تصویر به شکل زیر میشود:

کد این استایل نیز به این صورت است:

img {
    border-radius: 50%;
}

استایل سوم: استفاده از یک قاب سفید برای تصاویر

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

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

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

منبع: ملون – ارائه دهنده: قالب بازی وردپرس – قالب شخصی وردپرس – قالب گرافیکی وردپرس