Изображение
Цитата в стиле старой бумаги со старинным компасом.

Для реализации данной цитаты мы будем использовать CSS3, поэтому в старых браузерах правильного отображения, задуманного мною, не будет.

Можно пойти обычным путём и, как я писал в соседней теме, нарисовать кучу изображений в фотошопе, потом отредактировав шаблон bbcode.html, добавить необходимое количество блоков и к каждому из них, с помощью css, присвоить необходимые нам изображения. Мы не ищем лёгких путей:) Мы пойдём по пути реализации красивого отображения с помощью CSS3.

Для начала скачиваем архив с двумя изображениями:
quote.rar
26.74 КБ 345 скачиваний
Распаковываем и закачиваем на форум.


Стили на основе prosilver

Открываем тему вашего стиля, находим:

Код: Выделить всё

/* Quote block */
blockquote {
	background: #ebebeb none 6px 8px no-repeat;
	border: 1px solid #dbdbdb;
	font-size: 0.95em;
	margin: 0.5em 1px 0 25px;
	overflow: hidden;
	padding: 5px;
}
Меняем на:

Код: Выделить всё

/* Quote block */
blockquote {
	background: none no-repeat 0 0 transparent;
	border: 0px solid #dbdbdb;
	font-size: 0.95em;
	margin: 0.5em 1px 0 25px;
	overflow: hidden;
	padding: 55px 5px 10px 45px;
	position: relative;
}
Если вы хотите изменить размер шрифта, то, чтобы не возвращаться, измените значение у свойства: font-size: 0.95em;

Чуть ниже находим:

Код: Выделить всё

blockquote blockquote {
	/* Nested quotes */
	background-color: #bababa;
	font-size: 1em;
	margin: 0.5em 1px 0 15px;	
}

blockquote blockquote blockquote {
	/* Nested quotes */
	background-color: #e4e4e4;
}
Меняем на:

Код: Выделить всё

blockquote blockquote {
	/* Nested quotes */
	font-size: 1em;
	margin: 0.5em 1px 0 15px;	
}
Находим:

Код: Выделить всё

blockquote cite {
	/* Username/source of quoter */
	font-style: normal;
	font-weight: bold;
	margin-left: 20px;
	display: block;
	font-size: 0.9em;
}
К найденному, с новой строки, после font-size: 0.9em; добавляем:

Код: Выделить всё

	padding: 0px 25px 10px;
font-size: 0.9em; - отвечает за размер шрифта автора цитаты.


Далее находим:

Код: Выделить всё

blockquote.uncited {
	padding-top: 25px;
}
Меняем на:

Код: Выделить всё

blockquote.uncited div {
	padding-top: 35px;
}
После замены, после } с новой строки добавляем:

Код: Выделить всё

blockquote:before {
	content: '';
	left: 0;
	top: 0;
	background: url("путь до изображения/quote-compass.png") no-repeat 0 0 transparent;
	position: absolute;
	width: 75px;
	height: 100px;
	z-index: 1;
}

blockquote div {
	padding: 5px;
	border: 1px solid #703D07;
	position: relative;

	background-color: transparent;
	background-image: -webkit-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -moz-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -o-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -ms-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);

	-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);

	z-index: 0;
}

blockquote div:before {
	content: '';
	left: 0;
	top: 0;
	background: url("путь до изображения/quote-background.png") repeat 0 0 transparent;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
}

blockquote div:after {
	content: '';
	left: 30px;
	top: 8px;
	background: url("{T_THEME_PATH}/images/quote.gif") no-repeat 0 0 transparent;
	position: absolute;
	width: 15px;
	height: 12px;	
}

blockquote.uncited div:after {
	content: 'Цитата:';
	padding-left: 20px;
	line-height: 15px;
	font-weight: bold;
	font-size: 0.9em;
	font-style: normal;	
}
Теперь при использовании цитаты без автора, как и в стилях subsilver2, будет выводиться - Цитата:. Отвечает за это свойство content: в blockquote.uncited div:after {.


Далее находим и удаляем:

Код: Выделить всё

/* Quote block */
blockquote {
	background-color: #EBEADD;
	background-image: url("{T_THEME_PATH}/images/quote.gif");
	border-color:#DBDBCE;
}

blockquote blockquote {
	/* Nested quotes */
	background-color:#EFEED9;
}

blockquote blockquote blockquote {
	/* Nested quotes */
	background-color: #EBEADD;
}
Последний удалённый фрагмент, это изначальный цвет цитаты, цвет обводки и кавычки. Мы их поместили в другое место, поэтому они нам больше не нужны в этом месте. Два последних блока, это цветовое оформление цитаты в другой цитате, они нам тоже больше не понадобится.



Для стилей на основе subsilver2
В самый конец темы вашего стиля ставим:

Код: Выделить всё

.quotetitle {
	margin: 55px 5px 0 45px;
	padding: 4px 4px 4px 40px;
	position: relative;
	position: relative;
	border-color: #703D07;

	background-color: transparent;
	background-image: -webkit-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -moz-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -o-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -ms-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);

	-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 8px 10px rgba(208, 113, 13, 0.25), 0 -1px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 8px 10px rgba(208, 113, 13, 0.25), 0 -1px 2px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 8px 10px rgba(208, 113, 13, 0.25), 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.quotetitle:before {
	position: absolute;
	left: -45px;
	top: -60px;
	background: url("путь до изображения/quote-compass.png") no-repeat 0 0 transparent;
	content: '';
	width: 75px;
	height: 100px;
	z-index: 1;
}

.quotetitle:after {
	position: absolute;
	left: 0px;
	top: 0px;
	background: url("путь до изображения/quote-background.png") repeat 0 0 transparent;
	content: '';
	width: 100%;
	height: 27px;
	z-index: 1;
}

.quotecontent {
	margin: 0 5px 10px 45px;
	position: relative;
	overflow: hidden;
	border-color: #703D07;
	color: #2D1206;

	background-color: transparent;
	background-image: -webkit-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -moz-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -o-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -ms--radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);

	-webkit-box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);

	z-index: 0;
}

.quotecontent:before {
	position: absolute;
	right: 0px;
	bottom: 0px;
	background: url("путь до изображения/quote-background.png") repeat 0 0 transparent;
	content: '';
	width: 100%;
	height: 100%;
	z-index: -1;
}
Чтобы изменить размер шрифта автора темы. Находим:

Код: Выделить всё

/* BBCode
 ------------ */
.quotetitle, .attachtitle {
	margin: 10px 5px 0 5px;
	padding: 4px;
	border-width: 1px 1px 0 1px;
	border-style: solid;
	border-color: #A9B8C2;
	color: #333333;
	background-color: #A9B8C2;
	font-size: 0.85em;
	font-weight: bold;
}
font-size: 0.85em; - ставим нужное значение.

Чтобы изменить размер шрифта самой цитаты. Находим:

Код: Выделить всё

.quotecontent, .attachcontent {
	margin: 0 5px 10px 5px;
	padding: 5px;
	border-color: #A9B8C2;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.4em;
	font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
	background-color: #FAFAFA;
	color: #4B5C77;
}
font-size: 1em; - ставим нужное значение.


Стили находящиеся в самом низу файла со стилями используются в первую очередь, поэтому можно их не удалять.
Если изменения не видно, можно удалить cookies конференции, некоторые браузеры очень сильно к ним "цепляются".
Комментарии: 37

southklad 23 дек 2014, 19:03 Сообщение

CabinetAdmin писал(а):Поиграйтесь со значениями, поставьте -20 или -30, посмотрите как будет выглядеть.
Никаких изменений, она двигается внутри рамки
  • 0
Изображение

CabinetAdmin 23 дек 2014, 19:44 Сообщение

Вообще, вариантов вывести объект за пределы другого, достаточное количество, всё зависит от других элементов, элементов вокруг и тд...
Можно вывести добавив объекту position: relative; и нужную сторону left: -20px;. Можно дать родительскому элементу position: relative;, а тот, который нужно вывести за пределы position: absolute; и те же отступы, сверху, снизу, ширину и высоту объекта и тд... Можно с помощью того же margin-left: -20px;
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 23 дек 2014, 19:50 Сообщение

Вот мой стиль рамки

Код: Выделить всё

.ramka{
    background: url("/wp-content/themes/ElegantBlog/images/exclaimc.jpg") no-repeat -10px -10px;
    border-radius: 10px;
	box-shadow: 0 0 0 2px #84D79D;
	font-family: 'Kelly Slab';
	font-size: 18px;
	text-indent: 0px;
	padding: 10px 10px 10px 10px;
	margin: 20px auto;
	
}
  • 0
Изображение

CabinetAdmin 23 дек 2014, 20:20 Сообщение

Например:

Код: Выделить всё

.ramka {
	position: relative;
	border-radius: 10px;
	box-shadow: 0 0 0 2px #84D79D;
	font-family: 'Kelly Slab';
	font-size: 18px;
	text-indent: 0px;
	padding: 10px 10px 10px 10px;
	margin: 20px auto;
	
}
.ramka:before {
	position: absolute;
	content: '';
	background: url("/wp-content/themes/ElegantBlog/images/exclaimc.jpg") no-repeat 0 0;
	width: 10px;
	height: 10px;
	top: -10px;
	left: -10px;
}
Размеры изображения width: 10px; и height: 10px;.
Отступы top: -10px; и left: -10px;.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 23 дек 2014, 20:30 Сообщение

В итоге вот так

Изображение

Закрывает текст выше.
  • 0
Изображение

CabinetAdmin 23 дек 2014, 20:40 Сообщение

Ну правильно, такое огромное изображение, конечно оно чего нибудь закроет:) Можно его чуть уменьшить или добавить после background: url("/wp-content/themes/ElegantBlog/images/exclaimc.jpg") no-repeat 0 0; - background-size: 10px 10px;, уменьшение с помощью css.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 23 дек 2014, 20:51 Сообщение

Ладно, то что нужно ен получается все равно. Спасибо, обойдусь
  • 0
Изображение

CabinetAdmin 24 дек 2014, 16:16 Сообщение

А как должно быть? Можно ведь доработать, дать картинке прозрачность, уменьшить, задать для рамки нужные отступы и сделать как хочется. Только не совсем понятно какой нужен итог?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!