چگونه ایجاد کنیم: تصویر کوچک
- صفحه قبل تصویر مرکزی
- صفحه بعدی حاشیه تصویر
آموزش ایجاد تصویر کوچک.
تصویر کوچک
تصویر کوچک تصویر بزرگ‌تری را (با کلیک) نشان می‌دهد که معمولاً از طریق لبه‌های اطراف آن قابل تشخیص است:
چگونه تصویر کوچک ایجاد کنیم
از علامت <img> استفاده کنید و یک علامت <a> را در اطراف آن بپوشانید. از تنظیم لبه برای تنظیم سبک تصویر استفاده کنید و اثر حرکت را اضافه کنید:
<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>
<body>
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest">
</a>
</body>
صفحات مرتبط
آموزش‌ها:تصویر CSS
- صفحه قبل تصویر مرکزی
- صفحه بعدی حاشیه تصویر
