سبک تصاویر خود و استفاده از تصاویر در سبک
بسیاری از افراد از CSS برای تنظیم متن، تغییر فونت، رنگ، اندازه و موارد دیگر استفاده می کنند. اما یک چیز که اغلب مردم اغلب فراموش می کنند این است که شما می توانید از CSS با تصاویر نیز استفاده کنید.
تغییر تصویر خود را
CSS به شما اجازه می دهد تا تنظیم کنید که چگونه تصویر روی صفحه نمایش داده می شود. این میتواند برای حفظ صفحات شما مفید باشد. با تنظیم سبک در تمام تصاویر، یک نگاه استاندارد برای تصاویر خود ایجاد کنید. برخی از مواردی که می توانید انجام دهید:
- یک مرز یا طرح در اطراف تصاویر اضافه کنید
- مرز رنگی اطراف تصاویر مرتبط را حذف کنید
- تنظیم عرض و / یا ارتفاع تصاویر
- سایه سایه را اضافه کنید
- تصویر را بچرخانید
- تغییر سبک زمانی که تصویر در آن حرکت کرده است
دادن تصویر به یک مرز یک مکان عالی برای شروع است. اما شما باید بیش از حد مرز در نظر بگیرید - در مورد تمام لبه تصویر خود فکر کنید و همچنین حاشیه ها و پرده ها را نیز تنظیم کنید. یک تصویر با یک مرز نازک سیاه ظاهری زیبا دارد، اما اضافه کردن برخی از پانچ بین مرز و تصویر می تواند حتی بهتر باشد.
img {
مرز: 1px جامد سیاه و سفید؛
padding: 5px؛
}
ایده خوبی است که همیشه عکسهای غیر تزئینی را لینک کند ، در صورت امکان. اما هنگامی که انجام می دهید، به یاد داشته باشید که اکثر مرورگرها حاشیه رنگی را در اطراف تصویر اضافه می کنند. حتی اگر از کد بالا برای تغییر مرز استفاده کنید، لینک آن را لغو خواهد کرد، مگر اینکه مرز را در لینک نیز حذف یا تغییر دهید. برای انجام این کار باید از قانون child CSS برای حذف یا تغییر مرز اطراف تصاویر مرتبط استفاده کنید:
img> a {
مرز: هیچ؛
}
شما همچنین می توانید از CSS برای تغییر و یا تنظیم ارتفاع و عرض تصاویر خود استفاده کنید. در حالی که ایده عالی برای استفاده از مرورگر برای تنظیم اندازه تصاویر با توجه به سرعت دانلود است، آنها در تغییر اندازه تصاویر به طوری که آنها هنوز هم خوب نگاه کنید. و با CSS شما می توانید تصاویر خود را برای همه یک عرض یا ارتفاع استاندارد یا حتی ابعاد نسبت به ظرف را تنظیم کنید.
به یاد داشته باشید زمانی که تصاویر را تغییر اندازه دهید، برای بهترین نتایج، فقط باید یک بعد را اندازه گیری کنید - ارتفاع یا عرض. این باعث می شود که تصویر نسبت به ابعاد خود را حفظ کند و به نظر نمی رسد عجیب و غریب باشد. مقدار دیگر را به صورت خودکار تنظیم کنید یا آن را بیرون بگذارید تا مرورگر را حفظ کنید تا نسبت ابعاد آن هماهنگ باشد.
img {
عرض: 50٪؛
ارتفاع: خودکار؛
}
CSS3 راه حل این مشکل را با ویژگی های جدید object-fit و موقعیت شیء ارائه می دهد. با استفاده از این ویژگی ها می توانید ارتفاع و عرض تصویر دقیق و نحوه ی نسبت تصویر را تعیین کنید. این ممکن است جلوه های گلدوزی را در اطراف تصاویر خود ایجاد کند و یا برداشت کند تا تصویر را به اندازه مورد نیاز برساند.
در حالی که خواص CSS3 جسم جا و موقعیت شیء هنوز به طور گسترده ای پشتیبانی نشده است، دیگر ویژگی های CSS3 وجود دارد که در اکثر مرورگرهای مدرن پشتیبانی می شوند که می توانید از آنها برای تغییر تصاویر خود استفاده کنید. چیزهایی مانند سایه افتادن، گوشه های گرد و تحولات برای چرخاندن، چرخش و یا حرکت تصاویر شما همه در حال حاضر در بسیاری از مرورگرهای مدرن کار می کنند. پس از آن می توانید از تغییرات CSS استفاده کنید تا تصاویر پس از مرور، یا کلیک، و یا فقط پس از یک دوره زمانی تغییر پیدا کنند.
استفاده از تصاویر به عنوان پس زمینه
CSS باعث می شود که زمینه های فانتزی با تصاویر شما ایجاد شود.
شما می توانید پس زمینه برای کل صفحه یا فقط یک عنصر خاص اضافه کنید. آسان است برای ایجاد یک تصویر پس زمینه در صفحه با ویژگی تصویر زمینه:
بدن {
background-image: url (background.jpg)؛
}
انتخابگر بدن را به یک عنصر خاص در صفحه تغییر دهید تا پس زمینه را فقط بر روی یک عنصر قرار دهید.
یکی دیگر از چیزهای سرگرم کننده که می توانید با تصاویر انجام دهید، یک تصویر پس زمینه است که با بقیه صفحه پیمایش نمی کند - مانند یک علامت (watermark). شما فقط از نوع پسزمینه دلخواه استفاده کنید: ثابت؛ همراه با تصویر پس زمینه شما. گزینه های دیگر برای پس زمینه شما شامل ساخت کاشی آنها به صورت افقی یا عمودی با استفاده از ویژگی های تکراری پس زمینه است.
نوشتن پس زمینه تکرار: تکرار -x؛ به کاشی کردن تصویر به صورت افقی و پس زمینه تکرار کنید: تکرار Y؛ برای کاشی به صورت عمودی. و شما می توانید تصویر پس زمینه خود را با موقعیت پس زمینه موقعیت قرار دهید.
و CSS3 سبک های بیشتری برای زمینه های شما اضافه می کند. شما می توانید تصاویر خود را به اندازه هر پس زمینه اندازه بکشید یا تصویر پس زمینه را با اندازه پنجره اندازه گیری کنید . شما می توانید موقعیت را تغییر دهید و سپس تصویر پس زمینه را کپی کنید. اما یکی از بهترین چیزها در مورد CSS3 این است که شما هم اکنون می توانید چندین عکس پس زمینه را لایه ای ایجاد کنید تا جلوه های حتی پیچیده تر را ایجاد کنید.
HTML5 کمک می کند تا تصاویر سبک
عنصر FIGURE در HTML5 باید در اطراف هر تصویری قرار گیرد که بتواند درون سند تنها باشد. یک راه برای فکر کردن درباره آن این است که اگر تصویر در یک آپاندیس ظاهر شود، آنگاه باید در داخل عنصر FIGURE باشد. سپس می توانید از آن عنصر و عنصر FIGCAPTION برای اضافه کردن سبک به تصاویر خود استفاده کنید.