VasyOK{!}

Ссылку на сайт дадите? На пальцах не умею.

слой_бекграунд 1 {
голубой фон
}

слой_бекграунд 2 {
елочка
}

медизапрос когда ширина окна меньше елочке прозрачность по 0.5.

Если использую "-webkit", начинает работать в Chrome:

.main-menu ul li a::before {
    width: 18px;
    height: 18px;
    content: '';
    background: #828282;
    display: block;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    margin: 0 0 3px 0;
}

.main-menu ul li a.active::before,
.main-menu ul li a:hover::before {
    background: var(--clr1);
}

.main-menu .reit a::before {
    mask-image: url('../images/main_menu/reit.svg');
    -webkit-mask-image: url('../images/main_menu/reit.svg');
}

Но в Edge не все гладко ("заказы, мастерам"):

mask-repeat: no-repeat; - не работает в Edge?

Оно то решаемо, если задать ширину и высоту для каждого псевдоэлемна, но код какой-то страшный получается. Может я что-то неправильно делаю?

Приветствую специалистов по верстке!

Подскажите: как правильно задать бекграунд псевдоэелементу SVG картинкой, чтобы по наведению картинка цвет меняла?

Попробовал сделать так:

.main-menu ul li a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main-menu ul li a::before {
    width: 18px;
    height: 18px;
    content: '';
    background: #828282;
    display: block;
    mask-repeat: no-repeat;
    mask-position: center;
    margin: 0 0 3px 0;
}
.main-menu ul li a.active::before,
.main-menu ul li a:hover::before {
    background: var(--clr1);
}
.main-menu .reit a::before {
    mask-image: url('../images/main_menu/reit.svg');
}
.main-menu .orders a::before {
    mask-image: url('../images/main_menu/orders.svg');
}

Результат нормально работает только в Firefox:

В Crome плохо:

Сайт http://u14038.malleus.vps-private.net

Допустим этот текст вписан в многострочное текстовое поле (textarea)

Окно сжимается и хотелось бы, чтобы высота поля увеличивалась, а не как сейчас:

Можно что-то сделать?
Пробовал через https://github.com/javierjulio/textarea-autosize - ничего не вышло. Я на правильном пути?

Поздравляю с Рождеством мастеров верстки!

Подскажите: как сделать 2 прямоугольные  трапеции, обращенные друг к другу?

Скрин:

Пока что не получилось, так как на скрине. Уже и с transform мучался и с clip-path. Может что-то не понимаю.

https://jsfiddle.net/PlayboyZP/L24u0mrw/

С этим вопросом разобрался. Спасибо за внимание!

"Добавить ее." :)) Имею ввиду, вариант, когда она не нужна. Просто "Размещение рекламы".

":before или :after" - да мне подсказали, как через псевдоэлементы. Так что уже знаю. А без них, как-то можно?

AlexZaw, ваш вариант - подходит

https://jsfiddle.net/PlayboyZP/rw9vcau0/

А как поступить если нет этой строчки (?):

<div class="right"><span>1300 руб</span></div>

Хорошо, облегчу задачу. Как сделать так:

У меня получилось только так сделать:

https://jsfiddle.net/PlayboyZP/0xhr4bgn/

Приветствую специалистов по верстке.

Нарисовал мне дизайнер такой баннер

Подскажите как сверстать:

1) Строка "Размещение рекламы" по центру (по горизонтали)
2) фон этой строки закрашен только слева

"и мне не дали PSD  адаптивной верстки" - это ж хорошо. Значит делайте как хотите.

Ищу работу. Или заказы. Делаю сайты. Такие как эти:

• http://kapital-trans.ru/ - разветвленная структура, калькулятор подвоза стройматериалов (или аренды техники).
• https://www.ynafani.com.ua/ - магазин на 10 тыс. товаров, фасетные фильтры, поиск с подстановкой, вариативное меню (в зависимости от экрана и положения на странице)

Верстаю из PSD в Drupal, заимствую дизайны с Templatemonster. Jquery, анимация — по мелочи.

Вам не будет от меня толка, если:

• Вам нужен просто сайт визитка. Для этого есть масса сервисов и программ, которые позволяют сделать простой сайт человеку умеющему набрать текст в Word-е.
• Вам нужен просто интернет-магазин. Опять же — масса сервисов, предоставляющих готовое решение. Я не могу перебить цену готового продукта.

Вам может быть от меня толк, если:

• Вас не устраивают готовые решения. Нужны не стандартные структура, дизайн, сеонистические требования — это ко мне.
• Еще, как вариант, вы дизайнер, вам говорят: «ну рисуешь может и сайт нам сделаешь», тоже можем скооперироваться.

email: spamer35@gmail.com
скайп: webmasterzp

Atom слишком много ресурсов жрет.

MS Code какой-то недоделаный. Пользуюсь им.

Намудрил наверное с вопросом. Упрощаем задачу.

https://jsfiddle.net/PlayboyZP/6exdz9j1/2/

При скроле вниз оно сворачивается в кнопку. Если я открываю Категорию 1 и скролю вниз показывается только кнопка Каталог (свернутая). А как ее развернутой сделать?

Накодил я на jQuery мобильное меню, которое сворачивается в кнопочку в 2-х случаях:
1) когда скролим вниз
2) когда ширина окна меньше 760px;

Вопрос. Если  меню открыто, как сделать чтоб оно оставалось открытым и в мобильном варианте?

Тестовый сайт тут http://jq.caribe.vps-private.net/
CSS: http://jq.caribe.vps-private.net/style.css
JS: http://jq.caribe.vps-private.net/myscript.js - кодировку UTF-8 выставлять.

AlexZaw, IDE и Фреймворки для моих задач избыточны.

Среди редакторов пробовал наверное все популярные, и нашел эту функцию только в 2-х: Atom и MS Code. Мне нужно чтобы переносы сами расстанавливать при копировании вставке между вложенными функциями, а не после "выделить - форматировать". Если вы знаете еще какой-то редактор в коем это реализовано - можете написать, но я не нашел такого.

Подскажите радактор кода который автоматически расставлял бы отступы при вставке кода между функциями. Т.е.

Копирую

.show1-inner {
    padding: 0;   
 }

за пределы @media only screen and (max-width: 960px)

Первый скрин (MS Code)  все хорошо. Скобки где надо. Свойство "padding" с правильным оступом

Второй скрин (Synwrite) -  плохо. Последняя скобка "ушла". Свойство "padding" с оступом больше чем надо.

Пока что нашел только MS Code и Atom. Может еще есть что-то с поддержкой данной функции?

что то не сильно красиво работает в жсфидле

Все привет. Есть инпут ввода текста.

<input id="to-search" class="form-text">

Как, сделать, чтобы по вводу в этот инпут было перенаправление на кастомный урл, например на /search=[slovo] ?

Я конечно же могу наХТМЛ-ить форму типа

<form action="/product-search?title" method="get">                    
      <input class="form-text" type="search" name="title" placeholder="Поиск по сайту">                   
</form>

но интересует, как сделать через JS / JQuery

Понимаю, что вопрос легкий не обижусь если в доки ткнете.

klierik
моя CMS позволяет такое вытворить. А в CSS медиазапросами такое возможно? поробовал прописать такой viewport  не вижу изменений. может не туда смотрю, но браузер никак не масштабирует.

DevChristmas
вот у меня почему-то как zoom работает - устраивает, а transform нет. transform-origin: left top 0; не спасает. Может я странный - не спорю.

Меня устраивает то, что творит на сайте http://durmitor1.ru/ свойство zoom:(1.4), но вот она не работает в firefox и transform: scale(1.4) не дает так же хороших результатов как zoom  в других браузерах. Можно как-то - через CSS? Или через JS? Если через JS - можете подсказать код или ссылку на пример.

Т.е. определить разрешение можно, а масштаб нельзя?

Ок, а как определить включено ли масштабирование на в браузере?

Один товарищ нашел 5k монитор. Разрешение на коем огого, при этом масштабирование интерфейса в Windows отключено.
Как принудительно масштабировать сайт, если масштабирование интерфейса в ОС отключено?

"Отображается четко на разных устройствах" не думаю что методы приведенные выше кроссбраузерны. Хотя и картинка на прозрачном фоне в старых версиях ИЕ может кривить