Вопросы по CSS - [102] :: 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://jsfiddle.net/te08bkvL/

необязательно оборачивать саму кнопку
https://jsfiddle.net/5pac8ht4/

Цитата:

Хоть у ссылки и свой id есть

ну есть и что? поместить можно внутрь что угодно, с помощью того же js

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 23:12 22-08-2020 | Исправлено: Mavrikii, 23:12 22-08-2020

Silver Member

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

Mavrikii
Там же не button как таковой, а div. И если я правильно понял, то как не располагай или оборачивай, или нет, но если задать для ссылки (а) абсолют, то он всё равно будет влиять на другие ссылки (а).

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 12:43 23-08-2020 | Исправлено: WONDROUS, 17:25 23-08-2020

Valivan77777 Advanced Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору .
	Всего записей: 1546 \| Зарегистр. 11-12-2019 \| Отправлено: 20:43 31-08-2020 \| Исправлено: Valivan77777, 20:59 31-08-2020

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Почему-то одинаковое значение filter: drop-shadow по-разному выглядит в Хром и Сафари. В Хром более размыто, чем в Сафари. Это опять особенности браузеров?
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 19:21 14-09-2020 \| Исправлено: WONDROUS, 19:22 14-09-2020

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

Это опять особенности браузеров?

да

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:16 14-09-2020

Silver Member

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

Просьба подсказать, как правильно сделать, чтобы всё нормально работало. В данном примере для обоих маленьких картинок с цифрой используется поворот на 360 градусов. Но если картинка по центру, то поворот работает не так, как надо. Как можно исправить?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 19:06 16-09-2020 | Исправлено: WONDROUS, 19:07 16-09-2020

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
	Всего записей: 15684 \| Зарегистр. 20-09-2014 \| Отправлено: 20:37 16-09-2020

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

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

но не работает, всё равно вверх лезет.

я не смотрел тогда в чем дело, описал типичную возможную проблему.
ситуация здесь в том, что по ховеру переписывается transform: translate(0px, 50%);
для ховера нужно прописывать все трансформы, иначе вы убираете этот транслейт, вот и рисует элемент в изначальном положении.

Код:

transform: translate(0,50%) rotate(360deg);

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:14 16-09-2020

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

Silver Member

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

Mavrikii

Код:

transform: translate(0,50%) rotate(360deg);

В Хром и Опера работает, в Сафари 11 (проверить старшие версии нет возможности) нет, картинка просто на месте стоит. Поискал в инете, ничего похожего не нашёл и -webkit- не помогает.

Добавлено:
И ещё в дополнение, тоже просьба подсказать, как сюда правильно добавить translate(-50%, 50%), чтобы по центру оставалось?

Код:

@keyframes move {
0% { transform: translateY(0px); }
50% { transform: translateY(10px); }
100% { transform: translateY(0px); }
}

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 00:57 17-09-2020 | Исправлено: WONDROUS, 02:17 17-09-2020

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

чтобы по центру оставалось?

никак, потому что translateY уже меняет компоненту y от translate.
можно попробовать с calc, но сами.

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Со второй частью вопроса понятно, а с первой частью вопроса, до Добавлено, можете подсказать?
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 03:10 17-09-2020

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

можете подсказать?

у меня нет сафари, поэтому нет.

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

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

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

и в Фокс версии 53 оно тоже не работает

ссылку

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 03:42 17-09-2020 | Исправлено: Mavrikii, 03:42 17-09-2020

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Ссылка. И ещё, в Сафари почему-то работает наполовину, то есть вращается максимум до 180deg.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 13:46 17-09-2020 \| Исправлено: WONDROUS, 18:52 17-09-2020

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

в Фокс версии 53 оно тоже не работает.

в 64 проблемы нет.

Цитата:

в Сафари почему-то работает наполовину

Цитата:

у меня нет сафари, поэтому нет.

https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Using2Dand3DTransforms/Using2Dand3DTransforms.html

Цитата:

Rotation can be specified in positive or negative degrees. For example, -webkit-transform: rotate(-45deg); specifies a 45 degree rotation counterclockwise. If rotation is animated, specifying a degree of rotation greater than the current degree causes clockwise rotation; specifying a degree of rotation less than the current degree causes counter-clockwise rotation.

When animating rotation, it can be useful to specify a rotation of more than 360 degrees. For example, Listing 7-1 uses JavaScript to set a rotation of 3600deg, causing a div element to spin clockwise ten times. The text spins once on page load, and a button lets the user spin it again.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 19:46 17-09-2020 | Исправлено: Mavrikii, 19:48 17-09-2020

Silver Member

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

Mavrikii
Почитал, попробовал сделать, всё то же самое получается. В итоге проще, наверное, проще заменить на translate(calc(50% - ПоловинаРазмераЗначкаPX). Так с любой анимацией будет работать.

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

Silver Member

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

WONDROUS
Просьба подсказать, можно ли сделать, чтобы внешний div1 не убирал padding или margin (или имеющуюся тень) у внутреннего div2 (который находится внутри div1)? Для примера. Получается, что если card вставлять в badge, то он закрывает тень и надо выставлять отступ для каждого card, чтобы они были на одном уровне все.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 00:17 20-09-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