Наверх

Как задать цвет вкладки в браузере на Android

25.03.2017 23:57

Мобильный Google Chrome версии 39 и новее на Android Lollipop позволяет дополнительно стилизовать представление сайта, перекрасив в "фирменный" цвет вкладку браузера.

К сожалению, это не свойство CSS, а всего лишь новый мета-тег, который размещается внутри тега  <head></head>:
Читать далее...

Шестиугольные и наклонные кнопки на чистом CSS

08.02.2016 00:42

По умолчанию чистый CSS не предназначен для создания фигур, отличных от прямоугольника. Конечно, CSS3 привнес множество отличных методов, в том числе наклонов и трансформаций, однако все они влияют и на содержимое изменяемого блока.

Чтобы создать шестиугольную кнопку без использования картинок, разделим ее на 3 фрагмента: левый и правый "уголки" и середину, содержащую текст кнопки:
Читать далее...

Кнопка-панель «Наверх» как на Вконтакте для WordPress и других сайтов

18.07.2014 23:03

Для длинных страниц с большим объемом информации давно уже стало стандартом наличие кнопки "Наверх", возвращающей пользователя к самому началу страницы, где обычно находятся все кнопки навигации и меню. Сделать такую кнопку можно по-разному, например ссылкой на элемент вверху страницы. У сервиса Вконтакте с его бесконечными подгружаемыми налету страницами возврат "Наверх" представлен панелью, причем если пользователь желает вернуться к тому месту, где он закончил читать, повторное нажатие на панель перенесет его вниз к точке остановки.

Рассмотрим, как реализовать подобную систему для любого сайта практически на любом движке, поддерживающем шаблоны, а также для обычных статических html-сайтов.
В качестве примера будет рассмотрен WordPress.

Читать далее...

Особенности CSS: Если внутренние отступы и границы увеличивают размер блока…

04.12.2013 12:03

...значит вы еще не используете свойство Box-Sizing.

В CSS внутренние отступы (padding) и границы (border) автоматически растягивали блок. Если у вашего блока задана ширина 100%, то с внутренними отступами она станет еще больше и нарушит вёрстку. Чтобы блок был фиксированной ширины при любых значениях padding и border в CSS3 предусмотрено свойство box-sizing.

У этого свойства есть два значения:

  • content-boxпо умолчанию, контент внутри блока будет отображаться по-старому, т.е. например, вместо 100х100 px будет 140х140 px.
  • border-box позволяет вычитать значения padding и border  из ширины и длины блока, т.е. например блок останется с фиксированными параметрами, но область контента уменьшится до 60х60 px.

Читать далее...

Динамический layout в стиле «карточек» Google+ с помощью JQuery Masonry

22.10.2013 15:08

Masonry - это JQuery-плагин позволяющий быстро и просто организовать динамический layout блоков разного размера практически без потери места, а если подобрать соответствующие размеры блокам — то без пустых мест вовсе.
Под динамическим layout`ом имеется ввиду, что блоки будут располагаться в контейнере в зависимости от его размеров, максимально рационально заполняя его пространство, тем самым экономя место на странице.
Читать далее...

Произвольный вид поля file в html-форме, одинаковый во всех браузерах

05.03.2013 18:13

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). "type=file" определяет поле для ввода имени файла, который пересылается на сервер.

У браузеров нет единых стандартов, как отображать этот элемент по умолчанию.

Читать далее...