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

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

1
li
списка
1
ul
. Нужно организовать все
1
li
в две колонки. Первое, что приходит на ум - это воспользоваться новыми правилами CSS3.

Но проблема в том, они новые и не всеми браузерами поддерживаются. Тогда смысл их применять? Но можно воспользоваться 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
добавим в HTML-разметку для элемента
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
. Вся “фишка” в организации их в два столбца благодаря двум CSS-правилам -
1
display: block
и
1
width: 45%
.

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

1
float: left
, поэтому CSS-правило
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
равен не 14px, а 20px.

Если добавить еще один вложенный уровень, то размер шрифта будет 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
, что является сокращением от “root em”. Давайте немного разберемся, что из себя представляет эта единица измерения.

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

1
em
является относительной к размеру шрифта элемента родителя, что приводит к эффекту наследования. Единица измерения
1
rem
является относительной к основному корневому элементу, то есть к html.

Это означает, что можно установить размер шрифта только один раз, для элемента 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
в браузерах достойная: Safari 5, Chrome, Firefox 3.6+ и даже Internet Explorer 9. Хорошая новость заключается в том, что в IE9 поддерживается изменение размера текста, установленного в единицах измерения
1
rem
. Увы, бедная Opera (вплоть до версии 11.10, по крайней мере), не имеет поддержки единиц измерения
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
‘ы для SASS, с помощью которых можно быстро задать размер шрифта в
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
стандартной темы “Twenty Twelve”. И в заголовке этого файла сразу же наткнулся на следующие интересные строки:

/* =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” - и попробуйте попечатать в пустом документе. Вместо “букав” будут печататься всякие разные символы:

Шрифтовые иконки Wingdings в Word

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

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

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

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

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

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

Набор иконок для выбора необходимой иконки из таблицы

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

Редактирование выбранной иконки в IcoMoon

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

Окно предварительного редактирования набора иконок

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

Готовый архив с иконками сервиса IcoMoon

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

1
fonts
и файл
1
style.css
.

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

1
style.css
открываем в HTML-редакторе.

Нам потребуется его содержимое, которое также можно перенести в 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
, справа внутри поля находиться кнопка отправки запроса в виде текста “Send”.

Все вроде так и в чем же проблема? Трудность заключается в том, что на сегодняшний день возможности 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
, назначаемые ему по умолчанию браузером. Затем немного поборемся с браузерами на WebKit (Chrome\Safari), которые создаются эффект свечения вокруг поля ввода при получении фокуса
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
может перехватывать событие Enter (нажатие этой клавиши на клавиатуре) + событие мыши. А вот
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. Оказалось - все просто и логично.

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

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

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

На этом все.