Рамочки с закруглёнными углами
23-04-2016 15:30
к комментариям - к полной версии
- понравилось!
Это цитата сообщения Юлия_Гурбер Оригинальное сообщение
Хотите за 5 минут собрать простенькую, но очень симпатичную рамку
для текста? Например, такую:
Или такую:
Тогда смотрим и берём на заметку.
За основу возьмём самые простые стили — Выпуклая рамка:
Вот её код:
Точечная рамка:
Код:
Теперь в строку кода любой из рамок после одного из знаков (;) вписываем атрибуты:
background: #F8E1D8; — задаёт цвет фона записи.
Для наглядности я оставила код цвета, вы замените его на любой другой.
border-radius: 30px; — задаёт радиус закругления всех 4-х углов.
Вместо "30" подставите нужное вам число, например: 8px, 16px, 32px.
Можно усложнить, чтоб рамочка имела закруглённые верхний левый угол
и нижний правый (как у первой рамки вверху поста):
border-top-left-radius: 32px;
border-top-right-radius: 0;
border-bottom-right-radius: 32px;
border-bottom-left-radius: 0;
Можем поменять местами закруглённые углы:
border-top-left-radius: 0;
border-top-right-radius: 32px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 32px;
В рамках стоит заданный размер ширины, который тоже можно менять:
width: 500px; — подставляем любое значение.
А это подсказка по готовым обводкам-бордюрам, данным в кодах:
border: 8px ridge #33CCCC; — бордюр выпуклой рамки, где 8px — его толщина, а #33CCCC — цвет.
border: 5px dotted #CC33CC; — бордюр точечной рамки, где 5px — толщина, а #CC33CC — цвет.
Подготовила Ю. Гурбер
вверх^
к полной версии
понравилось!
в evernote
Это цитата сообщения Юлия_Гурбер Оригинальное сообщение
Рамочки с закруглёнными углами
для текста? Например, такую:
Здесь будет ваш текст
-------
-------
Или такую:
Здесь будет ваш текст
-------
-------
Тогда смотрим и берём на заметку.
Здесь будет ваш текст
Точечная рамка:
Здесь будет ваш текст
Теперь в строку кода любой из рамок после одного из знаков (;) вписываем атрибуты:
background: #F8E1D8; — задаёт цвет фона записи.
Для наглядности я оставила код цвета, вы замените его на любой другой.
border-radius: 30px; — задаёт радиус закругления всех 4-х углов.
Вместо "30" подставите нужное вам число, например: 8px, 16px, 32px.
Можно усложнить, чтоб рамочка имела закруглённые верхний левый угол
и нижний правый (как у первой рамки вверху поста):
border-top-left-radius: 32px;
border-top-right-radius: 0;
border-bottom-right-radius: 32px;
border-bottom-left-radius: 0;
Можем поменять местами закруглённые углы:
border-top-left-radius: 0;
border-top-right-radius: 32px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 32px;
В рамках стоит заданный размер ширины, который тоже можно менять:
width: 500px; — подставляем любое значение.
А это подсказка по готовым обводкам-бордюрам, данным в кодах:
border: 8px ridge #33CCCC; — бордюр выпуклой рамки, где 8px — его толщина, а #33CCCC — цвет.
border: 5px dotted #CC33CC; — бордюр точечной рамки, где 5px — толщина, а #CC33CC — цвет.
Подготовила Ю. Гурбер
чтобы в выпуклую рамку (она изначально в коде идёт без фона) вставить фон, надо, например, после этого значения padding:10px; или после этого width: 500px; (то есть после строчки, которая заканчивается ";") вставить вот эту — background: #CCFF99;
Попробуйте, там можно добавлять и фантазировать на своё усмотрение :-) Я просто решила не давать готовый код (так никого не научишь), а показать и объяснить, как просто собрать рамочку самому :-)
Если что-то будет непонятно, спрашивайте.
Комментарии (1):
Хитр_из_Дупла
29-06-2018-22:40
удалить
Мединилла, от всей души благодарю! попробовала сделать рамку, но споткнулась о то, что не знаю, как написать код... брожу по инету в поисках ответа и, кажется, нашла...)
Комментарии (1):
вверх^
Вы сейчас не можете прокомментировать это сообщение.
Дневник Рамочки с закруглёнными углами | Мединилла - Все для творчества |
Лента друзей Мединилла
/ Полная версия
Добавить в друзья
Страницы:
раньше»