В предыдущей статье “Создаем вертикальное меню на CSS” был освещен вопрос построения вертикального меню с подменю.

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

1
display
со значениями
1
none
и
1
block
.

При построении горизонтального меню нужно быть внимательным с принципом специфичности CSS, то есть - с вложенностью и каскадностью правил. Хорошим подспорьем в этом вопросе является SASS (SCSS), благодаря которому исключаются ошибки при соблюдении каскадности и наследовании свойств.

Код, написанный на SASS (SCSS) короче и логически читается проще, чем CSS. Поэтому, рекомендую изучить этот вопрос в статьях “SASS (SCSS) в картинках - Часть 1”, “SASS (SCSS) в картинках - Часть 2”.

Мы же приступим к созданию горизонтального меню с подменю “на коленках”. Почему говорю так? Дело в том, что существует масса готовых примеров и кода, а также генераторов различных меню. Но они неинтересны - нам нужно разобраться в принципе построения и возможности самому написать такую навигацию. Как обычно, начинаем с каркаса меню, выполненного на HTML:

<ul class="hormenu">
  <li>
    <a class="arrow" href="#">Link_1</a>
      <ul class="sub-hormenu">
      <li>
        <a href="#">Link_1-1</a>
      </li>
      <li>
        <a href="#">Link_1-2</a>
      </li>
      <li>
        <a href="#">Link_1-3</a>
      </li>
      <li>
        <a href="#">Link_1-4</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link_2</a>
  </li>
  <li>
    <a class="arrow" href="#">Link_3</a>
      <ul class="sub-hormenu">
      <li>
        <a href="#">Link_3-1</a>
      </li>
      <li>
        <a href="#">Link_3-2</a>
      </li>
      <li>
        <a href="#">Link_3-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link_4</a>
  </li>
  <li>
    <a class="arrow" href="#">Link_5</a>
      <ul class="sub-hormenu">
      <li>
        <a href="#">Link_5-1</a>
      </li>
      <li>
        <a href="#">Link_5-2</a>
      </li>
      <li>
        <a href="#">Link_5-3</a>
      </li>
      <li>
        <a href="#">Link_5-4</a>
      </li>
      <li>
        <a href="#">Link_5-5</a>
      </li>
    </ul>
  </li>
</ul>

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

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

1
arrow
, но о нем мы поговорим позже.

Приступим к оформлению нашего меню с помощью CSS. Сразу оговорюсь, что примеры кода, представленного здесь, написаны на SASS (SCSS). Начнем с того, что расположим навигацию горизонтально:

.hormenu{
  margin: 50px 0 0 50px;
  overflow: hidden;
  li{
    float: left;
    margin-left: 1px;
    &:first-child{
      margin-left: 0;
    }

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

1
li
внутри него горизонтально с помощью свойства
1
float: left
. Предотвращаем схлопывание (
1
collapse
) блока-родителя
1
ul
, прописав для него
1
overflow: hidden
.

Чтобы пункты меню были легко различимы, сделаем промежуток между ними с помощью левого

1
margin
в 1px. И для аккуратности уберем левый
1
margin
у первого элемента
1
li
.

Далее оформляем ссылки внутри пунктов

1
li
. Делаем ссылки блочными, чтобы кликабельной была вся область пункта навигации и задаем для нее высоту. Также указываем интерлиньяж, чтобы выровнять текст по вертикали и
1
text-align
для выравнивания по горизонтали. Цвет фона и цвет текста - как обычно.

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

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

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

1
a
:

a{
  display: block;
  line-height: 25px;
  height: 25px;
  width: 130px;
  text-align: center;
  background-color: #ccc;
  color: #ccc - #555;
  position: relative;
}

Продолжим стилизацию нашей навигации и займемся подменю, а точнее - его подпунктами

1
li
. Уберем у этих элементов плавание влево
1
float
и левый
1
margin
, чтобы они не наследовали эти свойства. Убираем плавание, чтобы элементы
1
li
расположились вертикально, а левый
1
margin
- убрать “лесенку”:

li{
  float: none;
  margin: 0 0 1px 0;

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

a{
  background-color: #ccc + #111;
  color: #ccc - #333;
  &:hover{
    background-color: #ccc + #222;
  }
}

Теперь самое главное - сделаем подпункты меню выпадающими. Для этого сначала спрячем его, убрав из DOM-модели HTML-документа с помощью значения свойства

1
dislay: none
:

.sub-hormenu{
  display: none;

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

1
hormenu
:

&:hover .sub-hormenu{
  display: block;
}

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

1
:after
.

Как раз здесь нам и понадобиться относительное позиционирование для ссылок, о котором говорилось ранее. Создание стрелки “поручим” отдельному классу

1
arrow
, который будем “вешать” только на нужные нам ссылки:

.arrow:after{
  content: '';
  position: absolute;
  top: 50%;
  left: 80%;
  width: 0;
  height: 0;
  border-top: 4px solid #ccc - 666;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  margin-top: -2px;
}

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

@import "compass/reset";

 a{
   text-decoration: none;
 }

 .arrow:after{
   content: '';
   position: absolute;
   top: 50%;
   left: 80%;
   width: 0;
   height: 0;
   border-top: 4px solid #ccc - 666;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   margin-top: -2px;
 }

 .hormenu{
   margin: 50px 0 0 50px;
   overflow: hidden;
   li{
     float: left;
     margin-left: 1px;
     &:first-child{
       margin-left: 0;
     }
     &:hover .sub-hormenu{
       display: block;
     }
     .sub-hormenu{
       display: none;
       li{
         float: none;
         margin: 0 0 1px 0;
         a{
           background-color: #ccc + #111;
           color: #ccc - #333;
           &:hover{
             background-color: #ccc + #222;
           }
           &:after{
             content: none;
           }
         }
       }
     }
     a{
       display: block;
       line-height: 25px;
       height: 25px;
       width: 130px;
       text-align: center;
       background-color: #ccc;
       color: #ccc - #555;
       position: relative;
     }
   }
 }

… и то, как оно выглядит:

Горизонтальное меню на CSS

Горизонтальное меню с выпадающим подменю

На этом все.


Продолжаем изучение CSS и сегодня приступим к построению вертикального меню.

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

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

Механизм действия и построения такого меню основан на одном единственном CSS-свойстве -

1
display
, а точнее на его значениях -
1
display: block
и
1
display: none
.

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

Такая навигация называется

1
меню-аккордеон
и принцип его создания будет рассмотрен позже.

C чего же мы начнем? С построения обычного маркированного списка, пунктами которого будут ссылки. Списку зададим класс с именем

1
menu
, так как он нам понадобиться в дальнейшем:

<ul class="menu">
  <li>
    <a href="#">Punkt 1</a>
  </li>
  <li>
    <a href="#">Punkt 2</a>
  </li>
  <li>
    <a href="#">Punkt 3</a>
  </li>
  <li>
    <a href="#">Punkt 4</a>
  </li>
  <li>
    <a href="#">Punkt 5</a>
  </li>
</ul>

Созданное только что меню будет внешним, а внутри него (точнее внутри его пунктов) мы поместим еще одно меню. Получиться одно меню, вложенное в другое (помните уроки HTML?).

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

1
display
из none в
1
block
и наоборот.

В итоге получиться пять подменю, для каждого из которых мы пропишем один класс -

1
sub-menu
. Этот класс нам также потребуется в дальнейшем:

<ul class="menu">
  <li>
    <a href="#">Punkt 1</a>
        <ul class="sub-menu">
      <li>
        <a href="#">Punkt 1-1</a>
      </li>
      <li>
        <a href="#">Punkt 1-2</a>
      </li>
      <li>
        <a href="#">Punkt 1-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 2</a>
        <ul class="sub-menu">
      <li>
        <a href="#">Punkt 2-1</a>
      </li>
      <li>
        <a href="#">Punkt 2-2</a>
      </li>
      <li>
        <a href="#">Punkt 2-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 3</a>
        <ul class="sub-menu">
      <li>
        <a href="#">Punkt 3-1</a>
      </li>
      <li>
        <a href="#">Punkt 3-2</a>
      </li>
      <li>
        <a href="#">Punkt 3-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 4</a>
        <ul class="sub-menu">
      <li>
        <a href="#">Punkt 4-1</a>
      </li>
      <li>
        <a href="#">Punkt 4-2</a>
      </li>
      <li>
        <a href="#">Punkt 4-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 5</a>
        <ul class="sub-menu">
      <li>
        <a href="#">Punkt 5-1</a>
      </li>
      <li>
        <a href="#">Punkt 5-2</a>
      </li>
      <li>
        <a href="#">Punkt 5-3</a>
      </li>
    </ul>
  </li>
</ul>

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

*{
  margin: 0;
  padding: 0;
}

a{
  text-decoration: none;
}

ul{
  list-style-type: none;
}

.menu{
  margin: 30px 0 0 30px;
  width: 100px;
}

Здесь мы обнуляем

1
margin
и
1
padding
для всех элементов, в том числе и
1
ul
; убираем маркер у пунктов меню; убираем подчеркивание у ссылок.

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

1
100px
.

Дальше форматируем пункты меню:

.menu li{
    position: relative;
    line-height: 20px;
    background-color: #ccc;
    margin-bottom: 1px;
  }

Ставим высоту каждого элемента

1
li
равной 20px и выравниваем текст внутри него по центру вертикали; задаем фоновый цвет для них же, чтобы можно было различать каждый из пунктов на фоне окна браузера; делаем нижний
1
margin
в 1px, чтобы элементы
1
li
не сливались между собой и были похожи на пункты меню.

Последний шаг - устанавливаем для

1
li
относительное позиционирование, так как в дальнейшем будем размещать подменю относительно этого элемента.

Далее чисто косметические правила для ссылок, находящихся внутри внешнего меню - размер шрифта (кегль) и цвет текста:

.menu li a{
  font-size: 16px;
  color: #000;
}

Теперь приступаем к самому интересному - стилизации подменю. Для начала зададим его ширину (пусть будет чуть меньше ширины внешнего списка):

.sub-menu{
  width: 90px;
}

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

1
li
.

И самое главное - скроем его отображение в браузере через правило

1
display: none
. В результате код будет выглядеть следующим образом:

.sub-menu{
  width: 90px;
  position: absolute;
  left: 100px;
  top: 0;
  display: none;
}

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

.sub-menu li{
  background-color: #aaa;
}
  .sub-menu li a{
    color: #fff;
  }

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

1
display
значение
1
block
при наведении мыши на ссылку во внешнем списке:

.menu li:hover .sub-menu{
  display: block;
}

В результате подменю отобразиться (браузер сгенерирует его). Изначально в коде было прописано для него

1
display: none
. То есть, для браузера такого подменю не существовало и в DOM-модели документа элемент
1
ul
с классом
1
sub-menu
отсутствовал.

Так как этому подменю задано абсолютное позиционирование со смещением вправо на

1
100px
и вверх на
1
0px
, то оно поместиться точно справа вверху от своего родителя - пункта меню внешнего списка.

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

Вертикальное меню на CSS

И меню, когда наведена мышка на один из пунктов меню и справа появляется подменю, соответствующее этому пункту:

Вертикальное меню на CSS с подменю

На этом все.


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

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;
}

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

Зачеркнутый заголовок на 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;
}

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кг/м3.

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

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

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

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

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

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

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

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

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

V=S*h

где

1
h
- высота цилиндра. В нашем случае высота
1
h
- это толщина листового материала, равная 4мм, 6мм, 8мм и так далее.

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

То есть:

  • 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
- плотность стали, равная 7800кг/м3; 106 - переводим из г/мм3 в кг/м3.

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

Таблица расчета весов в Excel

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

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

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

P.S.

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

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

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

Гантель

Гантель

На этом все.