Category: css3

18
Сен
2020

Сделать обтекание div’a другим div’ом

Есть 3 одинаковые по ширине колонки. В каждой колонки есть ещё блоки высотой 150 пикселей.

В какой-то момент времени один из блоков может вырасти в ширине так что будет вылазить за ширину своей колонки.

Есть ли возможность сделать обтека…

14
Сен
2020

Проблема slick-slider, ломает верстку

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

07
Сен
2020

Активная вкладка меню в ReactJS

Как правильнее всего подсветить активную вкладку меню навигации в Реакте с функциональным подходом? Интересует оптимальный метод с учетом того что "линков" может быть не 2, а 20… Как сделать оптимальней всего без дублирования к…

28
Авг
2020

Как с помощью js перебирать объекты на странице, и менять для них стиль

Допустим у меня на странице 10 или 50 или 800 объектов(одинаковых), не принципиально, и вот мне нужно с помощью js перебрать их всех и каждому из них задать рандомный background, рандомный цвет получать я могу, но мне нужно перебрать все о…

25
Авг
2020

Прозрачный текст вырезан из фона

Есть ли способ вырезать прозрачный текст из фонового эффекта, такого как на следующем изображении, с помощью CSS?
Было бы грустно потерять все драгоценное SEO из-за того, что изображения заменяют текст.

Сначала я подумал о тенях, но не м…

21
Авг
2020

Как запретить пользователю переход по url-адресу, написанному от руки в поисковой строке браузера?

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

20
Авг
2020

По нажатию на "меню" исполняется второе условие и игнорируется первое, при повторном нажатии в обратном порядке. Необходимо одновременное исполнение

menu.onclick = function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}

19
Авг
2020

Ускорение анимации вращения элементов при скролле

http://proudly.ru/febotelecom/#bl-services
Есть блок с геометрическими фигурами, они вращаются. Задача сделать ускорение вращения при скроллинге вверх или вниз. В целом, в примере это уже работает, но ощущается "тяжесть" анимации…

19
Авг
2020

Как сделать, чтобы когда мы нажимали div1, то вызывалась function1, но также нажимался и div2, который бы сделал function2?

У нас есть div1 и div2. div1 делает function1, а div2 – function2. У div1 onclick не работает(я серьёзно), а у div2 всё работает. Как сделать, чтобы когда мы нажимали div1, то вызывалась function1, но также нажимался и div2, который бы сде…

03
Авг
2020

Slick slider размывает текст и картинки

Поставил Slick-slider,закинул в него текст.Этот текст стал гораздо более размытым,нежели текст вне слайдера.Такая фигня в хроме,а вот например в файрфоксе всё нормально.Что за *****?Помогите плз,как это исправить.У кого нормальные мониторы…

02
Авг
2020

Обрезать текст после достижения определенной высоты блока

может кто подсказать какими средствами можно реализовать ниже описанный пример
Есть некий блок с высотой 50vh, и соответственно высота этого блока меняется в зависимости от устройства. Также в этом блоке находится текст. Так вот, как сдела…

31
Июл
2020

Необычные свойства CSS

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

25
Июл
2020

Анимация пропорционального уменьшение блока до display:none с расположением к центру

Подскажите, есть ли возможность реализовать анимацию при которой div "схлопывался" не в верхний левый угол, а к центру своего размещения. Приведу пример:

$(“.button”).on(“click”, function() {
$(“.block”).toggleClass(“active…

13
Июл
2020

Несколько разных слайдеров на странице

Помогите реализовать код так чтобы можно было вставлять несколько слайдеров на странице Сейчас код применяется ко всем слайдерам сразу Спасибо

$(document).ready(function() {
$(‘.img’).click(function() {
var image = $(this).attr(‘…

06
Июл
2020

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

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

25
Июн
2020

Не отображается карта на сайте

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

22
Июн
2020

Как сделать выборку и вставку текста, что выбрано

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

v98987od.beget.tech – то, что у меня пока получилось..
Памагити :c
Мучаюсь несколько часов. Думаю сделать через js…

18
Июн
2020

Не пойму как доработать форму?

Всем привет!
Есть такая вот форма codepen
Логика следующая:
Пользователь нажимает на кнопку и ему открывается форма, где он может зарезервировать дату либо же просто перейти в мессенджер. В случае если пользователь хочет зарезервировать да…

14
Июн
2020

Модальные окна, на чистом JS

пытался реализовать модальные окна на сайте их 3 , проблем лишь в том , что после клика на кнопку закрытия, повторное открытие какого-либо модального окна сопровождается с ошибкой: Uncaught TypeError: Cannot read property ‘classList’ of nu…

12
Июн
2020

Не работает Animate.css и Wow.js

Здравствуйте на сайте https://timis25.github.io/BAGGIS/dist/index.html на мобильных телефонах не работает анимация, в то время как на компьютере работает.Это проблема именно на мобильных устройствах, но если в Google Chrome включить консол…