استایل دادن به عکس در css | استایل دهی پیشرفته و حرفه ای تصاویر

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

گرد کردن تصاویر

می توانید با استفاده از خاصیت border-radius تصاویر مورد نظرتان را گِرد یا بیضی شکل کنید و یا اینکه زاویه ی گوشه های تصویر را کاهش دهید.

به طور مثال در کد زیر زاویه ی گوشه ی تصویر را از حالت تیز اولیه خارج کرده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  border-radius: 8px;
}
</style>
</head>
<body>

<h2>Rounded Images</h2>
<p>Use the border-radius property to create rounded images:</p>

<img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" width="300" height="300">

</body>
</html>

مشاهده ی خروجی در JSBin

حالا اگر مقدار border-radius را افزایش بدهیم می توانیم تمام تصویر را گرد کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Rounded Images</h2>
<p>Use the border-radius property to create rounded images:</p>

<img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" width="300" height="300">

</body>
</html>

مشاهده ی خروجی در JSBin

تصاویر بندانگشتی (thumbnail)

برای ایجاد این نوع تصاویر (تصاویری بسیار کوچک) باید از خاصیت border استفاده کرد:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>

<h2>Thumbnail Image as Link</h2>
<p>Use the border property to create thumbnail images. Wrap an anchor around the image to use it as a link.</p>
<p>Hover over the image and click on it to see the effect.</p>

<a target="_blank" href="https://www.w3schools.com/css/paris.jpg">
  <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="width:150px">
</a>

</body>
</html>

مشاهده ی خروجی در JSBin

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

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

تصاویر واکنش گرا به صورت خودکار اندازه شان را تنظیم می کنند تا با اندازه ی عرض صفحه نمایش هماهنگ شوند. در مثال زیر با تعیین عرض صفحه روی 100 درصد و ارتفاع auto (خودکار) توانسته ایم تصویری واکنش گرا داشته باشیم:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>

<h2>Responsive Images</h2>
<p>Responsive images will automatically adjust to fit the size of the screen.</p>
<p>Resize the browser window to see the effect:</p>

<img src="https://www.w3schools.com/css/img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">

</body>
</html>

مشاهده ی خروجی در JSBin

ایجاد card

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

اگر بخواهیم بدون پلاگین ها card ایجاد کنیم، کمی کدنویسی بیشتری خواهیم داشت:

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:25px;}

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}
</style>
</head>
<body>

<h2>Responsive Polaroid Images / Cards</h2>

<div class="polaroid">
  <img src="https://www.w3schools.com/css/img_5terre.jpg" alt="5 Terre" style="width:100%">
  <div class="container">
  <p>Cinque Terre</p>
  </div>
</div>

<div class="polaroid">
  <img src="https://www.w3schools.com/css/lights600x400.jpg" alt="Norther Lights" style="width:100%">
  <div class="container">
  <p>Northern Lights</p>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

قرار دادن متن روی تصاویر

برای قرار دادن متن روی تصاویر نیازی به انجام روش های خاص نیست، بلکه باید مانند کد زیر عمل کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Center text in image:</p>

<div class="container">
  <img src="https://www.w3schools.com/css/img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="center">Centered</div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

البته مکان قرار گیری این متن (که در کد بالا در وسط بوده است) قابل تغییر می باشد. در مثال زیر متن را در قسمت بالا و سمت راست تصویر قرار داده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>

<div class="container">
  <img src="https://www.w3schools.com/css/img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topright">Top Right</div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

خصوصیت filter

خصوصیت filter در زبان CSS به ما اجازه ی استفاده از افکت های تصویری را می دهد (مانند تار کردن تصویر (blur) و تنظیم اشباع رنگی یا همان saturation). البته باید حواستان باشد که این خصوصیت در Internet Explorer و Edge 12 و Safari 5.1 و نسخه های قبل تر آن ها پشتیبانی نمی شود. ما چند مدل از این افکت های تصویری را پیاده سازی کرده ایم تا متوجه نحوه ی کارشان بشوید:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 33%;
  height: auto;
  float: left; 
  max-width: 235px;
}

.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>

<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>

<img src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که می بینید نحوه ی کار این خصوصیت نیازی به توضیح ندارد و کاملا واضح است؛ مثلا برای تار کردن تصویر از خاصیت filter و مقدار (blur(4px استفاده کرده ایم. این یعنی شدت تاری تصویر 4 پیکسل باشد که قابل تنظیم است، یا خصوصیت (contrast(180% می گوید کنتراست تصویر را به 180 درصد مقدار فعلی برسان و الی آخر ...

لایه ی دوم در hover

حتما در بسیاری از وب سایت ها، مخصوصا فروشگاه های اینترنتی، دیده اید که از حالت خاصی (Overlay) برای نمایش محصولاتشان استفاده می کنند. در این حالت زمانی که کاربر موس خود را روی تصویر محصول ببرد، اطلاعاتی از محصول روی تصویر نمایش داده می شوند و در واقع یک لایه ی دوم به ما نمایش داده می شود. به طور مثال اگر بخواهیم تصویر را زیر نوشته ی خود محو کنیم می توانیم اینطور بنویسیم:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Slide in Overlay from the Top</h2>

<div class="container">
  <img src="https://www.w3schools.com/css/img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

وارد صفحه ی خروجی این مثال شوید و موس خود را روی تصویر ببرید. متوجه پایین آمدن لایه ی دوم خواهید شد. البته ما می توانیم نحوه ی ورود لایه ی دوم (افکت transition) را تغییر بدهیم. در مثال بالا لایه ی دوم از بالا به پایین می آمد اما در مثال زیر کاری کرده ایم که از راست به چپ بیاید:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
  left: 0;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Slide in Overlay from the Right</h2>

<div class="container">
  <img src="https://www.w3schools.com/css/img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

البته می توانیم به جای نمایش اطلاعات، دکمه ای مانند دکمه ی خرید و ... را به کاربر نمایش دهیم:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
</style>
</head>
<body>

<h2>Fade in a Box</h2>

<div class="container">
  <img src="https://www.w3schools.com/css/img_avatar.png" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
  
</body>
</html>

مشاهده ی خروجی در JSBin

شما می توانید این دکمه را به سلیقه ی خود تزئین و تغییر کاربری دهید.

ایجاد افکت آیینه

می توان با استفاده از قابلیت transform و دادن مقدار (scaleX(-1 به آن یک افکت آیینه مانند ایجاد کرد، به طوری که با hover کردنِ کاربر، تصویر ما برعکس شود. به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
</style>
</head>
<body>

<h2>Flip an Image</h2>
<p>Move your mouse over the image.</p>

<img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

مشاهده ی خروجی در JSBin

ایجاد گالری تصاویر ساده

می توانید با استفاده از زبان CSS مجموعه ای از تصاویر را به طور منظم کنار هم قرار دهید تا به صورت یک گالری نمایش داده شود. همچنین با استفاده از media query ها می توانیم آن را واکنش گرا نیز بکنیم تا زیبایی کار دو چندان شود؛ از نظر واکنش گرایی کد زیر را به سه نقطه ی صفحات بزرگتر از 700 پیکسل، صفحات کوچک تر از 700 پیکسل و صفحات کوچک تر از 500 پیکسل تقسیم کرده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://www.w3schools.com/css/img_5terre.jpg">
      <img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://www.w3schools.com/css/img_forest.jpg">
      <img src="https://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://www.w3schools.com/css/img_lights.jpg">
      <img src="https://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://www.w3schools.com/css/img_mountains.jpg">
      <img src="https://www.w3schools.com/css/img_mountains.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">
  <p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

Modal های تصویری

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

<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}

@keyframes zoom {
  from {transform: scale(0.1)} 
  to {transform: scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>

<img id="myImg" src="https://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

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