1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (3 оценок, среднее: 5,00 из 5)
Загрузка...

Шаблоны html+css: кнопка, таблица, список, цитата

Некоторые мои шаблоны на сохран, адаптировано к моему сайту, на других сайтах я писала немного другие цвета. Шаблоны html+css.

Список | таблица с шапкой (альтернатива)

Описание: на фоне полупрозрачная картинки. background-attachment: fixed; не работает в мобиле, кроме мозиллы. Цель — замена таблицы или списка.

Код

<div class="fraza-verh" style="margin-bottom: 5px; color: #fff;">текст</div>
<div class="cont-fix-back">
<div class="vaznoe2">текст текст текст текст текст</div>
<div class="vaznoe2">текст текст текст текст текст</div>
<div class="vaznoe2">текст текст текст текст текст</div>
<div class="vaznoe2">текст текст текст текст текст</div>
<div class="vaznoe2">текст текст текст текст текст</div>
<div class="vaznoe2">текст текст текст текст текст</div>
<div class="vaznoe2">текст текст текст текст текст</div>
</div>

Комментарии: Отступ margin-bottom: 5px, чтоб шапка не прилипала к пунктам, количество пунктов под картинку подгонять!

css

.vaznoe2{box-shadow: 0 0 10px rgba(70, 130, 180, 0.8), inset 0 0 20px rgba(135, 206, 255, 0.7);text-align: center; color: #0b86cd; font-size: 20px;margin: auto;padding: 15px;border-radius: 10px;border: 1px solid white;}
.cont-fix-back{background: url(https://psy-helga.ru/wp-content/uploads/2019/08/fon-samoler-letit.png)no-repeat left;background-attachment: fixed;background-size: cover;}
.fraza-verh{box-shadow: 0 0 20px rgba(70, 130, 180, 0.8),inset 0 0 20px rgba(135, 206, 255, 0.7);margin: auto;padding: 15px;border-radius: 10px;border: 1px solid white;text-align: center;background: linear-gradient(to bottom,#30ba8f,#ccd,#4682b4,#e0ffff);}

Результат

текст
текст текст текст текст текст
текст текст текст текст текст
текст текст текст текст текст
текст текст текст текст текст
текст текст текст текст текст
текст текст текст текст текст
текст текст текст текст текст

 

Отдельная запись в рамке: что-то важное

Описание: какая-то заметка однострочная. Вместо цитаты. Можно выделять числа и данные.

Код

<div class="fraza-odna" style="margin-bottom: 15px;">текст - <span style="color: #4682b4;">число</span> текст.</div>

css

.fraza-odna{box-shadow: 0 0 20px rgba(70, 130, 180, 0.8), inset 0 0 20px rgba(135, 206, 255, 0.7);margin: auto;padding: 15px;border-radius: 10px;border: 1px solid white;text-align: center;}

Результат

текст – число текст.

Кнопка с градиентом и плавным заполнением тенью при наведении

Описание: Кнопка поднимается вверх при наведении. Эффект движения тени вверх: box-shadow: inset. Блок для размещения кнопки textwidget1 сделан через флекс, есть второй вариант  — через блок, ширину и margin: auto.

Код

<div class="textwidget1"><a class="hover-kn">ТЕКСТ КНОПКИ</a></div>

css

Отцентровка:

.textwidget1 {
display: flex;
justify-content: center;
margin-top: 10px;}

Вид кнопки:

.hover-kn{background: linear-gradient(50deg,#fff, #E0FFFF, #87CEFA);
transition: all .4s;
box-shadow: inset 0 -5px 0 rgba(0, 191, 255, .3);
padding: 10px 20px;
border-radius: 10px;
border: 1px solid #119ff0;}
a.hover-kn:hover {
color: #119ff0;
background-color: rgba(0, 191, 255, .3);
box-shadow: inset 0 -60px 0 rgba(0, 191, 255, .3), 2px 2px 3px rgba(0,0,0,0.3);
transform: translateY(-7px);
top: 0;
left: 0%;
transition: all 300ms ease;cursor: pointer;}

Результат

 

Галерея фото в рамочках (полная мобильная адаптивность)

Комментарии 2

  • Как я могу поменять картинку что у вас с островом на свою в коде?

  • Свой урл написать.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Я согласен с политикой конфиденциальности

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.