CSS трюки с текстом, картинками и формами

Здравствуйте, сегодня предлагаю вам несколько CSS трюков: создадим красивый текст и добавим фон к нему (маска текста на CSS), нарисуем треугольник с помощью CSS, а также сделаем красивые формы для картинок и изображений с помощью онлайн-сервиса.

1. Добавим фон в текст (маска текста на CSS):

Для примера использована стандартная тема wordpress – Twenty Seventeen.

HTML код текста:

<div class="container">
 <!-- the element whose background we're going to clip -->
 <div class="clipped">
 <h20>ТЕКСТ</h20>
 </div> 
</div>

Здесь слово обернул в тег “h20”, чтобы после задать ему размер и толщину.

CSS код текста:

.clipped {
background: url(https://mnogoblog.ru/wp-content/uploads/2017/02/ai0.jpg) no-repeat center center;
background-size: cover;
background-size: 80%;
color: #fff;
text-align: center;
padding 2em;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

h20 {
font-size: 51pt;
font-weight: 800;
}

Здесь “background: url” – путь до фоновой картинки текста, “background-size:” – размер фоновой картинки в процентах.

Чтобы вставить данный css трюк на wordpress сайте, вы можете использовать текстовой виджет – для этого зайдите в админку wordpress, в левом меню выберите пункт “Внешний вид”, подпункт “Виджеты”, перетащите виджет “Текст” в сайдбар (Боковая колонка) и вставьте в него HTML текст.

2. Создаем красиво оформленный текст с помощью CSS:

Для примера использована стандартная тема wordpress – Twenty Seventeen.

HTML код текста:

<div class="container">
     <h2>ТЕКСТ</h2>
</div>

CSS код текста:

.container h2 {
 color: #555;
 font-family: 'Oswald', sans-serif;
 text-decoration: none;
 text-transform: uppercase;
 font-size: 100px;
 font-weight: 800;
 letter-spacing: -3px;
 line-height: 1;
 text-shadow: #EDEDED 3px 2px 0;
 position: relative;
}

Получим следующий текст:

Добавим к нему ещё CSS стили для прикрепления к тексту красивой тени:

.container h2:after {
 content:"текст";
 position: absolute;
 left: 5px;
 top: 5px;
 background-image: -webkit-linear-gradient(left top, transparent 0%, 
transparent 25%, #555 25%, #555 50%, transparent 50%, 
transparent 75%, #555 75%);
 background-size: 4px 4px;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 display: block;
 text-shadow: none;
 text-align: center;
}

Теперь наш текст будет выглядеть более эффектно:

3. Создадим треугольник с помощью CSS:

Иногда хочется вставить на сайте различные стрелки вверх, вниз, влево, вправо. Но для этого нам просто необходима такая фигура как треугольник, поэтому давайте создадим её с помощью CSS!

Для начала создадим обычный квадрат на CSS:

HTML код:

<div class="triangle"> 
</div>

CSS код:

width: 200px;
height: 200px;
border-left: solid 20px #f00;
border-right: solid 20px #ff0;
border-top: solid 20px #0f0;
border-bottom: solid 20px #00f;

И у нас получится следующая фигура:

Обратите внимание на границы сторон квадрата, которые встречаются под углом.

Теперь установим ширину и высоту квадрата равную нулю:

width: 0px;
height: 0px;
background: transparent;

Теперь у вас есть четыре различных треугольника, и всё, что вам нужно сделать, это выбрать требуемый треугольник, а для других треугольников установить прозрачный цвет, как то так:

border-left: solid 20px transparent;
border-right: solid 20px transparent;
border-top: solid 20px transparent;
border-bottom: solid 20px #00f;

И вот полный CSS код для треугольника, направленного вверх:

 .triangle {
width: 0;
height: 0;
background: transparent;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
border-top: solid 20px transparent;
border-bottom: solid 20px #00f;
}

4. Создадим красивые формы для картинок, изображений:

Большинство фотографий имеют квадратную или прямоугольную форму, так давайте же её немного изменим, чтобы сайт не казался скучным.

Давайте придадим картинке форму шестигранника.

Чтобы шестигранник был правильным придется взять квадратное изображение, например вот такое:

HTML код:

<svg class="clip-svg">
 <defs>
 <clipPath id="polygon-clip-hexagon" clipPathUnits="objectBoundingBox">
 <polygon points="0.5 0, 1 0.25, 1 0.75, 0.5 1, 0 0.75, 0 0.25" />
 </clipPath>
 </defs>
</svg>

<div class="polygon-each-img-wrap">
 <img src="https://mnogoblog.ru/wp-content/uploads/2017/02/csstruk8.jpg" class="polygon-clip-hexagon">
</div>

Здесь задан адрес картинки с моего сайт: src=”https://mnogoblog.ru/wp-content/uploads/2017/02/csstruk8.jpg” – меняете на свою и наслаждаетесь!

CSS код:

.polygon-clip-hexagon {
 -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 
0% 75%, 0% 25%);
 clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%,
 0% 25%);
 -webkit-clip-path: url("#polygon-clip-hexagon");
 clip-path: url("#polygon-clip-hexagon");
 }

В итоге получим следующую форму картинки: