استایل دادن به تصاویر با CSS: افزایش جذابیت بصری با استایلینگ
به طراح وب خوش آمدید.
وقتی صحبت از طراحی وب به میان می آید، تصاویری جذاب می تواند تفاوت را ایجاد کند. تصاویر نقش مهمی در ایجاد یک تجربه کاربری جذاب و به یاد ماندنی دارند.
اما چگونه می توان تصاویر معمولی را به عکس های خارق العاده تبدیل کرد؟ اینجاست که استایل تصویر وارد می شود. با قدرت CSS در نوک انگشتان خود، می توانید خلاقیت خود را آزاد کنید و تصاویر را به تصاویری چشم نواز تبدیل کنید که تأثیر ماندگاری را به جا می گذارند.
در این مقاله، ما به دنیای CSS Image Styling شیرجه می‌زنیم و تکنیک‌ها و ویژگی‌های بسیاری را که مهارت‌های طراحی وب شما را به اوج می‌رساند، بررسی می‌کنیم.
نحوه اضافه کردن تصاویر به HTML
قبل از اینکه بتوانید به یک تصویر استایل دهید، ابتدا باید آن را به سند HTML خود اضافه کنید. برای این شما می توانید استفاده کنید <img> برچسب. <img> تگ یک تگ بسته شدنی است (به تگ بسته شدن نیاز ندارد). او دارد src مشخصه ای که آدرس اینترنتی یا مسیر فایل تصویری را که می خواهید نمایش دهید مشخص می کند.
<img src=" alt="Description of the image">شما همچنین می توانید یک URL مطلق یا یک مسیر نسبی برای یک فایل تصویری مشخص کنید.
<img src=" alt="Boston city skyline"> alt ویژگی متن جایگزین را نشان می دهد و برای دسترسی لازم است. <img> تگ همچنین دو ویژگی اختیاری را ارائه می دهد: width و height. این ویژگی ها به شما امکان می دهد ابعاد تصویر را بر حسب پیکسل مشخص کنید.
<img src=" alt="Description of the image" width="300" height="200">با این حال، به طور کلی توصیه می شود از استفاده خودداری کنید width و height اگر نیازی به پشتیبانی از اندازه های خاص تصویر ندارید، ویژگی ها را مشخص کنید. در عوض، می‌توانید از CSS برای کنترل اندازه تصویر استفاده کنید و انعطاف‌پذیری طراحی واکنش‌گرای بیشتری را ارائه دهید.
img {
height: 200px;
width: 700px;
}سبک تصویر واکنش گرا
استفاده از مقادیر خاص برای width و height ویژگی های تصویر می تواند منجر به اثرات نامطلوب مانند فشرده سازی یا اعوجاج تصویر شود. این امر به ویژه در صورتی صادق است که ابعاد مشخص شده با نسبت تصویر اصلی مطابقت نداشته باشد.
برای جلوگیری از این مشکلات و حفظ تناسب تصویر صحیح، سبک عکس واکنشگرا وارد عمل می شود. یک ظاهر طراحی واکنشگرا تضمین می کند که تصاویر با اندازه های مختلف صفحه سازگار می شوند، که برای طراحی وب واکنش گرا بسیار مهم است.
شما می توانید این را با max-width ویژگی که حداکثر عرض تصویر را محدود می کند.
img {
max-width: 100%;
height: auto;
}
همچنین می توانید از پرس و جوهای رسانه ای برای تغییر سبک تصویر بر اساس نقاط شکست دستگاه های مختلف استفاده کنید. پرس و جوهای رسانه ای به شما امکان می دهند قوانین خاص CSS را بر اساس اندازه صفحه نمایش دستگاه، جهت گیری و سایر ویژگی ها اعمال کنید. مثلا:
@media screen and (max-width: 600px) {
.my-image {
max-width: 50%;
}
}استفاده از Object-Fit برای حفظ نسبت ابعاد و جلوگیری از فشرده سازی
گاهی اوقات موقعیت هایی پیش می آید که باید عرض و ارتفاع خاصی را برای یک تصویر مشخص کنید. در چنین مواردی می توانید از CSS استفاده کنید object-fit ویژگی برای کنترل نحوه رفتار تصویر در ابعاد مشخص.
object-fit این ویژگی به شما اجازه می دهد تا مشخص کنید که چگونه تصویر باید در داخل محفظه خود قرار گیرد و در عین حال نسبت تصویر را حفظ کنید. می تواند چندین مقدار بگیرد، به عنوان مثال:
- پر کردن: این مقدار تصویر را کشیده یا کوچک می‌کند تا دقیقاً با ظرف آن مطابقت داشته باشد، که می‌تواند باعث اعوجاج شود.
- حاوی: این مقدار تصویر را متناسب با اندازه گیری می کند تا در ظرف بدون برش قرار گیرد و در عین حال نسبت تصویر را حفظ کند. این تضمین می کند که کل تصویر در داخل ظرف قابل مشاهده است، که می تواند منجر به فضاهای خالی شود.
- درب: این مقدار تصویر را متناسب با پوشش محفظه در حالی که نسبت تصویر را حفظ می کند، مقیاس می کند. این ممکن است باعث شود که لبه های تصویر برش داده شود تا کل ظرف را پر کند.
- هيچ كس: این مقدار برای مقیاس‌بندی یا برش اعمال نمی‌شود و تصویر اندازه اصلی خود را حفظ می‌کند که می‌تواند باعث سرریز شدن ظرف شود.
در اینجا مثالی از استفاده از ویژگی شیء مناسب آورده شده است:
img {
width: 300px;
height: 300px;
object-fit: cover;
}ایجاد تصاویر با گوشه های گرد با CSS
افزودن گوشه های گرد به تصاویر می تواند آنها را نرم تر و از نظر بصری جذاب تر کند.
با CSS می توانید به راحتی با اعمال به این افکت دست پیدا کنید border-radius ویژگی تصویر
در اینجا نحوه ایجاد تصاویر با گوشه های گرد آمده است:
img {
border-radius: 10px;
}در مثال بالا، ما تنظیم کرده ایم border-radius مالکیت از ۱۰px. مقدار را همانطور که دوست دارید تنظیم کنید تا گردی گوشه ها را کنترل کنید. این مقدار می تواند از واحدهای دلخواه شما مانند rem، درصد و غیره استفاده کند.
ایجاد تصاویر گرد با CSS
برای اینکه تصاویر خود را کاملا گرد نگه دارید، ترکیب کنید border-radius دارایی با ابعاد عرض و ارتفاع یکسان.
در اینجا نحوه ایجاد تصاویر گرد آمده است:
img {
border-radius: 50%;
width: 200px;
height: 200px;
}در مثال بالا border-radius ویژگی تنظیم شده به ۵۰%که با ایجاد منحنی حاشیه به نصف عرض یا ارتفاع تصویر، دایره ای ایجاد می کند.
همچنین می توانید استفاده کنید clip-path ویژگی. این به شما امکان می دهد یک مسیر برش برای یک عنصر تعریف کنید و اشکال منحصر به فردی ایجاد کنید.
در اینجا یک نمونه از یک تصویر برش داده شده در یک دایره آورده شده است:
img {
clip-path: circle(50%);
width: 200px;
height: 200px;
}مرکز کردن تصاویر با CSS
تراز کردن تصاویر در مرکز محفظه آنها یک روش معمول در طراحی وب است. راه های زیادی برای رسیدن به این هدف وجود دارد؛ تصویر یک مجموعه display مالکیت از block و اعمال کنید margin: 0 autoکه به صورت افقی تصویر را در داخل ظرف خود مرکز می کند.
img {
display: block;
margin: 0 auto;
width: 700px;
}
تصاویر شفاف ایجاد کنید
می توانید از CSS برای اعمال افکت شفافیت مورد نظر برای شفاف سازی تصویر استفاده کنید. opacity این ویژگی به شما امکان می دهد سطح شفافیت یک عنصر از جمله تصاویر را کنترل کنید.
معنی ۱ نشان دهنده کدورت کامل (کاملا قابل مشاهده)، در حالی که ۰ نمایانگر شفافیت کامل (کاملاً نامرئی) است.
img {
opacity: 0.5;
}کدورت تصویر در کد بالا بر روی تنظیم شده است ۰٫۵، در نتیجه یک اثر نیمه شفاف ایجاد می شود. می توانید مقدار opacity را برای دستیابی به سطح شفافیت مطلوب تنظیم کنید.
قرار دادن متن روی تصاویر
قرار دادن متن روی تصاویر می تواند طراحی جذاب و آموزنده ای از نظر بصری ایجاد کند. برای قرار دادن متن در بالای تصویر، می توانید از ترکیبی از موقعیت یابی CSS و z-index.
به عنوان مثال:
// HTML
<div class="image-container">
<img src=" alt="Boston city skyline" >
<div class="image-text">Welcome to Kinsta</div>
</div>
// CSS
.image-container {
position: relative;
}
.image-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
color: white;
font-size: 20px;
font-weight: bold;
}در کد بالا image-container div به عنوان محفظه ای برای پوشش تصویر و متن عمل می کند. position: relative ویژگی برای تنظیم زمینه موقعیت یابی به کانتینر اعمال می شود. image-text سپس از کلاس برای قرار دادن مطلق متن در داخل ظرف با استفاده می شود position: absoluteو top، leftو transform خواص به مرکز آن. z-index این ویژگی تضمین می کند که متن در بالای تصویر ظاهر می شود و شما می توانید ظاهر متن را با رنگ، اندازه قلم و وزن فونت سفارشی کنید.
لطفاً توجه داشته باشید که مقادیر و سبک موقعیت یابی خاصی را می توان با توجه به ترجیحات و الزامات طراحی شما سفارشی کرد.
تصاویر برگردان: ایجاد جلوه های آینه ای
چرخاندن تصاویر می تواند یک عنصر بصری جالب به طراحی وب شما اضافه کند. چه بخواهید یک افکت آینه ای ایجاد کنید یا یک تصویر را به صورت عمودی یا افقی برگردانید، CSS ترفندهای ساده ای برای دستیابی به این افکت ارائه می دهد.
انعکاس افقی
برای چرخاندن یک تصویر به صورت افقی، می توانید از ویژگی transform با یک پارامتر استفاده کنید scaleX() تابع. scaleX(-1) مقدار تصویر را در امتداد محور افقی برمیگرداند.
img {
transform: scaleX(-1);
}انعکاس عمودی
برای چرخاندن یک تصویر به صورت عمودی، می توانید از ویژگی transform با یک پارامتر استفاده کنید scaleY() تابع. scaleY(-1) مقدار تصویر را در امتداد محور عمودی برمیگرداند.
img {
transform: scaleY(-1);
}انعکاس مورب
برای ایجاد افکت چرخشی مورب، تراز کنید scaleX() و scaleY() توابع در داخل transform ویژگی.
img {
transform: scaleX(-1) scaleY(-1);
}در کد بالا، تصویر به صورت افقی و عمودی برگردانده می شود و در نتیجه یک افکت چرخشی مورب ایجاد می شود.
افزودن فیلتر به تصاویر: بهبود جلوه های بصری
فیلترها می توانند ظاهر تصاویر را تغییر دهند و به شما امکان ایجاد جلوه های بصری منحصر به فرد را می دهند. CSS تعدادی ویژگی فیلتر را ارائه می دهد که می تواند روی تصاویر اعمال شود و به شما امکان می دهد روشنایی، کنتراست، اشباع و موارد دیگر را تنظیم کنید.
شما می توانید استفاده کنید filter ویژگی اعمال فیلتر روی تصویر. این ویژگی عملکردهای فیلتر مختلفی را می پذیرد که هر کدام جنبه های مختلف تصویر را تغییر می دهند.
img {
filter: brightness(150%);
}در کد بالا brightness(150%) تابع روی تصویر اعمال می شود. این باعث افزایش روشنایی تصویر می شود ۱۵۰%.
توابع فیلتر رایج
در اینجا برخی از توابع رایج فیلتر استفاده می شود:
brightness(): روشنایی تصویر را تنظیم می کند.contrast(): کنتراست تصویر را تغییر دهید.saturate(): سطح اشباع تصویر را تغییر دهید.grayscale(): تصویر را به مقیاس خاکستری تبدیل می کند.blur(): یک افکت تاری روی تصویر اعمال کنید.sepia(): افکت تون قهوه ای را روی تصویر اعمال می کند.
برای دستیابی به جلوه های بصری دلخواه خود، می توانید با عملکردها و مقادیر مختلف فیلتر آزمایش کنید. ترکیب چندین فیلتر همچنین می تواند به تحولات پیچیده تری منجر شود.
روی تصاویر همپوشانی های شناور ایجاد کنید
قرار دادن مکان نما روی تصاویر می تواند سایت شما را تعاملی و از نظر بصری جالب کند. هنگامی که کاربر روی یک تصویر قرار می گیرد، یک جلوه همپوشانی، مانند یک پوشش رنگی یا یک عنوان متن، می تواند اعمال شود.
CSS چندین روش برای ایجاد همپوشانی شناور ارائه می دهد. یک راه استفاده از انتقال CSS است. با جابجایی ویژگی‌های خاصی از یک عنصر، می‌توانید به آرامی تغییرات را در حین حرکت روی تصویر متحرک کنید.
// HTML
<div class="image-container">
<img src=" alt="Description of the image">
<div class="overlay"></div>
</div>
// CSS
.image-container {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.image-container:hover .overlay {
opacity: 1;
}در کد بالا .image-container عنصر تصویر را می پیچد و .overlay عنصر پوشش در ابتدا شفاف است (opacity: 0) و کل تصویر را پوشش می دهد. هنگام اشاره به .image-container، .overlay کدورت می رود به ۱باز کردن پوشش رنگی
برای دستیابی به جلوه بصری مورد نظر، می توانید با تنظیم روکش را سفارشی کنید background-color و خواص کدورت
خلاصه
استایل دادن به تصاویر با CSS دنیایی از امکانات خلاقانه را برای افزایش جذابیت بصری و تعامل صفحات وب باز می کند.
هنگام طراحی تصاویر با CSS، دسترسی، پاسخگویی و عملکرد را همیشه در نظر داشته باشید.
چی از کدام سبک تصویر CSS بیشتر استفاده می کنید؟ کدام یک بیشتر به شما علاقه مند است؟ در نظرات به ما اطلاع دهید.
