Вопросы по CSS - [97] :: 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 128 129

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

Цитата:

Как раз нет, всё что есть, в примере.

как раз есть, изучайте основы
https://developer.mozilla.org/ru/docs/Web/CSS/box-sizing
в первом случае есть border-box, то есть высота учитывает пэддинги и тому подобное, во втором - нет, поэтому учитывается только высота содержимого.

Всего записей: 15687 | Зарегистр. 20-09-2014 | Отправлено: 00:09 18-06-2020 | Исправлено: Mavrikii, 00:10 18-06-2020

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii И всё же, не подскажете, почему в этом примере при мин.высоте 44px, высота гораздо больше? Где и что не так?
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 16:36 19-06-2020

Mavrikii

Platinum Member

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

WONDROUS
Что в написанном выше вам непонятно?
Я же ясно написал, что по умолчанию высота применяется к содержимому и не учитывает паддинг и толщину бордюров. Но если box-sizing: border-box, как в первом случае, то высота учитывает все.

Всего записей: 15687 | Зарегистр. 20-09-2014 | Отправлено: 17:58 19-06-2020

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Насколько я знаю, там в примере нет box-sizing.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 01:13 20-06-2020

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

Насколько я знаю, там в примере нет box-sizing

если вы считаете, что знаете и понимаете больше меня, то зачем спрашиваете?

Цитата:

html {
box-sizing: border-box; }

*,
*::before,
*::after {
box-sizing: inherit; }

Всего записей: 15687 | Зарегистр. 20-09-2014 | Отправлено: 01:17 20-06-2020

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо за ответ! Почему-то не нашёл там этого, поэтому и написал так.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 01:44 20-06-2020

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

Спасибо за ответ! Почему-то не нашёл там этого, поэтому и написал так.

смотреть в браузере, в первую очередь, нужно закладку Computed (уж не знаю как на русском) стили - там будет показано какие стили применяются к элементу фактически, а не прописаны где то в файлах. это сразу дает понимание что применяется в данный момент и где определено.
https://developer.chrome.com/devtools/docs/elements-styles#computed_style

Всего записей: 15687 | Зарегистр. 20-09-2014 | Отправлено: 01:46 20-06-2020

WONDROUS

Silver Member

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

Mavrikii
Не знаю, в какой теме лучше спрашивать, CSS или JS. Подскажите, пожалуйста, просто теоретически, почему при использовании AOS, в Chrome, Firefox, Opera всё работает нормально, а в Safari нет, элементы (с анимацией) открываются в нём без анимации (или она работает гораздо раньше). Проверить, как это всё работает в IE, нет возможности.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 02:11 25-06-2020

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS https://github.com/michalsnik/aos/issues?q=is%3Aissue+is%3Aopen+safari
	Всего записей: 15687 \| Зарегистр. 20-09-2014 \| Отправлено: 02:18 25-06-2020

WONDROUS

Silver Member

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

Mavrikii
Спасибо за ссылку! Сделал, всё работает, правда, через поисковик нашёл решение.

Ещё просьба подсказать, как сделать, чтобы при применении этого кода, набирался сам текста, а не весь "облако/пузырёк"? Хоть какой класс использовать, именно для текста не работает. Что не так делаю для этого примера (пример ещё прежний, не обновил)?

Код:

p {
animation: animated-text 2s steps(30,end) 1s 1 normal both;
}

/* text animation */

@keyframes animated-text{
from{width: 0;}
to{width: 100%;}
}

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 19:55 28-06-2020

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

набирался сам текста, а не весь "облако/пузырёк"

применять эффект к блоку с текстом, не имеющему стилей самого облака. или не понимаю о чем спрашиваете.

Всего записей: 15687 | Зарегистр. 20-09-2014 | Отправлено: 22:18 28-06-2020

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Хм, скорее всего что-то не так делал, но если для самого текста, то никак не получается, или нет анимации, или текста появляется ниже.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 22:53 28-06-2020

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS я ничего сказать не могу не видя. https://css-tricks.com/snippets/css/typewriter-effect/
	Всего записей: 15687 \| Зарегистр. 20-09-2014 \| Отправлено: 22:57 28-06-2020

WONDROUS

Silver Member

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

Mavrikii
Например, во что именно вставлять текст, если оболочка такого вида?

Код:

Из примера по той ссылке я делал ранее.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 02:02 29-06-2020

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

если оболочка такого вида?

да хотя бы в еще один div

Всего записей: 15687 | Зарегистр. 20-09-2014 | Отправлено: 02:16 29-06-2020

WONDROUS

Silver Member

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

Mavrikii
Так?

Код:

Тогда текст получается вне фонового "пузырька".

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 02:32 29-06-2020

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

Тогда текст получается вне фонового "пузырька".

я не хочу заниматься телепатией.

Всего записей: 15687 | Зарегистр. 20-09-2014 | Отправлено: 02:34 29-06-2020

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Вот какая ерунда получается.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 02:45 29-06-2020

Mavrikii

Platinum Member

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

WONDROUS
на самом деле div внутри p нельзя, можно было бы обойтись вообще без p, заменив его на div с нужными паддингами и марджинами.

поэтому бразуер разбил на два p и div между ними.

Цитата:

ну или сделать span блочным, вместо дива (что не лучшее решение)

Цитата:

https://stackoverflow.com/questions/10763780/putting-div-inside-p-is-adding-an-extra-p

Всего записей: 15687 | Зарегистр. 20-09-2014 | Отправлено: 02:47 29-06-2020 | Исправлено: Mavrikii, 02:49 29-06-2020

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо за ответ! Попробовал, всё равно не то, поэтому ну его нафиг, пусть будет просто статичный текст.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 03:02 29-06-2020

Страницы: 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 128 129

Компьютерный форум 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