<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 2.0

PHP и MySQL с Нуля до Гуру 2.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 11 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

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

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

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

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

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

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

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

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

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

Как впечатлить заказчика своим портфолио? Создаём Skill-Bar.

Как впечатлить заказчика своим портфолио? Создаём Skill-Bar.

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

Создаём анимированный Skill-bar для нашего портфолио

Чтобы наше портфолио было отлично от всех, нужно его улучшить, украсить, модернизировать! Для этого мы поместим туда Skill-bar. Это будут анимированные полосы, чем-то напоминающие progress-bar, но не совсем так. Давайте приступим к созданию!

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
  </head>
  <body>
    <div class="skills" data-percent="90%">
      <div class="title" style="background: #FF8C00;"><span>HTML</span></div>
      <div class="skill-bar" style="background: #FF8C00;"></div>
      <div class="skills-percent">90%</div>
    </div>
    <div class="skills" data-percent="95%">
      <div class="title" style="background: #00BFFF;"><span>CSS</span></div>
      <div class="skill-bar" style="background: #00BFFF;"></div>
      <div class="skills-percent">95%</div>
    </div>
    <div class="skills" data-percent="80%">
      <div class="title" style="background: #FFD700;"><span>JavaScript</span></div>
      <div class="skill-bar" style="background: #FFD700;"></div>
      <div class="skills-percent">80%</div>
    </div>
    <div class="skills" data-percent="55%">
      <div class="title" style="background: #4682B4;"><span>PHP</span></div>
      <div class="skill-bar" style="background: #4682B4;"></div>
      <div class="skills-percent">55%</div>
    </div>
<script src="script.js"></script>
  </body>
</html>

Для начала мы написали наш HTML-код. Получилось что-то совершенно невнятное, но для того, чтобы превратить это в то, что нам нужно, мы должны прописать стили в нашем файле .css

/* Добавляем стили body, выравниваем всё по центру */

body {
  font-family: sans-serif;
  text-align: center;
}

/* Стили для нашего основного блока */

.skills {
  position: relative;
  display: block;
  margin-bottom: 15px;
  width: 100%;
  height: 35px;
  border-raidus: 3px;
  background: #eee;
  transition: 0.4s linear;
  transition-property: width, background-color;
}

/* Стили блока title от skills */

.title {
  position: absolute;
  font-size: 13px;
  top: 0;
  font-weight: bold;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  background: #6adcfa;
  color: #fff;
}

/* Стили тега span в блоке title */

.title span {
  display: block;
  background: rgba(0,0,0,0.1);
  padding: 0 20px;
  height: 35px;
  line-height: 35px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

/* Стили блока skill-bar от skills */

.skill-bar {
  height: 35px;
  border-radius: 3px;
  width: 0;
  background-color: #6adcfa;
}

/* Стили блока skill-percent от skills */

.skills-percent {
  position: absolute;
  right: 15px;
  top: 0;
  font-size: 11px;
  height: 55px;
  line-height: 35px;
  color: #444;
  color: rgba(0,0,0,0.4);
}

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

$(".skills").each(function(){ // Используем each (циклический метод)
  $(this).find(".skill-bar").animate({ // Создаём анимацию
    width: $(this).attr("data-percent") // Анимируем ширину
  })
})

На этом всё! Результат работы смотрите здесь. Удачи Вам в улучшении своего портфолио, а если статья была интересная, либо полезная для Вас, то оставьте свой комментарий. Также можете сделать замечания, поправки или предложить свою идею написав об этом всё в тех же комментариях!

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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