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

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

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

также получается.

нормально получается.
https://jsfiddle.net/Lc5t6dqm/

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

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

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

Спасибо за пример!

так в чем разница с

Цитата:

Хоть 50% значение делать, также получается.

?

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 19:21 22-02-2022

Vladsvn

Member

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

Добрый вечер!

Как можно сделать, чтобы по клику на "Ещё" контент на отпрыгивал вниз, а Весна, Лето, Осень выводились бы сверху контента?

Код такой:
<details>
<summary>Ещё</summary>
<p>Весна</p>
<p>Лето</p>
<p>Осень</p>
</details>

<p>Это контент стораницы Это контент стораницы Это контент стораницы Это контент стораницы Это контент стораницы Это контент стораницы Это контент стораницы Это контент стораницы Это контент стораницы Это контент стораницы </p>

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 19:37 22-02-2022

Mavrikii

Platinum Member

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

Vladsvn

Цитата:

а Весна, Лето, Осень выводились бы сверху контента?

абсолютное позиционирование
https://jsfiddle.net/p3uz28Ln/

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 19:42 22-02-2022

Vladsvn Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Спасибо, заработало как надо!
	Всего записей: 351 \| Зарегистр. 07-09-2016 \| Отправлено: 20:55 22-02-2022

Silver Member

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

Mavrikii
Я ещё вчера сделал так, вроде нормально смотрится, плавное появление и скрытие.

Ещё просьба подсказать, как совместить два transform, чтобы одновременно работали.
Это:

Код:

@keyframes ball {
0% {
transform: rotate(0deg)
translate(calc(-50px * 2))
rotate(0deg);

}
100% {
transform: rotate(360deg)
translate(calc(-50px * 2))
rotate(-360deg);
}
}

Одновременно с этим:

Код:

@keyframes scale_ball {
    0% {
        transform: scale(0.5);
    }
    50% {
        transform: scale(2);
    }
    100% {
        transform: scale(0.5);
    }
}

В инете поискал, но примеров не нашёл.

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

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

Ещё просьба подсказать, как совместить два transform, чтобы одновременно работали

так именно transform или разные animation?
animation: ball 1s, scale_ball 3s;

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:33 22-02-2022

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Да, именно transform для одного и того же элемента. Первый это для вращения по кругу, второй меньше-больше, хотел их совместить.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 21:42 22-02-2022

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS совместите две анимации. да и преобразования совмещаются. transform: преобразование1 преобразование2; в чем сложность то?? https://jsfiddle.net/ks4g83t2/
	Всего записей: 15684 \| Зарегистр. 20-09-2014 \| Отправлено: 21:47 22-02-2022

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Это не то, так как получается, что шарик возрастает в движении по кругу. А надо, чтобы шарик как бы пульсировал, уменьшаясь и увеличиваясь.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 22:04 22-02-2022

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

А надо, чтобы шарик как бы пульсировал, уменьшаясь и увеличиваясь

либо вводите промежуточные кейфреймы, в которых только меняете scale.
либо засуньте в родителя и применяйте отдельные анимации к нему и к шарику.
https://jsfiddle.net/e9f75chx/

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

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

Vladsvn

Member

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

Добрый день!

Текст открывается по клику. Как сделать его во всю ширину экрана?

.container{max-width:1250px;margin:0 auto;padding:1%;background-color:#FFF;}

details {
position: relative;
}
details div {
position: absolute;
z-index: 10;
background-color: white;
border: 1px solid black;
}

<div class="container">

<div style="display:flex;">

<div style="width:300px;" > Text</div>

<div style="width:100px; ">

<details>
<summary>Ещё</summary>
<div>
<p>Весна</p>
<p>Лето</p>
<p>Осень</p>
</div>
</details>

</div>

</div>

<p>Это контент стораницы Это контент стораницы Это контент стораницы Это контент стораницы Это контент стораницы Это контент стораницы Это контент стораницы Это контент стораницы Это контент стораницы Это контент стораницы </p>

</div>

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 17:14 24-02-2022

Mavrikii

Platinum Member

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

Vladsvn

Цитата:

Как сделать его во всю ширину экрана?

в таком виде - никак. его размеры ограничены размерами родителя.

Цитата:

<div style="width:100px; ">

зачем? вот это и ограничивает.

можно вот так, конечно.. но непонятно зачем на всю ширину
https://jsfiddle.net/ox76hdcm/

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:12 24-02-2022 | Исправлено: Mavrikii, 21:40 24-02-2022

Vladsvn

Member

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

Цитата:

непонятно зачем на всю ширину

Кнопка "Ещё" появляется на сайте только при узких экранах, и на ней набор ссылок, которые идут вертикально и которые для лучшей читаемости полезно развернуть на всю ширину страницы.
На широких экранах эти же ссылки показываются в виде горизонтальной панели, исчезающей на узких экранах.

Сейчас, благодаря Вам, все работает как задумано. Спасибо!

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 11:47 25-02-2022

Advanced Member

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

Здравствуйте. Подскажите в таком моменте.
Есть блок с телефонами. http://prntscr.com/lFVsa9RlBck0
Конец строки затеняется. Что за это отвечает? Хочу сделать чтобы отображался полностью.

_https://xn--80aaaabfet7aphitdh3b7iufj.xn--p1ai/

Всего записей: 684 | Зарегистр. 04-03-2010 | Отправлено: 09:09 17-03-2022

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору b7music раз разобрались, то пишите об этом. я не вижу этого сейчас.
	Всего записей: 15684 \| Зарегистр. 20-09-2014 \| Отправлено: 23:15 17-03-2022

D1D1D1D

Advanced Member

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

Тут в архиве один момент. Когда вводишь в любой из поисков то, чего в базе нет — появляется блок с надписью "Не найдено", которому я назначил красный фон. Никак не удаётся увеличить этот блок, чтобы было достаточно места для написания инструкции по поиску. Блок выделен на скрине —

Всего записей: 1469 | Зарегистр. 05-04-2010 | Отправлено: 17:17 08-04-2022

Открыть новую тему

Написать ответ в эту тему

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