<MyRusakov.ru />

Вёрстка сайта с нуля 2.0

Вёрстка сайта с нуля 2.0

Система "Вёрстка сайта с нуля 2.0" содержит в себе не только сами видеоуроки по адаптивной вёрстке сайтов с примерами, но и вспомогательную систему для более эффективного обучения.

Сам курс обучит Вас абсолютно с нуля HTML5 и CSS3, а также научит верстать сайты с помощью реальных примеров вёрстки. Обучение идёт от простого к сложному. В последнем разделе курса идёт обучение адаптивной вёрстке сайтов: Вы узнаете всю необходимую теорию, а также увидите пример реальной адаптивной вёрстки сайта.

Как итог, курс совмещает в себе всё, что нужно по HTML, CSS и адаптивной вёрстке сайтов, с наглядными примерами, с обучением от простого к сложному и без необходимости иметь начальных знаний, а благодаря вспомогательной системе психологически курс проходится очень легко, а на выходе Вы сможете сделать адаптивную вёрстку любого сайта любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Верстка сайта с нуля. Верстка портфолио. Часть 3

Верстка сайта с нуля. Верстка портфолио. Часть 3

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

Верстка сайта с нуля. Верстка портфолио.

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

<div class="container-well">
<h2>Портфолио></h2>
<p>Много сплю и ем, но я гарантирую, что вы полюбите меня таким, какой я есть.</p>
</div>

со следующими стилевыми свойствами:

.container-well {   position: relative;
  -webkit-transition: all 1s ease; /*плавный переход между экшенами Chrome/Safari */
  -moz-transition: all 1s ease;/*переход между экшенами Firefox */
  -o-transition: all 1s ease; /*медленный переход между экшенами Opera */
  transition: all 1s ease;
}
.container-well h2{   color:#4d4d4d; /*цвет заголовка */
  font-size: 2em; /*размер заголовка */
  padding-bottom: 0.5em; /*поля под заголовком */
  text-align: center; /*выравнивание заголовка по центру */
}
.container-well p{   color:#444444; /*цвет текста */
  font-size: 1em; /*размер шрифта */
  padding-bottom: 1em; /*поле под абзацем */
  text-align: center; /*выравнивание текста по центру */
}

Под контейнером расположено меню, которое по умолчанию должно быть вертикальным:

<ul id="valantin">
<li><span class="active">Питание</span></li>
<li><span>Уход</span></li>
<li><span>Выгул</span></li>
<li><span>Здоровье/Страховка</span></li>
</ul>

Однако в макете дизайнер нарисовал горизонтальное меню, а не вертикальное, с помощью float, поставим ему свойство left и это переопределит выстраивание списков по горизонтали.

#valantin {
  width: 60%; /* ширина контейнера для всего блока меню */
  list-style: none; /* немаркированные списки */
  margin: 2% auto;
  padding: 0;
}
#valantin li {
  float:left;
  margin-left: 17px;
}
#valantin li span {
  background:#d0a5a5;
  padding: 15px 30px; /* поля обрамляющие текст */
  text-decoration: none; /* нет подчеркивания у названий меню */
  color: #fff; /*цвет текста меню */
  text-transform:uppercase; /*трансформация букв текста в заглавные */
  font-weight: 600; /*жирность текста */
  cursor: pointer; /*вид курсора */
}
#valantin li span:hover
{
  background:#a97b7b; /*фон при наведении меняет цвет */
}
#valantin li span.active {
  background:#a97b7b; /*цвет активного фона */
}

Наконец-то мы подошли к верстке анимированных иконок. При наведении курсора на иконку, появляется маленькая иконка лупы, текст, а так же меняется вид самой иконки.

Как это работает, вы можете увидеть на jsfiddle.

Ниже я приведу фрагмент кода только для одной иконки.

<div id="portfoliolist">
 <div class="portfolio logo" data-cat="logo">
  <div class="portfolio-wrapper">
   <a href="#">
    <ul class="ch-grid">
    <li>
    <div class="ch-item ch-img-1">
    <div class="ch-info">
    <img src="web/images/zoom-white.png"/>
    <h3>Позирую</h3>
    <p><a href="#">перед камерой</a></p>
    </div>
    </div>
    </li>
    </ul>
   </a>
  </div>
 </div>
</div>

Далее стилевое оформление:

#portfoliolist .portfolio {
  -webkit-box-sizing: border-box; /* контейнер для галереи с иконками */
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  width: 19%;
  margin: 0% 3%;
  display: none;
  float: left;
}
.portfolio-wrapper {
  overflow:hidden;
  position: relative;
  cursor:pointer;
}
.portfolio img {
  max-width:100%;
  position: relative; /* позиционирование картинки с лупой */
  opacity: 5;
  transition: all 300ms;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
}

Теперь разберем, как происходит собственно анимация. Содержимое блока ниже, должно вывестись на экран только после наведения курсора. До этого, его не должно быть видно. Как же достичь такого эффекта?

<div class="ch-info">
<img src="web/images/zoom-white.png"/>
<h3>Позирую</h3>
<p><a href="#">перед камерой</a></p>
</div>

В стилях для класса ch-info, прописываем нулевую прозрачность, то есть делаем содержимое блока с данным классом – полностью невидимым.

.ch-info {
  opacity: 0; /* Полная прозрачность элемента */
}

Зато при наведении курсора на иконку невидимые элементы становятся видимыми и имеют те свойства, которые указаны в коде для псевдокласса :hover.

Посмотреть код целиком и проверить как работает данный эффект можно на jsfiddle

Продолжение следует..

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.