Достаточно интересный способ организации обычного маркированного списка в две колонки.

Имеется определенное количество элементов

1

li

1

ul

1

li

Но проблема в том, они новые и не всеми браузерами поддерживаются. Тогда смысл их применять? Но можно воспользоваться CSS2 и этот способ был случайно мною “подсмотрен” на сайте Loco.ru у автора dIrm. Мною этот способ был немного доработан и помещен у себя в качестве копилки.

Итак, имеется обычный маркированный список в виде HTML-разметки. Количество элементов

1

li

<ul>
  <li>Колонка 1</li>
  <li>Колонка 2</li>
  <li>Колонка 3</li>
  <li>Колонка 4</li>
  <li>Колонка 5</li>
  <li>Колонка 6</li>
  <li>Колонка 7</li>
  <li>Колонка 8</li>
  <li>Колонка 9</li>
  <li>Колонка 10</li>
  <li>Колонка 11</li>
</ul>

Сделаем CSS-стилизацию списка, ничем не примечательную. Класс

1

.clearfix

1

ul

1

li

1

ul

ul{
  list-style-type: none;
  width: 398px;
  margin: 100px auto;
  border: 1px solid #000;
  font: bold italic 16px/30px Georgia, serif;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,.8);
}

.clearfix:before,
.clearfix:after{
  content: "";
  display: table;
}

.clearfix:after{
  clear: both;
}

Вот теперь немного интереснее, когда приступим к элементу

1

li

1

display: block

1

width: 45%

Все элементы сделаем плавающими влево

1

float: left

1

display: block

1

li

В результате все эти элементы располагаются “по порядку”. “Колонка 1” в левом верхнем углу, следом за ним - “Колонка 2”. “Колонка 3” не вмещается по ширине в область блока-родителя, поэтому располагается под “Колонка 1”. Далее - опять все по порядку. Три правила

1

padding-bottom: 10px

1

text-align: center

1

background-color: #556677

ul li{
  display: block;
  float: left;
  width: 45%;
  padding-bottom: 10px;
  text-align: center;
  background-color: #556677;
}

Ну и в конце еще несколько штрихов для придания полной иллюзии двухколоночного текста. Здесь воспользуемся правилом

1

nth-child

1

even

li:nth-child(even){
  margin-left: 10%;
  background-color: #667788;
}

На этом все.

Статья написана в далеком 2011 году одним товарищем по имени Jonathan Snook.

Статейка мне понравилась и пришлась в пору - мне как раз нужно было ознакомиться с вопросом масштабируемого размера шрифта и возможности единообразного задания его размера для всего документа.

Материальчик понравился и я решил, что я лучше не смогу его написать, чем как просто перевести. Вопрос хорошо освещен - кратко и по делу, с необходимыми примерами.

Думаю, в следующих своих верстках я буду применять именно тот подход, который описан здесь. Ниже - мой вольный перевод.

Размер шрифта в rem

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

Наиболее популярны два метода определения размера шрифта:

• размер шрифта в пикселях

  1

  px

• размер шрифта в

  1

  em

Давайте сделаем краткий обзор обоих методов, прежде чем я представлю еще один - волшебный третий способ.

Размер шрифта в

1

px

С самого первого дня, когда зародился Интернет, мы (веб-мастера) использовали пиксели для задания размеров текста. Это надежный и понятный способ.

К сожалению, пользователи Internet Explorer - даже IE9 - не имеют возможности изменять размер текста, используя для этого встроенную функцию браузера.

Для веб-мастеров, которые озабочены такой возможностью, это большая проблема. Последние свежие версии браузера IE имеют встроенную функцию масштабирования, которая увеличивает размер ВСЕГО на странице - эта возможность присутствует во всех остальных браузерах, поддерживающих веб-стандарты. Это несколько сглаживает недостатки браузеров и данного метода, в частности.

Исходя из своего личного опыта, могу сказать, что использование пикселей предоставляет для меня надежную структуру будущего сайта. Пользователи браузеров имеют достаточно средств, чтобы подстроить сайт под свои предпочтения. Но я отвлекся от темы. Что еще у нас есть в наличии?

Размер шрифта в

1

em

Невозможность изменения размеров текста в браузере IE постоянно вызывало чувство разочарования у веб-разработчиков. Чтобы обойти эту проблему, можно использовать единицы измерения

1

em

Впервые об этом способе написал в далеком 2004-м году Richard Rutter в своей статье How to size text using ems.

Этот способ основан на задании основного размера шрифта для

1

body

1

1em

1

10px

1

16px

Теперь, чтобы установить размер шрифта для элемента страницы в единицах, эквивалентных

1

14px

1

1.4em

body { font-size: 62.5%; }
  h1 { font-size: 2.4em; } /* =24px */
  p  { font-size: 1.4em; } /* =14px */
  li { font-size: 1.4em; } /* =14px? */

Проблема с размерами шрифта в

1

em

1

li

Если добавить еще один вложенный уровень, то размер шрифта будет 27px! Происходит это вследствие наследования свойств в CSS-таблицах.

Чтобы избежать такого эффекта, нужно явно прописать для каждого дочернего элемента размер шрифта в 1em:

body { font-size:62.5%; }
  h1 { font-size: 2.4em; } /* =24px */
  p  { font-size: 1.4em; } /* =14px */
  li { font-size: 1.4em; } /* =14px? */
  li li, li p /* etc */ { font-size: 1em; }

Проблема наследования при системе задания размеров шрифта в em достаточно неудобна. Что же можно еще предложить для решения проблемы?

Размер шрифта в

1

rem

Стандарт CSS3 вводит в обиход несколько новых единиц измерения, одной из которых является

1

rem

Единица измерения

1

em

1

rem

Это означает, что можно установить размер шрифта только один раз, для элемента html. Для всех остальных элементов, которые являются потомками этого элемента, достаточно установить размер шрифта в процентах (

1

rem

html { font-size: 62.5%; }
  body { font-size: 1.4rem; } /* =14px */
  h1   { font-size: 2.4rem; } /* =24px */

В примере, показанном выше, базовый размер шрифта установлен в процентах

1

62,5%

1

em

1

rem

1

em

Но как насчет скудной поддержки этой единицы измерения в браузерах?

Вы будете сильно удивлены, но поддержка

1

rem

1

rem

1

rem

Как же нам поступить с браузерами, которые не поддерживают единицы измерения

1

rem

1

fallback

1

px

1

px

1

rem

html { font-size: 62.5%; } 
  body { font-size: 14px; font-size: 1.4rem; } /* =14px */
  h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

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

Декабрь 13 2011 - Opera 11.60 теперь поддерживает единицы измерения

1

rem

Конец статьи и перевода. В дополнение я могу сказать, что на сайте CSS Tricks также есть интересный материал по поводу

1

rem

В частности, на нем приведены удобные

1

mixin

1

rem

1

fallback

1

px

html{
  font-size: 62,5%;
}

@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

Пример использования этого SASS-mixin’а:

p{
  @include font-size(1.8);
}

… что при компиляции в CSS будет выглядеть следующим образом:

p{
  font-size: 18px;
  font-size: 1.8rem;
}

И еще несколько разновидностей SASS-mixin’ов, которые могут пригодиться. Подмешивания используются для задания размера шрифта и интерлиньяжа (высоты строки):

@mixin fontSize($sizeValue: 12 ){
    font-size: $sizeValue + px; //fallback for old browsers
    font-size: (0.125 * $sizeValue) + rem;
  }

  /* Как подключать
  --------------------*/
  p{
    @mixin fontSize(20);
  }

  /* Результат компиляции в CSS
  -------------------------------*/
  p{
    font-size: 20px;
    font-size: 2.5rem;
  }

@mixin lineHeight($heightValue: 12 ){
    line-height: $heightValue + px; //fallback for old browsers
    line-height: (0.125 * $heightValue) + rem;
  }

  /* Как подключить
  -------------------*/
  p{
    @mixin lineHeight(18);
  }

  /* Результат компиляции в CSS
  --------------------------------*/
  p{
    line-height: 18px;
    line-height: 2.25rem;
  }

А здесь представлен “полный”

1

mixin

1

line-height

1

rem

@mixin fontsize($size:1.6, $line: $size * 1.5){
    font-size:   ($size * 10) + px;
    line-height: ($line * 10) + px;
    font-size:   $size + rem;
    line-height: $line + rem;
  }

  /* Как подключить
  -------------------*/
  p{
    @mixin fontsize(1.8);
  }

  /* Результат компиляции в CSS
  -------------------------------*/
  p{
    font-size: 18px;
    line-height: 27px;
    font-size: 1.8rem;
    line-height: 2.7rem;
  }

P.S.

Постепенно изучаю вопрос создания тем под WordPress. Скачал версию 3.7.1, установил под локальный сервер XAMPP и открыл файл

1

style.css

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.142857143rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.714285714rem 0; ( 24 / $rembase )
}

---------- Further reading
http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

То есть, что нам сообщают разработчики WordPress в этих строках? Что данный файл стилевых правил использует для построения дизайна сайта два значения в качестве переменных:

$rembase:     14;
$line-height: 24;

… в единицах измерения

1

rem

1

fallback

1

px

В самом конце две ссылки по тематике

1

rem

В веб-дизайне и сайто-строительстве сегодня очень популярны шрифтовые иконки.

Чем объясняется подобная распространенность таких иконок и что они из себя представляют вообще? Само название шрифтовые - говорит о многом.

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

Объяснения объяснениями, но лучше на практике раз попробовать с ними столкнуться или поработать. Чтобы не забираться в дебри, скажу сразу - каждый из нас сталкивался хоть раз в жизни с такими шрифтами.

Для этого откройте Microsoft Word, выберите в нем любой из наборов шрифтов - “Wingdings”, “Wingdings 2”, “Wingdings 3” - и попробуйте попечатать в пустом документе. Вместо “букав” будут печататься всякие разные символы:

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

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

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

Упоминание одного из таких сервисов (кстати, очень популярного) я встретил недавно, просматривая видеокурс “TutsPlus - PSD to WordPress minimal portfolio”. В одном из уроков автор Adi Purdila говорит о том, что сервис IcoMoon очень легко и просто использовать для целей применения шрифтовых иконок на сайте.

Раз сервис IcoMoon легко и просто использовать - тогда это как раз для нас! Давайте попробуем выбрать с его помощью несколько нужных нам символов и “прикрутим” их к нашему проекту.

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

Помимо возможности выбрать иконки, их можно редактировать. Для этого нужно предварительно выбрать вверху значок карандашика. Если потом выбрать нужную иконку, то откроется окно редактирования, в котором можно выполнить поворот по часовой стрелке и против, зеркально отобразить иконку по вертикали и по горизонтали, изменить размеры иконки:

Когда нужный набор иконок выбран, переходим вниз страницы и нажимаем кнопку Font. Откроется промежуточное окно, в котором представлен список всех выбранных для скачивания иконок и их характеристики:

Здесь также можно отредактировать необходимые иконки - название, код и так далее. Если все устраивает, нажимаем кнопку Download, чтобы скачать выбранный набор в виде архива:

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

1

fonts

1

style.css

Директорию со всем ее содержимым просто перекидываем в проект “как есть”, а файл

1

style.css

Нам потребуется его содержимое, которое также можно перенести в css-файл проекта почти без изменений. Но рассмотрим содержание

1

style.css

@font-face {
  font-family: 'icomoon';
  src:url('../fonts/icomoon.eot');
  src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon.woff') format('woff'),
    url('../fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

… эти строчки кода “обычные” - здесь происходит подключение скачанных шрифтов. Только нужно немного исправить путь к файлам:

[class*="icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

… эти строчки - CSS-стили для скачанных шрифтовых иконок. Точнее - здесь приводиться к общему знаменателю отображение этих шрифтов:

.icon-bubble:before {
  content: "\e600";
}
.icon-bubbles:before {
  content: "\e601";
}
.icon-bubbles2:before {
  content: "\e602";
}

Классы для скачанных шрифтовых иконок и пример их применения в HTML-странице. В данном случае - через псевдоэлемент

1

:before

Как видно из кода, иконки можно очень легко редактировать черед правила CSS. Давайте немного пофантазируем и преобразуем вышеприведенный код:

@import "compass/css3";
.icon-bubble:before {
  content: "\e600";
}
.icon-bubbles:before {
  content: "\e601";
  margin-right: 5px;
  color: #ff0000;
}
.icon-bubbles2:before {
  content: "\e602";
  margin-right: 10px;
  color: #0000ff;
  font-size: 26px;
  line-height: 26px;
  cursor: pointer;
  @include transition-property(color);
  @include transition-duration(.5s);
  @include transition-timing-function(ease-in);
}
.icon-bubbles2:hover:before{
  color: darken(#0000ff, 20%);
}

Вот мы и познакомились со шрифтовыми иконками. Все оказалось просто и приятно в работе.

Интересный вопрос создания поля поиска с кнопкой внутри.

Сейчас такой прием очень популярен в дизайне и используется повсеместно на сайтах. Почему популярен - просто очень красив такой способ передачи поля ввода в веб-приложении. Чтобы было более понятно, о чем идет речь, давайте посмотрим пример макета с подобной формой поиска:

Дизайн нарисован таким образом, что видим следующее. Поле ввода текста с текстом-заглушкой

1

placeholder

Все вроде так и в чем же проблема? Трудность заключается в том, что на сегодняшний день возможности CSS не позволяют поместить кнопку внутри элемента

1

input

1

input

1

button type="submit"

1

input type="submit"

Оба эти элемента обернуть в родительский элемент

1

form

1

padding

1

input

1

button

1

form

На авторитетном для меня сайте htmlbook есть статья, посвященная подобному вопросу. Но в ней описывается способ, когда внутрь элемента форм вставляется дополнительный блок

1

div

Мне такой подход не совсем понятен - зачем плодить лишнюю разметку, когда с подобной задачей прекрасно справляется сам элемент

1

form

Мне более нравиться способ, представленный на сайте Speckyboy.com автором Catalin Rosu, в котором как раз и используются только три элемента:

1

form

1

input type="text"

1

button type="submit"

Приступаем к первому примеру и начнем создавать поле поиска с кнопкой, как на картинке. Для начала придадим элементу

1

form

1

padding

Помимо этого, явно установим ширину и высоту нашего будущего “поля” ввода и немного приукрасим ее, анимировав цвет границы при наведении

1

hover

form{
  border: 1px solid #ad9d80;
  padding: 4px 20px 4px 24px;
  width: 254px;
  margin: 0 0 25px 0;
  height: 30px;
  background-color: #e4d9c5;
  border-radius: 9px;
  
  &:hover{
    border-color: darken(#ad9d80, 10%);
  }

Теперь уберем все, что делает

1

input

1

padding

1

margin

Это основные свойства элемента

1

input

1

outline

1

-webkit-appearance: none

1

border

Фоновый цвет сделаем одинаковым с элементом

1

form

1

input

Практически также поступим для элемента

1

button

1

text-transform: uppercase

1

color: #4f432e

Кстати, у Catalin Rosu я перенял “фишку”, когда он применяет

1

button type="submit"

1

input type="submit"

1

button

1

input type="submit"

input[type="text"]{
  border: none;
  margin: 0;
  outline: none;
  -webkit-appearance: none;
  height: 30px;
  vertical-align: top;
  background-color: #e4d9c5;
  color: #beb19a;
  font-size: 18px;
  font-style: italic;
  padding: 0 8px 0 0;
  width: 192px;
}

button[type="submit"]{
  border: none;
  margin: 0;
  padding: 0;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 30px;
  color: #4f432e;
  background-color: #e4d9c5;
  cursor: pointer;
  transition: color .2s;
  
  &:hover{
    color: lighten(#4f432e, 10%);
  }

Ну и в конце приукрасим текст-заглушку

1

placeholder

input::-webkit-input-placeholder {
  color: #beb19a;
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
}
input:-moz-input-placeholder {
  color: #beb19a;
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
}
input:-ms-input-placeholder {
  color: #beb19a;
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
}

Совсем забыл привести HTML-код, на основе которого создавались все вышеприведенные стили:

<form action="#" method="#">
  <input type="text" name="email" id="email" placeholder="enter your email address...">
  <button type="submit">send</button>
</form>

Результат создания поля поиска показан ниже:

Все хорошо.

Поле ввода и кнопка со стрелкой (псевдо-элемент) внутри.

На закуску привожу полный код (почти без объяснений - чего там объяснять) от Catalin Rosu, как и обещал.

Здесь есть интересный атрибут

1

required

Также автором статьи намеренно используется элемент

1

input type="text"

1

input type="search"

<form class="catalin">
    <input type="text" placeholder="Search here ..." required>
    <button type="submit">Send</button>
  </form>

Довольно объемный, но это связано с теми эффектами, которые применены к данной форме:

form.catalin{
  width: 390px;
  margin: 50px auto;
  overflow: hidden;
  padding: 10px;
  background-color: #ccc;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,.3) inset;
}
  form.catalin input{
    float: left;
    border: none;
    padding: 2px 10px 2px 4px;
    font: 16px Arial, Helvetica, sans-serif;
    height: 26px;
    width: 306px;
    margin: 0;
    -webkit-appearance: none;
    outline: none;
    box-shadow: 0 0 1px rgba(0,0,0,.5);
    border-radius: 3px 0 0 3px;
  }
  form.catalin button{
    float: left;
    border: none;
    background-color: #778899;
    padding: 0;
    margin: 0;
    width: 70px;
    height: 30px;
    font: bold 12px/30px Arial, Helvetica, sans-serif;
    position: relative;
    cursor: pointer;
    text-shadow: 1px 1px 1px rgba(255,255,255,.5);
    border-radius: 0 3px 3px 0;
    text-transform: uppercase;
    text-align: center;
  }
    form.catalin button:hover{
      background-color: #667788;
    }
  form.catalin button:before{
    content: '';
    position: absolute;
    top: 10px;
    left: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #778899;
  }
    form.catalin button:hover:before{
      border-right-color: #667788;
      text-shadow: 1px 1px 1px rgba(255,255,255,.6);
    }

/* Placeholder
-----------------------------------------------------*/
  form.catalin input::-webkit-input-placeholder {
     color: #999;
     font-weight: normal;
     font-style: italic;
  }
   
  form.catalin input:-moz-placeholder {
      color: #999;
      font-weight: normal;
      font-style: italic;
  }
   
  form.catalin input:-ms-input-placeholder {
      color: #999;
      font-weight: normal;
      font-style: italic;
  }

И результат этого кода - красивое поле ввода с не менее красивой кнопкой отправки данных на сервер:

На этом все.

Смешное и нелепое название для статьи, но лучшего придумать не мог, так как это, по моему мнению, наиболее точно отвечает своей задаче.

А точнее - задает вопрос - почему при создании треугольников на CSS с помощью псевдоэлементов

1

:before

1

:after

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

Как раньше представлял:

Как есть на самом деле:

То есть, браузер отрисовывает границы под углом в 45 градусов. Точно также, как делают оконные рамы, если “на пальцах”.

Ну хорошо, с этим разобрались. Пусть будет так, но причем здесь угол в границах и треугольник? Для этого продолжим наше небольшое исследование. Оставим подопытный прямоугольник и начнем его понемногу “урезать”.

Сначала уберем у него высоту и ширину. В результате получиться такая картина:

Теперь уберем нижнюю границу у этого блока и получим такое:

Ну а теперь осталось дело за малым - сделаем левую и правую границы без цвета, на языке CSS - transparent.

Вуаля:

Вот и получился треугольник на CSS. Оказалось - все просто и логично.

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

Точно также можно создавать треугольник, который “смотрит” влево, вправо, вверх. Просто нужно поменять прозрачные границы для этого блока.

Например, для треугольника, который смотрит вправо, нужно сделать верхнюю и нижнюю границы прозрачными, левую оставить “как есть”, а правую границу убрать.

На этом все.