Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в 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
объясните внятнее. внешний див может влиять на область доступную внутреннему (то есть его размеры). на его паддинг или марджин он не влияет.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 00:47 20-09-2020 | Исправлено: Mavrikii, 00:48 20-09-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Там получается так, что absolute влияет на это, наверное. Если у badge_in его отключить, то тень становится видна, но шарик в итоге смещается вниз влево.
Если у padding сделать значение какое-то, то шарик на месте и тень видна, но тогда padding надо будет делать и остальным card.

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

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
вы снова нацепили overflow: hidden у родителей, вот и обрезается тень.
у левого в .stacks_out и ниже, в .stacks_in, есть, у второго - нет.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 01:48 20-09-2020 | Исправлено: Mavrikii, 01:49 20-09-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Точно! Я про это и забыл что-то. Спасибо, что подсказали!

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 01:54 20-09-2020 | Исправлено: WONDROUS, 01:55 20-09-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, что не так и как исправить, чтобы для верхнего примера маленькая картинка появлялась слева, а для нижнего справа (ссылка). Вот код:

Код:
[data-aos="custom-rotate-left"] {
    opacity: 0;
    margin-left: -100%;  
    transform: rotate(-90deg);
    transition-property: opacity, margin-left, transform;
}
[data-aos="custom-rotate-left"].aos-animate {
    opacity: 1;
    margin-left: 0;
    transform: rotate(0);
}
 
[data-aos="custom-rotate-right"] {
    opacity: 0;
    margin-right: -50%;  
    transform: rotate(90deg);
    transition-property: opacity, margin-right, transform;
}
[data-aos="custom-rotate-right"].aos-animate {
    opacity: 1;
    margin-right: 0;
    transform: rotate(0);
}

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 00:18 29-09-2020
Mavrikii

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

Цитата:
 верхнего примера маленькая картинка появлялась слева, а для нижнего справа

поменять right: 0 на left: 0 и наоборот

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 00:29 29-09-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
В смысле? Просто, если маленькая картинка (верхний пример) расположена вверху слева или вверху по центру, то всё работает как и задумано (появляется слева), а если вверху справа, то она только вращается.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 00:39 29-09-2020 | Исправлено: WONDROUS, 00:41 29-09-2020
Mavrikii

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

Цитата:
В смысле?

в прямом. положение на анимацию не влияет.

Цитата:
.stacks_in_308_page0badge_in {
    position: absolute;
    top: 0px;
   left: 0px;
    z-index: 777;
    filter: opacity(1);
}

 
если же еще манипуляции с margin (непонятно зачем тут), то поменять аналогично левое на правое и наоборот.
либо внятно формулируйте вопрос, ибо это вам по паре фраз понятно что происходит не так, как хочется.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 00:43 29-09-2020 | Исправлено: Mavrikii, 00:47 29-09-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Я хотел добавить эффекты к AOS анимации, данный пример взят отсюда. Обновил пример, может понятнее будет. Для трёх вариантов применён один и тот же эффект появления слева. Только движения картинки на верхнем нет, только вращение.
 
Добавлено:
Сделал, заменив margin на translate3d, как в самом AOS.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 00:52 29-09-2020 | Исправлено: WONDROUS, 00:59 29-09-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, как правильно доделать этот слайдер, если можно так сказать. Это то, что получилось.
Оригинал здесь (чуть ниже на странице движутся картинки).
 
1. Вопрос в том, как правильно сделать, чтобы при движении первая картинка шла за последней, без огромного промежутка между ними?
2. Что именно поменять, чтобы это всё двигалось и в обратном направлении (вправо)?

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 23:57 03-10-2020
Mavrikii

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

Цитата:
Вопрос в том, как правильно сделать, чтобы при движении первая картинка шла за последней, без огромного промежутка между ними

вставить картинки два раза, после прокрутки до конца первого начинать так, как было изначально.
|1 2 3 1 2 3
прокручиваем до момента
1 2 3| 1 2 3

Цитата:
Что именно поменять, чтобы это всё двигалось и в обратном направлении (вправо)?

аналогично, но копию нужно вставить до

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 03:00 04-10-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ответ! Прочитал комментарий в коде, про дублирование, сделал, но что-то всё равно не так, так как картинки не устанавливаются нужного размера, а уменьшаются, чтобы влезть в ширину экрана.
 
Добавлено:
Обновил пример. Что-то не то всё равно, нет непрерывного движения картинок.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 14:33 04-10-2020 | Исправлено: WONDROUS, 15:25 04-10-2020
Mavrikii

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

Цитата:
нет непрерывного движения картинок.

что было непонятного в том, что нужно анимировать половину смещения? все, конечно, сильно зависит от размеров и ширины видимой области, но, к примеру
transform: translate(calc(150px * 5 * -1), 0);

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 23:08 04-10-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо, но даже если анимировать движение только половины, то да, получается лучше, но всё равно есть промежуток видимый, а если установить треть (например, картинок 12 и calc(150px * 3 * -1), то картинку движутся непрерывно. Получается, что надо, чтобы в слайдере было картинок столько, чтобы делились на 3.
 
P.S. но и то не работает толком, зависит от количества картинок.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 00:25 05-10-2020 | Исправлено: WONDROUS, 01:25 05-10-2020
Mavrikii

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

Цитата:
но и то не работает толком, зависит от количества картино

зависит от количества картинок и ширины экрана. вставляйте 3 подряд, анимировать на треть ширины.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 02:43 05-10-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Я уже добавил 24 картинки, 12 дважды, и в calc указал 12, всё равно не хочет новый ряд плавно начинаться (как на оригинальной странице), виден промежуток и как добавляется первая картинка.

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

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

Цитата:
 всё равно не хочет новый ряд плавно начинаться (как на оригинальной странице), виден промежуток и как добавляется первая картинка.

ссылку

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 18:41 05-10-2020
VVL99

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
Сделай с 363 по 419, у меня плавно всё идёт без прерываний.
 
Добавлено:
https://transfiles.ru/u3lc8

----------
Гомосексуальность среди модераторов не является психическим расстройством, несмотря на синонимы этого понятия в русском языке.

Всего записей: 4158 | Зарегистр. 03-02-2011 | Отправлено: 18:56 05-10-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
VVL99
По прошлому вопросу вроде всё работает.
 
Подскажите, пожалуйста, как в данном примере сделать картинки по бокам зеленоватого блока, чтобы они были поверх него? Читал и пробовал, но никак не получается, ни бордером, ни before/after.
Картинка слева и справа.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 14:25 08-10-2020 | Исправлено: WONDROUS, 14:26 08-10-2020
VVL99

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
https://jpegshare.net/images/c0/c8/c0c8b1a1771b69dbb802f3dfe9a67e6c.png

----------
Гомосексуальность среди модераторов не является психическим расстройством, несмотря на синонимы этого понятия в русском языке.

Всего записей: 4158 | Зарегистр. 03-02-2011 | Отправлено: 14:47 08-10-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

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

Рейтинг.ru