Рамки оригинальные с помощью CSS. Урок Юлии Гурбер

Вторник, 01 Октября 2019 г. 20:37 + в цитатник

Цитата сообщения Юлия_Гурбер

Прочитать целиком В свой цитатник или сообщество!

Такие вот оригинальные рамки (блоки) увидела на одном сайте.

Здесь будет ваш текст

Ваша подпись

<center><div style="background: #8FD532; width: 590px; padding:14px; border-radius: 18px; box-shadow: inset 5px 6px 3px rgba(203,255,144,0.4), 3px 3px 4px rgba(0,0,0,0.6), -2px -2px 4px rgba(223,152,0,0.7), 0 0 20px 3px Yellow; font-family: Georgia; font-size: 21px; font-style: italic; color:#006600;">Здесь будет ваш текст<br /> <br /> <center><a data-cke-saved-href="ССЫЛКА НА ВАШ БЛОГ" href="ССЫЛКА НА ВАШ БЛОГ" target="_blank"><span style="font-size: 0.9em">Ваша подпись</span></a></center></div></center>

Здесь будет ваш текст

Ваша подпись

<center><div style="background: #87CEFA; width: 590px; border-radius: 18px; color: White; padding: 14px; border: 1px solid Yellow; text-align: center; font-family: Georgia; font-size: 23px; text-shadow: -4px 3px 8px rgba(0,0,0,0.6); box-shadow: 0 0 40px rgba(255,217,0,0.9); ">Здесь будет ваш текст<br /> <br /> <center><a data-cke-saved-href="ССЫЛКА НА ВАШ БЛОГ" href="ССЫЛКА НА ВАШ БЛОГ" target="_blank"><font face="Georgia" color="#ffffff" style="font-size:18px">Ваша подпись</font></a></center></div></center>

Думаю, в них целесообразно менять лишь несколько значений:

Верхняя рамка:

Меняем цвет фона background: #8FD532;.
Обозначение цвета: #8FD532, просто оставляем решётку #,
убираем 8FD532, и ставим свой цвет.
Обратили внимание на внутреннюю тень, создающую скос? Она
на самом деле жёлтого цвета, поэтому цвета для фона подбирайте
зелёно-голубого диапазона. Другие просто не подойдут.

Далее по-порядку стоит размер рамки width: 590px;, вместо 590 подставляем своё значение.

И, наконец, меняем вид шрифта, его размер и цвет. Это строка
font-family: Georgia; font-size: 21px; font-style: italic; color:#003366;,
где Georgia — вид шрифта, 21 — размер, #003366 — цвет.

Нижняя рамка:

Меняем цвет фона background: #87CEFA;. Тут можно указать
любой цвет, на котором будет хорошо смотреться белый шрифт.

Далее видим размер рамки width: 590px;, вместо 590 подставляем
своё значение.

У шрифта не трогаем цвет (он красивый белый с тенью), но можем поменять вид шрифта — font-family: Georgia; и его размер — font-size: 23px;

источник: http://olocoder.ru/CSS26.html

Подготовила Юлия Гурбер

Серия сообщений "Оформление дневника":
Часть 1 - Поиск от Google на своем блоге
Часть 2 - Всё про рейтинги дневников и отдельные домены
...
Часть 13 - Рамка вокруг изображения. CSS коды рамок. Уроки Юлии Гурбер
Часть 14 - Обводка внутри рамки (блока). Коды CSS рамочек.
Часть 15 - Рамки оригинальные с помощью CSS. Урок Юлии Гурбер
Часть 16 - Формулы и коды для оформления дневника
Часть 17 - Как сделать "Бегущий текст". Урок от Егоровой Татьяны
...
Часть 25 - Генератор снега и дождя
Часть 26 - Как разрезать картинку на 3 части для рамки в Pixlr редакторе. Онлайн фотошоп
Часть 27 - С наступающим Новым 2020 годом!