Приветствую вас дорогие друзья! В этом уроке я покажу, как можно сделать простой генератор логотипов для сайта.
Чтобы сразу стало понятно, что это за генератор, как им пользоваться и что можно сделать с его помощью – предлагаю посмотреть demo пример в конце статьи, а после вернуться к чтению.
Наш генератор позволяет изменять следующие параметры логотипа:
- Цвет фона
- Надпись
- Цвет текста
- Размер текста
- Шрифт текста
- Высоту логотипу
- Ширину логотипа
- Внутренние отступы
Как и во всех уроках по javascript – все исходные файлы можно бесплатно скачать в конце урока!
HTML верстка:
<div class="wrap">
<input id="text" placeholder="Введите текст логотипа..">
<select id="color_bg">
<option disabled selected>Цвет фона</option>
<option value="red">Красный</option>
<option value="orange">Оранжевый</option>
<option value="yellow">Желтый</option>
<option value="green">Зеленый</option>
<option value="blue">Синий</option>
<option value="black">Черный</option>
<option value="white">Белый</option>
</select>
<select id="color_text">
<option disabled selected>Цвет текста</option>
<option value="red">Красный</option>
<option value="orange">Оранжевый</option>
<option value="yellow">Желтый</option>
<option value="green">Зеленый</option>
<option value="blue">Синий</option>
<option value="black">Черный</option>
<option value="white">Белый</option>
</select>
<br><br><select id="font_family">
<option disabled selected>Стиль текста</option>
<option value="cursive">Cursive</option>
<option value="fantasy">Fantasy</option>
<option value="monospace">Monospace</option>
<option value="serif">Serif</option>
</select>
<select id="font_size">
<option disabled selected>Размер текста</option>
<option value=14>14</option>
<option value=15>15</option>
<option value=16>16</option>
<option value=17>17</option>
<option value=18>18</option>
<option value=19>19</option>
<option value=20>20</option>
<option value=21>21</option>
<option value=22>22</option>
<option value=23>23</option>
<option value=24>24</option>
</select><br><br>
Ширина: <input size="3" id="width">
Высота: <input size="3" id="height">
Отступ: <input size="3" id="padding">
<p id="create">Создать</p>
<br>Результат:<br><div id="doresult"><div id="result"></div></div>
<br>Код логотипа:<br><textarea id="code"></textarea>
</div>
Верстка, в основном, состоит из текстовых полей и элементов выбора (селектов), а также имеется кнопка для создания, элемент, куда выводится результат, и текстовое поле, куда мы выводим html код логотипа.
CSS код:
.wrap{
width: 400px;
padding: 20px;
margin: 30px auto;
border: 5px dashed #48A4C7;
}
#create{
color: #fff;
background: #48A4C7;
width: 100px;
text-align: center;
padding: 2px 4px;
cursor: pointer;
border-radius: 10px;
}
#code{
width: 400px;
height: 80px;
}
Рассмотрим JQuery код:
$(document).ready(function(){
$('#create').click(function(){
text = $( "#text" ).val();
param = $( "#param" ).val();
color_bg = $( "#color_bg" ).val();
color_text = $( "#color_text" ).val();
font_family = $( "#font_family" ).val();
font_size = $( "#font_size" ).val();
width = $( "#width" ).val();
height = $( "#height" ).val();
padding = $( "#padding" ).val();
$('#result').html(text).css({'text-align':'center','padding':padding + 'px','width':width,'height':height,'background-color':color_bg,'color':color_text,'font-family':font_family,'font-size':font_size + 'px'});
$('#code').html($('#result'));
$('#code').val($('#code').html());
$('#doresult').html($('#code').val());
});
});
Здесь мы после нажатия на кнопку создания логотипа считываем все необходимые параметры стилей и присваиваем их (стили) элементу div c id = result.
Блок с идентификатором – “doresult” необходим для того, чтобы после вырезания элемента кода, мы мокли вернуть его (код) на прежнее место.
Так как в текстовое поле, скопированный код вставляется без кавычек, нужно просто переписать содержимое поля само в себя.
Вот и все, что нужно для создания такого веб инструмента.
Данный урок создал исключительно в целях ознакомления того как можно сделать подобный генератор. Вы всегда, по аналогии, можете добавить свой функционал, изменяя стили, добавляя новые элементы.
Demo пример
Скачать исходники
На этом у меня все, желаю вам удачи, пока!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.