Создать заголовок с эффектом зачеркивания. Создается с помощью псевдо-элементов

1

:before

и

1

:after

.

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

Создание такого эффекта выполняется простым кодом. Первоначально задаем HTML-разметку с использованием заголовка первого уровня

1

h1

<h1>
  about me
</h1>

И прописываем для него CSS-правила, чтобы привести его к тому виду, который нам необходим:

h1{
  width: 900px;
  margin: 100px auto;
  border: 1px solid #000;
  text-align: center;
  font-size: 40px;
  line-height: 60px;
  text-transform: uppercase;
  position: relative;
}

Выравнивание по центру, размер шрифта (кегль) и высота блока через интерлиньяж

1

line-height

1

:before

1

:after

Теперь создаем общие правила для обоих псевдо-элементов

1

:before

1

:after

h1:before, h1:after{
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -2px;
  left: 0;
  height: 4px;
  width: 320px;
  background-color: #000;
}

Единственным примечательным моментом в этом коде является свойство

1

top: 50%

1

h1

1

margin-top: -2px

Этим правилом мы поднимаем сгенерированные линии вверх на половину их высоты. Почему это нужно делать, можно догадаться и так.

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

1

:after

1

right

h1:after{
  right: 0;
  left: auto;
}

Результат работы кода показан на рисунке ниже. Граница для заголовка задана мною для наглядности:

Полностью весь код для создания такого эффекта приведен ниже:

h1{
  width: 900px;
  margin: 100px auto;
  border: 1px solid #000;
  text-align: center;
  font-size: 40px;
  line-height: 60px;
  text-transform: uppercase;
  position: relative;
}

h1:before, h1:after{
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -2px;
  left: 0;
  height: 4px;
  width: 320px;
  background-color: #000;
}

h1:after{
  right: 0;
  left: auto;
}

UPD 19\01\2014

Для быстроты, удобства и краткости можно воспользоваться готовым миксином из библиотеки Scut - Side-Lined.

На этом все.

Перевод небольшой статьи с замечательного сайта для веб-дизайнеров CSS-Tricks.

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

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

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
  }

Примечание переводчика:

Свойство

1

fixed

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

1

fixed

. Оно очень похоже на более известное

1

absolute

, но с одним отличием - объект с этим свойством не меняет своего положения при прокрутке страницы.

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

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

Оба смещения нужно сделать с помощью свойства

1

margin-left

1

margin-top

.centered {
position: fixed;
top: 50%;
left: 50%;
margin: -50px 0 0 -100px;
}

В результате изображение разместиться точно по центру экрана:

На этом все.

Стоит задача рассчитать по формуле вес блинов, исходя из заданных размеров. Ими являются внутренний диаметр блина - это посадочное место на гриф гантели.

Как правило, диаметр грифа гантели равен 25мм. С учетом допуска (чтобы диск свободно надевался на гриф), внутренний диаметр блина будет равен 26мм. То есть, делаем допуск в 1мм.

Вторая величина - это толщина блина, так как блины будут изготавливаться из стального листового материала стандартной толщины. Листовой материал имеет толщину 4мм, 6мм, 8мм, 10мм, 12мм и так далее, с шагом в 2мм. В зависимости от получаемого размера блина будет подбираться толщина листа, из которого он будет изготавливаться, с тем, чтобы блин получался не слишком большой.

Третья величина - это плотность стали. Она постоянна и равна 7800кг/м³.

И так, имеем только три заранее известные величины - диаметр посадочного места, толщина блина и плотность стали, из которой будут изготавливаться диски. Необходимо рассчитать внешний диаметр диска, чтобы получить в результате блины весом 0,75кг, 1,5кг, 2,5кг, 5кг и 10кг.

Стоит оговориться. Из-за чего весь этот сыр-бор нужен? Нужен для того, чтобы иметь дома нормальные гантели и по разумной цене. Кто не заходил в спортивные магазины и не видел цены на те же гантели или блины к ним, тот не представляет, насколько они космические и далекие от реальности. К примеру, одна наборная гантеля весом 15кг стоит 4500руб. Это уму непостижимо - откуда такая стоимость куска железа?!

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

Приступаем к задаче. Как будем ее решать?

Немного отклонимся от темы и представим себе, что такое диск гантели с геометрической точки зрения? Это не что иное, как цилиндр. Только очень “широкий и “низкий”. Объем цилиндра вычисляется по коротенькой формуле: площадь основания цилиндра умножается на высоту цилиндра.

Площадь основания цилиндра равна:

S=ПИ*R<sup>2</sup>

то есть, число ПИ умножается на радиус основания, возведенного в степень 2.

Тогда объем цилиндра равен:

V=S*h

где

1

h

1

h

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

То есть:

• 1	V<sub>1</sub> = ПИ*R<sup>2</sup>*h

  - объем цилиндра по внешнему радиусу R

• 1	V<sub>2</sub> = ПИ*r<sup>2</sup>*h

  - объем цилиндра по внутреннему радиусу r

• 1	V = V<sub>1</sub> - V<sub>2</sub>

Все, объем блина гантели рассчитали. Теперь осталось высчитать вес этого объема.

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

Результатом будет формула:

M = (V*p)/10<sup>6</sup>

где

1

p

С теоретическими расчетами закончено. Так как являюсь поклонником программы Excel, то преобразовал ее в небольшую табличку, с помощью которой можно быстро и легко подобрать нужные веса блинов гантели:

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

Ну, а нарисовать эскиз блина с указанием внутреннего и внешнего диаметров, толщины и фаски (по возможности) не составит труда в том же AutoCAD.

Данная таблица будет еще мою дорабатываться, но незначительно, так как основная работа была сделана.

P.S.

Как результат вычислений по данной таблице, привожу ниже фотографии готовых гантелей. Обе получились весом по 20кг в полном сборе. Работа токаря по вытачиванию грифов (отдельная благодарность ему за накатку), обтачиванию самих блинов, бесплатное изготовление зажимов к гантелям - все это обошлось мне в 800 рублей.

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

Поэтому края получились грубыми, пришлось основательно их обрабатывать на токарном станке:

На этом все.

При верстке макета сайта, кстати, совсем несложного, возник вопрос.

Заключается он в том, имеется информационная часть, разбитая на две колонки. Каждая из колонок также разделена на отдельные секции - посты. Для колонок и постов на макете задуманы дизайнером декоративные линии-разделители.

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

1

border-bottom

1

border-right

1

border-right

1

hr

Но вопрос заключается в том, что декоративные линии на макете короче, чем высота колонки или ширина поста. То есть, получается, что

1

border

Как же поступить в данном случае? Скажем так, обычными способами CSS решить такой вопрос невозможно. Но решение было найдено с помощью форума htmlbook.

В данном случае можно выйти из положения с помощью псевдокласса

1

:after

Создаем слой с контентом:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

И пропишем для него стилевые правила:

div {
  width: 300px;
  position: relative;
}

Как видим, их не так уж и много. Задаем ширину блока и устанавливаем для него относительное позициоирование. Затем для созданного нами бокса создаем псевдокласс

1

:after

div:after {
  content: "";
  position: absolute;
  top: 30px;
  right: -10px;
  bottom: 30px;
  border-left: 1px solid #000;
}

Немного распишем, что да как в этом коде.

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

1

top

1

bottom

1

border-left

1

1px сплошного черного цвета

На этом все.

Столкнулся с интересным примером или задачей - не знаю, как сказать.

Состоит в том, чтобы сделать для картинки тень, причем внутреннюю тень. Казалось бы, задачу просто решить - с помощью

1

box-shadow

1

text-shadow

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

Но пример так мне понравился, что решил его описать у себя - повторение мать учения, как говорится.

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

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

Код такого способа представлен ниже:

<div class="block1">
  <img src="images/charlize_theron_1.jpg" width="480" height="300">
</div>

.block1{
  box-shadow: inset 0 0 6px 4px rgba(0,0,0,.7);
  width: 480px;
  height: 300px;
}
  .block1 img{
    position: relative;
    z-index: -2;
  }

И результат работы этого кода:

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

Второй способ - более правильный с точки зрения семантики. Чтобы “набросить” тень на изображение, нужно поместить его в блок в качестве фонового изображения.

В остальном все остается точно таким же, как и в первом примере. Также создается внутренняя тень для блока, но при этом нет необходимости “опускать” картинку с помощью z-index.

Код второго способа показан ниже:

<div class="block2"></div>

.block2{
  box-shadow: inset 0 0 12px 8px rgba(0,0,0,.6);
  width: 481px;
  height: 361px;
  background: url(images/charlize_theron_2.jpg) 0 0 no-repeat;
}

Картинка - результат работы этого кода:

Код более краткий. Единственный минус - изображение должно быть только в качестве фона для блока.

На этом все.