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

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

تصویر(1)

نحوه اضافه کردن تصاویر در HTML

قبل از اینکه بتوانید استایل CSS تصویر را درج نمایید، ابتدا باید آن را به فایل HTML خود اضافه کنید. برای این کار می توانید از تگ <img> استفاده نمایید. <img> یک تگ self-closing است (نیازی به بسته شدن ندارد) و دارای یک ویژگی src می باشد که آدرس URL یا مسیر فایل تصویری که می خواهید نمایش دهید را مشخص می کند:

<img src="image.jpg" alt="Description of the image">

همچنین می توانید از یک URL مطلق یا مسیر نسبی تصویر استفاده نمایید.

<img src="https://source.example.com/tMHAmxLyzvA" alt="Boston city skyline">

ویژگی alt به معنی "متن جایگزین" است و برای بهبود دسترسی پذیری ضروری می باشد. تگ <img> دو ویژگی اختیاری دیگر را نیز شامل می شود که width و height به معنی عرض و ارتفاع هستند. این ویژگی ها به شما امکان می دهند تا ابعاد تصویر را بر حسب پیکسل مشخص کنید.

<img src="image.jpg" alt="Description of the image" width="300" height="200">

با این حال، به طور کلی توصیه می شود از ویژگی های عرض و ارتفاع استفاده نکنید، مگر اینکه نیاز به حفظ ابعادی خاص برای تصویر داشته باشید. در مقابل، می‌توانید از استایل CSS تصویر برای کنترل اندازه آن استفاده کرده و انعطاف‌پذیری بیشتری را در طراحی واکنش‌گرا فراهم کنید.

img {
  height: 200px;
  width: 700px;
}

طراحی تصاویر واکنشگرا

اعمال مقادیر خاص برای ویژگی عرض و ارتفاع یک تصویر، می تواند منجر به عواقب نامطلوب مانند فشرده شدن و نمایش غیرطبیعی شود. این امر به ویژه در صورتی صادق است که ابعاد مشخص شده با نسبت طول و عرض تصویر اصلی مطابقت نداشته باشد.

تصویر(2)

برای جلوگیری از این مشکلات و حفظ نسبت های مناسب، می بایست از طراحی تصاویر واکنشگرا استفاده کنید. طراحی واکنشگرا تضمین می کند که تصاویر با نمایشگرهای مختلف سازگار خواهند بود. در طراحی وب واکنش گرا این مورد بسیار مهم است. شما می توانید با استفاده از ویژگی max-width که حداکثر عرض یک تصویر را محدود می کند، به این هدف برسید.

img {
  max-width: 100%;
  height: auto;
}

تصویر(3)

width:100٪ به تصویر می گوید که باید به اندازه عرض قاب خود گسترش یابد، حتی اگر این بدان معنا باشد که تصویر کشیده می شود. max-width:100٪ به تصویر می گوید که نباید از عرض قاب خود تجاوز کند اما می تواند کوچک تر شود.

همچنین می توانید از کوئری های media برای تغییر استایل CSS تصویر بر اساس نقاط شکست دستگاه های مختلف استفاده کنید. کوئری های media به شما این امکان را می دهند که قوانین خاص CSS را بر اساس اندازه صفحه نمایش دستگاه، جهت و سایر ویژگی ها اعمال کنید. به عنوان مثال:

@media screen and (max-width: 600px) {
  .my-image {
    max-width: 50%;
  }
}

استفاده از Object-Fit برای حفظ نسبت ابعاد و جلوگیری از کوچک شدن

گاهی اوقات شرایطی به وجود می آید که باید عرض و ارتفاع خاصی را برای یک تصویر مشخص کنید. در چنین مواردی، می توانید از Object-Fit و استایل CSS تصویر برای کنترل نحوه رفتار آن در ابعاد مشخص شده، استفاده نمایید.

ویژگی object-fit به شما این امکان را می دهد که مشخص کنید چگونه یک تصویر باید در داخل چارچوب خود قرار گیرد و در عین حال نسبت ابعاد را حفظ نماید. object-fit می تواند چندین مقدار داشته باشد، مانند:

• fill: این مقدار تصویر را کشیده یا فشرده می کند تا دقیقاً با container آن مطابقت داشته باشد. این کار ممکن است باعث تغییر ظاهر تصویر شود، به خصوص اگر نسبت ابعاد تصویر با نسبت ابعاد container مطابقت نداشته باشد.

نکته: container در css به عنوان یک ظرف برای سایر عناصر استفاده می شود تا محتوای صفحات وب را سازماندهی کند.

• contain: این مقدار به تصویر می گوید باید به گونه ای تغییر کند که در قاب قرار گیرد، بدون اینکه برش داده شود. این بدان معنا است که اگر تصویر نسبت خاصی داشته باشد، مانند 2:1، پس از تغییر مقیاس نیز این نسبت را حفظ می کند. اگر تصویر از اندازه قاب بزرگتر باشد، این مورد می تواند منجر به ایجاد فضای خالی در اطراف تصویر شود.
• cover: این مقدار به تصویر می گوید باید به گونه ای تغییر یابد که قاب را پر کند، حتی اگر نیاز باشد تصویر برش داده شود. اگر تصویر از اندازه قاب بزرگتر باشد، ممکن است منجر به برش لبه های تصویر گردد.
• none: این مقدار هیچ مقیاس یا برشی اعمال نمی کند و تصویر اندازه اصلی خود را حفظ می نماید و معمولا باعث بیرون رفتن تصویر از container می شود.

تصویر(4)

در ادامه مثالی از به کارگیری object-fit مناسب آورده شده است:

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

استفاده از استایل CSS تصویر برای ایجاد گوشه گرد

افزودن گوشه‌های گرد به تصاویر می‌تواند ظاهری نرم‌تر و از نظر بصری جذاب‌تر به آنها بدهد. با استفاده از استایل CSS تصویر، به راحتی می توانید با اعمال ویژگی border-radius به این نتیجه دست پیدا کنید. در اینجا نحوه ایجاد تصاویر با گوشه گرد، آمده است:

img {
  border-radius: 10px;
}

در مثال بالا، ویژگی border-radius برابر با 10px قرار داده شده است. برای کنترل گردی گوشه ها، می توانید مقدار آن را به دلخواه خود تنظیم کنید. این ویژگی می تواند از واحدهای دلخواه مانند rem، درصد و غیره استفاده کند.

تصویر(5)

نکته: واحد اندازه گیری rem مخفف root em است که اندازه یک عنصر را نسبت به اندازه فونت والد تعیین می کند. برای مثال، اگر اندازه فونت والد 16px باشد، مقدار 1rem برابر با 16px و مقدار 2rem  برابر با 32px خواهد بود.

ایجاد شکل دایره ای توسط استایل CSS تصویر

برای اینکه تصاویرتان کاملا دایره ای شوند، ویژگی border-radius را با ابعاد عرض و ارتفاع مساوی ترکیب کنید. استایل CSS تصویر دایره ای مانند نمونه زیر خواهد بود:

img {
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

در مثال بالا، ویژگی border-radius برابر با %50 تنظیم شده است که باعث می شود لبه ها به شکل دایره ای نمایش داده شوند. به عبارت دیگر، با تنظیم مقدار 50% برای ویژگی border-radius، لبه های تصویر به اندازه نصف عرض یا ارتفاع تصویر به سمت داخل کشیده می شوند.

نکته: برای دستیابی به یک تصویر کاملا دایره ای، عرض و ارتفاع باید دارای ابعاد یکسان باشند.

همچنین می توانید از ویژگی clip-path استفاده کنید. این ویژگی به شما اجازه می دهد شکل های منحصر به فردی را با برش دادن عناصر ایجاد نمایید. در اینجا نمونه ای از استایل CSS تصویر دایره ای آورده شده است:

img {
  clip-path: circle(50%);
  width: 200px;
  height: 200px;
}

استفاده از استایل CSS تصویر جهت وسط چین کردن

در طراحی وب، قرار دادن تصاویر در مرکز قاب یک عمل رایج است و راه های مختلفی برای انجام این کار وجود دارد. یکی از این راه ها استفاده از ویژگی display تصویر می باشد. می توانید display تصویر را روی block قرار دهید و مقدار margin: 0 auto را اعمال نمایید تا تصویر را به صورت افقی در مرکز قاب قرار دهد.

img {
  display: block;
  margin: 0 auto;
  width: 700px;
}

 

تصویر(6)

ایجاد تصاویر Transparent یا شفاف

می توانید از استایل CSS تصویر جهت اعمال افکت Transparent مورد نظر برای شفاف سازی استفاده کنید. ویژگی Opacity به شما امکان می دهد سطح شفافیت یک عنصر از جمله تصاویر را کنترل نمایید. مقدار 1 به این معنی است که تصویر به طور کامل قابل مشاهده می باشد و مقدار 0 آن را به طور کامل نامرئی خواهد کرد و تصویر قابل مشاهده نیست.

img {
  opacity: 0.5;
}

opacity تصویر در کد بالا روی 0.5 تنظیم شده است که در نتیجه یک افکت نیمه شفاف ایجاد می شود. می توانید مقدار opacity را برای دستیابی به سطح شفافیت مطلوب، تغییر دهید.

تصویر(7)

درج متن با استایل CSS تصویر

قرار دادن متن روی تصاویر می تواند یک طراحی جذاب و مفهومی ایجاد کند. برای قرار دادن متن روی تصویر، می‌توانید از ترکیب positioning یا "موقعیت‌ دهی" در CSS و z-index استفاده کنید. در ادامه یک مثال آورده شده است:

 // HTML
<div class="image-container">
  <img src="https://source.example.com/tMHAmxLyzvA" alt="Boston city skyline" >
  <div class="image-text">Welcome to example</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 به عنوان container برای تصویر و متن قرار داده شده است. ویژگی position: relative روی container اعمال می شود تا موقعیت متن را مشخص کند. سپس از کلاس image-text برای قرار دادن متن به طور مطلق در container و از ویژگی position: absolute و top، left، و transform برای قرار دادن آن در مرکز استفاده می شود. ویژگی z-index تضمین می کند که متن روی تصویر ظاهر خواهد شد. همچنین می توانید ظاهر متن را با رنگ، اندازه فونت و وزن، شخصی سازی کنید.

چرخاندن تصاویر: ایجاد جلوه های آینه ای

چرخاندن تصاویر می تواند یک ظاهر جذاب به طراحی شما اضافه کند. چه بخواهید یک افکت آینه ای ایجاد کنید یا تصویر را به صورت عمودی یا افقی بچرخانید، CSS تکنیک های ساده ای را برای دستیابی به این افکت ها ارائه می دهد.

چرخش افقی

برای چرخش افقی یک تصویر، می توانید از ویژگی transform با تابع ()scaleX استفاده کنید. استایل CSS تصویر با مقدار (scaleX(-1، آن را در امتداد محور افقی برمی گرداند.

img {
  transform: scaleX(-1);
}

چرخش عمودی

برای چرخاندن عمودی یک تصویر، می توانید از ویژگی transform با تابع ()scaleY استفاده کنید. مقدار (scaleY(-1 تصویر را در امتداد محور عمودی برمی گرداند.

img {
  transform: scaleY(-1);
}

چرخاندن مورب

برای ایجاد یک افکت چرخشی مورب، توابع ()scaleX و ()scaleY را در ویژگی transform ترکیب کنید.

img {

  transform: scaleX(-1) scaleY(-1);

}

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

تصویر(8)

افزودن فیلتر توسط استایل CSS تصویر جهت بهبود ظاهر

فیلترها می توانند ظاهر و حس تصاویر را تغییر دهند و به شما امکان ایجاد جلوه های بصری منحصر به فرد را خواهند داد. CSS طیف وسیعی از فیلترها را ارائه می‌کند که امکان تغییر روشنایی، کنتراست، اشباع رنگ ها و جزییات دیگر استایل CSS تصویر را فراهم می نماید.

می توانید از ویژگی filter برای اعمال فیلتر روی یک تصویر استفاده کنید. این ویژگی عملکردهای مختلفی را ارائه می کند که هر کدام جنبه های مختلفی از تصویر را تغییر می دهند.

img {
  filter: brightness(150%);
}

در کد بالا تابع brightness(150%) روی تصویر اعمال می شود. با این کار روشنایی تصویر تا 150 درصد افزایش می یابد.

در لیست زیر برخی از توابع رایج فیلتر ذکر شده است:

• ()brightness: روشنایی تصویر را تنظیم می کند.
• ()contrast: کنتراست تصویر را تغییر می دهد.
• ()saturate: سطح اشباع تصویر را تغییر می دهد.
• ()grayscale: تصویر را به grayscale تبدیل می نماید.
• ()blur: افکت blur را روی تصویر اعمال می کند.
• ()sepia: افکت قهوه‌ای مایل به زرد را روی تصویر اعمال خواهد کرد.

برای دستیابی به جلوه های بصری مورد نظر، می توانید عملکردها و مقادیر مختلف فیلتر را آزمایش کنید. ترکیب چندین فیلتر می تواند باعث ایجاد تصاویر پیچیده تری شود.

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

ایجاد پوشش های شناور روی تصاویر

حرکت ماوس روی تصاویر، می تواند تعامل و جذابیت بصری را برای وب سایت شما به ارمغان بیاورد. هنگامی که کاربر نشانگر ماوس خود را روی یک تصویر قرار می دهد، می‌توان افکت هایی مانند پوشش رنگی یا عنوان متنی را توسط استایل CSS تصویر اعمال کرد. CSS چندین تکنیک برای دستیابی به پوشش های شناور ارائه می دهد که یکی از آنها transition های CSS است. با تنظیم ویژگی‌های خاص روی یک عنصر، می‌توانید هنگام قرار دادن ماوس روی تصویر، آن را متحرک کنید.

// HTML
<div class="image-container">
  <img src="image.jpg" 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. به 1 تغییر می‌کند و پوشش رنگی را نمایش می‌دهد. برای دستیابی به ظاهر مورد نظر، می‌توانید پوشش را با تغییر گزینه background-color و opacity سفارشی کنید.

سخن پایانی

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