Как растянуть SVG картинку только по высоте при фиксированной ширине

Тема справедлива так же для растягивания ширины при неизменной высоте. На самом деле задача немного специфичная, ведь зачем сознательно искажать картинку/иконку, тем не менее случаи бывают разные. В моем случае нужно было сделать блок, который при наличии контента растягивался бы по высоте и его «уголок» был адаптивным. Саму рабочую конструкцию вставлять не буду, т.к. запись … подробнее

Префиксы для flexbox CSS (кросбраузерный flexbox)

В момент написания заметки поддержка flexbox браузерами составляет 86,3% без использования префиксов и 97,7% с ними. Данная заметка — шпаргалка по префиксам для свойств flex-контейнера и flex-элементов.

Данный кусочек относительно использования префиксов взят из объемной статьи по flexbox’ам с другого источника.

Почему не работает sub и sup в html

Теги <sub> и <sup> определяют подстрочный и надстрочный вариант написания текста, т.е. отображают шрифт в виде верхнего или нижнего индекса. Я данные теги использую в работе не часто и потому совсем из головы могла вылететь причина того, почему текст мог не поддаваться форматированию, другими словами в голове был один вопрос: какого хрена почему не работает <sub> … подробнее

Отступ справа от сайта (белый фон) на мобильных устройствах

Часто бывает так, что на мобильной версии сайта при просмотре на телефоне справа появляется непонятный отступ с белым фоном: Вроде и body и html при просмотре через webtools при наведении на них находятся в границах сайта, а отступ этот все равно находится за пределами body/html. Как правило, все дело во внутренних отступах, а именно в … подробнее

Как сделать ссылку некликабельной с помощью CSS

Не понимаю, почему так редко попадается информация о том, как сделать ссылку некликабельной при том, что это вполне штатное действие. Для этого нужно прописать CSS-свойство pointer-events для ссылки напрямую, через класс или id:

Ну и, соответственно, присваиваем ссылке класс .unclickable Пример: Ссылка Стоит заметить, что свойство pointer-events относится к спецификации CSS4, но в настоящий момент … подробнее

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

На данном этапе работаю с одним сайтом на WorPress и столкнулся с одной проблемкой. Не то, чтобы это было проблемой, но мои перфекционистские замашки не дают мне покоя 🙂 Неприятность в том, что при работе с файлами через Sublime на хостинге, я получал после каждой строки кода 2-3 пустые строки. Порыскав в интернете сначала нашел … подробнее

Позиционирование блока через position:relative оставляет пустое пространство. Как убрать?

Половину дня потратил на решение проблемы с пустым пространством, возникающим вследствие позиционирования блока с помощью position:relative. В моем случае я перекрывал часть одного фона другим (такая вот дизайнерская задумка). Проблема заключалась в том, что после перемещения блока вверх, под ним появлялось пустое пространство, равное по высоте значению top. По некоторым ссылкам из поисковика натыкался на … подробнее

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

Для того, чтобы добавить в качестве обрамительного элемента горизонтальные линии до и после заголовка (картинки, логотипа и т.д.) можно использовать CSS и сделать при этом вполне адаптивный вариант. Для этого нужно использовать псевдоэлементы :before и :after. Html-конструкция должна выглядеть следующим образом:

Для основной обертки используем следующие CSS-правила:

Для дочернего элемента <span> добавляем позиционирование, чтобы … подробнее

Автосохранение файла в SublimeText

Тяжеловато находил ответ на этот вопрос в поисковиках, поэтому решил добавить данную записиску. Так вот. Для того, чтобы ваш дорогой и горячолюбимый SublimeText смог автоматически сохранять редактируемый файл при потере фокуса с вкладки открытого файла или окна редактора необходимо проделать следующее: 1) Переходим в настройки редактора Preferences >> Settings — User 2) Добавляем в настройки строчку «save_on_focus_lost»: true, … подробнее