5 полезных шпаргалок для верстальщика

Все привет.

Давным-давно. Когда скорость интернете была 30кб/сек в 3 часа ночи. Любой пользователь ПК имел привычку сохранять все программы, полезные ссылки  у себя на ПК. + Была фишка обмена скаченными программами на флешке при встрече лично.

У каждого была такая флешка на которой было все самое необходимое и часто использующиеся (антивирус, браузер, cCleaner и Counter Strike 1.6 🙂

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

 

1. Простая AJAX форма обратной связи или заказа звонка на PHP

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

Скачайте php файл и загрузите его например в корень вашего сайта

Откройте код главной страницы и перед

</body>

вставьте код

<script type="text/javascript">
function callform() {
  $.ajax({
    type: "POST",
    url: "mail.php", // укажите адрес к скаченному ранее mail.php
    data: { 
    name: $('#super_form input[name="name"]').val(),
    phone: $('#super_form input[name="phone"]').val(),
    email: $('#super_form input[name="email"]').val(),
    }
  }).done(function( msg ) {
    alert(msg); // показываем сообщение
  });
}

</script>

в нужное место вставьте HTML код формы

<form id="super_form" action="#" method="post">
 <input type="text" name="name" placeholder="Имя" required="Введите имя">
 <input type="text" name="phone" placeholder="Телефон" required="Введите телефон">
 <input type="text" name="email" placeholder="Email" required="Введите Email">
 <input type="button" value="заказать консультацию" onclick="javascript:callform();">
</form>

Теперь чуть настроек.

Откройте mail.php и укажите почту куда будут приходить письма и от кого будут приходить письма.

$recipient = "Yourmail@gmail.com"; //Почта куда слать
$from = "frommail@gmail.com"; // почта отправителя

CSS думаю осилите. Если что, то поклацайте мои интерактивных курсах для веб-мастера . Должно помочь 🙂

 

2. Несколько плагинов для анимации при прокрутке страницы на CSS3

http://mynameismatthieu.com/WOW/  — прелесть плагина в том, что он использует CSS3 анимацию, а не JS. В итоге он не перегружает браузер. + Он прост в использовании.  (эффекты на CSS 3 смотрите чуть ниже. Что бы использовать другую анимацию просто скопируйте название в атрибут data)

http://prinzhorn.github.io/skrollr/ — тоже очень интересное решение из новомодного паралакс эффекта.

http://www.thepetedesign.com/demos/onepage_scroll_demo.html — тоже тренд. Вертикальный, полноэкранный слайдер для сайта.

http://janpaepke.github.io/ScrollMagic/ — сложновато и тяжеловат но есть куча интересных екшенов к которым можно привязаться.

http://scrollme.nckprsn.com — очень простой плагин который умеет показывать блоки в виде карточек при прокрутке страницы.

http://mexalim.com.ua/suitcase-5-samykh-nuzhnykh-ehffektov-na-jquery-v-odnom-skripte/  Мой скрипт. 5 самых нужных эффектов на jQuery в одном скрипте

http://css.yoksel.ru — интересный блог посвященный прелестям CSS3 на котором можно погладить кота 🙂

 

3. Простой таймер обратного отсчета с поддержкой cookie и мультаймеровости :).

Качаем супер код простого таймера

В архиве вы найдете сам скрипт, пример работы

Сам скрипт принимает одну опцию cookie. Задать конкретную дату можно с помощью атрибута data-dateend Будет вот так

 <div id="clock" class="timerclock" data-dateend="April 4, 2016 10:00">

Обратите внимание на формат даты. Если вы будите использовать куки то атрибут ID обязателен.

В случае выше таймер будет считать время до конкретной даты. Если задать атрибуты date-timeday, date-timehor, date-timemin  и включить куки то таймер будет стартовать для каждого пользователя отдельно и идти даже после обновления страницы.

Этот прием используется на посадочных страницах. Атрибуты можно использовать по отдельности.

Например заведем таймер на 20мин.

 <div id="clock" class="timerclock" data-timemin="20">

или на 20 дней и 1 мин

 <div id="clock" class="timerclock" data-timeday="20" data-timemin="1">

Всегда надо задавать или дату или время.

 

4. Генераторы/конверторы шрифтов и CSS3 свойств

http://fontsquirrel.com/tools/webfont-generator — отлчиный генератор но иногда не хочет работать с платными шрифтами

https://www.web-font-generator.com — план б

http://www.flaticon.com/font-face — план с

http://css3generator.com — генератор свойств CSS3

https://daneden.github.io/animate.css/ — генератор анимации на CSS3 (именно его использует описанный выше плагин анимации при прокрутке)

 

5. Секретный пункт.

Когда я начинал верстать, Я не мог запомнить код меню и таблицы и каждый раз гуглил и копипастил 🙂 Посему:

Код списка/меню

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

или

<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>

Код таблицы

<table>
 <tr>
 <td>1</td>
 <td>2</td>
 </tr>
 <tr>
 <td>3</td>
 <td>4</td>
 </tr>
</table>

На всякий пожарный вот интерактивный курс по html таблицам  может будет полезным:)

 

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$