Привіт мої дорогі читачі і гості блогу. Сьогодні буде багато картинок. Мова піде про те, як зробити в блозі зображення круглої (і не тільки) форми. Я пробувала це зробити в фотошопі, але так як дуже слабо їм володію, у мене це зайняло досить часу. Є онлайн-генератори по округлення зображень. Але про них ми поговоримо нижче.
Давайте почнемо. При написанні повідомлення завантажуємо звичайним способом потрібну картинку. У моєму випадку буде ось такий курча. Не забуваємо оптимізувати зображення (читаємо пост будемо оптимізувати картинки в блозі)
Тепер переходимо з режиму створити в режим HTML і просто додаємо одну властивість CSS- style = "border-radius: 100%;" після
У цьому випадку, у мене картинка вийшла ось такий овальної форми. Вся справа в тому, що висота і ширина завантаженого зображення були неоднакові.
Щоб зробити абсолютно круглої картинку, ми повинні задати однаковий розмір ширини і висоти завантаженого зображення. Можна прямо в режимі HTML. І потім вже додати style = "border-radius: 100%;"
Можна зробити трохи незвичайні форми зображень. На цей випадок я залишаю свого курчати в спокої і пробую на інших картинках. Ну ось щось таке вийшло.
Для такого виду ми також заходимо в режим HTML, але прописуємо ось такий код там, де повинна бути наша картінка-
Ну і ще одна картинка ось такої форми
Для цього такий код
Коли будете працювати з такими картинками деякі розміри border-radius: потрібно міняти відповідно до розмірів зображення.
Сайт російською мовою і там досить просто розібратися. Тому обійдуся без скріншота. У лівій стороні нам пропонують вибрати форму виділеної області, а в правій всілякі ефекти. Потім просто завантажуємо результат, і все.
Ось бачите. Якщо трохи пофантазувати і дещо доповнити або змінити, можна добитися абсолютно іншого ефекту наших картинок в блозі. А в цьому повідомленні ще цікаві ефекти для картинок. Пробуйте, це ж цікаво.
хочете оформити підписку на нові шпаргалки