ایجاد تصاویر گوشه گرد با CSS
در مثال بالا، border-radius دارایی تنظیم شده است 50%، که با ایجاد منحنی حاشیه نصف عرض یا ارتفاع تصویر، دایره ای ایجاد می کند.
اطلاعات
در اینجا یک مثال است:
افزودن گوشه‌های گرد به تصاویر می‌تواند ظاهری نرم‌تر و از نظر بصری جذاب‌تر به آنها بدهد.
@media screen and (max-width: 600px) {
.my-image {
max-width: 50%;
}
}
استفاده از Object-Fit برای حفظ نسبت ابعاد و جلوگیری از کوچک شدن
قرار دادن متن روی تصاویر می تواند طرح های بصری جذاب و آموزنده ای ایجاد کند. برای قرار دادن متن در بالای تصویر، می توانید از ترکیبی از موقعیت یابی CSS و z-index.
ماوس روی تصاویر می تواند تعامل و جذابیت بصری را برای وب سایت شما به ارمغان بیاورد. هنگامی که کاربر روی یک تصویر قرار می گیرد، یک افکت همپوشانی می تواند اعمال شود، مانند یک پوشش رنگی یا یک عنوان متن.
در کد بالا، an .image-container عنصر تصویر را می پیچد و an .overlay عنصر پوشش در ابتدا شفاف است (opacity: 0) و کل تصویر را پوشش می دهد. هنگام شناور شدن بر روی .image-container، .overlay کدورت به 1، پوشش رنگ را آشکار می کند.
تصاویر برگردان: ایجاد جلوه های آینه ای
با یک آزمایش رایگان میزبانی برنامه یا میزبانی پایگاه داده ما شروع کنید. برنامه های ما را بررسی کنید یا با فروشندگان صحبت کنید تا بهترین مناسب خود را پیدا کنید.
در کد بالا، تصویر به صورت افقی و عمودی منعکس می شود و در نتیجه یک افکت چرخشی مورب ایجاد می شود.
چرخش تصویر افقی، عمودی و مورب.
اطلاعات
این alt ویژگی مخفف متن جایگزین است و برای دسترسی ضروری است. این width و height. این ویژگی ها به شما امکان می دهد ابعاد تصویر را بر حسب پیکسل مشخص کنید.
گاهی اوقات، سناریوهایی وجود دارد که باید عرض و ارتفاع خاصی را برای یک تصویر مشخص کنید. در چنین مواردی می توانید از CSS استفاده کنید object-fit ویژگی برای کنترل نحوه رفتار تصویر در ابعاد مشخص شده.
برای چرخاندن عمودی یک تصویر، می توانید از ویژگی transform با استفاده از scaleY() تابع. این scaleY(-1) مقدار تصویر را در امتداد محور عمودی برمیگرداند.
هنگامی که شما تنظیم می کنید تفاوت وجود دارد width و max-width به 100%. استفاده كردن width: 100% اجازه می دهد تا تصویر کشیده یا کوچک شود تا متناسب با عرض ظرف باشد max-width: 100% اطمینان حاصل می کند که تصویر از اندازه اصلی خود تجاوز نمی کند، اما همچنان می تواند کوچک شود تا در ظرف قرار گیرد.
img {
display: block;
margin: 0 auto;
width: 700px;
}تصویر در مرکز. ایجاد تصاویر شفاف
CSS چندین تکنیک برای دستیابی به همپوشانی شناور ارائه می دهد. یک راه استفاده از انتقال CSS است. با انتقال ویژگی‌های خاص یک عنصر، می‌توانید به آرامی تغییرات را هنگام قرار دادن ماوس روی یک تصویر متحرک کنید.
استایل دادن به تصاویر با CSS دنیایی از امکانات خلاقانه را باز می کند و به شما امکان می دهد جذابیت بصری و تعامل صفحات وب خود را افزایش دهید.
<img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline">در اینجا مثالی از استفاده از ویژگی object-fit آورده شده است:
چرخاندن تصاویر با استفاده از CSS فایل تصویر واقعی را تغییر نمی دهد. فقط نحوه نمایش آن در صفحه وب را تغییر می دهد. اگر نیاز به چرخاندن دائمی تصویر دارید، باید آن را با استفاده از ابزار ویرایش ویرایش کنید.
افزودن فیلتر به تصاویر: افزایش جلوه های بصری
چه سبک تصویر CSS که بیشتر استفاده می کنید؟ کدام یک بیشتر به شما علاقه مند است؟ در نظرات به ما اطلاع دهید.
خلاصه
این object-fit ویژگی به شما امکان می دهد مشخص کنید که چگونه یک تصویر باید در داخل محفظه خود قرار گیرد و در عین حال نسبت ابعاد آن را حفظ کنید. می تواند چندین مقدار داشته باشد، مانند:
پر کردن: این مقدار تصویر را کشیده یا فشرده می‌کند تا دقیقاً با محفظه آن مطابقت داشته باشد و به طور بالقوه باعث ایجاد اعوجاج می‌شود.حاوی: این مقدار تصویر را به تناسب مقیاس می کند تا بدون برش در داخل ظرف قرار بگیرد و نسبت تصویر را حفظ کند. این تضمین می کند که کل تصویر در داخل ظرف قابل مشاهده است و به طور بالقوه منجر به ایجاد فضاهای خالی می شود.پوشش دادن: این مقدار تصویر را متناسب با پوشش محفظه در حالی که نسبت تصویر را حفظ می کند، مقیاس می کند. ممکن است منجر به برش لبه‌های تصویر برای اطمینان از پر شدن کل ظرف شود.هیچ یک: این مقدار هیچ گونه مقیاس یا برش اعمال نمی کند و تصویر اندازه اصلی خود را حفظ می کند و به طور بالقوه ظرف را سرریز می کند.
نتیجه برای سبک‌های مناسب شی محبوب. // HTML
<div class="image-container">
<img src="https://source.unsplash.com/tMHAmxLyzvA" 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;
}برای اینکه تصاویرتان کاملا دایره ای شوند، آن ها را ترکیب کنید border-radius دارایی با ابعاد عرض و ارتفاع مساوی.
وسط تصاویر با CSS
اما چگونه می توانید تصاویر خود را از معمولی به خارق العاده تبدیل کنید؟ اینجاست که سبک تصویر وارد می شود. با قدرت CSS در نوک انگشتان خود، می توانید خلاقیت خود را آزاد کنید و تصاویر خود را به عناصر بصری جذاب تبدیل کنید که تأثیری ماندگار بر جای می گذارند.
فیلترها می توانند ظاهر و احساس تصاویر را تغییر دهند و به شما امکان ایجاد جلوه های بصری منحصر به فرد را می دهند. CSS طیف وسیعی از ویژگی‌های فیلتر را ارائه می‌کند که می‌تواند روی تصاویر اعمال شود و شما را قادر می‌سازد روشنایی، کنتراست، اشباع و موارد دیگر را تنظیم کنید.
اعمال مقادیر خاص برای width و height ویژگی های یک تصویر می تواند منجر به پیامدهای نامطلوبی مانند فشرده سازی یا تحریف تصویر شود. این امر به ویژه در صورتی صادق است که ابعاد مشخص شده با نسبت تصویر اصلی مطابقت نداشته باشد.
تصویر فشرده شده img {
transform: scaleX(-1) scaleY(-1);
}شما همچنین می توانید استفاده کنید clip-path ویژگی. این به شما امکان می دهد یک مسیر برش برای یک عنصر تعریف کنید و اشکال منحصر به فردی ایجاد کنید.
همه برنامه ها، پایگاه های داده و سایت های وردپرس خود را آنلاین و زیر یک سقف دریافت کنید. پلت فرم ابری پر از ویژگی ها و عملکرد بالا ما شامل موارد زیر است:
راه اندازی و مدیریت آسان در داشبورد MyKinsta
پشتیبانی تخصصی 24 ساعته
بهترین سخت افزار و شبکه Google Cloud Platform که توسط Kubernetes برای حداکثر مقیاس پذیری ارائه شده است
یک ادغام Cloudflare در سطح سازمانی برای سرعت و امنیت
مخاطبان جهانی با حداکثر 35 مرکز داده و 300 PoP در سراسر جهان به دست می‌آیند
با استفاده از CSS می توانید به راحتی به این افکت برسید border-radius خاصیت به تصویر
img {
filter: brightness(150%);
}همانطور که به تصاویر با CSS استایل می دهید، همیشه دسترسی، پاسخگویی و عملکرد را در نظر داشته باشید.
در اینجا نمونه ای از یک تصویر برش داده شده در یک دایره آورده شده است:
برای چرخاندن افقی یک تصویر، می توانید از ویژگی transform با استفاده از scaleX() تابع. این scaleX(-1) مقدار تصویر را در امتداد محور افقی برمیگرداند.
<img src="https://kinsta.com/blog/css-image-styling/image.jpg" alt="Description of the image" width="300" height="200">img {
border-radius: 10px;
}img {
opacity: 0.5;
}کدورت تصویر در کد بالا بر روی تنظیم شده است 0.5، در نتیجه یک اثر نیمه شفاف ایجاد می شود. می توانید مقدار opacity را برای دستیابی به سطح شفافیت مطلوب تنظیم کنید.
تصویر شفاف قرار دادن متن روی تصاویر
img {
transform: scaleY(-1);
}چرخاندن مورب
برای دستیابی به جلوه بصری مورد نظر، می توانید با تنظیم روی همپوشانی را سفارشی کنید background-color و خواص کدورت
همه فیلترها در همه مرورگرها پشتیبانی نمی شوند. قبل از استفاده از یک فیلتر خاص، سازگاری آن را در مرورگرهای مختلف با استفاده از پلتفرم هایی مانند caniuse.com بررسی کنید.
ایجاد پوشش های شناور روی تصاویر
img {
border-radius: 50%;
width: 200px;
height: 200px;
}<img src="https://kinsta.com/blog/css-image-styling/image.jpg" alt="Description of the image">img {
transform: scaleX(-1);
}چرخش عمودی
تراز کردن تصاویر در مرکز ظرف آنها یک روش معمول در طراحی وب است. راه های زیادی برای رسیدن به این هدف وجود دارد؛ یکی تنظیم تصویر است display دارایی به block و اعمال کنید margin: 0 auto، که به صورت افقی تصویر را درون ظرف خود متمرکز می کند.
img {
max-width: 100%;
height: auto;
}تصویر واکنش گرا
اطلاعات
وقتی صحبت از طراحی وب به میان می آید، تصاویری جذاب می تواند تفاوت را ایجاد کند. تصاویر نقش مهمی در ایجاد یک تجربه کاربری جذاب و به یاد ماندنی دارند.
برای دستیابی به جلوه های بصری مورد نظر، می توانید با عملکردها و مقادیر مختلف فیلتر آزمایش کنید. ترکیب چندین فیلتر همچنین می تواند دگرگونی های پیچیده تری ایجاد کند.
شما می توانید با استفاده از max-width ویژگی، که حداکثر عرض یک تصویر را محدود می کند.
// HTML
<div class="image-container">
<img src="https://kinsta.com/blog/css-image-styling/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;
}همچنین می توانید یک URL مطلق یا یک مسیر فایل نسبی به تصویر ارائه دهید.
یک ارزش از 1 نشان دهنده کدورت کامل (کاملا قابل مشاهده)، در حالی که 0 نمایانگر شفافیت کامل (کاملاً نامرئی) است.
برای ایجاد یک افکت چرخش مورب، ترکیب کنید scaleX() و scaleY() توابع در transform ویژگی.
در این مقاله، ما به دنیای طراحی تصویر CSS می پردازیم و تکنیک ها و ویژگی های بسیاری را بررسی می کنیم که مهارت های طراحی وب شما را به ارتفاعات جدیدی ارتقا می دهند.
نحوه اضافه کردن تصاویر در HTML
اطلاعات
img {
clip-path: circle(50%);
width: 200px;
height: 200px;
}در کد بالا، image-container div به عنوان ظرف هم برای تصویر و هم برای پوشش متن عمل می کند. این position: relative ویژگی برای ایجاد یک زمینه موقعیت یابی به کانتینر اعمال می شود. این image-text سپس از class برای قرار دادن متن کاملاً در داخل ظرف استفاده می شود position: absolute، و top، left، و transform خواص به مرکز آن. این z-index ویژگی تضمین می کند که متن در بالای تصویر ظاهر می شود و شما می توانید ظاهر متن را با رنگ، اندازه قلم و وزن فونت سفارشی کنید.
قبل از اینکه بتوانید به یک تصویر استایل دهید، ابتدا آن را به سند HTML خود اضافه کنید. برای این کار می توانید از src مشخصه ای که URL یا مسیر فایل تصویری را که می خواهید نمایش دهید مشخص می کند.
چرخاندن تصاویر می تواند یک عنصر بصری جالب به طراحی وب شما اضافه کند. چه بخواهید یک افکت آینه ای ایجاد کنید یا یک تصویر را به صورت عمودی یا افقی برگردانید، CSS تکنیک های ساده ای را برای دستیابی به این افکت ارائه می دهد.
چرخش افقی
img {
height: 200px;
width: 700px;
}یک ظاهر طراحی واکنشگرا
می توانید استفاده کنید filter ویژگی اعمال فیلتر بر روی یک تصویر. این ویژگی عملکردهای فیلتر مختلفی را می پذیرد که هر کدام جنبه های مختلفی از تصویر را تغییر می دهند.
img {
width: 300px;
height: 300px;
object-fit: cover;
}برای جلوگیری از این مشکلات و حفظ نسبت های مناسب تصویر، اینجاست که یک ظاهر طراحی واکنشگرا وارد عمل می شود. یک ظاهر طراحی واکنشگرا تضمین می کند که تصاویر با اندازه های مختلف صفحه سازگار می شوند، که برای طراحی وب واکنش گرا بسیار مهم است.
همچنین می توانید از پرس و جوهای رسانه ای برای تغییر استایل تصویر بر اساس نقاط شکست دستگاه های مختلف استفاده کنید. پرس و جوهای رسانه ای به شما این امکان را می دهند که قوانین خاص CSS را بر اساس اندازه صفحه نمایش دستگاه، جهت گیری و سایر ویژگی ها اعمال کنید. مثلا:
این width و height برای دستیابی به یک تصویر کاملاً دایره‌ای، ویژگی‌ها باید ابعاد مساوی داشته باشند.
لطفاً توجه داشته باشید که مقادیر و استایل خاص موقعیت یابی را می توان مطابق با ترجیحات و نیازهای طراحی شما تنظیم کرد.
در کد بالا، brightness(150%) تابع به تصویر اعمال می شود. این باعث افزایش روشنایی تصویر می شود 150% .
توابع فیلتر رایج
می توانید از CSS برای اعمال افکت شفافیت مورد نظر برای شفاف سازی تصویر استفاده کنید. این opacity ویژگی به شما امکان می دهد سطح شفافیت یک عنصر از جمله تصاویر را کنترل کنید.
در اینجا نحوه ایجاد تصاویر دایره ای آمده است:
در اینجا برخی از توابع رایج فیلتر استفاده می شود:
brightness(): روشنایی تصویر را تنظیم می کند.contrast(): کنتراست تصویر را تغییر می دهد.saturate(): سطح اشباع تصویر را تغییر می دهد.grayscale(): تصویر را به مقیاس خاکستری تبدیل می کند.blur(): جلوه تاری را روی تصویر اعمال می کند.sepia(): افکت تون قهوه ای را روی تصویر اعمال می کند.
با این حال، به طور کلی توصیه می شود از استفاده از آن خودداری کنید width و height ویژگی ها مگر اینکه نیاز به حفظ ابعاد تصویر خاص داشته باشید. در عوض، می‌توانید از CSS برای کنترل اندازه تصویر استفاده کنید و انعطاف‌پذیری بیشتری را در طراحی واکنشگرا فراهم کنید.
در اینجا نحوه ایجاد تصاویر گوشه گرد آمده است:
در مثال بالا، مقدار را تنظیم کردیم border-radius دارایی به 10px. برای کنترل گردی گوشه ها، مقدار را به دلخواه خود تنظیم کنید. این مقدار می تواند از واحدهای دلخواه شما مانند rem، درصد و غیره استفاده کند.
تصویر گوشه گرد. ایجاد تصاویر دایره ای با CSS
