Вопросы по CSS - [86] :: Web-программирование :: Компьютерный форум Ru.Board

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?

Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Модерирует : Cheery
Версия для печати • Подписаться • Добавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

Xrobak

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Ссылки для самостоятельного изучения:

Теория + примеры + учебники:
• W3School: CSS Tutorial
• MDN: Cascading Style Sheets (CSS)
• WebReference: Уроки по HTML и CSS
• htmlbook: Справочник CSS
• YouTube: Основы CSS/CSS3
• CSS для JavaScript-разработчика
• Основы CSS - каскадные таблицы стилей
• Статьи по основам CSS

Применение на практике:
• StackOverflow: 'CSS' Questions
• CSS-Tricks

Первый пост темы (до включения шапки).. ··· Текущий бэкап шапки..

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 18:46 27-10-2004 | Исправлено: TheBarmaley, 05:24 27-02-2019

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

добавить к этому классу ещё один after

что значит "еще один"? вы можете писать сколько угодно раз
.one::after {
...
}
.one::after {
...
}
- перечисляемые свойства будут дополняться, либо переписываться, если совпадают.

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 00:13 07-10-2019

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Mavrikii
Понятно, спасибо.
Уже есть такой код (для quote_box есть before и after):

Код:

.quote_box:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 8px;
background-color: rgba(255, 214, 133, 1.00);
border-radius: .5rem 0px 0px .5rem;
}

И думалось добавить этот:

Код:

.quote_box::after {
content: "";
position: absolute;
bottom: 0%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

Но тогда второй залезает в первый.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 01:03 07-10-2019 | Исправлено: WONDROUS, 01:03 07-10-2019

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS я же написал, второй переопределит то, что описывалось в первом.
	Всего записей: 15100 \| Зарегистр. 20-09-2014 \| Отправлено: 01:32 07-10-2019

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Mavrikii
Так вопрос в том, как добавить этот код так, чтобы результат был сразу после
.quote_box:

Код:

content: "";
position: absolute;
bottom: 0%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;

Это треугольник снизу и он нужен сразу после .quote_box, чтобы между ними промежутка не было. Это для этого.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 01:49 07-10-2019 | Исправлено: WONDROUS, 01:51 07-10-2019

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS
я не понимаю что вы хотите.
показал же, что эти две записи складываются, и идентичны тому, что не зачеркнуто, в одном ::after.
то есть нельзя сказать для одного left: 50%, а другого left: 0. будет использовано только одно.

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 02:45 07-10-2019

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Mavrikii
Я имею ввиду, что каким тогда образом добавить тот элемент (треугольник снизу) для цитаты? Пробовал другой класс добавлять, но ничего не получается.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 13:50 07-10-2019

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

Пробовал другой класс добавлять, но ничего не получается

и не получится, потому что after и before единственные для элемента.
но можно обернуть элемент во что то, и уже у родителя использовать after и before.

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 19:41 07-10-2019

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Mavrikii
Я пробовал так сделать. Или я не так это делал, или что, но чтобы треугольник был сразу после самой цитаты с фоном, сделать не получилось (или гораздо ниже, или его вообще не видно было). Единственное, наверное, делать что-то одно, оставлять полосу слева или делать треугольник.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 19:55 07-10-2019

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

Я пробовал так сделать.

значит плохо пробовали - родитель должен "обтекать" потомка.

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 19:57 07-10-2019

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Mavrikii
HTML:

Код:

<div class="message"><p class="quote_box">Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.</p><img class="left_ava" src="url"></div>

Правда, не лентяй и пробовал по-разному, появляется то на самом верху, то по низу аватарки, но так, как надо, никак. Куда и что писать?

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 20:18 07-10-2019

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS
div блочный, по умолчанию, не "обтекает". сменить ему display на тот же inline-block
более того, у p есть margin и padding, что отодвигает, ессно, границы элемента.
https://jsfiddle.net/fm7vb0Lh/

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 20:18 07-10-2019 | Исправлено: Mavrikii, 20:23 07-10-2019

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо за пример, но message::before (after) и quote_box::before (after) заняты уже.
	Всего записей: 3346 \| Зарегистр. 30-06-2002 \| Отправлено: 20:38 07-10-2019

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

message::before (after) и quote_box::before (after) заняты уже.

оберните еще раз, делов то. вас же никто не заставляет использовать уже существующие элементы - добавьте еще сколько нужно.

Код:

<div>
<div>
<div>
Здесь 3 элемента
</div>
</div>
</div>

к каждому можно применить after и before, которые будут совпадать по положению если нулевая рамка и нет лишних padding или margin

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 20:39 07-10-2019 | Исправлено: Mavrikii, 20:42 07-10-2019

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Добавил <div class="treu"> перед <p class="quote_box">, указав для него display-block и position-relative, заработало. Спасибо!
	Всего записей: 3346 \| Зарегистр. 30-06-2002 \| Отправлено: 01:13 08-10-2019 \| Исправлено: WONDROUS, 01:28 08-10-2019

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Я правильно понимаю, что при использовании transition нельзя применить infinite?
	Всего записей: 3346 \| Зарегистр. 30-06-2002 \| Отправлено: 08:45 12-10-2019

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS https://stackoverflow.com/questions/13309673/how-to-play-css3-transitions-in-a-loop https://codepen.io/NvIGA/pen/geRNmv
	Всего записей: 15100 \| Зарегистр. 20-09-2014 \| Отправлено: 08:51 12-10-2019 \| Исправлено: Mavrikii, 08:52 12-10-2019

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо за ссылки. Я имел ввиду, чтобы обойтись без animation и keyframes, только transition.
	Всего записей: 3346 \| Зарегистр. 30-06-2002 \| Отправлено: 09:18 12-10-2019

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Просьба подсказать по паре вопросов из этого примера.

Если использовать opacity: 0 для двигающейся картинке (при наведении курсора на текст), то в Safari почему-то меняется толщина текста названия автора. Если между цитатой и автором есть промежуток, то с текстом автора всё нормально. Почему и как исправить?

Если у блока с текстом отступ справа, то можно сделать, чтобы двигающаяся картинка пряталась сразу после правой границы этого блока?

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 23:24 12-10-2019

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

Почему и как исправить?

ну нет у нас сафари.. и, очевидно, это глюк его движка.

Цитата:

чтобы двигающаяся картинка пряталась сразу после правой границы этого блока?

поместите непрозрачный div поверх.

а еще проще - делать анимацию внутри .treu, с overflow: hidden;

Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 00:47 13-10-2019 | Исправлено: Mavrikii, 00:52 13-10-2019

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Mavrikii
То есть, оставить как есть? Потому что попробовал разные варианты, и с -webkit-filter, всё тот же эффект был. В остальных браузерах нормально.

Спасибо за совет, overflow: hidden работает отчасти. Если использовать картинку больше, то внизу проявляется margin-bottom:1rem, указанный для p.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 12:05 13-10-2019 | Исправлено: WONDROUS, 13:52 13-10-2019

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC