Страница 15 из 15

Re: [3.1] [FAQ] Шаблон форума, CSS и html, где что "ковырять"

Добавлено: 07.11.2018 21:14
Aleksej2000
Такая ситуация: кнопки пагинации многостраничных тем на странице списка тем сделал в виде капли. Использовал код

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

width: 12px;
  height: 12px;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  border: 1px solid;
  transform: rotate(-45deg);
  margin-top: auto;
Но образовалась проблема: числа тоже повернуты на 45 градусов. Возможно ли transform: rotate использовать для шрифта, отдельно от контура, только повернуть числа внутри капли по часовой стрелке? Или отдельно контур и внутреннее содержимое не реализовать?

Re: [3.1] [FAQ] Шаблон форума, CSS и html, где что "ковырять"

Добавлено: 07.11.2018 21:43
Татьяна5
Можно применять свойства к разным элементам (те же кнопки - это li, а внутри у них есть ещё a)

Re: [3.1] [FAQ] Шаблон форума, CSS и html, где что "ковырять"

Добавлено: 07.11.2018 22:06
Aleksej2000
Татьяна5 писал(а): 07.11.2018 21:43 а внутри у них есть ещё a)
Да вроде я пробовал отделить элемент с а и к нему применить поворот в другую сторону, не получилось. Применяется поворот наружнего элемента. Видимо что-то не так делаю.

Re: [3.1] [FAQ] Шаблон форума, CSS и html, где что "ковырять"

Добавлено: 12.11.2018 3:25
Aleksej2000
Татьяна5 писал(а): 07.11.2018 21:43 Можно применять свойства к разным элементам (те же кнопки - это li, а внутри у них есть ещё a)
Подскажите, как повернуть цифры внутри капли?

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

.row .pagination {
	display: block;
	margin-top: 0;
	padding: 1px 0 1px 15px;
	font-size: 0.7em;
	background: none 0 50% no-repeat;
}

.row .pagination > ul {
	margin: 0;
}


.row .pagination li a, .row .pagination li span {
width: 12px;
  height: 12px;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  border: 1px solid;
  transform: rotate(-45deg);
  margin-top: auto;

}
Сейчас с указанным кодом выглядит вот так
Поворот капли.png

Re: [3.1] [FAQ] Шаблон форума, CSS и html, где что "ковырять"

Добавлено: 12.11.2018 5:05
Татьяна5
Перенести border и его трансформацию на li, а на a повернуть обратно. Либо добавлять ещё один уровень тегов в шаблоне

Re: [3.1] [FAQ] Шаблон форума, CSS и html, где что "ковырять"

Добавлено: 12.11.2018 8:53
Aleksej2000
Я вроде пробовал и так и этак, не получается. Татьяна5, а не могли бы Вы, пожалуйста, выше указанный код поправить, как нужно (предположительно), попробую его вставить. Если не получится, буду изучать, как добавить в шаблон еще уровень тегов :)

Re: [3.1] [FAQ] Шаблон форума, CSS и html, где что "ковырять"

Добавлено: 12.11.2018 9:05
Татьяна5
.row .pagination li a, .row .pagination li span заменить в нескольких местах на .row .pagination li (всё для border'а и фона)

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

.row .pagination li a, .row .pagination li span {
    transform: rotate(45deg);
    display: block;
}
И работать дальше над размерами, выравниванием, и т.д.

Re: [3.1] [FAQ] Шаблон форума, CSS и html, где что "ковырять"

Добавлено: 12.11.2018 10:12
Aleksej2000
Татьяна5 писал(а): 12.11.2018 9:05 .row .pagination li a, .row .pagination li span заменить в нескольких местах на .row .pagination li (всё для border'а и фона)
Не, это выше моих познаний :D
Я пробовал отдельно .row .pagination li и все остальные элементы поворачивать по часовой и против часовой за счет знака перед 45deg. Увы, цифры крутятся вместе со всем. Отдельно внутренний элемент с цифрами не крутится почему-то. Поэтому и просил дать готовый код, где что подправить. Моих познаний не хватает пока что :)

Re: [3.1] [FAQ] Шаблон форума, CSS и html, где что "ковырять"

Добавлено: 12.11.2018 10:35
Татьяна5
В моём примере крутится отдельно (переименовывала через отладчик)

Re: [3.1] [FAQ] Шаблон форума, CSS и html, где что "ковырять"

Добавлено: 13.11.2018 1:17
Aleksej2000
Ну видимо, я что-то не так делаю, не получается. Ладно, как есть, так и пусть будет, ибо это мне "не по зубам".