IT Blog. Code Inside

Опубликовано: 24.08.2018

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

25.03.2017 23:57

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

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

Показываем пользователю флаг его страны при посещении сайта

02.02.2017 11:00

Рассмотрим небольшую практическую задачу: как показать пользователю флаг его страны, когда он заходит на ваш сайт?

How to Add AdSense Ads Code Inside Post for Blogger

Для решения этой задачи понадобятся два сервиса: Flag Sprites и freegeoip.net, рассмотренный в предыдущей статье .

С помощью сервиса Flag Sprites получаем архив , содержащий изображение со всеми флагами мира, и CSS-файл, определяющий координаты каждого флага. В примере рассматриваются большие флаги 32x32.

INSIDE A CODE BOOTCAMP - RESPONSIVE DESIGN

Распаковываем архив в папку проекта, например flags и подключаем полученный CSS к html странице.

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

08.02.2016 00:42

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

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

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

14.10.2015 13:44

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

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

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

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

02.11.2014 13:47

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

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

Особенности 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.

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

12.03.2013 12:12

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

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

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

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

Свойство CSS3 transform

20.11.2012 16:27

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

Синтаксис

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

06.11.2012 12:36

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

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