Метка: css3

  • Css. Как отцентровать по вертикали блок внутри абсолютно-позиционированного блока?

    Вопрос вертикального выравнивания в CSS часто вызывает проблемы. Особенно они актуальны при необходимости выровнять блок внутри абсолютно-позиционированного блока. Но есть простое решение, о котором сейчас и пойдет речь. Итак, решение достатоно простое, но не очевидное. Итак. CSS: .valign { position: relative; top: 50%; transform: translateY(-50%); /* vendor prefixes omitted due to brevity */ } HTML: […]

  • JavaScript. Как программно переключить вкладку (tab)?

    Сегодня появилась необходимость программного переключения вкладок на bootstrap tabs. Решение очевидное — но сразу пошел не верным путём — поэтому сейчас раскажу, как быстро и правильно переключить bootstrap вкладку. На самом деле — все сверх-просто, причем, конечно же, есть в Документации. Но, тем не менее — не будет лишним еще раз указать исковые методы. Итак: […]

  • Css. Bootstrap. Как установить жирность текста.

    У bootstrap есть множество классов-хелперов, позволяющих легко давать контенту определенные свойства — например, .text-center — выровняет содержимое по центру. Сегодня задался вопросом — есть ли соответствующий класс для жирности текста. Ответом сейчас и поделюсь. Ответ достаточно просто. Подобного класса — нет. : ) Точнее он есть — и называется — .font-weight-bold, но лишь в bootstrap […]

  • CSS3. Селектор :not.

    Век живи — век учись. Хоть я и не верстальщик, но правки в верстку вношу часто. При этом наличие CSS-селектора :not всегда скрывалось от моего внимания. На самом же деле в CSS3 подобный сплектор есть и позволяет решить множество проблемных вопросов. Например, на данном сайте я добавлял правило для подсветки строк в таблице в контентной […]

  • Css. Подсветка четных и нечетных строк.

    Табличный вывод очень плохо визуально читается если не выделять четные и нечетные строки какой-то особенностью — например, легким оттенком фонового цвета. Как при помощи css реализовать подсветку четных и нечетных строк таблицы я покажу в этой короткой статье. Итак, все, что нам нужно — это понимание селектора nth-child. Пример стилей, прописанных в моем блоге для […]

  • Bootstrap. Как добавить иконку к кнопке?

    Немного, казалось бы, очевидный вопрос, — но, как оказалось, часто встречаемый в интернете. Посмотрим, как мы можем вставить иконку в кнопку на bootstrap. Для начала приведу линк на перечень доступных икoнок. Что касается самого кода — то он также очень прост: Sign in Здесь мы видим обычный button с bootstrap-классами btn btn-primary, внутри которого размещена […]

  • Как изменять высоту textarea в зависимости от количества строк?

    Люблю отзывчивые дизайны, люблю, когда все продумано до мелочей и сейчас речь пойдет именно о таком jqeury-плагине. Он позволяет изменять высоту textarea в зависимости от количества введенного текста, при этом не создает дубликатов и скрытых полей, которые замедляют работу страницы. Все очень просто и удобно. Не буду приводить много примеров — приведу две ссылки, на […]

  • Html. Css. Как указать свой файл курсора?

    Изменение курсора, в последнее время, редкая практика, но, тем не менее, следует знать о такой возможности. Все, на самом деле, очень просто: cursor: url(images/cursor.cur); cursor: url(images/cursor.png) x y, auto; Все просто — кто хоть немного знаком с CSS — все поймет без проблем. Ну а посмотреть список доступных базовых шаблонов можно здесь.

  • Html5. CSS3. Полный перечень доступных курсоров.

    CSS3, как я недавно узнал, существенно уразнообразил список доступных курсоров, что не может не радовать. В этой статье приведу полный список доступных для использования курсоров. Итак, наводите мышкой на абзацы ниже и смотрите результат: Старые стили с CSS2: cursor: auto cursor: inherit cursor: crosshair cursor: default cursor: help cursor: move cursor: pointer cursor: progress cursor: […]

  • Html5. Как убрать стрелочки с input[type=number]

    Стандартные стрелочки с текстового поля с типом number выглядят убого и мало когда подходят по своему внешнему виду. Ввиду этого хочу поделиться примером стилей, которые позволяют избавиться от ненужных визуальных контролов, при этом сохранив базовый функционал. input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type=’number’] { -moz-appearance: textfield; } Этот простой сниппет позволит получить желаемый результат, выполнив […]