Category: CSS

08
Июл
2020

Как грамотно организовать подгрузку только необходимого css?

Делаю мультилендинг с помощью php.
"Если utm метка такая, то переменные заголовков равны вот этому. Если utm другая, то переменные заголовков равны тому-то". Выкатываю значения переменных в разметку через <?php echo
Слышал про…

08
Июл
2020

Динамически растягивать слова на любую высоту экрана

Есть такая маленькая программа, которая динамически меняет слово внутри SVG.
Необходимо добиться такого эффекта, чтобы независимо от слова или группы слов они всегда растягивались по всей высоте (так как их поввернули на 90 градусов), изме…

08
Июл
2020

Нужно сделать чтобы transition попапа работал и при открытии и при закрытии

Нужно сделать чтобы transition попапа работал и при открытии и при закрытии, но у меня получилось сделать только при открытии, при закрытии по какой то причине не работает.
//Css
.setting-menu {
opacity: 0;
visibility: hidden;
positi…

07
Июл
2020

Как сделать анимационный переход для слайдера

не подскажите как можно сделать анимационный переход для текста в слайдах, как здесь: https://demo.yootheme.com/themes/joomla/2018/vision/index.php/our-work .
Единственный вариант который приходит в голову, это при переходе на новый слайд …

07
Июл
2020

Slick slider прокрутка тачпадом

Проблема в том что когда по слайдеру проводишь тачпадом, то он прокручивает сразу несколько слайдов. как сделать что-бы прокручивалось по одному слайду?
Вот пример. Там есть блок Цикл
если по нему свайпнуть пальцами на тачпаде, то он весь …

07
Июл
2020

drag по клику скроллинг элементов

есть элемент которые стоят в ряд друг за другом и обернуты в overflow: scroll. Нужно чтобы пользователь потянул за элемент и проскроллил до другого, как это можно сделать?

.overflow {
display:flex;
overflow-x: scroll;
}

.overflow__ite…

07
Июл
2020

Grid — для макета, Flexbox — для компонентов

От автора: мой брат — новичок в области компьютерной инженерии, и в настоящее время он заканчивает свою стажировку по фронт-энд разработке. Он изучил как CSS-Grid, так и Flexbox, но столкнулся с ситуацией, которую я часто вижу. Он не может решить, когда использовать Grid, а когда Flexbox. Например, он использовал CSS-Grid для разметки заголовка веб-сайта и […]

07
Июл
2020

Materialize.css 1.0: как правильно подключить отдельные элементы библиотеки (в частности как настроить правильную работу JS-составляющей)?

Интересует принципиальная схема подключения SCSS-набора компонентов, установленных через npm.
Всю библиотеку подключать Неправильно, пытаюсь подключить нужные компоненты. Не могу понять, из-за чего не срабатывает нужный эффект (в частности…

06
Июл
2020

Дергается шрифт при смене opacity через transition в слайдере

у меня было задание сделать слайдер, а поверх него был некий контент. Переключение слайдов слайдера происходило на установку opacity: 0 каждому слайду и лишь текущему opacity оставалось равно единице. Проблема в том, что текст, заключенный…

06
Июл
2020

Динамичное растягивание по высоте любого экрана всех слов, введенных в input

Есть такая вот небольшая программка, которая динамически изменяет слово внутри svg. Надо добиться такого эффекта, чтобы вне зависимости от слова или группы слов, они всегда были растянуты по всей высоте (так как повернуты на 90 градусов) з…

05
Июл
2020

Как динамично изменять font-size, чтобы одно слово (повернутое на 90 градусов) занимало всю высоту экрана?

Нужно чтобы при изменении высоты экрана, повернутое слово всегда оставалось растянуто относительно его краев, за счет изменения шрифта. Как это можно сделать? Желательно без JS, но думаю тут без него не обойтись.

.bgString {
font-s…

04
Июл
2020

Как реализовать анимацию плавного морфинга границ изображения?

Есть картинка, при ховере ее границы должны начать хаотично плавать, изгибаться, пока не убран курсор.
Насколько понял, это должно быть связано с svg morphing, но примера не нашел. Только анимация чистой svg, без картинки.
Может у кого ес…

04
Июл
2020

Как создать зависимость между анимацией блока и прокруткой страницы?

Как сделать так чтобы воспроизведение анимации блока (блок в позиции fixed) зависело от скролла что-то на подобие canvas, только не отрисовкой миллионов изображений а именно анимацией как к примеру в css, потому что отрисовка миллиона изоб…

04
Июл
2020

Не срабатывает модальное окно после ajax подгрузки

Есть проблема. Сайт стоит на CMS MODX Revo. Но суть не в этом, когда я подгружаю плагином pdoPage новости – модальное окно не загружается. В элементах которые идут до загрузки (то есть уже загруженные с момента загрузки страницы) всё работ…

04
Июл
2020

1 свайп – 1 прокрутка слайда slick

проблема в том что когда на тачпаде свайпаешь по слайдеру, то пролистывается сразу штуки 3 слайдов. Как сделать что-бы листалось по одному слайду в любом случае.
И второй вопрос. как сделать чтоб при переключении слайда, белые точки всегда…

04
Июл
2020

Yii2 помогите решить с подключением

Всем привет, помогите, заранее благодарен.
Проблема:
При установке правил ЧПУ вот таких ‘single’ => ‘site/single’ скрипты, стили, картинки подключаются из AppAsset
Но при правиле ‘single/<id:\d+>’ => ‘site/single’ ничего не под…

03
Июл
2020

Параллакс на реакт

я сейчас делаю простенький сайт на реакт, и вот у меня, как у новичка возникла такая проблема. Я хотел сделать параллакс, допустим у меня есть горы, за ними еще горы и небо. Когда мышка двигается влево, то ближайшие горы двигаются быстрее,…

03
Июл
2020

position sticky и overflow в ограниченном блоке

Всем доброго времени суток!
Возникла проблема..
В общем, у меня есть таблица из flex, имеет: width: 100%, height: 250px. Можно скролить в разные стороны.
Таблица достаточно длинная, поэтому пришлось сделать, чтобы ее можно было скролить по…

03
Июл
2020

Единицы измерения CSS на основе области просмотра

От автора: прошло несколько лет с тех пор, как единицы измерения на основе области просмотра были впервые представлены в CSS. Они действительно являются «адаптивными единицами длины» в том смысле, что их значение меняется каждый раз, когда изменяется размер окна браузера. Если вы слышали об этих единицах раньше, но хотите узнать о них подробнее, эта статья […]

02
Июл
2020

Кто знает как создать сайт похожий на ru.oollee.com или же похожий на apple.com/airpods-pro/ (на телефоне) [закрыт]

Кто знает как создать сайт похожий на ru.oollee.com или же похожий на apple.com/airpods-pro/ (на телефоне)?
Нужно воспроизводить анимацию объекта при прокрутке в положении fixed к примеру
Большая заинтересованность в создании такого сайта,…

02
Июл
2020

Помощь с сотнями всплывающих окон

У меня есть несколько карточек. К каждой карточки привязан свой popup. Но я сделала не правильно…
Я к каждой кнопке "Подробнее" привязала свой popup(n), где n – номер popup-а.
Как это можно оптимизировать, что б не плодить код?…