Наверх

Архив для категории «Вёрстка и CSS»

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

08.02.2016 00:42
1353421571_text-css

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

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

Настройки встраивания YouTube видео. Расширенные настройки для эффективного встраивания

14.10.2015 13:44
youtube

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

Общепринятой платформой для публикации видео давно стал YouTube от Google, как обладающий практически неограниченными техническими возможностями, шириной канала и удобным интерфейсом управления настройками видео и плей-листами.

Но что, если видео нужно вставить непрерывным звуковым сопровождением (скрыть от пользователя кнопки управления воспроизведением) или, к примеру, хочется избавиться от логотипа YouTube поверх видео?

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

Вставляем в страницу responsive видео на Bootstrap

02.11.2014 13:47
bootstrap-logo-128

Twitter Bootstrap - отличный набор интсрументов, позволяющий с помощью набора стилей создавать сайты, автоматически подстраивающиеся под любой размер экрана. Ниже приведен способ, позволяющий пропорционально изменять размер видео, встраиваемого в страницу. Это особенно актуально для продающих (посадочных) страниц, которые должны хорошо выглядеть на всех устройствах от мобильного телефона до широкоформатного монитора компьютера.

В приведенном способе предусмотрено два типа видео согласно соотношению сторон: 16 к 9 и 4 к 3. Для применения этого способа видео необходимо поместить в контейнер с соответствующим классом.

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

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

04.12.2013 12:03
box-sizing

...значит вы еще не используете свойство 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.

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

Jquery-плагин DataTables для лёгкого создания сортируемых таблиц

12.03.2013 12:12
jquery

DataTables -это плагин для Javascript-библиотеки JQuery. Это гибкий инструмент, добавляющий расширенные возможности управления таблицами в html. Основные возможности плагина:

  • постраничная разбивка с задаваемым количеством записей
  • фильтрация "на лету"
  • сортировка по нескольким столбцам с определением типа данных
  • автоматическая обработка ширины столбцов
  • отображение данных практически из любого источника данных (DOM, JavaScript массива, Ajax файла и обработки на стороне сервера (PHP, C #, Perl, Ruby, AIR, Gears и т.д.))
  • локализируемость
  • поддержка JQuery UI ThemeRoller
  • дополнительные модули, Editor, TableTools, FixedColumns и т.д.

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

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

05.03.2013 18:13
1353421571_text-css

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

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

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

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

Свойство CSS3 transform

20.11.2012 16:27
1353421571_text-css

CSS3 и HTML5 развиваются всё быстрее и быстрее, браузеры начинают поддерживать всё больше новых фишек и плюшек. Одно из нововведений CSS3 - cвойство transform, которое применяет трансформацию к элементу (можно применить несколько трансформаций, задавая значения через пробел). Оно позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.

Синтаксис

transform:  []* | none

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

Таблица спецсимволов с ASCII-кодами

06.11.2012 12:36
Fonts

Для отображения символов, которых нет на клавиатуре, применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;). Также их корректно указывать при верстке в html-коде вашей страницы.

Основная масса спецсимволов работает в фонтах Helvetica, Arial, Tahoma, verdana и sans-serif.

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