• Авторизация
Дневник ЗИТТА Лента друзей - Дневник - Полная версия


Простые рамочки для текста с пояснениями 18-02-2026 11:05 к комментариям - к полной версии - понравилось!

Это цитата сообщения tomishka Оригинальное сообщение

Простые рамочки для текста с пояснениями


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







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






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






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






Здесь будет Ваш текст!





Рамочка с моими пояснениями


Здесь будет Ваш текст!





Рамочка двухслойная, с закруглениями.
WIDTH задает ширину рамки, у нас она составляет 700px.
BORDER-RADIUS задает радиус закругления, у нас одно значение 15px, значит закругление будет одинаковым по всем четырем углам. В основном border-radius понимает большинство браузеров, но в некоторых браузерах этот тег не работает, и нужно прописывать другие теги. Чтобы рамка отображалась правильно в любом браузере, желательно писать так:
-moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px;
BACKGROUND устанавливает заданный цвет фона, но через адрес фона. В первом случае это: https://img1.liveinternet.ru/images/attach/d/4/160/40/160040131_bs21.jpg, во втором случае адрес другой.
Атрибуты CELLPADDING и CELLSPACING управляют внутренними и внешними отступами, делая данные более читабельными и аккуратно оформленными. У нас оба атрибута с нулевыми значениями.
Чтобы содержимое рамочки (у нас это второй слой с будущим текстом) отодвинуть от внешней границы рамочки, в теге TD добавлено стилевое значение (padding:4px). Значение можно уменьшить, а можно увеличить. Вид окантовки внутреннего слоя будет при этом меняться, а значит и вид рамочки будет другим.
Перейдем к рассмотрению второго слоя. Я в качестве длины для второго слоя указала значение 692, так как раньше предусмотрела отступ слева и справа на 4px. Чаще просто повторяют начальное значение, рамка при этом становится на самом деле шире. Радиус закругления можно оставить прежним, можно увеличить, а можно уменьшить, вид, конечно, будет разным. Далее предусмотрена широкая тень черного цвета без размытия и без смещения по горизонтали и вертикали, но присутствует inset. Тень пойдет от края как бы внутрь, если inset убрать, то тень пойдет наружу. Можно вообще тень удалить или изменить ее цвет. Пока кончаю и привожу примеры, в которых вы можете менять все по своему желанию.
вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Простые рамочки для текста с пояснениями | ЗИТТА - А ведь ты тоже был когда-то «чайник»! Дневник Зитта | Лента друзей ЗИТТА / Полная версия Добавить в друзья Страницы: раньше»