Рамочки с закруглёнными углами
25-05-2018 16:40
к комментариям - к полной версии
- понравилось!
Это цитата сообщения Юлия_Гурбер Оригинальное сообщение
Рамочки с закруглёнными углами
Хотите за 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 — цвет.
Подготовила Ю. Гурбер
Это цитата сообщения Юлия_Гурбер Оригинальное сообщение
Рамочки с закруглёнными углами
для текста? Например, такую:
Здесь будет ваш текст
-------
-------
Или такую:
Здесь будет ваш текст
-------
-------
Тогда смотрим и берём на заметку.
Здесь будет ваш текст
Точечная рамка:
Здесь будет ваш текст
Теперь в строку кода любой из рамок после одного из знаков (;) вписываем атрибуты:
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 — цвет.
Подготовила Ю. Гурбер
Вы сейчас не можете прокомментировать это сообщение.
Дневник Рамочки с закруглёнными углами | Nina_Shihova - Дневник Нины Зубаревой |
Лента друзей Nina_Shihova
/ Полная версия
Добавить в друзья
Страницы:
раньше»