Category: CSS

24
Ноя
2020

Как реализовать переключение вкладок на HTML/CSS/JS в ASP .Net Core?

У меня есть следующая HTML разметка во View в Asp .Net Core:
<!– форма у которой блоки для выбора вкладок –>
<!– нажимаю на первый блок – открывается первый блок в форме "description" –>
<form class="servi…

23
Ноя
2020

Основы CSS. Часть 2. Комбинации селекторов, наследование, каскадирование и специфичность

В прошлой статье мы разобрали что такое CSS, как подключать стили к HTML страницам, поговорили о синтаксисе CSS-правил, и познакомились с многообразием CSS-селекторов. В этой статье разберем немного более сложные вещи. Предположим, есть страница на сай…

23
Ноя
2020

Обозначить заполненный input

Ниже приведен код, в котором заполненные input подсвечиваются зеленой полосой. Но при вводе в один input начинают подсвечиваться и остальные. Как сделать так, что бы подсвечивался только заполненный input?

$(‘.pay_line’).change(functio…

22
Ноя
2020

Относительный путь к другой странице

Встретился с такой проблемой – не могу верно указать путь до второй страницы,самый простой шаг(выйти из той папки, где лежит основная страница – выполнен), а дальше ступор. Если быть конкретнее – есть две папки, в каждой лежит файл(меняетс…

22
Ноя
2020

Увеличить высоту дива по его содержимому с переносами текста и заданным max-height

<div id="mta"> имеет наименьшую высоту (под одну строку).

<div id="mta"> – ‘открыт’.
Как сделать, чтобы при ‘открытом’ <div id="mta">, – его содержимое выводилось полностью.
Сейчас длинные …

21
Ноя
2020

Сделать цветную область внутри чернобелого background-image

Есть div с шириной 100% и высотой 100vh и заданной ему фоновой картинкой в качестве background; также заданы background-size: cover и filter: grayscale(100%). Нужно расположить внутри него блок, который в занимаемом пространстве будет дела…

21
Ноя
2020

Как скрыть определенное слово в тексте без добавления нового тега?

У меня есть код:
<div>Lorem ispum custom test</div
Я хотел бы только спрятать, но не удалять слово custom без добавления нового тега.
Как я могу это сделать?
Свободный перевод вопроса Hide specific word in a text without add new…

21
Ноя
2020

Имеет ли значение диагональ экрана ноутбука для верстки? [закрыт]

Хочу взять ноутбук, знакомый подобрал модель с неплохими комплектующими, но есть один нюанс- экран у него 15.6", 1920×1080. Насколько сильно это важно для верстки? Где-то читала, что верстать на диагонали менее 17 это очень неудобно) …

20
Ноя
2020

Анимировать выделение шрифта на кривой SVG

У меня есть текст, который движется по кругу SVG, и который масштабируется в зависимости от размера окна – Я хочу анимировать текст так, чтобы он вращался вокруг центра, как шатер. Для этого мой код в настоящее время выглядит так:

fun…

20
Ноя
2020

Как получить svg из object

Всем доброго дня! Подскажите пожалуйста, не могу понять. Пытаюсь инициализировать svg из object, но выдает пустой document, при этом картинка на странице есть.
Вот я достучался до object. Внутри его документа есть svg

Как только стучусь …

20
Ноя
2020

Галерея с оверлеем

Помогите пожалуйста реализовать галерею, или подскажите готовое решение с готовым функционалом как на скриншоте: http://prntscr.com/vmn588
Если подробнее, нужно сделать Grid сетку и в ней разместить изображения, по нажатию на которые будет…

20
Ноя
2020

:focus-visible уже доступно

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

19
Ноя
2020

Каклькулятор доставки, скрипт

Есть сайт курьерской компании, задача: сделать калькулятор расчета стоимости доставки от одной точки до другой. Имею: зоны доставки и стоимость доставки в определенной зоне. При том стоимость доставки зависит не только от расстояния между …

19
Ноя
2020

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

Я разработал приложение имитирующее работу эквалайзера в части показа изменения аудио частот

Проблемы с анимацией возникают при повторном нажатии на кнопку "Start"
Результаты анимации сбрасывается и анимация начинается с самого…

19
Ноя
2020

Макет без полей с использованием CSS Grid

От автора: когда-то существовал золотой стандарт макета веб-сайта, который все стремились создать, но это было трудно сделать правильно: Макет Святого Грааля. Не похоже, чтобы это было так сложно, правда? Но это была эпоха до появления flexbox; нашими инструментами для работы были таблицы и float, и ни один из них не подходил для этой задачи. Технически […]

18
Ноя
2020

Слайдер в шапке с помощью плагина ACF c использованием поля репитер

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

18
Ноя
2020

js как сделать карусель обзор (review) из изображение

Как сделать карусель, которая будет показывать обзор, на пример товара банки горошка по кругу
То есть имеется 24 кадра, которые ежесекундно меняются, делая вид вращающегося продукта, создавая видимость 3D обзора.
Вот самостоятельное вращен…

18
Ноя
2020

Все о переменных CSS

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

17
Ноя
2020

Как правильно сверстать страницу?

Создаю приложение и нужно сверстать вот такую страницу. Меня интересуют конкретно 3 контейнера: хедер, сайдбар и главный контейнер(как я понял все через position: fixed, но не уверен наверняка). Не знаю как правильно верстать подобные стра…

17
Ноя
2020

Шарик следящий за курсором мыши лагает

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