CSS трюки з текстом, картинками та формами, MnogoBlog
як створити сайт на wordpress, налаштувати та оптимізувати wordpress
Здрастуйте, сьогодні пропоную вам кілька CSS трюків: створимо красивий текст і додамо фон до нього (маска тексту на CSS), намалюємо трикутник за допомогою CSS, а також зробимо красиві форми для картинок та зображень за допомогою онлайн-сервісу.
1. Додамо фон у текст (маска тексту на CSS):
Для прикладу використано стандартну тему wordpress – Twenty Seventeen.
HTML код тексту:
Тут слово обернув у тег "h20", щоб потім задати йому розмір та товщину.
Тут “background: url” – шлях до фонової картинки тексту, “background-size:” – розмір фонової картинки у відсотках.
Щоб вставити цей css трюк на wordpress сайті, ви можете використовувати текстовий віджет – для цього зайдіть в адмінку wordpress, у лівому меню виберіть пункт “Зовнішній вигляд”, підпункт “Віджети”, перетягніть віджет “Текст” у сайдбар (Бічна колонка) та вставте у нього HTML текст.
2. Створюємо красиво оформлений текст за допомогою CSS:
Для прикладу використано стандартну тему wordpress – Twenty Seventeen.
HTML код тексту:
Отримаємо наступний текст:
Додамо до нього ще CSS стилі для прикріплення до тексту красивої тіні:
Тепер наш текст виглядатиме ефектніше:
3. Створимо трикутник за допомогою CSS:
Іноді хочеться вставити на сайті різні стрілки вгору, вниз, ліворуч, праворуч. Але для цього нам просто необхідна така фігура як трикутник, тому створимо її за допомогою CSS!
Для початку створимо звичайний квадрат на CSS:
І в нас вийде наступна постать:
Зверніть увагу на межі сторін квадрата, які зустрічаються підкутом.
Тепер встановимо ширину та висоту квадрата рівну нулю:
Тепер у вас є чотири різних трикутники, і все, що вам потрібно зробити, це вибрати потрібний трикутник, а для інших трикутників встановити прозорий колір, як то так:
І ось повний CSS код для трикутника, спрямованого вгору:
4. Створимо красиві форми для картинок, зображень:
Більшість фотографій мають квадратну або прямокутну форму, так давайте її трохи змінимо, щоб сайт не здавався нудним.
Давайте надамо картинці форму шестигранника.
Щоб шестигранник був правильним доведеться взяти квадратне зображення, наприклад:
У результаті отримаємо таку форму картинки:
CSS властивість clip-path дозволяє створювати різні форми шестикутники, восьмикутники, зірки ...