Зачеркнутый текст линией другого цвета в HTML
#html #css
Текст, который нужно зачеркнуть оборачиваем двумя тегами и указываем ему стили.
HTML-код: текст, который нужно зачеркнуть оборачиваем двумя тегами (например span) и указываем стили: во внешнем – указываем красный цвет и перечеркнутый текст; во внутреннем теге – прописываем черный цвет.
❌ https://qfurs.ru/zacherknutyj-tekst-liniej-drugogo-tsveta-v-html/

Как скрыть часть текста с кнопкой развернуть (свернуть) на HTML и CSS
#html #css
Задача: Необходимо сделать такой функционал для блока с контентом, который будет по умолчанию скрывать часть его контента, а при нажатии на текст «Развернуть» контент блока должен раскрываться полностью, а текст сам «Развернуть» должен измениться на «Свернуть». И обратно – при клике на «Свернуть» контент должен частично скрыться. Например, это может быть применено в каталоге с товарами, где отображаются в несколько строк какие-то метки для фильтрации товаров. Или нужно просто скрыть часть текста в статье или на главной.
❌ https://qfurs.ru/kak-skryt-chast-teksta-pod-katom-i-razvernut-svernut-po-knopke-na-html-i-css/

Как сделать кнопку неактивной, пока не отмечен чекбокс на JS
#html #css #javascript
Стояла задача сделать так, чтобы кнопка формы Contact Form 7 выглядела неактивной до тех пор пока не будут отмечены определенные чекбоксы (галочки) в форме (вроде «Согласие на обработку..»). Т.е. сама кнопка и так не срабатывает пока не отмечены обязательные чекбоксы, но нужно сделать, чтобы еще и визуально это было видно. Например, пока не отмечены условия – кнопка серая, когда отметили – зеленая.

Решение: Используем JavasScript. Для кнопки нужно предусмотреть отдельный класс который будет давать ей серый цвет и прописать в стилях. Вешаем обработчик событий по клику на чекбоксы, с функцией, которая будет проверять у чекбоксов параметр checked на true / false, т.е. поставили галочку на чекбоксе или нет. Если оба чекбокса «true», то функция должна удалить у кнопки класс отвечающий за задание серого цвета.
❌ https://qfurs.ru/kak-sdelat-knopku-neaktivnoj-poka-ne-otmechen-chekboks/

Как сделать текст градиентом на CSS
#html #css #программирование
Задача: Необходимо сделать цвет текста градиентом, но в свойстве «color» нельзя задать градиент.
.gradient-text {
/* Запасной вариант цвета фона. */
background-color: red;
/* Задаем градиент. */
background-image: linear-gradient(45deg, #f3ec78, #af4261);
/* Размер фона и повторение свойства. */
background-size: 100%;
background-repeat: repeat;
/* Используем текст в качестве маски для фона. */
/* Это покажет градиент как цвет текста, а не элемент background. */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;}
❌ https://qfurs.ru/kak-sdelat-tekst-gradientom-css/

Как сделать активной вкладку в зависимости от страницы на которой находишься
#html #css #javascript #сайтостроение #Вебмастеринг
❓ Задача: На страницах есть блок с табами (вкладками) и необходимо сделать так, чтобы после загрузки страницы активировался определенный таб (вкладка). Например, на странице товаров есть 3 вкладки «Холодильники», «Телевизоры», «Велосипеды» и каждая содержит какой-то перечень соответствующих товаров. И нужно сделать так, чтобы находясь на странице товара, например, относящемуся к телевизорам, при загрузке страницы автоматически в блоке с табами открывалась вкладка «Телевизоры».
✅ Решение 1. Данную задачу можно решить на JavaScript используя события по клику. Т.е. нужно сымитировать клик по нужному табу, чтобы переключить на соответствующую вкладку.
💾 https://qfurs.ru/kak-sdelat-aktivnoj-vkladku-v-zavisimosti-ot-stranitsy-na-kotoroj-nahodishsya/

Настройка калькулятора EZ Form Calculator
#html #Вебмастеринг #сайтостроение #CSS
❓Задача сделать простую кнопку для прокрутки страницы вверх на HTML + CSS, не используя JavaScript.

✅ Решение. Простое решение - нужно разместить два блока: один — будет меткой (якорем) куда будет прокручиваться страница, а второй — непосредственно кнопкой для скрола вверх. (Подробнее см. в статье)
💾 https://qfurs.ru/?p=2010

Всплывающая подсказка: Подборка примеров оформления
#Программирование #Вебмастеринг #сайтостроение #css #javascript #html
✅ Подборка интересных кодов для создания всплывающих подсказок на HTML может дать идеи для реализации своих проектов.
💾 https://qfurs.ru/?p=2077

Всплывающая подсказка при наведении: HTML, CSS
#Программирование #Вебмастеринг #сайтостроение #css #html #Wodpress
❓Необходимо установить всплывающие подсказки для текста или html-элементов.
✅ Решение. Всплывающие подсказки можно сделать несколькими способами: только на HTML и CSS. Для WP есть несколько плагинов.
💾 https://qfurs.ru/?p=2070

Заготовка таблицы с прокруткой на мобильных на HTML и CSS
#CSS #Вебмастеринг #сайтостроение #HTML #программирование
✅ Предлагаю такую html-таблицу, обернутую в div с классом mobile-scroll-x, который будет реализовывать скроллинг таблицы на мобильных.
💾 https://qfurs.ru/?p=2159

Шпаргалка CSS Flexbox: Flex-префиксы для кросбраузерности
#CSS #Вебмастеринг #сайтостроение #HTML #программирование
✅ CSS Flexbox (флексы) — модель верстки, которая делает более удобным решение таких вопросов как:

Создание всех колонок в макете одинаковой высоты, даже если заполнение у них разное.
Оформление всех дочерних элементов контейнера таким образом, чтобы они распределили между собой доступную ширину или высоту, в независимости от того, сколько ширины или высоты доступно.
Вертикальное выравнивание блока внутри родителя.
💾 https://qfurs.ru/?p=2180

Всплывающее окно HTML и CSS при нажатии на кнопку + Примеры
#CSS #Вебмастеринг #сайтостроение #HTML #программирование #Javascript #popup #Всплывающееокно
✅ Необходимы простые, несложные заготовки всплывающего окна на HTML (popup-окно, модальное окно).

Можно использовать несколько примеров, как на HTML и CSS, так и с использованием JavaScript. + В статье есть подборка разных примеров.
💾 https://qfurs.ru/?p=2320

Раскрывающаяся HTML-таблица по клику
#CSS #Вебмастеринг #сайтостроение #HTML #Таблицы #Frontend
❓Задача. Есть длинная таблица и нужно сделать, чтобы часть таблицы скрывалась и раскрывалась по клику

✅ Решение. Настроить скрытие лишних строк в таблице возможно использовав только средствами CSS и HTML. Код №1 из Примера №1 (см. статью)
💾 https://wpcraft.top/?p=2637

Плавающий блок на CSS при прокрутке
#CSS #Вебмастеринг #сайтостроение #HTML #Frontend
❓Задача. Необходимо настроить на сайте сайдбар так чтобы он прилипал при прокрутке страницы. Называют это ещё как «плавающий блок».

✅ Решение. Реализуется плавающий блок с помощью CSS-свойства position: sticky и top: 0 (вместо top могут быть и bottom, left, right с различными значениями) как в Код №1. Значение свойства top — это некий порог после которого блок начнет прилипать и двигаться в месте с прокруткой до того момента который позволяет ему двигаться родительский блок

CSS прилипающего блока:

/* Плавающий блок */
#my-sticky-block {
position: sticky;
top: 30px;
}

💾 https://wpcraft.top/?p=2707

Сортировка HTML-таблицы на JavaScript
#CSS #Вебмастеринг #сайтостроение #HTML #Таблицы #Frontend #javascript #HTMLТаблицы
❓Задача. Необходимо сделать возможным сортировку HTML-таблицы по столбцам

✅ Решение. Для сортировки таблицы можно использовать библиотеку tablesort.js. Она не сложная и без jQuery. Там же, на официальном сайте можно и посмотреть как настраивать.
(см. статью)
💾 https://wpcraft.top/?p=2628

 HTML: Как сделать отступ при скролле к якорю
#CSS #Вебмастеринг #сайтостроение #HTML #Frontend #scroll_margin_top #taget
❓Задача. Есть блок с содержанием в статье. Оглавления в виде ссылок ссылаются н якоря в соответствующих заголовках, например ссылка <a href="#id-1">Заголовок 1</a> и заголовок <h2 id="id-1">Заголовок 1</h2>. Когда нажимаем на ссылку с заголовком, экран перемещается к заголовку с тегом h2 и якорем id=id-1. Экран установится так, что заголовок будет у самого верхнего края. Это не всегда хорошо выглядит. Например, если есть фиксированая, липкая шапка, то заголовок будет ею перекрываться. Поэтому лучше сделать чтобы был отступ от якоря при скролле к нему.

✅ Решение 1. Можно использовать в CSS свойство scroll-margin-top — задает высоту отступа, которую нужно использовать при скролле к элементу. Работает во всех современных браузерах, кроме IE-11 и ранних версиях. Пример в Коде №1? используем псевдокласс :target (применяется к целевому элементу):
:taget { scroll-margin-top: 2rem; }

✅ Решение 2. Другой вариант — использование для элемента с якорем положительный верхний внутренний отступ и отрицательный верхний внешний отступ:
:taget {
padding-top: 50px;
margin-top: -50px;
}
💾 https://wpcraft.top/?p=2683

Как сделать оглавление (содержание) для статей автоматически
#CSS #Вебмастеринг #сайтостроение #HTML #Frontend #javascript #Wordpress
❓Задача. Необходимо сделать вывод оглавлений (содержания) статей в постах автоматически. Сложность заключается в том что на странице часть контента выводится не через функцию the_content(), а выше нее по шаблону.

✅ Решение. Для WordPress есть хорошие плагины для вывода содержания статьи, но они работают с функцией the_content() и выведут только те заголовки, которые попали в неё. Поэтому в данной ситуации лучше будет использовать JavaScript.

1 Автоматическое создание и вывод содержания статьи с помощью JavaScript и jQuery
2 Автоматический вывод оглавлений статьи в WordPress
3 Подборка решений оглавлений статей в HTML
(см. статью)
💾 https://wpcraft.top/?p=2654

Как сделать список в 2 и больше колонок на CSS и HTML
#CSS #Вебмастеринг #сайтостроение #HTML #Frontend #Список
❓Задача. Часто необходимо сделать список в две колонки. Эту задачу можно решить несколькими способами.

✅ Решение 1. Через свойство float и display.
.my-class li {
display:block;
width:49%;
float:left;
}
✅ Решение 2. Для вывода списка по несколько колонок можно использовать CSS3-свойства
column-count или column-width. Первое — задет количество колонок, а второе — ширину колонки и таким образом заполняет свободное пространство. А свойство column-gap задет интервал между колонками (по-умолчанию — 1 1em). данные свойства можно применяь не только к спискам но и другим тегам.
ul style="column-count: 3"
(см. статью)
💾 https://wpcraft.top/?p=2292

  WORDPRESS: ВЫВОД СПИСКА КАТЕГОРИЙ ССЫЛКАМИ И С ИЗОБРАЖЕНИЯМИ
#wordpress #woocommerce #вебмастеринг #WpCraft #Интернетмагазин #WoocommerceСкрипты #WordpressСкрипты #WordpressМеню #frontend #css
❓Задача 1. Необходимо сделать шорткод, который выводил бы список всех категорий товаров в магазине на Woocommerce. Также, нужно стилизовать список, чтобы дочерние категории сворачивались в родительскую.

❓Задача 2. Позже появилась похожая задача, но вывести нужно категории вместе с их прикрепленными изображениями, а подкатегории должны появляться во всплывающем списке при наведении курсора, либо разворачиваться при клике на мобильных экранах.

✅ Решение 1: Используем функцию Wordpress wp_list_categories, которая будет выводить список всех категорий ссылками через шорткод [cats_list]. Сам шорткод добавляем в попап окно. Стилизуем и заставляем разворачиваться наш список.

✅ Решение 2: Используем функцию Wordpress get_categories(), которая будет получать все категории с данными, а далее будем формировать структуру с картинками, названиями и ссылками и выводить через шорткод [cats_list_2]
================

💾 См. статью https://wpcraft.top/?p=3215
Пример 1: https://youtu.be/NEe6o047sPo
Пример 2: https://youtu.be/8Q57u3FjfEM

https://www.youtube.com/watch?v=8Q57u3FjfEM
https://www.youtube.com/watch?v=NEe6o047sPo

#WordPress #WordPress_для_Пользователя #css #elementor #плагин

Разрабатываем landing на WordPress + Elementor + Redux Framework

Как создать виджет на Elementor

Если вы хотите создать к...

Подборка слайдеров сравнения "До и После" с использованием CSS, JavaScript или jQuery [Before After Slider]
#CSS #JavaScript #jQuery #Slider
🚀 Смотреть https://wpcraft.top/slajder-sravneniya-do-i-posle-podborka-na-css-i-js/