не работает overflow внутри grid контейнера — решено!
Не работает корректно блок с overflow-x: scroll; или overflow-y: scroll; ? Есть решение — для ячеек grid нужно прописать: min-width: 0; min-height: 0;
CSS
Простое мобильное меню для сайта
Мобильное меню открывающееся при клике на кнопку (гамбургер и тд). В данном примере на полный экран. Кнопка открытия .mob_btn размещается в любом месте согласно макету. Кнопка закрытия .mob_btn_close находится внутри полноэкранного блока с меню. Контейнер для меню .mob_container размещается в любом месте в коде. html <a href=»#» class=»mob_menu_btn»>Меню</a> <div class=»mob_container hide»> <div class=»mob_btn_close»>Закрыть</div> <?php wp_nav_menu( … Читать далее
Как отключить стили Safari на iphone для элементов форм
Делаем так для элементов которые айфон раскрашивает по своему, и он не будет так делать) input[type=submit] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
Черно белый фильтр на блоке становится цветным при наведении
Простой и крутой эффект. Делаем чб любой блок, а при наведении делаем его цветным с небольшим эффектом перехода: .slick-arrow { filter: grayscale(1); -webkit-filter: grayscale(1); transition: 0.1s ease-in-out; -webkit-transition: 0.1s ease-in-out; opacity: 0.8; } .slick-arrow:hover { opacity: 1; filter: grayscale(0); -webkit-filter: grayscale(0); }
Чекбокс cf7 согласен с правилами
.wpcf7-form .wpcf7-acceptance label {font-weight: 500; font-size: 10px; line-height: 16px; margin: 0px; } .wpcf7-form input[type=checkbox] {display: none;} .wpcf7-form .wpcf7-list-item-label {margin: 10px 0 0 0px; display: block; padding-left: 24px; position: relative;} .wpcf7-form .wpcf7-list-item-label:before { background-color: #181C22; border-radius: 3px; border: 0px; width: 18px; height: 18px; content: »; display: block; position: absolute; left: 0; top: 2px; } .wpcf7-form input[type=checkbox]:checked … Читать далее
Как изменить css input type file и подсвечивать если выбран файл
Что бы стилизовать input file можно оформить его так: <div class=»fileup»> <label for=»file-1″> <span class=»wpcf7-form-control-wrap file-1″> <input type=»file» name=»file-1″ size=»40″ class=»wpcf7-form-control wpcf7-file» id=»file-1″ accept=».jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv» aria-invalid=»false»> </span> </label> </div> В плагине для вордпресс contact form 7 в редакторе выглядит примерно так: <div class=»fileup»> <label for=»file-1″> [file file-1] </label> </div> Скрипт добавляет класс для input file … Читать далее
Как изменить или убрать иконку у input type date
В хроме, и в некоторых других браузерах для поля input type date добавляется стандартная иконка черного цвета в виде календарика. Что бы убрать её или изменить пользуем такой псевдоселектор: /*Так можно перекрасить*/ ::-webkit-calendar-picker-indicator { filter: invert(1); } /*А так убрать*/ input[type=date]::-webkit-calendar-picker-indicator { opacity: 0; }
Как подключить локальные шрифты на сайт
В последнее время чаще всего использую ttf шрифты, подключаются следующим образом: @font-face { font-family: «Circe»; src: url(«fonts/circe-light.ttf») format(«truetype»); font-weight: 300; font-style: normal; } @font-face { font-family: «Circe»; src: url(«fonts/circe-bold.ttf») format(«truetype»); font-weight: 400; font-style: normal; } @font-face { font-family: «Circe»; src: url(«fonts/circe-extrabold.ttf») format(«truetype»); font-weight: 700; font-style: normal; } Сами файлы шрифтов должны лежать в папке fonts. … Читать далее
Woocommerce вкладки товара по горизонтали
Использую тему storefront, там по умолчанию вертикальные вкладки, вот код css делающий их горизонтальными. .product .woocommerce-tabs ul.tabs { width: 100%; float: none; margin-right: 5.8823529412%; border: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs { list-style: none; padding: 0 0 0 1em; margin: 0 0 1.618em; overflow: hidden; position: relative; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { position: absolute; … Читать далее
Отключить кэш браузера при верстке
Верстая сайт зачастую браузеры кэшируют сайт и мешают нормальной работе. Вот простой хак отключающий кэширование css файла: <? wp_enqueue_style( ‘style’, get_stylesheet_uri().’?v=’.time() ); ?> Точнее это не отключает само кэширование, а изменяет адрес файла css при каждом обновлении, и браузер каждый раз заново грузит css без кэша.