Рубрика: css

  • 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; } Этот простой сниппет позволит получить желаемый результат, выполнив […]

  • Css. Как сделать стрелку?

    Применение различных CSS-селекторов и свойств помогает избежать использования графики, что существенно облегчает вес страницы и ускоряет ее загрузку. Думал описать теоретическую составляющую этого процесса, но решил скинуть линк на ресурс, которым я всегда пользуюсь. Это http://www.cssarrowplease.com/. Ресурс позволяет указать основные параметры и получить готовый для вставки css-код. Понять его более чем легко, если просто поиграть […]

  • Html. Как убрать стрелку из select?

    В современных дизайнах очень часто встречается стилизированный выпадающий список, который проще всего реализовать, убрав стрелку из стандартного select. Чтобы избавиться от стрелки в select используйте следующий сss-код: select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } Этих правил будет достаточно для всех номральных браузеров, но, как всегда, не забываем о самом любимом браузере. Explorer не […]

  • Css. Hover для :before (:after)-элементов.

    Очень-очень короткая заметка о совместном использовании псевдоклассов (например, :before, :after) и hover — т.е. изменение свойств псевдоэлементов при наведнии мышки. Собственно, очень короткая заметка — т.к. решение очень простое. .some_class:hover:before { opacity: 1; }

  • Javascript. Css. Пример крутого 3D-эффекта

    Сегодня натолкнулся на очень крутой материал о 3D эффектах при помощи, практически чистого CSS — с маленькой примесью Javascript. Хочу привести пример и у себя в блоге — т.к. искренне впечатлен тем, насколько развивается web-отрасль. Итак, мини-разбор примера здесь. Демо здесь. Скачать и пощупать пример можно тут.