Информация

JavaScript должен быть включен. С отключенным JavaScript функционал форума недоступен.
</noscript> <!-- Мгновенные уведомления © Alex_63, 2024 --> <link rel="stylesheet" type="text/css" href="//forumstatic.ru/f/ru/bestbb/notifications.css" /> <script type="text/javascript" src="//forumstatic.ru/f/ru/bestbb/notifications.js"></script> <!-- посты из важных тем --> <script type="text/javascript"> notifications.load('common', {}); notifications.load('important', {topics: [2921,6505,8996]}); </script> <script>notifications.load('subscriptions');</script><!-- подписки на форум/тему --> <script>notifications.load('fields', {fields: [1, 2], emptyNotify: true})</script><!-- изменения в полях профиля --> <script>notifications.load('mentions');</script><!-- упоминания --> <script>notifications.load('reports');</script><!-- Жалобы --> <script>notifications.load('new_user')</script><!-- регистрация юзеров --> <script>notifications.addons.tgbot.noInvite = true;</script> <!-- убрать подсказку про телегу --> <script>notifications.load('premod')</script><!-- премодерация --> <!-- Правка для уведомлений по клику на ник, в связи с измененной версткой профиля --> <script type="text/javascript"> $('#pun-viewtopic').on('click', '.fd-name a', function(e) {$(this).parents('.post').find('.pa-author a').trigger('click');}); </script> <!-- Голосовые сообщения © Alex_63, 2024 --> <link rel="stylesheet" type="text/css" href="//forumstatic.ru/f/ru/bestbb/voice.css" /> <script type="text/javascript" src="https://forumstatic.ru/f/ru/bestbb/voice.js"></script> <script>voice.startOnOpen = false</script> <style> .voice-modal .container { overflow: hidden; } </style> <!-- иконки font awesome --> <script src="https://kit.fontawesome.com/f50f12bcbf.js" crossorigin="anonymous"></script> <!-- free --> <script src="https://kit.fontawesome.com/c06ba4bb64.js" crossorigin="anonymous"></script> <!-- pro --> <!-- Скрипт для создания анкет © Alex_63 --> <style> .postlink a[href*="questionary"] {background: #f98561; border-bottom: 6px solid #e63737;} .postlink a[href*="questionary"]:hover {background: #e63737;} </style> <script type="text/javascript"> var Questnr = {}; Questnr.groups = [1,2,6,12,16]; //Группы, которым разрешено создавать шаблоны для анкет Questnr.forums = [4,5,6,19,2,22,108,121,1,144,90,179,151,133,184,123]; //Форумы с допуском к анкетированию Questnr.title = 'Заказ от '; //Начало заголовка темы с анкетой (по умолчанию) Questnr.noedit = 0; //Запрет редактирования заполненной анкеты пользователем </script> <script type="text/javascript"> ['viewforum','viewtopic','post','edit','searchposts'].indexOf($('.punbb')[0].id.substr(4))!=-1&& $().pun_mainReady(function(){var s='script',l='/files/0007/e3/f7/32678.js'; var f=$('#pun-viewforum').length?$('link[rel="alternate"]'):$('.crumbs a[href*="viewforum"]:last'); f=+f[0].href.match(/id=(\d+)$/)[1];Questnr.forums.indexOf(f)!=-1&&document.write('<'+s+' src="'+l+'"></'+s+'>')}); </script> <script> //работающий у всех кроме динозавров вариант //Questnr.allowReply = [+$('link[rel="alternate"]')[0].href.match(/id=(\d+)$/)?.[1]]; //текущая тема var curReplyMatch = $('link[rel="alternate"]')[0].href.match(/id=(\d+)$/); //если нашел текущую тему - массив, иначе 0 if (curReplyMatch) { Questnr.allowReply = [+curReplyMatch[1]]; } </script> <script> // Проверенные спецы var verifiedData = [ { id: '2', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>UI/UX дизайн</b>, <b>CSS/Верстка</b>, Javascript">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7032', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>PHP/Javascript</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7907', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>PHP/Javascript</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7006', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>Вебдизайн</b>, <b>Графический дизайн</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7181', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>DigitalArt</b> - цифровой рисунок, pixelart, анимация">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7130', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>CSS/Верстка</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7639', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>Вебдизайн</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '6797', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>Javascript</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '6489', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>PHP/Javascript</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '8926', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>Вебдизайн</b>, <b>Верстка</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '5063', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>Вебдизайн</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7884', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>дизайны для форумов MyBB</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' } ]; // Должности var dutyData = [ { id: '2', color: 'red', fld: '<li class="fd-duty rus">Главный администратор</li><li class="fd-duty eng">System support administrator</li>', }, { id: '7842', color: 'green', fld: '<li class="fd-duty rus">Модератор каталога графики</li><li class="fd-duty eng">Graphics Catalog Moderator</li>', }, { id: '7151', color: 'green', fld: '<li class="fd-duty rus">Модератор ролевых разделов</li><li class="fd-duty eng">Role-Playing Sections Moderator</li>', }, { id: '6995', color: 'green', fld: '<li class="fd-duty rus">Модератор стримов</li><li class="fd-duty eng">Streams Moderator</li>' }, { id: '9439', color: 'green', fld: '<li class="fd-duty rus">Модератор системы бонусов</li><li class="fd-duty eng">Bonus System Moderator</li>' }, { id: '9734', color: 'green', fld: '<li class="fd-duty rus">Ассистент англоязычной версии</li><li class="fd-duty eng">English Content Assistant</li>' }, { id: '9758', color: 'green', fld: '<li class="fd-duty rus">SMM менеджер</li><li class="fd-duty eng">SMM Manager</li>' } ]; // группы с доступом к закладкам var BookmGroups = [1,2,6,16,4,8,12]; </script> <!-- Редирект на портал <script> var portal = '/pages/index'; var TimeRedirect = 24*60*60; //Редирект при последнем посещении более суток var url = document.URL.split('#')[0]; if(!localStorage.LastVisit || RequestTime-localStorage.LastVisit > TimeRedirect){ if((url+'%a').split('/%')[1]=='a'&&url.indexOf('mod')==-1)location.href=portal; }localStorage.LastVisit = RequestTime; $(document).ready(function(){ var a = $('#pun-navlinks #navindex a')[0]; a.href = a.href+'=&forum' }); </script> --> <!-- стили спец постов --> <link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0007/e3/f7/34232.css?v=7"> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(93794845, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/93794845" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </div> <div id="pun-title" class="section"> <table id="title-logo-table" cellspacing="0"> <tbody id="title-logo-tbody"> <tr id="title-logo-tr"> <td id="title-logo-tdl" class="title-logo-tdl"> <h1 class="title-logo"><span>ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов</span></h1> </td> <td id="title-logo-tdr" class="title-logo-tdr"><!-- banner_top --></td> </tr> </tbody> </table> </div> <div id="pun-navlinks" class="section"> <h2><span>Меню навигации</span></h2> <ul class="container"> <li id="navindex"><a href="https://forumd.ru/"><span>Форум</span></a></li> <li id="navuserlist"><a href="https://forumd.ru/userlist.php" rel="nofollow"><span>Участники</span></a></li> <li id="navrules"><a href="https://forumd.ru/misc.php?action=rules" rel="nofollow"><span>Правила</span></a></li> <li id="navsearch"><a href="https://forumd.ru/search.php" rel="nofollow"><span>Поиск</span></a></li> <li id="navregister"><a href="https://forumd.ru/register.php" rel="nofollow"><span>Регистрация</span></a></li> <li id="navlogin"><a href="https://forumd.ru/login.php" rel="nofollow"><span>Войти</span></a></li> </ul> </div> <div id="pun-ulinks" class="section" onclick="void(0)"> <h2><span>Пользовательские ссылки</span></h2> <ul class="container"> <li class="item1"><a href="https://forumd.ru/search.php?action=show_recent">Активные темы</a></li> </ul> </div> <!--noindex--> <div id="pun-announcement" class="section"> <h2><span>Объявление</span></h2> <div class="container"> <div class="html-box"> <!-- Юзер-меню --> <div id="user-menu" class="side-menu"> <div class="close"><i class="material-symbols-outlined">cancel</i></div> <div class="u-ava"></div> <div class="fd-guest g-inf rus"> <b>РЕГИСТРАЦИЯ</b> на форуме позволит: <li>скачивать <i>дизайны</i> и видеть <i>коды скриптов</i></li> <li>оставлять <i>ссылки</i> на сайты/картинки</li> <li><i>оформлять</i> заказы</li> <li>отправлять <i>личные</i> сообщения</li> <li><i>рекламировать</i> свои форумы/сайты или услуги</span> </div> <div class="fd-guest g-inf eng"> <b>REGISTRATION</b> on the forum allows you to: <li>download <i>designs</i> and view <i>script codes</i></li> <li>leave <i>links</i> to websites/images</li> <li><i>place</i> orders</li> <li>send <i>private</i> messages</li> <li><i>advertise</i> your forums/websites or services</li> </div> <ul class="u-menu"> <li class="fd-guest rus"><a href='/register.php'><span class='material-icons'>person</span> Регистрация</a></li> <li class="fd-guest rus"><a href='/login.php'><span class='material-icons'>login</span> Вход</a></li> <li class="fd-guest rus"><a href='/viewtopic.php?id=4506'><span class='material-icons'>message</span> Обратная связь</a></li> <li class="fd-guest eng"><a href='/register.php'><span class='material-icons'>person</span> Register</a></li> <li class="fd-guest eng"><a href='/login.php'><span class='material-icons'>login</span> Login</a></li> <li class="fd-guest eng"><a href='/viewtopic.php?id=7165'><span class='material-icons'>message</span> Feedback</a></li> </ul> </div> <!-- Сайдбар --> <div id="sidebar" class="rus"> <div class="u-ava" title="Меню профиля"></div> <div class="u-notif fd-user icon remake" title="Уведомления" id="notify-link" data-number-unread="0"> <a><em class="notify-link"><strong class="unreads">0</strong></em></a> </div> <div class="u-pm fd-user icon remake" title="Личные сообщения"></div> <div class="u-options icon"> <i class="material-symbols-outlined dark" title="Включить темную тему">dark_mode</i> <i class="material-symbols-outlined light" title="Включить светлую тему">light_mode</i> </div> <div class="u-arrow icon"> <div title="Наверх страницы" class="toTop"><i class="material-symbols-outlined">arrow_circle_up</i></div> <div title="Вниз страницы" class="onBottom"><i class="material-symbols-outlined">arrow_circle_down</i></div> </div> </div> <div id="sidebar" class="eng"> <div class="u-ava" title="Profile menu"></div> <div class="u-notif fd-user icon remake" title="Notifications" id="notify-link" data-number-unread="0"> <a><em class="notify-link"><strong class="unreads">0</strong></em></a> </div> <div class="u-pm fd-user icon remake" title="Private messages"></div> <div class="u-arrow icon"> <div title="Scroll to top" class="toTop"><i class="material-symbols-outlined">arrow_circle_up</i></div> <div title="Scroll to bottom" class="onBottom"><i class="material-symbols-outlined">arrow_circle_down</i></div> </div> </div> <!--кнопки стрелки вверх вниз--> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ if ($(window).scrollTop() > 250) { $(".toTop").fadeIn("slow"); } else { $(".toTop").fadeOut("slow"); } if ($(window).scrollTop() < $(document).height() - 999) { $(".onBottom").fadeIn("slow"); } else { $(".onBottom").fadeOut("slow"); } }); $(".toTop").click(function(){ $("html, body").animate({scrollTop: 0}, "slow"); }); $(".onBottom").click(function(){ $("html, body").animate({scrollTop: $(document).height()}, "slow"); }); }); </script> <!-- Меню --> <div id="nav"><ul class="inner"> <li id="logo"></li> <!-- <li id="navindex"><a href="/pages/index"><i class="material-symbols-outlined">home</i><span class="rus">Главная</span><span class="eng">Home</span></a></li> --> <li id="navforum"><a href="/=&forum"><i class="material-symbols-outlined">forum</i><span class="rus">Форум</span><span class="eng">Forum</span></a></li> <li id="navactive"><a href="/search.php?action=show_recent"><i class="material-symbols-outlined">chat</i><span class="rus">Активные темы</span><span class="eng">Active topics</span></a></li> <li id="navmembers"><a href="/userlist.php"><i class="material-symbols-outlined">group</i><span class="rus">Участники</span><span class="eng">Members</span></a></li> <li id="navsearch"><a href="/search.php"><i class="material-symbols-outlined">search</i><span class="rus">Поиск</span><span class="eng">Search</span></a></li> <li id="navadmin"><a href="/admin_index.php"><i class="material-symbols-outlined">shield_person</i><span class="rus">Админка</span><span class="eng">Admin</span></a></li> <li id="navguest"><a href="/register.php"><i class="material-symbols-outlined">passkey</i><span class="rus">Регистрация</span><span class="eng">Register</span></a></li> <li id="navguest"><a href="/login.php"><i class="material-symbols-outlined">login</i><span class="rus">Вход</span><span class="eng">Login</span></a></li> </ul></div> <!-- Смена языка --> <div id="langChange"><a class="material-icons">language</a><span class="eng"><b>Eng</b>/<a>Ru</a></span><span class="rus"><a>Eng</a>/<b>Ru</b></span></div> <!-- СЛАЙДЕР --> <div class="fd-slider"><!-- НАЧАЛО --> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/236383.jpg"> <div class="content"> <h3>&#127911; Подкаст «НЕ<b>ТЕ</b>РОЛЕВЫЕ»</h3> <p> Рассказываем и обсуждаем Форумные Ролевые Игры (ФРПГ). </p> <a id="store" target="_blank" href="https://t.me/neterolevye">Telegram</a> <a id="store" href="/viewtopic.php?id=8954">Обсудить</a> </div> </div> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/808399.jpg"> <div class="content"> <h3>&#127809; Что такое осень? <b>Конкурс</b> осенних дизайнов!</h3> <p> Как вы выражаете осень на своём форуме/сайте? Что осень для вас? <br> Вас ждут вкусные призы за участие, призовой фонд растет вместе с числом участников! <br> Все участники гарантировано получают <b>рекламные места</b>. </p> <a id="store" href="/viewtopic.php?id=8918#p207189">Участвовать</a> </div> </div> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/965290.jpg"> <div class="content"> <h3>&#128293; Акция! Осенние <b>скидки</b> на Мгновенные уведомления</h3> <p> Оплачивая уведомления <b>до 1 ноября 2024</b>, вы можете получить скидки в 10% или 20% за наградные баллы! <br> <a href="/viewtopic.php?id=8045">Скрипт уведомлений</a> поддерживается уже более 5 лет и имеет много бесплатных дополнений. <br> Мы принимаем <b>все способы оплаты из любых стран</b>. </p> <a id="store" href="/viewtopic.php?id=8924#p207222">Подробности</a> </div> </div> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/993126.jpg"> <div class="content"> <h3>&#10084;&#65039; Поддержи проект! Стань модератором!</h3> <p> Разыскиваются модераторы на должности: <br> Модератор вебмастерских разделов, Ассистент англоязычной версии, Видеомонтажер и другие<br> <a href="/viewtopic.php?id=5787#p134326">Посмотреть вакансии и условия.</a> </p> <a id="store" href="/viewtopic.php?id=5787#p134326">Подать заявку</a> </div> </div> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/435761.jpg"> <div class="content"> <h3>&#128140; <b>Акция!</b> Подписка, лайк, коммент, репост!</h3> <p> В рамках акции вы можете помочь нам в продвижении и заработать НАГРАДНЫЕ БАЛЛЫ.<br> НБ можно обменивать на платные скрипты, скидки на заказы, рекламу на нашем форуме и т.д. <br> Подробнее о том, где еще можно потратить баллы, можно <a href="https://forumd.ru/viewtopic.php?id=8324#p206561">в теме акции</a>. </p> <a id="store" href="https://forumd.ru/viewtopic.php?id=8324#p206561">Участвовать</a> </div> </div> <div class="slide eng" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/209339.jpg"> <div class="content"> <h3>&#127775; SPECIAL OFFER: We distribute designs for free</h3> <p> Finalizing the layout for your project;<br> Developing a style code; <br> Mobile version included if you wish.<br> </p> <a id="store" href="/viewtopic.php?id=7243">Details</a> </div> </div> <div class="slide eng" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/209339.jpg"> <div class="content"> <h3>&#10084;&#65039; Support the project</h3> <p> If you want to help us:<br> <a href=/viewtopic.php?id=5787>Become a moderator</a><br> <a href="/viewtopic.php?id=7167">Suggestions</a> &#8226; <a href="/viewtopic.php?id=7168">Reviews</a> </p> <a id="store" href="/viewtopic.php?id=6616">Details</a> </div> </div> <!-- КОНЕЦ --><div class="fd-slider-dots"></div></div> <div class="bot-hr"></div> <!-- мини объявы --> <div id="ann" class="rus"> &#127809; Конкурс! <a href="/viewtopic.php?id=8918#p207189" target='blank'>Что такое осень? Конкурс осенних дизайнов!</a> Вас ждут вкусные призы за участие, призовой фонд растет вместе с числом участников! </div> <!-- <div id="ann" class="rus"> &#128140; Акция! <a href="/viewtopic.php?id=8324#p206561" target='blank'>Подписка, лайк, коммент, репост!</a> Поделись нашими YouTube видео и получи наградные баллы.</div> --> <!-- <div id="ann" class="rus">Требуются модераторы! <a href="https://forumd.ru/viewtopic.php?id=5787#p134326" target='blank'>Посмотреть вакансии и подать заявку.</a> Денежную оплату и "плюшки" гарантируем &#128178; </div> --> <!-- <div id="ann" class="rus"> &#10071; &#10071; &#10071; На форуме временные проблемы с регистрацией пользователей! &#10071; &#10071; &#10071; <br> Если вам не пришел пароль от аккаунта на почту пишите сюда свой никнейм и e-mail: <a href="/viewtopic.php?id=4506" target='blank'>Диалог с администрацией</a> <br>Администраторы зарегистрируют и активируют аккаунт вручную. </div> --> <!-- <div id="ann" class="rus"> &#127876; <a href="/viewtopic.php?id=2921&p=21#p191508" target='blank'>Подборка новогодних украшений вашего проекта</a></div> --> <!-- --><div id="ann" class="eng"> &#10071; &#10071; &#10071; Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, <a href="https://i.imgur.com/mg0OGtT.png" target='blank'>switch to the russian language.</a> This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience. </div> <!-- <div id="ann" class="rus moderator-ann">Пожалуйста <a href="/viewtopic.php?id=7206" target='blank'>заполните анкету</a> и расскажите о вашей готовности к англоязычным пользователям. </div> --> <!-- Скрипт слайдера --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/14086.js?v=2" async></script> </div> </div> </div> <!--/noindex--> <div id="pun-status" class="section"> <h2><span>Информация о пользователе</span></h2> <p class="container"> <span class="item1">Привет, Гость!</span> <span class="item2"><a href="/login.php" rel="nofollow">Войдите</a> или <a href="/register.php" rel="nofollow">зарегистрируйтесь</a>.</span> </p> </div> <div id="pun-break1" class="divider"><hr /></div> <div id="pun-crumbs1" class="section"> <p class="container crumbs"><strong>Вы здесь</strong> <em>&#187;&#160;</em><a href="https://forumd.ru/">ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов</a> <em>&#187;&#160;</em><a href="https://forumd.ru/viewforum.php?id=7">Библиотека статей, гайдов, уроков</a> <em>&#187;&#160;</em><a href="https://forumd.ru/viewforum.php?id=176">Вебдизайн, HTML, CSS</a> <em>&#187;&#160;</em>Как сделать дизайн форума/сайта? Все о создании своего дизайна.</p> </div> <div id="pun-break2" class="divider"><hr /></div> <!-- banner_mini_top --> <div id="pun-main" class="main multipage"> <h1><span>Как сделать дизайн форума/сайта? Все о создании своего дизайна.</span></h1> <div class="linkst"> <div class="pagelink">Страница: <strong>1</strong></div> <div class="postlink"><span class="closed">Тема закрыта</span></div> </div> <div id="topic_t6308" class="topic closed pinned"> <h2><span class="item1">Сообщений</span> <span class="item2">1 страница 7 из 7</span></h2> <div id="p138964" class="post topicpost topic-starter" data-posted="1598353166" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p138964" onclick="return false;">Поделиться</a><strong>1</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=6308#p138964">25.08.20 13:59</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10111</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p138964-content" class="post-content"> <div class="quote-box quote-main"><blockquote><p><span style="font-size: 28px"><span style="font-family: Bebas Neue">Условия использования:</span></span><br />Вы можете использовать все материалы, соблюдая <a href="https://forumd.ru/viewtopic.php?id=5751#rule">условия использования бесплатного контента</a>.</p></blockquote></div> <p><span style="font-size: 22px"><span style="font-family: Bebas Neue">О статье</span></span><br />К сожалению, такой труд займет не мало времени, поэтому я начинаю размещать статью поэтапно, чтобы вы могли пользоваться ею хотя бы в частичном (не дописанном) виде.</p> <p>Сам топик статьи будет пока что закрыт, чтобы комментарии и вопросы не помешали разместить информацию в плавильной последовательности.<br />Новости об обновлении статьи я буду публиковать здесь: <a href="https://forumd.ru/viewtopic.php?id=7363">Обсуждение статьи: «Как сделать дизайн форума/сайта?»</a><br />Свои вопросы по статье вы также можете задать там же.</p> <p>Если вы хотите поддержать и смотивировать меня на скорейшее создание этого опуса, вы можете <a href="https://forumdes.mybb.ru/viewtopic.php?id=6616" rel="nofollow ugc" target="_blank">ЗАДОНАТИТЬ</a> на кофе, шоколадку и нормальный микрофон (для видосов).</p><hr /><p><span id="ogl"><span style="font-size: 22px"><span style="font-family: Bebas Neue">Оглавление</span></span></span></p> <p><span style="font-size: 22px"><span style="font-family: Bebas Neue"><a href="https://forumd.ru/viewtopic.php?id=6308#1">Начало разработки дизайна</a></span></span></p><ul style="list-style: disc"><li><p><a href="https://forumd.ru/viewtopic.php?id=6308#1a">Самые важные задачи дизайна</a></p></li><li><p><a href="https://forumd.ru/viewtopic.php?id=6308#1b">Примеры продумывания шаблонов</a></p></li><li><p><a href="https://forumd.ru/viewtopic.php?id=6308#1vid-1">ВИДЕО: Зачем нужен дизайн? Как придумать дизайн для сайта?</a></p></li><li><p><a href="https://forumd.ru/viewtopic.php?id=6308#1c">Как придумать свой шаблон?</a></p></li></ul> <p><span style="font-size: 22px"><span style="font-family: Bebas Neue"><a href="https://forumd.ru/viewtopic.php?id=6308#2">Создание макета</a></span></span></p><ul style="list-style: disc"><li><p><a href="https://forumd.ru/viewtopic.php?id=6308#2a">Как делать макет для дизайна форума/сайта?</a></p></li><li><p><a href="https://forumd.ru/viewtopic.php?id=6308#2b">Советы по работе с макетом</a></p></li><li><p><a href="https://forumd.ru/viewtopic.php?id=6308#2c">Что учесть при разработке макета</a></p></li></ul> <p><span style="font-size: 22px"><span style="font-family: Bebas Neue"><a href="https://forumd.ru/viewtopic.php?id=6308#3">Графика в вебдизайне</a></span></span></p><ul style="list-style: disc"><li><p><a href="https://forumd.ru/viewtopic.php?id=6308#3a">Формат графики</a></p></li><li><p><span style="color: #e63737">контент в разработке:</span> <a href="https://forumd.ru/viewtopic.php?id=6308#3b">Photoshop для новичков</a></p></li><li><p><a href="https://forumd.ru/viewtopic.php?id=6308#3c">Как &quot;нарезать&quot; макет. Правила использования графики в вебдизайне.</a></p></li></ul> <p><span style="font-size: 22px"><span style="font-family: Bebas Neue"><a href="https://forumd.ru/viewtopic.php?id=6308#4">Основы CSS и HTML</a></span></span></p><ul style="list-style: disc"><li><p><a href="https://forumd.ru/viewtopic.php?id=6308#4a">Зачем нужен дизайн CSS</a></p></li><li><p><a href="https://forumd.ru/viewtopic.php?id=6308#4b">Как работает HTML</a></p></li><li><p><strong><span style="color: #e63737">NEW!</span></strong> <a href="https://forumd.ru/viewtopic.php?id=6308#4с">Как работает CSS</a></p><ul style="list-style: circle"><li><p><strong><span style="color: #e63737">new!</span></strong> <a href="https://forumd.ru/viewtopic.php?id=6308#4c-1">Синтаксис CSS: Общее</a></p></li><li><p><strong><span style="color: #e63737">new!</span></strong> <a href="https://forumd.ru/viewtopic.php?id=6308#4c-2">Синтаксис CSS: СЕЛЕКТОРЫ</a></p></li></ul></li><li><p><span style="color: #e63737">контент в разработке:</span> Инструменты разработчика</p></li></ul> <p><span style="font-size: 22px"><span style="font-family: Bebas Neue"><a href="https://forumd.ru/viewtopic.php?id=6308#5">Верстка дизайна: погружаемся в CSS</a></span></span><br /><span style="color: #e63737">контент в разработке:</span></p><ul style="list-style: disc"><li><p>Фон элемента (Backgound)</p></li><li><p>Отображение элемента (Display)</p></li><li><p>Позиционирование элемента (Position)</p></li><li><p>Отступы (margin и padding)</p></li></ul> <p><span style="font-size: 22px"><span style="font-family: Bebas Neue"><a href="https://forumd.ru/viewtopic.php?id=6308#6">Верстка: ошибки новичков</a></span></span></p><ul style="list-style: disc"><li><p><a href="https://forumd.ru/viewtopic.php?id=6308#5a">Проблема лишних картинкок</a></p></li><li><p><span style="color: #e63737">контент в разработке:</span> проблема длиннющих селекторов</p></li><li><p><span style="color: #e63737">контент в разработке:</span> проблема &quot;циганских юбок&quot;</p></li><li><p><span style="color: #e63737">контент в разработке:</span> проблема &quot;бутербродов&quot;</p></li></ul> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+5</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> </ul> </div> </div> </div> <div id="p138967" class="post altstyle topic-starter" data-posted="1598388381" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p138967" onclick="return false;">Поделиться</a><strong>2</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=6308#p138967">25.08.20 23:46</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10111</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p138967-content" class="post-content"> <p><span id="1"></p><p style="text-align:center;"><span style="font-size: 28px"><span style="font-family: Bebas Neue">Начало разработки дизайна</span></span></span><br /><span style="font-size: 18px">Как запланировать проект дизайна, какие ошибки допускают новички.</span></p> <p><span id="1a"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Самые важные задачи дизайна</span></span></span><br />Основная проблема новичков в сфере вебдизайна - концентрация на стандартных шаблонах, попытки понатащить к себе лишнее и ненужное (увиденное на других сайтах), а также желание срочно продумать цветовую гамму (а не шаблон).<br />Проблема возникает потому, что в голове новичка &quot;дизайн&quot; - это &quot;красота сайта&quot;. На самом деле &quot;дизайн&quot; - это прежде всего <span style="font-style: italic">ЮЗАБИЛИТИ</span>: то есть удобный ИНТЕРФЕЙС для работы с сайтом/форумом.</p><div class="prev" id="block-138967-1"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/509047.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/509047.jpg" /></p></div><p>Что будет удобно, а что - нет, зависит от информации, которую должны содержать страницы (или наоборот - не должны содержать) и от тематики ресурса.<br />Касательно тематики сайтов момент продумывания шаблона еще более-менее понятен новичкам, но на форумах с этим большая проблема. С точки зрения дизайна, форумы тоже бывают разные: форумы общения, форумы а-ля &quot;блоги&quot;, форумы для публикации статей и гайдов (как наш), ролевые игры, форумы для пользователей мобильных устройств и т.д.<br />Поэтому просто открывать другие сайты/форумы и брать понравившийся шаблон для себя (просто меняя цвета и картинки) - это действие нуба, а не профи.</p> <p>Для начала дизайнеру нужно определиться со следующим:<br /><strong>1. какой контент содержат страницы и как лучше его разместить</strong><br />Это касается стандартного функционала движка. Например, в интернет-магазине есть вывод товаров, категории товаров, контент на странице товара, корзина и т.д. На форуме есть список категорий, список топиков, сообщения на странице топика, профиль пользователя и т.д.<br />Всё это можно и НУЖНО изменить &quot;под себя&quot; - в этом и есть <em class="bbuline">первостепенная</em> задача СВОЕГО дизайна: чтобы форум стал удобнее для нужд конкретной аудитории.</p> <p><strong>2. какой дополнительный контент должны содержать страницы и как лучше его разместить</strong><br />Это касается не стандартного функционала движка, а вашего встроенного: что НУЖНО будет выводить на сайте или форуме, какие виджеты будут необходимы и полезны, что из этого стоит разместить только на главной, а что - на каждой странице, и т.д.<br />Это делается на этапе продумывания дизайна, чтобы потом не было проблемы &quot;куда же это засунуть&quot; и не тащить к себе как сорока все прикольное и блестящее, а только реально нужное.</p> <p><strong>3. какая стилистика шаблона больше подходит для вашей тематики и как это скажется на юзабилити</strong><br />Это касается уже больше всяких творческих &quot;красивостей&quot;, однако на этом этапе мы думаем о них не как о чем-то красивом, цветном и офигенном, а как о ФУНКЦИИ, которую оно должно выполнять в дизайне.<br />Например, стоит ли пихать в шапку форума сисястую эльфийку? понравится ли это аудитории сайта, привлекательно ли это для пользователей? а подходит ли это под нашу тематику сайта? а какого размера должна быть эльфийка, чтобы шапка не была слишком большой? а если нам нужно, чтобы помещались не только сиськи эльфийки, но и попа, что нам лучше сделать: уменьшить ее или сделать эту эльфийку не в шапке, а на фоне, чтоб её попа как-нибудь сбоку торчала и не увеличивала высоту шапки?<br />Все наши творческие изыски нужно продумать как абстрактные элементы, и для каждого придумать функцию, которую они выполняют в дизайне.<br />Такой ход мысли также научит вас не просто копировать чьи-то дизайн-решения, а самому продумывать: где вам нужна рамочка, а где не нужна, что от чего стоит отделить, как лучше расположить элементы на странице, чтобы это было не только красиво, но и читабельно.</p> <p><a href="https://forumd.ru/viewtopic.php?id=6308#ogl">Наверх к оглавлению</a></p><hr /><p><span id="1b"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Примеры продумывания шаблонов</span></span></span></p> <p><strong><a href="https://forumd.ru/viewtopic.php?id=5740">Интернет-магазин игровых услуг</a>.</strong> <br />В обычном интернет-магазине правильно было бы сделать картинки товаров, чтобы на странице пользователь мог раскрыть картинки товара или покрутить объект в зд, оценив со всех сторон дизайн телевизора/смартфона/труселей (или что он там покупает).<br />Но что лучше сделать, если наш &quot;товар&quot; - это услуга по прохождению какого-то контента из онлайн-игры? &quot;Убийство Архимонда&quot; в картинках изобразить можно, но это было бы странно.<br />Интересное дизайн-решение: интегрировать фоновую картинку вместо стандартной картинки товара:</p><div class="prev" id="block-138967-2"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://i.imgur.com/obAhMPC.jpg" alt="https://i.imgur.com/obAhMPC.jpg" /> <img class="postimg" loading="lazy" src="https://i.imgur.com/lnv8hXI.jpg" alt="https://i.imgur.com/lnv8hXI.jpg" /> <img class="postimg" loading="lazy" src="https://i.imgur.com/0erigue.jpg" alt="https://i.imgur.com/0erigue.jpg" /></p></div> <p><strong><a href="https://forumd.ru/viewtopic.php?id=6082">Дизайн для проекта ForumD.ru</a> или <a href="https://forumd.ru/viewtopic.php?id=5752">MyBB Bright Flat</a></strong>.<br />На обычном форуме для общения сам шаблон дизайна может быть стандартным. Но что, если наш проект - это скорее &quot;блог&quot;, чем форум? Например, на главной форума нужны длинные описания разделов и много ссылок для быстрого перехода, на страницах списка тем нужно выделять заголовки топика, а на страницах топиков важен контент (статья), а не куча полей профиля пользователя.<br />Дизайн-решение: переписываем полностью форумные таблицы в блоки - так, чтоб они соответствовали формату блогов, а не форума.</p><div class="prev" id="block-138967-3"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://i.imgur.com/S10EVxV.jpg" alt="https://i.imgur.com/S10EVxV.jpg" /> <img class="postimg" loading="lazy" src="https://i.imgur.com/VWaJc8r.jpg" alt="https://i.imgur.com/VWaJc8r.jpg" /> <img class="postimg" loading="lazy" src="https://i.imgur.com/ec6qs5h.jpg" alt="https://i.imgur.com/ec6qs5h.jpg" /></p><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/536045.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/536045.jpg" /> <img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/721507.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/721507.jpg" /></p></div> <p><strong>Продуманные и <span style="color: #e63737">НЕ</span>продуманные шаблоны для ролевых форумов</strong><br />Для меня почти любой дизайн ролевого форума выглядит недоделанным. Скорее всего это связано с тем, что они чаще всего выполняются по общему шаблону, просто меняются фоновые картинки, но факт того, что лишь единицам приходит в голову эти шаблоны &quot;подлатать&quot; на лицо.<br />На данный момент работа над дизайном ролевой - это придумать шапку, низ, окантовку для &quot;тела форума&quot;, окантовку для профиля (+ иногда делают окантовку для названия и описания разделов в категориях). Можете зайти на любой арт-форум (где тусуются дизайнеры ролевых) и увидите там макеты, которые состоят только из перечисленной графики, и ни одной строчки текста в этих макетах нет. На выходе получается вот такое (абсолютно рандомные дизайны <a href="http://webtalk.ru/catalog/Roleplay_Forums/" rel="nofollow ugc" target="_blank">с первой страницы ролевых на вебтоке</a>):</p><div class="prev" id="block-138967-4"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/67552.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/67552.jpg" /> <img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/707715.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/707715.jpg" /> <img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/904711.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/904711.jpg" /></p></div><p>Наличие багов и возможная непродуманность шаблона должна отталкивать вас от того, чтобы брать пример с других форумов на этапе планирования дизайна, а также мотивировать освоить дизайн так, чтобы НЕ использовать чужие забагованные шаблоны.<br />Для примера, вот более кропотливый взгляд на похожий дизайн ролевых:</p><table style="table-layout:fixed;width:100%"><tr><td><p style="text-align:center;">Вот так (текстурой) можно отделять строки таблицы, если страдаешь нелюбовью к линиям в таблицах</p></td><td><p style="text-align:center;">Вот так ровно и аккуратно можно оформить список тем, если страдаешь нелюбовью к линиям в таблицах</p></td><td><p style="text-align:center;">Вот приблизительно так (блоками-окантовками) можно разместить разделы форума на главной, отказавшись от колонок таблицы, которые висят в пустоте</p></td></tr><tr><td><div class="prev" id="block-138967-5"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/585987.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/585987.jpg" /></p></div></td><td><div class="prev" id="block-138967-6"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/843692.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/843692.jpg" /></p></div></td><td><div class="prev" id="block-138967-7"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/888340.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/888340.jpg" /></p></div></td></tr></table><p><a href="https://forumd.ru/viewtopic.php?id=6308#ogl">Наверх к оглавлению</a></p><hr /><p><span id="1vid-1"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Зачем нужен дизайн? Как придумать дизайн для сайта?</span></span></span></p><p style="text-align:center;"><iframe width="480" height="284" src="https://www.youtube.com/embed/AG1xKytxO3Q" loading="lazy" frameborder="0" allowfullscreen></iframe></p> <p><a href="https://forumd.ru/viewtopic.php?id=6308#ogl">Наверх к оглавлению</a></p><hr /><p><span id="1c"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Как придумать свой шаблон?</span></span></span><br />Как можно прийти к хорошему дизайну? Для этого нужно для начала закрыть все понравившиеся сайты и думать только своей головой. Делается свой собственный дизайн поэтапно, ориентируясь на СВОЮ аудиторию, а не путем выдирания и нагромождения трендов с других форумов/сайтов.<br />Важно понимать, что в принципе что-то где-то подсмотреть, приметить и применить к своему дизайну - это не плохо. Плохо будет, если это будет делаться непродуманно, хаотично и без оглядки на СВОЮ тематику, СВОЮ аудиторию.</p> <p><strong>Этап 1. Составляем список нужного и ненужного.</strong><br />Считайте этот этап подготовкой ТехЗадания (брифа) по дизайну для самого себя. Этот этап позволит учесть все особенности вашего движка, весь дополнительный контент и все технические фичи, которые понадобятся на сайте.<br />Итак, форумы/сайты конкурентов мы закрываем и открываем чистый лист для заметок. На нем надо разместить:</p><ul style="list-style: disc"><li><p>Все цсс-трюки и скрипты, которые нужно будет встраивать<br />Например, такие фичи как навороченные лайки-дизлайки, индикаторы пользователя онлайн, особый функционал, спойлеры для контента и т.д.</p></li><li><p>Весь дополнительный контент, который нужно встраивать на сайте<br />Это касается всяких слайдеров, галерей картинок, текстов и дополнительных меню</p></li><li><p>Все нужные и НЕ нужные элементы движка<br />Вы уже настроили функционал движка так, как вам нужно, а теперь необходимо изучить &quot;голый&quot; (без дизайна или со стандартным дизайном) движок и выписать всё, что вам необходимо отображать, а что - скрыть</p></li></ul><p>Причем составлять эти списки лучше ПОСТРАНИЧНО. Отдельно решаем, что у нас размешается в шапке, подвале (или, например, сайдбаре) на каждой странице, а потом разбираем движок на &quot;кусочки паззла&quot;: что у нас есть на главной, что оттуда надо убрать и что туда надо добавить; что у нас есть на странице &quot;портфолио&quot;, что оттуда надо убрать и что туда надо добавить - и так со всеми основными страницами.<br />Даже на сложных движках (например, форумных) это выручает при разработке макета. В противном случае и получается, что нарисуешь какую-нибудь красивую окантовку для поста и профиля, а на этапе верстки встает вопрос: куда пихать дату поста, рейтинг и голосовалку за пост? &quot;ой, чет оно же никуда не влазит, ладно пусть висит где-то как попало&quot; <img src="https://forumstatic.ru/img/smilies/MyBB/universal/lol.gif" alt=":D" /> . Возможно, дизайны, где названия и описания разделов в красивой окантовке, а все остальные данные висят в круговерти пустоты, именно так и появились.</p> <p><strong>Этап 2. Продумываем общий схематический дизайн шаблона.</strong><br />Прежде, чем открывать фотошоп или искать самую красивую сисястую эльфийку, которая идеально впишется в ваш дизайн, необходимо взять чистый лист бумаги и схематично от руки нарисовать как вы видите ваш будущий дизайн.<br />Желательно - постранично. Можно это делать поэтапно, особенно, если работаете со сложносоставным движком с кучей разных страниц типа интернет-магазина или форума. На примере форумов: сначала нарисовали себе главную и приступили к макету, а список тем, посты, профили и прочее будем подрисовывать отдельно, когда до них дойдет дело.<br />Однако хотя бы общим концептом надо озаботиться СРАЗУ.</p> <p>Вот примеры моих каракулей при продумывании разных дизайнов:</p><div class="quote-box spoiler-box"><div onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');">Сообщения на странице топика для ФД</div><blockquote><table style="table-layout:fixed;width:100%"><tr><td><p style="text-align:center;"><strong>Идея</strong></p></td><td><p style="text-align:center;"><strong>Воплощение</strong></p></td></tr><tr><td><p><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/734292.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/734292.jpg" /></p></td><td><p><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/721507.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/721507.jpg" /></p></td></tr></table></blockquote></div><div class="quote-box spoiler-box"><div onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');">Необычное меню для форума</div><blockquote><table style="table-layout:fixed;width:100%"><tr><td><p style="text-align:center;"><strong>Идея</strong></p></td><td><p style="text-align:center;"><strong>Воплощение</strong></p></td></tr><tr><td><p><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/333594.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/333594.jpg" /></p></td><td><p><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/451853.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/451853.jpg" /></p></td></tr></table></blockquote></div><div class="quote-box spoiler-box"><div onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');"><strong>Невоплощенное</strong> (лендинг для ФД и идея ролевого дизайна)</div><blockquote><table style="table-layout:fixed;width:100%"><tr><td><p><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/343402.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/343402.jpg" /></p></td><td><p><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/946037.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/946037.jpg" /></p></td></tr></table></blockquote></div><p>Как вы видите, каракули не должны быть хоть сколько-то красивыми, разборчивыми или понятными хоть кому-то, кроме вас.<br />Это ваши личные заметки по дизайну, которые помогают держать в голове контент, который есть на странице, а также определиться приблизительно с формой объектов и количеством графики.</p> <p>Только после этих этапов можно приступать к макету. А прорисовка макета будет буквальным продолжением этих этапов.</p> <p>Что важно: хочу вдохновить и успокоить новичков, которые не берутся продумывать нестандартный шаблон просто из боязни не осилить верстку. <br />Ваша фантазия относительно шаблона может быть ограничена только фактором УДОБСТВА для пользователей. То есть вы на этапе подготовки должны знать, что ЛЮБОЙ стандартный элемент движка можно куда-нибудь подвинуть, в любое место вставить красивые рамочки, в любое место добавить какой-нибудь свой контент или блок для картинок. Даже проблемы с технически ограниченными движками типа mybb, wix, ucoz и т.д. (где нет доступа в html-код) решаемы (хоть и через жопу). <br />Решить свои проблемы с воплощением дизайна можно на нашем форуме или других подобных ресурсах, задавая нужные вопросы и демонстрируя свои макеты. Так что отсутствие навыков при желании научиться делать дизайн круто, индивидуально и правильно не должно вас останавливать. Придумывайте сложные вещи, учитесь их исполнять и со временем вы сможете верстать что угодно для какой угодно платформы.</p> <p><a href="https://forumd.ru/viewtopic.php?id=6308#ogl">Наверх к оглавлению</a></p><div class="no-prof" id="block-138967-8"><p>no-prof</p></div> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+5</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> </ul> </div> </div> </div> <div id="p139112" class="post topic-starter" data-posted="1599921855" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p139112" onclick="return false;">Поделиться</a><strong>3</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=6308#p139112">12.09.20 17:44</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10111</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p139112-content" class="post-content"> <p><span id="2"></p><p style="text-align:center;"><span style="font-size: 28px"><span style="font-family: Bebas Neue">Создание макета</span></span></span><br /><span style="font-size: 18px">Основы разработки дизайна на макете.</span></p> <p>В качестве предисловия к этой части важно сказать, что конкретно в этом гайде будут только трюки по работе в фотошопе для новичков и общие советы по работе с макетами, которые сделают вашу жизнь проще. <br />Сама разработка макета - это дело скилла конкретного дизайнера в конкретном графическом редакторе. Нет какого-то универсального курса из комплекта уроков, который научит рисовать любые макеты с нуля. Дизайн в графических редакторах - это практика. Необходимо ставить задачи, искать пути их решения, гуглить уроки и т.д.<br />Лично я когда-то давно зарегистрировала этот форум именно с этой целью. Идеей было получать бесплатные заказы, чтоб на практике учиться делать что-то в ФШ. Вы можете тоже поискать себе подобный источник практики, либо же просто выполнять уроки по работе с графическими редакторами один за другим.<br />Перечислять здесь миллион уроков по работе в фотошопе, увы, нет никакого смысла. Во-первых, фотошоп - это не единственный подходящий для разработки дизайна редактор. Если быть честным, то во многих случаях он самый неподходящий. <img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" /> Во-вторых, уроков, которые я смогу из себя выдавить, все равно не хватит для специфического дизайна - невозможно предусмотреть все дизайнерские изыскания. Зато мы поговорим о работе в ФШ конкретно со спецификой макетов, а не красивых картинок.</p> <p><span id="2a"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Как делать макет для дизайна форума/сайта?</span></span></span><br />Для кого-то это может быть открытием, поэтому на всякий случай сразу обозначим: <strong>макет для дизайна форума/сайта рисуется целиком</strong>, а не по отдельным частям.<br />Макет - это второй этап продумывания дизайна, где вы размещаете весь контент сайта, разрисовываете, придаете элементам форму и т.д.<br />Вот так это выглядит:</p><table style="table-layout:fixed;width:100%"><tr><td><div class="prev" id="block-139112-1"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/11085.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/11085.jpg" /></p></div></td><td><div class="prev" id="block-139112-2"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/401101.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/401101.jpg" /></p></div></td><td><div class="prev" id="block-139112-3"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/875087.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/875087.jpg" /></p></div></td></tr></table><p>Потом макет &quot;нарезается&quot; на отдельные элементы, которые вставляются в код сайта.</p> <p><strong>Не рисуйте элементы дизайна отдельно</strong><br />Вы можете нарисовать что-то сложносоставное отдельно. Например, логотипы надо разрабатывать отдельно в широком формате: они могут использоваться для рекламы, для печати и т.д., а на макет вставлятся мини-лого, так что, будет проблемой, если лого делать на макете маленьким, а потом думать как его перерисовать в большом формате. Или, например, если в шапке используется что-либо нарисованное из миллиона слоев и эффектов, можно заняться этим отдельно, а на макет перекинуть уже готовую версию элемента.<br />Но в целом рисовать отдельно шапку, отдельно иконки и отдельно окантовки - это <strong>НЕ нормально</strong>. Как минимум макет дизайна должен дать вам полную картину о том, что с чем сочетается стилистически, везде ли одинаковые оттенки и цвета и т.д.</p> <p><strong>Делайте ПОЛНЫЕ подробные макеты</strong><br />Макет - это финальный этап продумывания дизайна (почти окончательный этап), где вы решаете где какой текст должен быть расположен, какого он должен быть размера и какого цвета. Чем подробнее макет, тем меньше проблем с его версткой. Когда вы что-то не вносите на макет потом будете сталкиваться с проблемой &quot;а куда это засунуть&quot;.<br />Представьте, что макет будете верстать не вы и всего что на макете нет, не будет и на сайте - и вот с таким подходом рисуйте ВСЁ. Да, это сложно, это дольше, зато это - профессиональный и правильный подход к дизайну, который убережет вас от многих проблем.</p> <p>Конечно, макет - это ВАШ рабочий инструмент, и он НЕ обязан содержать каждую внутреннюю страничку и каждую точечку. К тому же, часто бывает, что в процессе верстки некоторые мелочи меняются, переносятся, добавляются. Но это не повод отказаться от подробного макета. <br />На просторе рынка ролевых дизайнов можно наблюдать вот такие макеты:</p><table style="table-layout:fixed;width:100%"><tr><td><div class="prev" id="block-139112-4"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/496291.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/496291.jpg" /></p></div></td><td><div class="prev" id="block-139112-5"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/674098.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/674098.jpg" /></p></div></td><td><div class="prev" id="block-139112-6"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/879771.gif" alt="https://forumupload.ru/uploads/0007/e3/f7/2/879771.gif" /></p></div></td></tr></table><p>Как заготовка - это нормально.<br />Как образец, чтобы показать заказчику цветовую гамму - это нормально.<br />Как финальная версия перед версткой - это НЕ нормально.<br />Если вы будете брать пример с таких макетов, вы по факту лишите свой дизайн точной продуманности (о которой мы говорили <a href="https://forumd.ru/viewtopic.php?id=6308#1">в предыдущей части</a>). Такие макеты отлично годятся для вставки новой цветовой гаммы и картинок в стыренный где-то шаблон, но для разработки индивидуального дизайна, который удобен пользователям и несет в себе цель сделать адекватное отображение элементов сайта - нет.</p> <p><strong>Продумывайте верстку при разработке макета</strong><br />Другая проблема дизайнеров - это отрисовка невероятной красоты, которую потом либо нереально вкорячить, либо реально, но очень тяжело.<br />К сожалению, проблема встречается даже у профессиональных дизайнеров и лечится только с практикой. Когда дизайнер вообще не прикасается к верстке, у него наблюдается много косяков при разработке. <br />Здесь я выдам несколько основных советов для начинающих, которые упростят вам жизнь.<br />Во-первых, учитывайте разрешения экрана. Если рисуете фиксированный дизайн, нанесите на макет основные слои разрешений - тогда станет видно, как будет обрезаться ваша супер-симпотичная шапочка, помещаются ли элементы форума на узком экране и т.д.<br />Во-вторых, когда рисуете всякие детальки, окантовки и т.д., учитывайте, что потом это всё надо как-то &quot;нарезать&quot; и куда-то вставить. Если пользуетесь готовым движком, отвлекитесь и посмотрите в код, подумайте, каким способом это надо будет засовывать. <br />Подробнее мы вернемся к этому вопросу в части <a href="https://forumd.ru/viewtopic.php?id=6308#2c">Что учесть при разработке макета</a></p> <p><strong>Ошибки новичков в разработке дизайна</strong><br />Это уже более субъективные вещи, с которыми приходилось сталкиваться. Однако, может быть, они кому-то пригодятся.<br />Во-первых, при подборе исходников следует учитывать, что не бывает неподходящего цвета. Любую картинку можно перекрасить под ваш дизайн. Некоторые, конечно, &quot;красятся&quot; с трудом, но в любом случае вам следует озадачить себя поиском уроков по колоризации различных элементов в графическом редакторе, а не искать неприменно &quot;красную&quot; эльфийку - это вам поможет в будущем, и, если не умеете, лучше начать этому учиться уже сейчас. Когда подбираете исходники, смотрите на форму, а не на цвет.<br />Во-вторых, не надо смешивать стили рисовки. Например, анимешный персонаж + компьютерная графика + фото реального человека одновременно в одной шапке смотрятся нелепо. (если только сайт не посвящен кино/комп.играм, но даже в этом случае 2д и 3д объекты рядом никак не смотрятся - надо выбирать: либо засовываем нарисованное, либо реалистичное, либо разграничиваем это как-то отдельно.) То же можно сказать и про элементы дизайна: реалистичная металлическая рамочка не подойдет под дизайн в стиле рисованной графики.<br />В-третьих, не всегда стоит пихать в дизайн слишком много исходников и графики. Например, в шапке сайта очень органично смотрится ОДИН персонаж, а не десять. Но новички любят понапихать побольше или сделать шапку-коллаж из кучи всего сразу. Другой пример - не каждому форуму/сайту нужен &quot;графонистый&quot; дизайн, состоящий из кучи картинок, мелочей, кнопок и окантовок. Если речь о фентези-ролевой, то это актуально, но если форум больше сконцентрирован на общении или контенте, то вам ни к чему настолько &quot;атмосферный&quot; дизайн и следует быть проще.</p> <p><a href="https://forumd.ru/viewtopic.php?id=6308#ogl">Наверх к оглавлению</a></p><hr /><p><span id="2b"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Советы по работе с макетом</span></span></span></p> <p>При профессиональной работе с макетами просто необходимо следовать этим простым правилами, иначе ваш макет превратится с кашу, где даже вы не сможете разобраться.<br />В данном гайде я привожу примеры и терминологию из Photoshop, но подобный инструментарий есть в любом адекватном редакторе.</p> <p><strong>1. Используйте папки.</strong><br />Все слои, которые относятся к определенному элементу, сохраняйте в отдельную папку.<br />В фотошопе папки создаются на панеле слоёв, а слои в них можно перетаскивать мышкой:</p><table style="table-layout:fixed;width:100%"><tr><td><div class="prev" id="block-139112-7"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/450772.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/450772.jpg" /></p></div></td><td><div class="prev" id="block-139112-8"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/979942.gif" alt="https://forumupload.ru/uploads/0007/e3/f7/2/979942.gif" /></p></div></td></tr></table><p>Как вы видите, папка ВНУТРИ папки - это тоже неплохая идея, когда речь идет о большом макете, состоящем из множества элементов.<br />Что именно объединять? <br />Во-первых, стоит раскладывать макет на элементы сайта (шапка, подвал, сайдбар, &quot;рамка тела&quot;, контент).<br />Во-вторых, любой элемент который насчитывает с десяток слоёв заслуживает храниться в папке. Нарисовали окантовочку, украшенную кучей листиков, звездочек и блестяшек? Упакуйте все эффекты по папкам: &quot;листья&quot;/&quot;звезды&quot;/&quot;блестяшки&quot;.</p> <p><strong>2. Раскрашивайте папки.</strong><br />У меня эта привычка не выработалась, но это очень полезное правило. Даже если красить папки от балды, можно лучше в них ориентироваться, т.к. все слои внутри обретают тот же цвет и видно, где закончилась папка:</p><table style="table-layout:fixed;width:100%"><tr><td><div class="prev" id="block-139112-9"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/682785.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/682785.jpg" /></p></div></td><td><div class="prev" id="block-139112-10"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/791027.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/791027.jpg" /></p></div></td></tr></table><p>Чтоб покрасить папку в фотошопе сделайте правый клик по ней и в выпадающем меню в самом конце будет перечисление цветов.<br />А если сможете выработать для себя ассоциации элементов с цветом папки, то ваша работа в редакторе станет в разы лучше.</p> <p><strong>3. Давайте название слоям и папкам.</strong><br />Не обязательно это делать прям со всеми элементами, но желательно. Чем больше всего обретет названия, тем лучше.<br />Папку лучше проименовать заранее, а слои - уже по завершению работы над элементом. По окончании создания элемента, не забудьте удалить или вынести в отдельную папку все неиспользованные слои.</p> <p>Называть папки и элементы лучше на английском.<br />Во-первых, названия получаются гораздо короче. Во-вторых, не будет проблем, если вы передадите макет на доработку кому-либо - проще разобраться в английском языке, чем в наименованиях типа &quot;штучка справа&quot;.</p> <p><strong>4. Не склеивайте слои без необходимости.</strong><br />Ни один дизайнер - не робот. В любой момент можно допустить ошибку: можно что-то криво обрезать, где-то может торчать лишняя тень, можно ошибиться со стилем слоя и т.д. И все это может быть не на поверхности, а зарыто где-то между слоёв. А самое главное - такие косяки иногда выявляются даже не стадии верстки, а когда уже начинаешь пользоваться дизайном и замечаешь, что кое-что кое-где криво.<br />Поэтому у вас ВСЕГДА должна быть возможность &quot;откатиться&quot;, выкопать проблемный слой, в пару кликов решить проблему и перезалить элемент дизайна. </p> <p>Если вам все же понадобилось что-то склеить в один слой, поступайте одним из двух методов:<br />&nbsp; <strong>1 способ:</strong> скопируйте все слои, которые намереваетесь склеить, вынесете в отдельную папку и сделайте ее невидимой. Таким образом у вас останутся все исходные элементы<br />&nbsp; <strong>2 способ:</strong> сохраните текущий макет с учетом версии. Например &quot;design-1&quot;, следующая версия со склеенными слоями будет называться &quot;design-2&quot;</p> <p><strong>5. Не разводите &quot;клонов&quot;.</strong><br />Вы поймете насколько это важно, когда ваш макет начнет весить гигабайты, а вы будете успевать попить кофе, помыться и выгулять собаку в процессе открытия файла.<br />Экономьте количество слоёв.<br />Если вы рисуете дизайн постранично, не надо копировать шапку и подвал для каждой страницы. Создавайте их в виде глобальных блоков, а остальное рисуйте отдельно.<br />Если вы делаете новую папку элемента на основе копии другой, то удалите все лишние слои, которые могут где-то затеряться в этой копии и не быть использованы в новом элементе - то есть не надо клонировать всякие отключенные &quot;исходники&quot;, которые использовались при разработке первоначального элемента.<br />Вообще старайтесь за собой подчищать и удалять ненужные слои. Сделали элемент (папку) - почистили. Естественно, не надо удалять всё, продолжайте сохранять исходники объединенных слоёв, можно оставлять многое, но от однозначно неиспользуемых слоёв надо избавляться.</p> <p><a href="https://forumd.ru/viewtopic.php?id=6308#ogl">Наверх к оглавлению</a></p><hr /><p><span id="2c"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Что учесть при разработке макета</span></span></span></p> <p>В отличие от какой-либо графической работы по картинкам, аватаркам и арту, макеты - это другая вселенная. При разработке необходимо держать в голове не только неописуемую красоту, но и функциональную часть: как это будет выглядеть на экране, как это будет &quot;нарезаться&quot; на элементы и как это сверстать.</p> <p><strong>Разрешения экрана</strong><br />На просторах интернета МАССА дизайнов, которые сделаны без учета разрешений экрана. <br />Во-первых, надо запомнить: ваш монитор и то, что вы видите на экране, не является истинной в последней инстанции! <strong>У других пользователей разрешение экрана другое: оно может быть больше вашего или меньше</strong>. Ваша задача - учитывать это еще при создании макета, а не только при верстке.<br />Когда я говорю о других разрешениях экрана, я не имею в виду обязательную адаптацию макета под мобильные и планшеты, пока речь идет сугубо о дизайне для ПК - и на нем тоже лажают часто и серьезно.<br />Например, можно наблюдать резкие &quot;обрезания&quot; фонов:</p><table style="table-layout:fixed;width:100%"><tr><td><div class="prev" id="block-139112-11"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/72663-4-f.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/72663-4-f.jpg" /><br />При разрешении 1500+ обрывалась шапка</p></div></td><td><div class="prev" id="block-139112-12"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/72664-2-f.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/72664-2-f.jpg" /><br />при разрешении 1400+ обрывался фон</p></div></td></tr></table><p>1400-1500 ни в коем случае не является каким-либо стандартом. Есть еще люди с мониторами шириной 1600px и 1920px. А бывают и ребята, которые покупают огромные моники с разрешением в 2560 или даже 3840. Не обязательно, чтоб картинка заполняла всю ширину монитора в 3850px, но нужно, чтоб она не обрывалась даже на таком широком дисплее. Если вы работаете с маленького монитора, вы должны рисовать макеты как минимум на 1920 в ширину и делать фон таким, чтобы он либо мог растягиваться на любую ширину, либо красиво переходил в цвет, а не резко обрывался.</p> <p>Такой же ошибкой является, когда дизайнер, напротив, пользуется огромным монитором и считает, что шапки и фоновые элементы размером, например, в 1300 пикселей - это отличная ширина. Да, с монитора в 1920 и выше такая ширина выглядит отлично, но бывают пользователи с разрешением 1280 и 1024 - при фиксированном дизайне у таких ребят будет неудобный горизонтальный скролл.<br />Если вы хотите делать широкие дизайны, вы должны делать их с учетом адаптивности: чтобы можно было их делать не фиксированными, а &quot;резиновыми&quot; и подстроить под разрешение экрана. Если же вы делаете фиксированный дизайн, ориентируйтесь на пользователей ПК с самым низким разрешением: <strong>1024</strong> - максимальная ширина для &quot;туловища&quot; и шапок (хотя бывают нетбуки с меньшим разрешением, но черт с ними, пусть они считаются уже &quot;мобильными&quot;).</p> <p>Также вам необходимо вспоминать о разрешениях экрана, когда вы вставляете какую-нибудь сисястую эльфиечку на фон. Вы должны видеть и понимать, как эта эльфиечка будет &quot;обрезаться&quot; в зависимости от ширины экрана - исходя из этого будет понятно, как ее лучше размещать. Если об этом не подумать, то легко может получится так, что на узком мониторе люди не видят эльфийку, а у них просто чья-то сиська сбоку торчит.</p> <p>Я рекомендую прямо на макет наносить вспомогательные слои или &quot;линейки&quot;, обозначающие форматы разрешения экрана и регулярно с ними сверяться в ходе работы. Если вы используете Photoshop, то в следующей части <a href="https://forumd.ru/viewtopic.php?id=6308#3">Photoshop для новичков</a> можете посмотреть, как это делается. У других редакторов также есть схожий инструментарий.</p> <p><strong>Выравнивание элементов</strong><br />Следующие проблемы с макетами - это кривые макеты.<br />В принципе, макет - это ваш рабочий инструмент, и он действительно может содержать несоответствия в размерах и неточности (которые легко правятся на стадии верстки) или на нем вообще может отсутствовать часть контента (которую вы и без макета знаете, как и куда пристроить).<br />Но надо понимать, где в макете можно действовать по принципу &quot;и так сойдет&quot;, а какие вещи вам аукнутся на стадии верстки. Например, размеры заголовков и шрифтов правятся легким движением руки в коде сайта. Также в большинстве случаев не составит труда, например, поправить отступы элементов друг от друга. А вот когда у вас справа рамочка в 6 пикселей, а слева в 7 пикселей, это может обернутся тем, что при верстке внутренних элементов вы без калькулятора не обойдетесь. <br />Основные фоновые элементы у вас должны быть ровными и симметричными.<br />Во-первых, НЕ делайте элементов с нечетной шириной. Например: 803px - это плохо, сделайте 804 или 802. За счет этого будет проще считать отступы внутреннего содержимого и верстать.<br />Во-вторых, соблюдайте симметрию. Глазу не видна разница в 1 пиксель, но код это увидит и заставит танцевать шаманские танцы с бубном. Это важно, если вы хотите освоить адаптивную верстку. Во избежание проблем с несимметричностью и кривизной, старайтесь при создании похожих элементов, делать копии предыдущего, а не создавать новый, и из этой копии дорабатывать элемент.<br />Также вам пригодится освоить приемы по выравниванию элементов относительно друг друга. Когда я делала свои первые фиксированные кривые дизайны, очень часто моя шапка получалась шире/уже с одной из сторон и не состыковывалась с &quot;туловищем&quot;. Чтоб у вас такого не было, используйте и вспомогательные слои, и инструменты программы, которые могут сами поставить вам элементы справа/слева/по центру. Если вы используете Photoshop, то в следующей части <a href="https://forumd.ru/viewtopic.php?id=6308#3">Photoshop для новичков</a> можете посмотреть, как это делается. У других редакторов также есть схожий инструментарий.</p> <p><strong>Верстка макета и код движка</strong><br />Мы уже вкратце прошлись в начале этой главы по вопросу, что очень важно в разработке макета держать в голове свой шаблон и то, как вы собираете его верстать. Здесь я попытаюсь подробнее объяснить, о чем идет речь.</p> <p>Один из ярких примеров: я часто наблюдала ситуацию, что дизайнер нарисовал прекрасную окантовочку, у который НЕТ повторяющейся области - она цельная. На самом деле любые окантовки должны состоять из нижней части, верхней и повторяющегося по вертикали фона:</p><div class="prev" id="block-139112-13"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://i.imgur.com/0hdUvYj.jpg" alt="https://i.imgur.com/0hdUvYj.jpg" /></p></div><p>Рисуйте окантовки прямо на макете так, чтоб их можно было разделить на эти части.<br />А еще когда рисуете двойную окантовку следите, чтоб ее можно было &quot;разрезать&quot; на одинаковой высоте. Например:</p><div class="prev" id="block-139112-14"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/321461.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/321461.jpg" /></p></div><p>Паттерн на фоне повторяется без швов на этой высоте, &quot;зубчики&quot; окантовки размножены ровно настолько, чтоб примыкать к повторению &quot;бордюра&quot;. Зачем всё это нужно? <a href="https://forumd.ru/viewtopic.php?id=6308#2d">В следующей части</a> мы поговорим о форматах графики, но помимо этого следует учесть, что вы не напасётесь селекторов для вставки всяких &quot;подюбников&quot; отдельными картинками. А я очень часто при верстке чужих макетов сталкивалась с тем, что каждый подобный элемент окантовки имеет разную высоту и необходимо перерисовывать половину макета. Чтоб вас не постигала беда с возможными дорисовками и доделками на стадии верстки, старайтесь делать такие вещи заранее.</p> <p>На этих примерах вы можете видеть, что в разработке макета должны участвовать как ваши знания о css, так и ваши знания о его верстке. В этой статье мы поговорим подробно и о том, и о том, а на данный момент необходимо усвоить несколько советов.<br />Во-первых, иногда проще - это лучше. Всем хочется нарисовать невероятную красоту, но если эта красота приведет вас к тому, что придется делать гигансткие png-картинки для верстки или делать дизайн неудобным для пользователей, лучше остановиться, подумать и найти более филигранное и рациональное дизайнерское решение.<br />Во-вторых, думайте о коде. Как можно нарезать этот элемент и куда его можно засунуть. Если у вас не хватает знаний в CSS - не беда, всегда можно посоветоваться, выложить кусок макета, спросить чисто теоретически: можно ли безболезненно пристроить элемент. Используйте для этого наш форум (<a href="https://forumd.ru/viewforum.php?id=75">Техническая поддержка</a>) или другие ресурсы, специализирующиеся на вебдизайне. <br />Следующие части этой статьи посвещаны верстке макета (т.е. его &quot;нарезке&quot; на элeменты) - это укомплектует ваши познания в графической составляющей макетов и поможет принимать более рациональные решения в том числе и при разработке макета.</p> <p><a href="https://forumd.ru/viewtopic.php?id=6308#ogl">Наверх к оглавлению</a></p><div class="no-prof" id="block-139112-15"><p>no-prof</p></div> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+6</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> </ul> </div> </div> </div> <div id="p142207" class="post altstyle topic-starter" data-posted="1604622381" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p142207" onclick="return false;">Поделиться</a><strong>4</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=6308#p142207">06.11.20 03:26</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10111</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p142207-content" class="post-content"> <p><span id="3"></p><p style="text-align:center;"><span style="font-size: 28px"><span style="font-family: Bebas Neue">Графика в вебдизайне</span></span></span><br /><span style="font-size: 18px">Правила создания графики для дизайна.</span></p> <p>В этой части мы обсудим не css, а подготовку графики для вставки в код дизайна. Многие новички идут от обратного и сначала пытаются изучить/подсмотреть какой-то метод верстки дизайна, а потом под него готовят картинки - это не верный подход. Все методы css вы не выучите за один присест, поэтому нужно сразу настроить свой мозг на практику в этом деле, чтобы вы под картинки искали коды, а наоборот. Так что, обсудим, что такое правильно нарезанный макет и не правильно.</p> <p><span id="3a"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Формат графики</span></span></span><br />Для дизайна ВАЖЕН формат графики, т.к. он влияет и на качество картинок, и главное - на его ВЕС! Ваша задача делать графику в таком формате, чтобы ее вес был минимален.<br />Для начала изучим, какие бывают картинки и какие из них подходят для дизайна.<br />Сразу обозначим приоритет использования форматов в вебдизайне: <strong>SVG/WEBP &gt; JPEG &gt; PNG &gt; GIF</strong></p> <p><strong>SVG</strong> - это масштабируемый векторный формат, который идеально подходит для иконок, логотипов и прочих ПРОСТЫХ изображений. В отличие от растровых расширений (JPG, GIF и PNG), SVG файлы построены на XML-коде, который описывает каждую линию и форму. За счет этого они могут увеличиваться без потери качества до любого размера, а также раскрашиваться в разные цвета, причем и то, и другое можно делать кодом css.<br /><strong><span style="color: #e63737">ВАЖНО!</span></strong> Проблема состоит в том, что если SVG-файл содержит сложные элементы или большое количество деталей, браузеру потребуется больше времени для их обработки и рендеринга. Если ты пытаешься упаковать в SVG что-то супер-фотошопное и многослойное, то он не подходит. В этом случае переходим к формату WEBP.</p> <p><strong>WEBP</strong> - это формат, которым сейчас рекомендовано пользоваться. Его суть в том, что он поддерживает высокое качество при меньшем весе картинок. Он заменяет любые стандартные форматы (JPEG, PNG, GIF), при этом:</p><ul style="list-style: disc"><li><p>сжимает изображения без потерь на 26% лучше, чем PNG</p></li><li><p>сжимает изображения с потерями лучше, чем JPEG на 25-34%</p></li><li><p>поддерживает прозрачность без потерь при увеличении размера всего лишь на 22%</p></li></ul><table style="table-layout:fixed;width:100%"><tr><td><p style="text-align:center;">Формат <strong>JPG</strong> (49.086 кб)<br /><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/175111.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/175111.jpg" /></p></td><td><p style="text-align:center;">Формат <strong>PNG</strong> (70.960 кб)<br /><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/192518.png" alt="https://forumupload.ru/uploads/0007/e3/f7/2/192518.png" /></p></td><td><p style="text-align:center;">Формат <strong>GIF</strong> (36.519 кб)<br /><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/882419.gif" alt="https://forumupload.ru/uploads/0007/e3/f7/2/882419.gif" /></p></td><td><p style="text-align:center;">Формат <strong>WebP</strong> (37.054 кб)<br /><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/170722.webp" alt="https://forumupload.ru/uploads/0007/e3/f7/2/170722.webp" /></p></td></tr></table><p>На этот формат графики не сложно &quot;пересесть&quot;. Для всех графических редакторов, где нет такого формата, можно раздобыть плагины, позволяющие сохранять в WEBP. Так что, если пользуетесь фотошопом, просто озаботьтесь поиском плагина и сохраняйте ВСЁ в этом формате. Главное - не используйте поддержку прозрачности там, где ее не нужно, чтобы картинка весила меньше.<br />Однако стоит сказать, что этот формат может вас разочаровать потерей качества, если у вас супер-пупер детализированная картинка. Если потеря качества сильно сказывается, то следующий вариант - JPG.</p> <p><strong>JPG</strong> - это формат, который нужно использовать в вебдизайне по МАКСИМУМУ, если вы не хотите пересаживаться на WEBP (или он &quot;захавал&quot; неповторимые детали вашей графонистости). JPG позволяет занизить качество изображения, уменьшив его вес, так, чтобы человеческий глаз не видел сильной потери качества. Ошибка новичков - просто сохранять в JPG, не пытаясь кликать в ползунки графического редактора, скидывая лишние килобайты веса. Хотя даже если ничего не сжимать, этот формат всё равно легче GiF и PNG при своем качестве картинки, так что именно в нем надо сохраняться, если у элемента нет прозрачности.</p> <p><strong>PNG</strong> - это формат, поддерживающий высокое качество графики и прозрачность. В стандартных редакторах нет никакой возможности сделать этот формат легче, понизив качество, поэтому он НЕ подходит для каждого элемента дизайна. Если вы не хотите пересаживаться на WEBP, использовать PNG можно для элементов с прозрачностью: иконок, логотипов. Ошибка новичков - сохранять все картинки в png, даже если там нет прозрачных элементов. <br />Вторая распространенная ошибка - использовать PNG для огромных картинок (окантовки, отбрасывающие тень огромные картинки в футере). Например:</p><table style="table-layout:fixed;width:100%"><tr><td><p style="text-align:center;">&quot;Подвал&quot; ролевого дизайна<br /><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/808245.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/808245.jpg" /></p></td><td><p style="text-align:center;">Использующаяся картинка</p> <p><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/603700.png" alt="https://forumupload.ru/uploads/0007/e3/f7/2/603700.png" /></p></td></tr></table><p>Такие огромных PNG картинок в вебдизайне быть не должно. Я и сама по началу из-за неопытности (а позже - из-за лени) частенько делала гигантские png-шапочки или png-окантовочки, но сейчас ответственно заявляю: такие штуки можно и НУЖНО делать только в JPG (а лучше - в WEBP).<br />PNG - это для маленьких иконочек, рюшечек и логотипов с прозрачностью. Ну, или для клипарта и исходников, а такое в вебдизайне не используется. Если в вашем элементе прозрачность не нужна, используйте JPG (а лучше - в WEBP). Если ваш элемент нуждается в прозрачности, но при этом он огромный, то думайте, как это сделать через JPG. <br />Вообще всегда и везде старайтесь максимально избегать этого формата. Например, иконки можно сделать в JPG, если они будут стоять на однотонном фоне. Да, и даже если иконки стоят на фоне текстурки, в некоторых случаях можно в фон иконки засунуть ту же текстурку и они будут визуально отображаться без &quot;стыков&quot;. Правильный пример использования PNG - это, например, логотип, который &quot;ездит&quot; по фону шапки: если лого должно быть в одном месте, а фоновая картинка подстраивается под размеры экрана, можно вырезать лого отдельно и вставлять в PNG. </p> <p><strong>GIF</strong> - это формат невысокого качества (ограничен на 256 цветов), поддерживающий прозрачность (хреново) и анимацию. Его часто используют новички бездумно, однако он достаточно сложный и требовательный к своему изучению. Я бы рекомендовала от него вообще отказаться - его не должно быть в современном вебдизайне, но т.к. многие новички до сих пор его используют, я подробно расскажу о нем.<br />Из достоинств: этот формат порой легче JGP и PNG, однако это связано с потерей качества. Если отмотать наверх к картинкам с роботами, вы увидите, что GIF даже легче WebP, однако картинка стала &quot;зернистой&quot; - потеря качества заметна. Так что, он НЕ подходит для любых картинок, где много теней, цветов, световых эффектов и т.д. Однако, если в картинке цветов по минимуму, то, сохранив в GIF, вы получите иногда даже меньше размер, чем у JPG.<br />Он подходит для маленьких немногоцветных иконочек, смайликов, тоненьких бордюрчиков, рюшечек и т.д. В таких случаях от этого формата можно получить пользу.<br />При использовании прозрачности GIF делает элементу обводку, например, вот этот смайлик шикарно выглядит на белом фоне: <img src="https://forumstatic.ru/img/smilies/MyBB/universal/cool.gif" alt=":cool:" /> , и весит вообще не много, однако переключаясь на темную тему форума, вы увидите неровные белые края смайла. Так что, использовать прозрачность можно, но нужно делать это с умом.<br />Гифки до сих пор востребованы из-за анимации, однако это их свойство уже стоит одной ногой в могиле. Они, конечно, еще некоторое время будут жить в виде смайлов и баннеров, но вы могли заметить, что загружая гифки на все современные соц-сети, они преобразуются в видео-формат. Почему? Потому что видео весит меньше, чем гифка, а качество замечательно. При создании видео-анимаций мы не ограничены количеством цветов, нам не приходится долго подбирать настройки качества, делая анимацию легче и т.д.<br />И да, если вам нужна сложная анимация где-то в шапке форума/сайта надо ее делать через формат видео <strong>mp4</strong>.</p> <p><strong>Почему надо отказаться от анимации в GIF</strong><br />В вебдизайне гиф-анимация живет только в руках новичков, которые знают некоторые трюки создания анимации, но не освоили другие современные методы. В старой статье 2012го года я рассказывала про GIF-анимацию, как сделать ее легче, как ее встраивать в дизайн, но сейчас этого просто НЕ БУДЕТ, от нее надо отказываться.<br />Во-первых, простейшую анимацию можно и нужно делать через CSS. Например, когда какая-нибудь иконка или индикатор мигает, прыгает или меняет свой цвет - реализуемо просто кодом. Картинки для этого нужны, только если прыгать, мигать и менять цвет должен не просто кружочек/квадратик, а какая-нибудь иконочка. И, в отличие от GIF, анимацию через CSS мы можем делать интерактивной: мигать только при наведении курсора, прыгать только при нажатии на элемент и т.д.<br />Во-вторых, современный HTML поддерживает встроенные видео-элементы и может проигрывать и зацикливать видеофайлы. Поэтому сложную и красивую анимацию надо осваивать в видеоредакторах. Весить будет в разы меньше гифок, а качество будет в разы больше: можно сделать, чтоб по всей шапке сайта горел огонь, мерцали искры, летали феи или даже видео-нарезка отображалась. Весить это счастье будет немного.<br />Если вас пугает мысль об освоении видеомонтажа, я вам честно заявляю: это сложно настолько же, насколько сложен фотошоп со своими гифками - там тоже не легко добиться эффекта горящего огня, мерцающих искр и т.д., но при этом на выходе получается либо хреновое качество, либо картинка весом в гигабайты, а в видеоредакторе при тех же усилиях вы сможете смонтировать большую шапку с цикличной анимацией и получить хорошее качество. <br />Про видеомонтаж здесь уроков не будет, но по опыту скажу, что забивая в гугл запросы &quot;как сделать огонь на видео&quot; и &quot;видео футаж - горящий огонь&quot;, вы найдете ответы, уроки и дальше с практикой разберетесь. Зато в статье мы разберемся с тем, как вставлять видео-анимацию на сайт и как делать анимацию через CSS, так что, надеюсь, в вашем случае гифки упокоятся с миром и использовать их в вебдизайне вы не будете.</p> <p><a href="https://forumd.ru/viewtopic.php?id=6308#ogl">Наверх к оглавлению</a></p><hr /><p><span id="3b"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Photoshop для новичков</span></span></span><br />Как уже написано <a href="https://forumd.ru/viewtopic.php?id=6308#2">в предыдущей части</a>, созданию графики для дизайна невозможно научиться за &quot;десять простых шагов&quot;. Только практика, практика и еще раз практика. Однако здесь я дам несколько простейших уроков в Photoshop для новичков, которые пригодятся для создания дизайна для сайта/форума своими силами. Если вы гуру по фотошопу (или другим редакторам), можете смело пропускать эту часть и приниматься за изучение CSS далее.<br />Почему именно <span style="font-style: italic">Photoshop</span>? Просто, потому что он под рукой, и я в нем работаю дольше всего - лучше всего могу рассказать именно о нем. <br />Я <strong><span style="color: #e63737">НЕ</span> рекомендую</strong> его как лучший графический редактор по работе с макетами. Чисто для справки и расширения кругозора - среди профи, если уж берутся за фирму Adobe, то чаще используют <span style="font-style: italic">InDesign</span> и <span style="font-style: italic">Illustrator</span>. Однако в последнее время, вышла масса профессиональных программ с более адекватным интерфейсом, которые являются полными аналогами продуктов Adobe, только работают лучше, быстрее и стоят меньше, так что дизайнеров специализированных фирмах частенько &quot;пересаживают&quot; на другое ПО. Кароче, макет вы можете рисовать хоть в пейнте (если ухитритесь придерживаться в нем правил, которые обозначены в этой статье), только в нем разбирайтесь сами, а я пойду по популистскому пути, тем более, что эта статья ориентирована на новичков, которые только начинают свой путь в дизайне и, скорее всего, именно Photoshop им попадется под руку. <img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" /></p> <p><strong>Вспомогательные слои, линии, выравнивание</strong><br /><span style="color: #e63737">контент в разработке</span></p> <p><strong>Сохранение графики в разных форматах</strong><br /><span style="color: #e63737">контент в разработке</span></p> <p><strong>Основы колоризации</strong><br /><span style="color: #e63737">контент в разработке</span></p> <p><a href="https://forumd.ru/viewtopic.php?id=6308#ogl">Наверх к оглавлению</a></p><hr /><p><span id="3c"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Как &quot;нарезать&quot; макет. Правила использования графики в вебдизайне</span></span></span></p> <p>Итак, изучив форматы, переходим к основным правилам использования графики в вебдизайне. </p> <p><strong>Чем меньше <span style="color: #e63737">ВЕС</span> графики, тем лучше</strong><br />Это и есть основной принцип любой верстки. Наша задача - добиваться того, чтоб картинки занимали килобайты, а не мегабайты. В принципе, почти всё, что будет приведено ниже также является практическими советами о том, как можно сбрасывать &quot;сбрасывать лишний вес&quot; с сайта. <br />За основу надо взять правило корректного использования <a href="https://forumd.ru/viewtopic.php?id=6308#3a">форматов</a> - этим вы уже начнете уменьшать вес графики.<br />К этому же правилу можно отнести оргомные PNG-шапки и PNG-подвалы. Если что-то должно переходить в фон, оно должно вырезаться с фоном и вставляться в фон через jpg - не используйте увесистую графику там, где можно сделать через менее прожорливые картинки и коды.</p> <p><strong>НЕ используйте картинки (там, где можно без них).</strong><br />Основная проблема верстки у новичков - постоянное использование фоновых картинок ВЕЗДЕ.<br />На самом деле основной ваш инструмент - это CSS. Всё, что можно сделать кодом, нужно делать кодом. </p> <p>Например, не нужно вставлять белый квадратик, если вы хотите покрасить что-то в белый цвет (даже если этот квадратик размером 1px*1px). Вместо этого нужно использовать <span style="font-style: italic">background: #fff;</span>.<br />Если приведенный пример вам кажется глупеньким и уж совсем похожим на ошибки полных новичков, то вот еще пример из того, что попадалось на глаза:</p><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/721365.png" alt="https://forumupload.ru/uploads/0007/e3/f7/2/721365.png" /></p> <p>В этом дизайне рамка заголовка &quot;All You Need Is Love&quot; сделана картинкой. Текстуру действительно можно вставить картинкой, но серая рамочка спокойно реализуется через свойство <span style="font-style: italic">border</span>, поэтому в этом случае нужно не вырезать в фотошопе длинную &quot;колбасу&quot; для заголовков, а вставить текстуру и обвести ее серой рамочкой на CSS.</p> <p>Через CSS можно делать любые рамки, одноцветные и градиентные фоны, тени, формы и т.д. Прежде, чем вырезать что-то в фотошопе (или чем вы там пользуетесь), попробуйте загуглить &quot;<span style="font-style: italic">CSS Как сделать <strong>*название_штуки*</strong></span>&quot; - даже с минимальным опытом и знаниями о CSS можно спокойно найти более рациональные способы что-то обвести, загруглить и покрасить.</p> <p>Что нельзя сделать через CSS - это рисунки, текстуры. Вот только их и надо вставлять картинками.</p> <p><strong>Чем меньше размер картинки (ширина, высота), тем лучше.</strong><br />Вы научились использовать корректный формат графики? Поздравляю! Теперь надо учиться &quot;резать&quot; макет так, чтобы ваша графика не была размером с лошадиную жопу. Ведь чем меньше ширина и высота картинки - тем меньше её вес.</p> <p>Если фон вашего сайта залит текстурой, не нужно делать картинку 1920*1080px или более. Сайт - это не обои на рабочий стол. Вы вырезаете текстуру и размножаете ее так, чтобы она &quot;заливала&quot; сайт. <br />Если шапка вашего сайта плавно переходит в текстуру, то вы вырезаете шапку ВМЕСТЕ с текстурой и позиционируете ее на фоне также, чтобы она сливалась с текстурой сайта. Если немножко &quot;поколдовать&quot; с кодами фона и вырезкой шапки, никаких &quot;стыков&quot; на месте текстуры шапки и текстуры фона быть не должно.&nbsp; </p> <p>Еще пример можно наблюдать на текущем дизайне этого форума: от лени и нежелания копаться/разбираться вставлены вот такие картинки для перехода фонов:</p><table style="table-layout:fixed;width:100%"><tr><td><p><img class="postimg" loading="lazy" src="https://forumstatic.ru/files/0007/e3/f7/53799.jpg" alt="https://forumstatic.ru/files/0007/e3/f7/53799.jpg" /></p></td></tr></table><p>Такое нужно делать без того, чтобы вставлять длиннющую картинку-линию, достаточно вырезать и спозиционировать только &quot;молнии&quot;. Ну, или, если всё же лень или существует проблема с селекторами, то достаточно обрезать центральную часть, где есть три &quot;молнии&quot;, и ее спозиционировать так, чтобы она накладывалась на переход одного цвета в другой.</p> <p><strong>Чем меньше количество картинок, тем лучше.</strong><br />Другая проблема - это обилие графики там, где оно не нужно. Понятно дело, что если вы делает ролевой рпг фентези дизайн, то будет много &quot;картиночных&quot; элементов, окантовочек и т.д. Но есть вещи, где на количестве графики можно сэкономить.</p> <p>Например, жуткая проблема, когда начинают разрезать один элемент на &quot;слои&quot; и распихать их по разным селекторам (см. дальше проблема &quot;бутербродов&quot;). Если у вас УЖЕ есть шапка определенного размера, не надо отдельно вырезать фон шапки, отдельно вырезать персонажей и отдельно вырезать какие-либо цветочки, которые на фоне шапки торчат. Вам ни к чему &quot;бутерброды&quot; - всё вместе вырезаете и вставляете на фон.</p> <p>К этому же пункту относится <em class="bbuline">использование спрайтов</em>. Так уж получается, что 100 иконочек по отдельности будут весить больше, чем, если все эти иконочки засунуть в одну картинку (причем желательно - jpg) и через <span style="font-style: italic">background-position</span> выбирать какая из них будет отображаться. К тому же это просто удобнее. Вам будет проще поменять ссылку на картинку один раз, а не 100 раз.</p> <p><strong>Фоны отдельных элементов должны быть обособлены друг от друга.</strong><br />Обратная проблема - это когда новички лепят прям ВСЁ на одну и ту же картинку. <br />Например, поверх шапки начинают в эту же картинку приделывать меню сайта, верх окантовки форума и фоновые элементы таблички, которая находится в шапке.<br />Верстка должна быть &quot;живой&quot;, не надо фиксировать намертво элементы, присваивая им строго-определенное место из-за фоновых картинок. <br />Во-первых, вы дадите себе больше &quot;Свободы&quot; в изменении дизайна, если будете делать более динамичную верстку. Захочется повыше поднять меню и окантовку форума - поднимите, будет шапка поменьше, а меню повыше, делается просто кодом. Если же меню у вас &quot;влипло&quot; на фоне шапки, то простыми CSS кодами эту проблему не решить, и ничего никуда не сдвинуть. <br />Во-вторых, если вы собираетесь делать какую-никакую мобильную версию, то учиться отделять один элемент от другого просто необходимо. В мобильной версии каждый пиксель форума принимает другой вид, другую высоту. Например, как вы собираетесь расставить на узком экране информацию из &quot;таблички&quot;, если приколотили её насмерть к шапке? Придется извращаться, прописывать для нее отдельный фон, делать для мобилок отдельную шапку... Проще основной дизайн сверстать не через ж, а на мобильном просто чуть-чуть подлатать позиционирование.<br />Отделять фоновые элементы друг от друга надо по принципу функциональности. Шапка и фон - отдельно, меню - отдельно, окантовки форума/сайта - отдельно. Если какой-то элемент уже имеет другую функцию, другое назначение, не надо его фоны впихивать туда, где стоит другой селектор другого элемента.</p> <p><strong>Итого</strong><br />Вам предстоит найти и выработать у себя баланс между качеством, размером, количеством и рациональностью. Сразу это не придет, но с практикой будет получаться. Правильная &quot;нарезка&quot; макета сильно упирается именно в знания CSS, поэтому надо стараться больше гуглить и меньше ориентироваться на какие-либо готовые шаблоны.<br />Не всегда можно догадаться что-то сделать кодом или что-то сократить/объединить, однако если интересоваться этой темой, задавать вопросы и практиковаться, то рано или поздно мозг уже сам начнёт искать нужные селекторы и нужный подход еще на стадии отрисовки, а не &quot;нарезки&quot;.</p> <p><a href="https://forumd.ru/viewtopic.php?id=6308#ogl">Наверх к оглавлению</a></p><div class="no-prof" id="block-142207-1"><p>no-prof</p></div> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+4</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> </ul> </div> </div> </div> <div id="p142315" class="post topic-starter" data-posted="1604933322" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p142315" onclick="return false;">Поделиться</a><strong>5</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=6308#p142315">09.11.20 17:48</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10111</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p142315-content" class="post-content"> <p><span id="4"></p><p style="text-align:center;"><span style="font-size: 28px"><span style="font-family: Bebas Neue">Основы CSS и HTML</span></span></span><br /><span style="font-size: 18px">Логика работы CSS и HTML, а также синтаксис этих языков</span></p> <p>В этой части мы обсудим и подробно разберем основы CSS и HTML кодов, которые нужно понимать и знать каждому дизайнеру. Зная эти основы, вы сможете самостоятельно писать код без использования чужих готовых шаблонов.</p> <p><span id="4a"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Зачем нужен дизайн CSS</span></span></span></p> <p>Что, по сути, есть изменение дизайна? Это изменение графической составляющей форума и интерфейса.<br />Любые форумы и сайты - это таблицы или блоки с текстом и ссылками. А дизайн CSS позволяет этим таблицам принять удобный вид для чтения и восприятия информации. <br />Например, на форумах визуально разделены разные элементы - страница тем отделена от общего фона сраницы каким-нибудь фоном или рамочкой, разные посты отделяются друг от друга визуальными границами, а информация об авторе стоит справа/слева от сообщений - все это заслуга CSS.</p> <p>На этих скриншотах вы можете увидеть как выглядит сайт вообще БЕЗ любых кодов CSS и сравнить их с одним из стандартных стилей движка:</p><table style="table-layout:fixed;width:100%"><tr><td><p style="text-align:center;"><strong>Форум без дизайна</strong><br />Главная страница</p><div class="prev" id="block-142315-1"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://i.imgur.com/D4I3yo7.jpg" alt="https://i.imgur.com/D4I3yo7.jpg" /></p></div></td><td><p style="text-align:center;"><strong>Форум со стандартным дизайном</strong><br />Главная страница</p><div class="prev" id="block-142315-2"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://i.imgur.com/8pBOp8Q.jpg" alt="https://i.imgur.com/8pBOp8Q.jpg" /></p></div></td></tr><tr><td><p style="text-align:center;"><strong>Форум без дизайна</strong><br />Страница топика (темы)</p><div class="prev" id="block-142315-3"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://i.imgur.com/iqEsuIG.jpg" alt="https://i.imgur.com/iqEsuIG.jpg" /></p></div></td><td><p style="text-align:center;"><strong>Форум со стандартным дизайном</strong><br />Страница топика (темы)</p><div class="prev" id="block-142315-4"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://i.imgur.com/OllJ0WS.jpg" alt="https://i.imgur.com/OllJ0WS.jpg" /></p></div></td></tr></table><p>Как вы видите, без CSS контент на страницах вообще не возможно адекватно воспринимать, а с самым стандартным простеньким дизайном движка всё становится понятно и компактно - меню выстраиваются в ряд, таблички имеют отступы и разделители, лишние надписи убраны, заголовки подкрашены и т.д.&nbsp; <br />Таким образом, основная задача дизайна не просто наведение красоты, но и самое главное - <strong>улучшение интерфейса</strong>. И об этом никогда не стоит забывать в разработке своих стилей. Главное - не то, какого цвета рамочки и какая сисястая красавица будет в шапке, а главное - чтоб у вас не &quot;слиплись&quot; элементы интерфейса друг с другом в нечитаемую кашу, где одно невозможно отличить от другого.</p> <p><a href="https://forumd.ru/viewtopic.php?id=6308#ogl">Наверх к оглавлению</a></p> <p><span id="4b"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Как работает HTML</span></span></span></p> <p><strong>Что такое HTML и чем он отличается от CSS.</strong><br />HTML - это специальные теги, которые содержат внутри контент вашей страницы.<br />На примере выше можно увидеть, что если удалить CSS код, HTML коды никуда не делись, просто у них обнулился дизайн до такого, который есть в браузерах по умолчанию: белый фон, черный текст Times New Roman, синие ссылки, гигантский размер шрифта у заголовков и т.д.<br />В разных движках форумов или сайтов HTML код страницы формируется по-разному. В хороших движках у администратора есть доступ в шаблоны страниц и вы можете сами втыкать контент между выбранных ВАМИ тегов. Во всяких сайтах-конструкторах и бесплатных форумных хостингов доступ к HTML-коду страниц часто отсутствует: они предоставляют некий &quot;стандартизированный&quot; код и менять его можно только скриптами.<br />Важно понимать: CSS код не меняет HTML элементы. Он заставляет их выглядеть и отображаться по-другому, это только визуальная часть. Например, можно с помощью CSS заставить меню &quot;прилипнуть&quot; к верху окна браузера, но &quot;физически&quot; меню остается в коде страницы там же, где и было - оно не перемещается в самый верх. Зная это, вы можете понимать, какие проблемы решает CSS, а где нужно искать скрипты, либо (если есть такая возможность) лезть в шаблоны страниц.</p> <p><strong>Структура HTML</strong><br />Основа HTML кода <em class="bbuline">любого</em> сайта будет такой:</p><div class="hidecode" id="block-142315-5"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div> <p>Внутри <span class="highlight-text">body</span> будут располагаться все элементы страницы.</p> <p>Теги вложены друг в друга и идут такой вот &quot;лесенкой&quot;:</p><div class="hidecode" id="block-142315-6"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div> <p>Тег, который вложен внутрь, называется <em class="bbuline"><strong>дочерним</strong> элементом</em>.<br />А тег, внутрь которого вложен дочерний элемент, называется <em class="bbuline"><strong>родительским</strong> элементом</em></p> <p>На примере выше: </p><table style="table-layout:fixed;width:100%"><tr><td><p style="text-align:center;"><strong><em class="bbuline">Дочерние</em> элементы</strong></p> <p><span class="highlight-text"><span style="color: #0481d9">&lt;p&gt;</span><span style="color: #0481d9">&lt;/p&gt;</span></span> является <em class="bbuline">дочерним</em> элементом для <span class="highlight-text"><span style="color: #e63737">&lt;div&gt;</span><span style="color: #e63737">&lt;/div&gt;</span></span><br /><span class="highlight-text"><span style="color: #26af33">&lt;span&gt;</span><span style="color: #26af33">&lt;/span&gt;</span></span> является <em class="bbuline">дочерним</em> элементом для <span class="highlight-text"><span style="color: #0481d9">&lt;p&gt;</span><span style="color: #0481d9">&lt;/p&gt;</span></span></p></td><td><p style="text-align:center;"><strong><em class="bbuline">Родительские</em> элементы</strong></p> <p><span class="highlight-text"><span style="color: #e63737">&lt;div&gt;</span><span style="color: #e63737">&lt;/div&gt;</span></span> является <em class="bbuline">родительским</em> элементом для <span class="highlight-text"><span style="color: #0481d9">&lt;p&gt;</span><span style="color: #0481d9">&lt;/p&gt;</span></span><br /><span class="highlight-text"><span style="color: #0481d9">&lt;p&gt;</span><span style="color: #0481d9">&lt;/p&gt;</span></span> является <em class="bbuline">родительским</em> элементом для <span class="highlight-text"><span style="color: #26af33">&lt;span&gt;</span><span style="color: #26af33">&lt;/span&gt;</span></span></p></td></tr></table><p>Понимать эти термины и структуру HTML нужно для дизайна, т.к. все эти теги отвечают за &quot;слои&quot; нашего дизайна. <br />Например, когда мы ставим фон для дочернего элемента, он будет отображаться поверх фона родительского элемента.<br />Или, например, мы можем позиционировать элементы относительно друг друга - и в этом случае важно понимать, где родитель, а где внутренний элемент.<br />Подробнее об этом мы поговорим в главе, посвященной погружению в верстку CSS.</p> <p><strong>Синтаксис HTML</strong><br />У всех HTML-тегов (как и у CSS или любого языка программирования) есть <strong><span style="color: #e63737">синтаксис</span></strong> - правила их написания:</p><div class="hidecode" id="block-142315-7"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div><p>Первый тег называется &quot;<em class="bbuline">открывающий</em> тег&quot;: название тега пишется латинскими буквами без пробелов внутри скобочек <span class="highlight-text"><strong><span style="color: #e63737">&lt;</span></strong><strong><span style="color: #e63737">&gt;</span></strong></span><br />Второй тег называется &quot;<em class="bbuline">закрывающий</em> тег&quot;: название тега пишется латинскими буквами без пробелов внутри скобочек со слешем <span class="highlight-text"><strong><span style="color: #e63737">&lt;/</span></strong><strong><span style="color: #e63737">&gt;</span></strong></span>, и естественно название должно быть таким же, как и закрывающий тег.</p> <p>Например:</p><div class="hidecode" id="block-142315-8"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div><p>Такой тег сделает текст по умолчанию <strong>жирным</strong> - даже без использования CSS. А вот если вы не хотите, чтоб текст внутри этого тега был жирным, придется писать CSS-стили, которые заставят теги отображаться по-другому.</p> <p><strong><span style="color: #e63737">ВАЖНО!</span></strong> Надо соблюдать синстаксис HTML, иначе вы &quot;сломаете&quot; код страницы. Например, если не поставить закрывающий тег <span class="highlight-text"><strong><span style="color: #e63737">&lt;/</span></strong><span style="color: #0481d9"><strong>b</strong></span><strong><span style="color: #e63737">&gt;</span></strong></span> (или пропустите слеш в закрывающем теге), то весь текст на странице станет жирным. Такая ошибка часто допускается случайно при написании своих HTML кодов. Однако, когда вы понимаете синтаксис, вы знаете, где искать ошибку.</p> <p><strong>Какие бывают HTML теги.</strong><br />Стандартных HTML-тегов для контента существует огромное количество, при желании подобрать нужный можно загуглить, например, &quot;<span style="font-style: italic">HTML как создать таблицу/заголовок/строчный текст/блок/что_там_еще_вам_надо</span>&quot;.<br />У всех стандартных тегов есть определенная связь с стилями по умолчанию. Как в примере выше, текст внутри тегов <span class="highlight-text"><span style="font-family: Arial"><strong><span style="color: #e63737">&lt;</span></strong><span style="color: #0481d9"><strong>b</strong></span><strong><span style="color: #e63737">&gt;</span></strong><span style="font-style: italic"><span style="color: #26af33"></span></span><strong><span style="color: #e63737">&lt;/</span></strong><span style="color: #0481d9"><strong>b</strong></span><strong><span style="color: #e63737">&gt;</span></strong></span></span> по умолчанию жирный. Теги таблицы позволяет сортировать контент в ячейки, которые расставят их по умолчанию в ряд. Блоки по умолчанию растягиваются на всю ширину страницы и т.д.</p> <p>Некоторые теги - особые и <em class="bbuline">не имеют закрывающего</em> тега. Например, тег картинки:</p><div class="hidecode" id="block-142315-9"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div> <p>Также никто вам не запрещает дописывать <em class="bbuline">СВОИ кастомные</em> теги. Они не будут никак связаны с стандартизированными стилями, зато под них можно прописать свои собственные. Например:</p><div class="hidecode" id="block-142315-10"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div><p>Такой текст вполне можно вставить в любую HTML-форму, теги отображаться не будут, а контент - будет. И потом с помощью стилей CSS можно будет такому тегу задать какое-то особое отображение.</p> <p><strong>Атрибуты HTML тегов и их синтексис.</strong><br />Еще у HTML-тегов существуют <span style="color: #e63737"><strong>атрибуты</strong></span>. Это такие специальные надстройки, которые вписываются в <em class="bbuline">открывающие теги</em> и придают им особые свойства.<br />Синтаксис у атрибутов такой:</p><div class="hidecode" id="block-142315-11"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div><p>Как вы видите атрибуты вставляются в <em class="bbuline">открывающий тег</em> через пробел от названия тега.<br />После названия атрибута ставится знак равенства и кавычки <span class="highlight-text"><strong><span style="color: #e63737">=&quot;&quot;</span></strong></span>.<br />В кавычках пишется <strong>значение</strong>. У разных атрибутов бывают разные значения.<br />Бывает несколько атрибутов. В этом случае они также пишутся через пробел друг от друга. В конце открывающего тега пробел не нужен.</p> <p>Примеры:</p><table style="table-layout:fixed;width:100%"><tr><td><p style="text-align:center;"><strong>Код HTML</strong></p></td><td><p style="text-align:center;"><strong>Демо</strong></p></td><td><p style="text-align:center;"><strong>Описание атрибута и значения</strong></p></td></tr><tr><td><div class="hidecode" id="block-142315-12"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>[html]&lt;p title=&quot;всплывающий текст&quot;&gt;Текст&lt;/p&gt;[/html]</p></td><td><p><strong><span style="color: #e63737">title</span></strong> - это атрибут, который добавляет подсказку (которая появляется при наведении курсора)<br /><strong><span style="color: #0481d9">значением</span></strong> этого атрибута является <span style="color: #0481d9"><strong>всплывающий текст</strong></span> - именно он появится при наведении курсора</p></td></tr><tr><td><div class="hidecode" id="block-142315-13"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>[html]&lt;a href=&quot;https://forumd.ru/&quot; target=&quot;_blank&quot;&gt;Текст ссылки&lt;/a&gt;[/html]</p></td><td><p><strong><span style="color: #e63737">href</span></strong> - это атрибут, который определяет <strong><span style="color: #0481d9">адрес ссылки</span></strong>, а <strong><span style="color: #0481d9">адрес ссылки</span></strong> в этом случае является значением.<br /><strong><span style="color: #e63737">target</span></strong> - это атрибут, который определяет, где будет открываться ссылка. В данном случае <span style="color: #0481d9"><strong>_blank</strong></span> - это значение, которое откроет ссылку в новой вкладке.</p></td></tr><tr><td><div class="hidecode" id="block-142315-14"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>[html]&lt;img src=&quot;https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif&quot; style=&quot;border:5px solid;&quot;&gt;[/html]</p></td><td><p>Атрибут <strong><span style="color: #e63737">src</span></strong> устанавливает ссылку на файл, в данном случае его <span style="color: #0481d9"><strong>значение</strong></span> - это <strong><span style="color: #0481d9">ссылка на картинку</span></strong>.<br />Атрибут <strong><span style="color: #e63737">border</span></strong> устанавливает рамочку вокруг элемента, а значение (цифра <span style="color: #0481d9"><strong>5</span></strong>) - это ширина рамочки.</p></td></tr></table> <p>Для начинающего дизайнера нет никакой необходимости зубрить все возможные HTML теги и их атрибуты.<br />Если вы сталкиваетесь с каким-то тегом или атрибутом, который вы не знаете, то можно загуглить, что это такое. А если вы хотите сами дописать какой-то тег, то также можно спрашивать на техподдержке или искать в интернете оптимальные теги для вашей задачи.<br />Самое главное - понимать <strong><span style="color: #e63737">синтаксис HTML</span></strong>, этого достаточно для создание первого хорошего дизайна. </p> <p><strong>HTML атрибуты для дизайна:</strong> <span class="highlight-text"><strong><span style="color: #0481d9">style</span></strong></span>, <span class="highlight-text"><strong><span style="color: #0481d9">id</span></strong></span> и <span class="highlight-text"><strong><span style="color: #0481d9">class</span></strong></span><br />Теперь поговорим о атрибутах и тегах, которые напрямую влияют на дизайн.<br />Как уже говорилось выше, у всех стандартных тегов есть некоторые стили по умолчанию, например:<br /><span class="highlight-text"><strong><span style="color: #e63737">&lt;</span>span<span style="color: #e63737">&gt;</span>текст<span style="color: #e63737">&lt;/</span>span<span style="color: #e63737">&gt;</span></strong></span> - это строчный текст, он по умолчанию встает рядом с другими элементами.<br /><span class="highlight-text"><strong><span style="color: #e63737">&lt;</span>p<span style="color: #e63737">&gt;</span>текст<span style="color: #e63737">&lt;/</span>p<span style="color: #e63737">&gt;</span></strong></span> - это абзац, он ведет себя как блок: любые элементы после него по умолчанию перенесутся на новую строчку.<br /><span class="highlight-text"><strong><span style="color: #e63737">&lt;</span>div<span style="color: #e63737">&gt;</span>текст<span style="color: #e63737">&lt;/</span>div<span style="color: #e63737">&gt;</span></strong></span> - это блок, по умолчанию растягивается на всю ширину, и любые элементы после него перенесутся на новую строчку.</p> <p>&quot;Поведение&quot; любых тегов по умолчанию можно менять с помощью CSS кодов (а также дополнять другими свойствами и стилями). Однако чаще всего мы НЕ хотим, чтобы менялись абсолютно все теги данного типа, а хотим, чтоб какой-то конкретный имел другой стиль.</p> <p>Один из методов это сделать - атрибут <span class="highlight-text"><strong><span style="color: #0481d9">style</span></strong></span>:</p><div class="hidecode" id="block-142315-15"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div><p>Этот метод - ректальный и пользоваться им не советую: разных стилей для разных тегов может быть много - не удобно пользоваться и редактировать, приходится повторять одни и те же свойства на разных тегах и т.д.<br />Я упоминаю этот метод только затем, что вы можете найти подобный метод в различных шаблонах по умолчанию, и вам надо понимать, как это исправить. Имея доступ в HTML-код, вы можете убрать этот атрибут, либо заменить на следующий метод стилизации. </p> <p>Другой метод прописать стили для элементов - это атрибуты <span class="highlight-text"><strong><span style="color: #0481d9">id</span></strong></span> и <span class="highlight-text"><strong><span style="color: #0481d9">class</span></strong></span>.</p> <p><span class="highlight-text"><strong><span style="color: #0481d9">id</span></strong></span> - это уникальный идентификатор элемента. В свойства этого атрибута можно вписать только один идентификатор.<br /><strong><span style="color: #e63737">ВАЖНО!</span></strong> По правилам &quot;хорошего кода&quot; идентификаторы предназначены для обозначения <em class="bbuline">одного</em> элемента, т.е. один и тот же идентификатор никогда не должен использоваться дважды. Конечно, вы можете расположить на странице разные блоки с одним и тем же ID - это будет работать, но тем самым вы рискуете устроить кашу в коде и лишить себя некоторых возможностей. Для посторяющихся по стилю элементов гораздо лучше использовать классы.</p><div class="hidecode" id="block-142315-16"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div> <p><span class="highlight-text"><strong><span style="color: #0481d9">class</span></strong></span> - это класс элемента. Можно прописать один, а можно сразу несколько.</p><div class="hidecode" id="block-142315-17"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div> <p>Также могут быть ситуации, когда для элемента можно присвоить одновременно и идентификатор, и класс одновременно:</p><div class="hidecode" id="block-142315-18"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div> <p><strong><span style="color: #26af33">Значением</span></strong> атрибутов <span class="highlight-text"><strong><span style="color: #0481d9">id</span></strong></span> и <span class="highlight-text"><strong><span style="color: #0481d9">class</span></strong></span> является любой текст, состоящий из латинских букв и циферок. Также можно использовать символы <span class="highlight-text"><strong><span style="color: #e63737">-</span></strong></span> или <span class="highlight-text"><span style="color: #e63737"><strong>_</strong></span></span>. Не рискуйте использовать что-либо другое, т.к. не все браузеры реагируют на необычные символы или кириллицу.</p> <p>Имея в коде атрибуты <span class="highlight-text"><strong><span style="color: #0481d9">id</span></strong></span> и <span class="highlight-text"><strong><span style="color: #0481d9">class</span></strong></span>, мы можем писать любые стили для них в CSS. Например:</p><div class="hidecode" id="block-142315-19"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div><p>Подробнее о том, как это делает написано в следующей части: <a href="https://forumd.ru/viewtopic.php?id=6308#4c">Как работает CSS</a> - там мы разберем синтаксис CSS и куда вставлять такие коды.</p> <p>Подробнее о использовании классов и идентификаторов можно почитать тут: <a href="https://forumd.ru/viewtopic.php?id=7121">Правильное использование классов и идентификаторов</a>.</p> <p><a href="https://forumd.ru/viewtopic.php?id=6308#ogl">Наверх к оглавлению</a></p> <p><span id="4c"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Как работает CSS</span></span></span></p> <p><strong>Что такое CSS, чем он отличается от HTML и как работать с CSS кодами</strong><br />CSS (Cascading Style Sheets, каскадные таблицы стилей) — язык описания внешнего вида HTML-тегов.<br />HTML и CSS действуют в единой связке, но выполняют разные задачи. HTML создает структуру (<strong>разметку</strong>) страницы: тут сделать табличку, тут добавить блок, здесь вставить заголовок и т.д. А CSS описывает как должна выглядеть структура: пусть табличка растягивается на всю ширину страницы, пусть блок прилипнет к краю экрана, пусть заголовок будет красного цвета и т.д.</p> <p>В любом движке есть возможность вставлять CSS коды различными методами. <br />Во-первых, можно вставлять коды через HTML.<br />В виде ссылки:</p><div class="quote-box quote-main"><blockquote><p><strong><span style="color: #0481d9">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;</span><span style="color: #e63737">файл.css</span><span style="color: #0481d9">&quot;&gt;</span></strong></p></blockquote></div><p>Или с помощью тегов:</p><div class="quote-box quote-main"><blockquote><p><strong><span style="color: #0481d9">&lt;style&gt;</span></strong><br />тут ваши коды<br /><strong><span style="color: #0481d9">&lt;/style&gt;</span></strong></p></blockquote></div><p>Такие ссылки и теги лучше всего вставлять между тегов <span class="highlight-text">&lt;head&gt;</span> - так они будут быстрее обрабатываться.<br />Но если это не основные стили или платформа не дает возможности редактировать <span class="highlight-text">&lt;head&gt;</span>, то можно вставить в другое место, где работает HTML. Основное правило: чем &quot;выше&quot;, тем лучше, например, если стиль относится к скрипту - ставьте стиль выше скрипта, чтобы при срабатывании скрипта дизайн не подвисал.</p> <p>Во-вторых вы можете ссылаться внутри самих CSS стилей на другие css-файлы кодом:</p><div class="quote-box quote-main"><blockquote><p><strong><span style="color: #0481d9">@import url('</span><span style="color: #e63737">файл.css</span><span style="color: #0481d9">');</span></strong></p></blockquote></div><p><strong><span style="color: #e63737">ВАЖНО!</span></strong> такая ссылка должна стоять в самом начале CSS-стиля, иначе она работать не будет.</p> <p>Пример:</p><div class="hidecode" id="block-142315-20"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div> <p>В зависимости от платформы есть разные способы редактировать и добавлять стили. Некоторые движки сильно ограничивают доступ в код, но в большинстве адекватных движков вы можете найти где-то в админке окно для вставки своего стиля: &quot;Свой стиль&quot;, &quot;Custom Style&quot;, &quot;CSS&quot;, &quot;Styles&quot; - что-то в этом роде.<br />Такое окно обычно движок привязывает к файлу с стилями css и засовывет в HTML между тегами <span class="highlight-text">&lt;head&gt;</span>.</p> <p><span id="4c-1"><strong>Синтаксис CSS: Общее</strong></span><br />Любой css код состоит из <em class="bbuline"><strong>СЕЛЕКТОРА</strong></em>, <em class="bbuline"><strong>СВОЙСТВА</strong></em> и <em class="bbuline"><strong>ЗНАЧЕНИЯ</strong></em>. </p> <p><span style="color: #26af33"><em class="bbuline"><strong>СЕЛЕКТОР</strong></em></span> (от англ. select - выбирать; selector - &quot;отборщик&quot;) - это &quot;имя&quot; элемента, который меняется. Мы указываем (выбираем), что будет изменено. (например: категории форума, форма ответа, поля профиля и т.п.)<br /><span style="color: #0481d9"><em class="bbuline"><strong>СВОЙСТВО</strong></em></span> - это параметр элемента, который мы будем менять. Мы указываем, что в выбранном элементе надо поменять (например: фон, размер, границы и т.п.)<br /><span style="color: #a726af"><em class="bbuline"><strong>ЗНАЧЕНИЕ</strong></em></span> - это уточнение, каким должно быть свойство. Мы указываем, какие именно изменения произойдут. (например: указываем конкретный цвет, ссылку на фон, размер в пикселях или процентах и т.п.)</p> <p>Синтаксис написания CSS кода достаточно прост, однако требует внимательности, т.к. пропущенные скобки, точки, запятые и другие знаки, разделяющие все элементы кода приводят к &quot;поломке&quot;. Давайте разберем синтаксис поэтапно, чтобы понимать его и не допускать ошибок (либо находить эти ошибки при возникновении).</p> <p>После селектора ставятся <span style="color: #e63737"><span style="font-style: italic">фигурные скобки</span></span>, внутри которых должны быть коды стиля (свойства и значения):</p><div class="quote-box quote-main"><blockquote><p><span style="color: #26af33">селектор</span> <span class="highlight-text"><strong><span style="color: #e63737">{</span></strong></span><span style="font-style: italic">тут коды стиля</span><span class="highlight-text"><strong><span style="color: #e63737">}</span></strong></span></p></blockquote></div> <p>Если вы хотите придать одинаковый вид сразу двум или более элементам, т.е. прописать для них одинаковые свойства, названия этих элементов пишутся <span style="color: #e63737"><span style="font-style: italic">через запятую перед фигурной скобкой</span></span>:</p><div class="quote-box quote-main"><blockquote><p><span style="color: #26af33">селектор</span><span class="highlight-text"><strong><span style="color: #e63737"><span style="font-size: 20px">,</span> </span></strong></span><span style="color: #26af33">селектор</span><span class="highlight-text"><strong><span style="color: #e63737"><span style="font-size: 20px">,</span> </span></strong></span><span style="color: #26af33">селектор</span> <strong><span style="color: #e63737">{</span></strong><span style="font-style: italic">тут коды стиля</span><strong><span style="color: #e63737">}</span></strong></p></blockquote></div><p><span style="color: #e63737"><strong>ВНИМАНИЕ!</strong></span> После последнего селектора <span style="color: #e63737"><span style="font-style: italic">запятая</span> <em class="bbuline">НЕ СТАВИТСЯ</em></span>!<br />Также не допускайте пробела <span style="color: #e63737"><span style="font-style: italic">перед запятой</span></span>, иначе код не будет работать! Пробел после запятой можно не ставить, но рекомендую все же его сохранять - так будет визуально проще работать с кодом.</p> <p>Свойства и значения пишутся внутри фигурных скобок. После свойства ставится <span style="color: #e63737"><span style="font-style: italic">двоеточие</span></span>.</p><div class="quote-box quote-main"><blockquote><p><span style="color: #26af33">селектор</span> <strong><span style="color: #e63737">{</span></strong><span style="color: #0481d9">свойство</span><span class="highlight-text"><strong><span style="color: #e63737"><span style="font-size: 20px">:</span></span></strong></span> <span style="color: #a726af">значение</span><strong><span style="color: #e63737">}</span></strong></p></blockquote></div><p><span style="color: #e63737"><strong>ВНИМАНИЕ!</strong></span> не допускайте пробела <span style="color: #e63737"><span style="font-style: italic">перед двоеточием</span></span>, иначе код не будет работать! Пробел после двоеточия можно не ставить, но рекомендую все же его сохранять - так будет визуально проще работать с кодом.</p> <p>Свойств у селектора может быть много, нам не нужно для каждого изменения заново указывать один и тот же селектор.<br />Однако нам нужно разделять парочки свойство + значение <span style="color: #e63737"><span style="font-style: italic">точкой с запятой</span></span>:</p><div class="quote-box quote-main"><blockquote><p><span style="color: #26af33">селектор</span> <strong><span style="color: #e63737">{</span></strong><span style="color: #0481d9">свойство</span><strong><span style="color: #e63737">:</span></strong> <span style="color: #a726af">значение</span><span class="highlight-text"><span style="font-size: 20px"><strong><span style="color: #e63737">;</span></strong></span></span> <span style="color: #0481d9">свойство</span><strong><span style="color: #e63737">:</span></strong> <span style="color: #a726af">значение</span><span class="highlight-text"><span style="font-size: 20px"><strong><span style="color: #e63737">;</span></strong></span></span> <span style="color: #0481d9">свойство</span><strong><span style="color: #e63737">:</span></strong> <span style="color: #a726af">значение</span><span class="highlight-text"><span style="font-size: 20px"><strong><span style="color: #e63737">;</span></strong></span></span><strong><span style="color: #e63737">}</span></strong></p></blockquote></div><p>После последней парочки (или если внутри фигурных скобок только одна парочка) можно не ставить <span style="font-style: italic"><span style="color: #e63737">точку с запятой</span></span>. Однако рекомендую ставить ее <em class="bbuline"><strong>ВСЕГДА</strong></em> - таким образом не будет никаких ошибок, если будете в будущем дописывать новые свойства, т.к., если пропустить <span style="font-style: italic"><span style="color: #e63737">точку с запятой</span></span>, то не будут работать свойства, оставшиеся без этого разделителя.</p> <p>Также не обязательно писать CSS код в одну строку. CSS коды толерантны к переносу на следующую строчку через <strong>enter</strong>.<br />Например:</p><table style="table-layout:fixed;width:100%"><tr><td><div class="quote-box quote-main"><blockquote><p><span style="color: #26af33">селектор</span> <strong><span style="color: #e63737">{</span></strong><br /><span style="color: #0481d9">свойство</span><strong><span style="color: #e63737">:</span></strong> <span style="color: #a726af">значение</span><strong><span style="color: #e63737">;</span></strong><br /><span style="color: #0481d9">свойство</span><strong><span style="color: #e63737">:</span></strong> <span style="color: #a726af">значение</span><strong><span style="color: #e63737">;</span></strong><br /><span style="color: #0481d9">свойство</span><strong><span style="color: #e63737">:</span></strong> <span style="color: #a726af">значение</span><strong><span style="color: #e63737">;</span></strong><br /><strong><span style="color: #e63737">}</span></strong></p></blockquote></div></td><td><div class="quote-box quote-main"><blockquote><p><span style="color: #26af33">селектор</span><strong><span style="color: #e63737">,</span></strong><br /><span style="color: #26af33">селектор</span><strong><span style="color: #e63737">,</span></strong><br /><span style="color: #26af33">селектор</span> <strong><span style="color: #e63737">{</span></strong><br /><span style="color: #0481d9">свойство</span><strong><span style="color: #e63737">:</span></strong> <span style="color: #a726af">значение</span><strong><span style="color: #e63737">;</span></strong><br /><span style="color: #0481d9">свойство</span><strong><span style="color: #e63737">:</span></strong> <span style="color: #a726af">значение</span><strong><span style="color: #e63737">;</span></strong><br /><strong><span style="color: #e63737">}</span></strong></p></blockquote></div></td></tr></table><p>В принципе, перенос строки можно организовать вообще где угодно, кроме как в середине слов (селекторов, свойств и значений), однако рекомендую придерживаться только приведенных в пример переносов, опять же, для того, чтобы можно было визуально найти любые ошибки.</p> <p><span id="4c-2"><strong>Синтаксис CSS: СЕЛЕКТОРЫ</strong></span><br />Селектор ссылается на конкретный HTML-код и выбирать селекторы можно разными способами.<br />Базовые правила написания селекторов таковы:</p><table style="table-layout:fixed;width:100%"><tr><td colspan="2"><p><strong>HTML код</strong></p><div class="hidecode" id="block-142315-21"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td></tr><tr><td><p style="text-align:center;"><strong>CSS код</strong></p></td><td><p style="text-align:center;"><strong>Пояснение</strong></p></td></tr><tr><td><div class="hidecode" id="block-142315-22"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p><strong><span style="color: #26af33">Серектором</span></strong> могут быть просто HTML теги, такие как <span class="highlight-text">span</span>, <span class="highlight-text">div</span>, <span class="highlight-text">p</span> и т.д. В этом случае коды применяются на ВСЕ HTML-теги этого типа на страницах сайта. <br />Например, если вы пропишите, что <span class="highlight-text"><span style="color: #26af33">span</span></span> должен быть красного цвета, то весь контент внутри любых тегов <span class="highlight-text"><span style="color: #26af33">span</span></span> окрасятся в красный.</p></td></tr><tr><td><div class="hidecode" id="block-142315-23"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p><strong><span style="color: #26af33">Селектор</span></strong> можно взять по <strong><span style="color: #0481d9">классу</span></strong> элемента. Если HTML-код содержит атрибут <span class="highlight-text"><strong><span style="color: #0481d9">class=&quot;</span><span style="color: #26af33">my-class</span><span style="color: #0481d9">&quot;</span></strong></span>, то в CSS можно сослаться на него поставив точку и название класса: <span class="highlight-text"><span style="color: #e63737"><strong><span style="font-size: 30px">.</span></strong></span><span style="color: #26af33"><strong>my-class</strong></span></span>.<br />В этом случае коды применятся на ВСЕ HTML-элементы, у которых есть класс с таким названием. В отличие от предыдущего примера, такой способ позволяет применять стили выборочно только к тем элементам, которые помечены определенным классом, а не ко всем тегам данного типа.</p></td></tr><tr><td><div class="hidecode" id="block-142315-24"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p><strong><span style="color: #26af33">Селектор</span></strong> можно взять по <strong><span style="color: #0481d9">ID</span></strong> элемента. Если HTML-код содержит атрибут <span class="highlight-text"><strong><span style="color: #0481d9">id=&quot;</span><span style="color: #26af33">my-id</span><span style="color: #0481d9">&quot;</span></strong></span>, то в CSS можно сослаться на него поставив решеточку и название ID: <span class="highlight-text"><span style="color: #e63737"><strong><span style="font-size: 20px">#</span></strong></span><span style="color: #26af33"><strong>my-id</strong></span></span>. <br />В этом случае коды применятся на HTML-элемент, у которого есть ID с таким названием. И, <a href="https://forumd.ru/viewtopic.php?id=6308#4b">как описано выше</a> (см. <span style="font-style: italic">HTML атрибуты для дизайна</span>), по правилам &quot;хорошего кода&quot; идентификаторы предназначены для обозначения одного элемента, т.е. один и тот же идентификатор никогда не должен использоваться дважды. Соответственно, такие стили будут затрагивать только один конкретный элемент, если в вашем HTML-коде все сделано верно.</p></td></tr></table><p>Селектор может быть &quot;многосоставным&quot;, т.е. захватывать сразу несколько классов и ID. <br />Такие селекторы нужны в тех случаях, когда требуется сделать специфичный стиль для <em class="bbuline">конкретного</em> элемента.</p><table style="table-layout:fixed;width:100%"><tr><td><p style="text-align:center;"><strong>HTML код</strong></p></td><td><p style="text-align:center;"><strong>CSS код</strong></p></td><td><p style="text-align:center;"><strong>Пояснение</strong></p></td></tr><tr><td><div class="hidecode" id="block-142315-25"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><div class="hidecode" id="block-142315-26"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p><em class="bbuline">Синтаксис:</em> Если вы хотите выбрать элемент, который имеет одновременно класс и идентификатор, вам необходимо написать селектор без пробела, как в указанном примере.</p> <p><em class="bbuline">Применение:</em> Если у нас в коде есть много кнопок с классом <span class="highlight-text">class=&quot;primary&quot;</span>, то конкретно кнопку &quot;Отправить&quot; можно видоизменнить, добавив идентификатор к селектору.</p></td></tr><tr><td><div class="hidecode" id="block-142315-27"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><div class="hidecode" id="block-142315-28"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p><em class="bbuline">Синтаксис:</em> Если вы хотите выбрать дочерний элемент внутри другого элемента, то селекторы разделяются пробелом, как в этом примере.<br /><span style="color: #e63737"><strong>ВАЖНО!</strong></span> В этом случае важно следить, что сначала мы указываем селектор родительского элемента, а потом дочернего. Всегда начинаем с элемента, ближайшего к &quot;корню&quot; HTML разметки. </p> <p><em class="bbuline">Применение:</em> Если у нас уже прописан стиль для всех элементов с классом <span class="highlight-text">class=&quot;my-class&quot;</span>, то мы можем видоизменить стиль для этого блока, обратившись к родителю с ID <span class="highlight-text">id=&quot;my-id&quot;</span>.</p></td></tr></table><p>Селектор можно прописать не по классу или ID, а по другим атрибутам. Например:</p><table style="table-layout:fixed;width:100%"><tr><td><div class="hidecode" id="block-142315-29"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>Этот код воздействует на все ссылки (<span class="highlight-text">&lt;a&gt;</span>), которые открывают ссылки в новой вкладке (т.е. у которых есть атрибут <span class="highlight-text"><strong>target</strong></span> со значением <span class="highlight-text"><strong>_blank</strong></span>)</p></td></tr><tr><td><div class="hidecode" id="block-142315-30"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>Такой код воздействует на все ссылки (<span class="highlight-text">&lt;a&gt;</span>), которые <span style="color: #e63737"><span style="font-style: italic">содержат кусочек ссылки</span></span> <span class="highlight-text"><strong>/profile.php?</strong></span> (на примере нашего форума - такие ссылки связаны с профилями любых пользователей).</p></td></tr></table><p>Как вы видите, селекторы атрибутов могут быть со всякими трюками: не только топорно брать все элементы, содержащие конкретный атрибут, но и реагировать на начало атрибута, конец атрибута, какое-либо слово и т.д. Подробнее о том, как пользоваться селекторами атрибутов можно почитать здесь: <a href="https://forumd.ru/viewtopic.php?id=6272">CSS селекторы атрибутов</a></p> <p>Также существуют <em class="bbuline">селекторы псевдоклассов и псевдоэлементов</em>. Они нужны для того, чтобы не применять классы и скрипты к странице, не лазить в HTML разметку, а решить задачи через CSS.</p> <p><em class="bbuline">Псевдокласс</em> — это селектор, который выбирает элементы, находящиеся в специфическом состоянии.<br />Самый простой пример псевдокласса, с которым вы столкнетесь - это <span class="highlight-text"><strong><span style="color: #e63737">:hover</span></strong></span> - он позволяет осуществлять какие-либо изменения при наведении курсора.</p> <p><em class="bbuline">Псевдоэлементы</em> ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент.<br />Самые распостраненные примеры псевдоэлементов - это <span class="highlight-text"><strong><span style="color: #e63737">:before</span></strong></span> и <span class="highlight-text"><strong><span style="color: #e63737">:after</span></strong></span> - они позволяют добавить контент до или после какого-то элемента, как если бы вы залезли в разметку страницы.</p> <p>Псевдоклассы и псевдоэлементы - это какбы &quot;надбавки&quot; к селекторам, они пишутся <span style="color: #e63737">слитно через двоеточие</span> после выбранного селектора. Также вы можете объединять псевдоклассы и псевдоэлементы.<br />Примеры:</p><table style="table-layout:fixed;width:100%"><tr><td><p style="text-align:center;"><strong>HTML и CSS код</strong></p></td><td><p style="text-align:center;"><strong>Результат</strong></p></td><td><p style="text-align:center;"><strong>Пояснение</strong></p></td></tr><tr><td><div class="quote-box quote-main"><blockquote><p>&lt;a href=&quot;/&quot;&gt;Cсылка меняет свое состояние&lt;/a&gt;</p></blockquote></div><div class="hidecode" id="block-142315-31"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>[html]&lt;div id=&quot;css-exmpl-1&quot;&gt;&lt;a href=&quot;#css-exmpl-1&quot;&gt;Cсылка меняет свое состояние&lt;/a&gt;&lt;/div&gt;<br />&lt;style&gt;<br />#css-exmpl-1 a {<br />display: inline-block;<br />padding: 10px;<br />border-radius: 10px;<br />color: #fff;<br />background: #0080b7;<br />}<br />#css-exmpl-1 a:hover {background: #e63737;}<br />#css-exmpl-1 a:active {background: #26af33;}<br />&lt;/style&gt;<br />[/html]</p></td><td><p>Эта ссылка с помощью CSS превращена в кнопку с синим фоном.<br />С помощью псевдокласса <span class="highlight-text"><strong><span style="color: #e63737">:hover</span></strong></span> та же самая ссылка будет иметь крассный фон при наведении на нее курсора.<br />С помощью псевдокласса <span class="highlight-text"><strong><span style="color: #e63737">:active</span></strong></span> фон ссылки окрасится в зеленый, если на нее кликнуть.</p></td></tr><tr><td><div class="quote-box quote-main"><blockquote><p>&lt;span class=&quot;name&quot;&gt;<br />&nbsp; &nbsp;&lt;a href=&quot;/profile.php?id=2&quot;&gt;Вася&lt;/a&gt;<br />&lt;/span&gt;</p></blockquote></div><div class="hidecode" id="block-142315-32"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>[html]<br />&lt;div id=&quot;css-exmpl-2&quot;&gt;&lt;span class=&quot;name&quot;&gt;&lt;a href=&quot;#css-exmpl-2&quot;&gt;Вася&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;<br />&lt;style&gt;#css-exmpl-2 .name:before {content: 'Автор статьи: ';}&lt;/style&gt;<br />[/html]</p></td><td><p>По умолчанию мы имеем только ссылку на профиль некого Васи.<br />С помощью псевдоэлемента <span class="highlight-text"><strong><span style="color: #e63737">:before</span></strong></span> мы вставляем перед ссылкой пояснение, что Вася - это <span style="font-style: italic"><span style="color: #e63737">Автор статьи</span></span>, при этом нам не пришлось лезть в HTML код и дописывать там это пояснение. Такой css-код работает так, как если бы у нас был следующий HTML:</p><div class="hidecode" id="block-142315-33"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td></tr><tr><td><div class="quote-box quote-main"><blockquote><p>&lt;div class=&quot;my-class&quot;&gt;<br /> &lt;div&gt;Первый элемент&lt;/div&gt;<br /> &lt;div&gt;Второй элемент&lt;/div&gt;<br /> &lt;div&gt;Третий элемент&lt;/div&gt;<br /> &lt;div&gt;Последний элемент&lt;/div&gt;<br />&lt;/div&gt;</p></blockquote></div><div class="hidecode" id="block-142315-34"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>[html]&lt;div id=&quot;css-exmpl-3&quot;&gt;<br /> &lt;div&gt;Первый элемент&lt;/div&gt;<br /> &lt;div&gt;Второй элемент&lt;/div&gt;<br /> &lt;div&gt;Третий элемент&lt;/div&gt;<br /> &lt;div&gt;Последний элемент&lt;/div&gt;<br />&lt;/div&gt;</p> <p>&lt;style&gt;<br />#css-exmpl-3 div:first-child {color: #e63737}<br />#css-exmpl-3 div:nth-child(2) {color: #f7941d}<br />#css-exmpl-3 div:nth-child(3) {color: #0481d9}<br />#css-exmpl-3 div:last-child {color: #26af33}<br />&lt;/style&gt;[/html]</p></td><td><p>В этом примере у нас есть родительский элемент с классом <span class="highlight-text"><strong>my-class</strong></span>, но нет селекторов для внутренних блоков.<br />Если мы хотим применить к ним разные стили, то на выручку приходят порядковые псевдоклассы:<br /><span class="highlight-text"><strong><span style="color: #e63737">:first-child</span></strong></span> позволит выбрать ПЕРВЫЙ элемент в списке.<br /><span class="highlight-text"><strong><span style="color: #e63737">:last-child</span></strong></span> позволит выбрать ПОСЛЕДНИЙ элемент в списке.<br /><span class="highlight-text"><strong><span style="color: #e63737">:nth-child(</span><span style="color: #0481d9">N</span><span style="color: #e63737">)</span></strong></span> позволяет выбрать элемент по порядковому номеру, где <strong><span style="color: #0481d9">N</span></strong> - это цифра, каким по счету стоит элемент внутри родителя.<br /><strong><span style="color: #e63737">ВНИМАНИЕ!</span></strong> все эти псевдоклассы применяются по ТИПУ элемента. В нашем случае это <span class="highlight-text"><strong>div</strong></span>. Если внутри родителя будет еще стоять несколько html-кодов разного типа (<span class="highlight-text">div</span>, <span class="highlight-text">span</span>, <span class="highlight-text">a</span> и т.д.), CSS-код будет игнорировать их и считать порядковый номер элемента <span class="highlight-text"><strong>div</strong></span>, а не других из того же ряда.</p></td></tr></table><p><strong>Синтаксис CSS: СВОЙСТВА и ЗНАЧЕНИЯ</strong><br />Свойств в CSS великое множество и принимать они могут самые разные значения. Причем, порой, некоторые свойства надо прописать несколько раз для разных браузеров.<br />Нужно ли их учить как таблицу умножения? Нет, не нужно. Они сами будут потихоньку оседать у вас в голове с практикой. Если вбить в гугл <span style="font-style: italic">&quot;CSS как сделать текст синеньким&quot;</span> вы найдете нужные свойства.</p> <p>В этой статье мы <a href="https://forumd.ru/viewtopic.php?id=6308#5">разберем в следующей части</a> основные свойства, в которые необходимо углубиться и которые необходимо понимать и осозновать, чтобы избежать ошибок или ситуаций, когда гугл предложит вам далеко не самый рациональный вариант решения проблемы.</p> <p>Что касается синтаксиса, то можно вас отослать обратно к части <a href="https://forumd.ru/viewtopic.php?id=63084c-2">Синтаксис CSS: Общее</a> и призвать вас внимательно следить за тем, чтобы они имели правильные разделители: </p><div class="quote-box quote-main"><blockquote><p><span style="color: #26af33">селектор</span> <strong><span style="color: #e63737">{</span></strong><br /><span style="color: #0481d9">свойство</span><strong><span style="color: #e63737">:</span></strong> <span style="color: #a726af">значение</span><strong><span style="color: #e63737">;</span></strong><br /><span style="color: #0481d9">свойство</span><strong><span style="color: #e63737">:</span></strong> <span style="color: #a726af">значение</span><strong><span style="color: #e63737">;</span></strong><br /><span style="color: #0481d9">свойство</span><strong><span style="color: #e63737">:</span></strong> <span style="color: #a726af">значение</span><strong><span style="color: #e63737">;</span></strong><br /><strong><span style="color: #e63737">}</span></strong></p></blockquote></div> <p><a href="https://forumd.ru/viewtopic.php?id=6308#ogl">Наверх к оглавлению</a></p> <p><span style="color: #e63737">контент в разработке:</span></p><ul style="list-style: disc"><li><p><span id="4d"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Инструменты разработчика</span></span></span></p></li></ul><div class="no-prof" id="block-142315-35"><p>no-prof</p></div> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+6</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> </ul> </div> </div> </div> <div id="p175243" class="post altstyle topic-starter" data-posted="1666747342" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p175243" onclick="return false;">Поделиться</a><strong>6</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=6308#p175243">26.10.22 04:22</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10111</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p175243-content" class="post-content"> <p><span id="5"></p><p style="text-align:center;"><span style="font-size: 28px"><span style="font-family: Bebas Neue">Верстка дизайна: погружаемся в CSS</span></span></p> <p></span><br /><span style="color: #e63737">контент в разработке:</span></p><ul style="list-style: disc"><li><p>Фон элемента (Backgound)</p></li><li><p>Отображение элемента (Display)</p></li><li><p>Позиционирование элемента (Position)</p></li></ul><div class="no-prof" id="block-175243-1"><p>no-prof</p></div> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+3</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> </ul> </div> </div> </div> <div id="p181490" class="post endpost topic-starter" data-posted="1678386003" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p181490" onclick="return false;">Поделиться</a><strong>7</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=6308#p181490">09.03.23 21:20</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10111</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p181490-content" class="post-content"> <p><span id="6"></p><p style="text-align:center;"><span style="font-size: 28px"><span style="font-family: Bebas Neue">Верстка: ошибки новичков</span></span></span><br /><span style="font-size: 18px">Примеры нерациональной верстки и как этого избегать</span></p> <p>Как уже говорилось <a href="https://forumd.ru/viewtopic.php?id=6308#3c">в предыдущей части</a>, новички часто вместо верного пути, выбирают тот, что будет простым в освоении, нарезают огромные картинки в некорректном формате и вставляют в готовый (и, порой, кривой) шаблон, не анализируя другие пути решения задачи.<br />Иногда это связано с с отсутствием знаний о форматах графики в дизайне, а иногда с неумением работать с CSS, однако если вы думаете, что за эти знания отвечает только опыт дизайнера, вы ошибаетесь - вам достаточно освоить азы дизайна, чтобы начать верстать правильно, ведь большинство ошибок новичков можно избежать, если немножко погуглить что-то вроде <span style="font-style: italic">&quot;как сделать фон серым&quot;</span>.<br />В этой части мы разберем на примерах грубые ошибки новичков, как при &quot;нарезке&quot; макета, так и при работе с кодом дизайна, и продемонстрируем, какой логикой следует руководствоваться при верстке дизайна и как таких ошибок не допускать.</p> <p><span id="5a"><span style="font-family: Bebas Neue"><span style="font-size: 22px">Проблема лишних картинкок</span></span></span></p> <p>Многие новички используют фоновые картинки там, где можно обойтись без них. Мне не пришлось долго искать пример, достаточно было прокликать рекламу трех форумов и нашлось вот такое:</p><div class="prev" id="block-181490-1"><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/226024.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/226024.jpg" /></p></div><p>Как вы видите, по задумке в дизайне используется однотонный серый фон, и эту идею можно было бы воплотить простым кодом: <br /><span class="highlight-text">body {background-color: #4e4e47;}</span><br />Вместо этого автор вставляет серый квадрат картинкой. Причем в формате png, хотя jpg весило бы меньше. Причем, зачем-то дважды.<br />Судя по всему, в данном примере автор бездумно вставлял картинки в готовый шаблон, совсем не разбираясь в кодах, и с вами такого не случится, если вы будете <strong>анализировать, где нужны картинки, а где - не нужны</strong>. При кропотливом подходе и желании учиться ваш код дизайна станет в разы меньше, а дизайны в разы быстрее прогружаться.</p> <p>Для понимания, как работает &quot;магия&quot; css, давайте сверстаем простой HTML-шаблон:</p><p style="text-align:center;"><img class="postimg" loading="lazy" src="https://forumupload.ru/uploads/0007/e3/f7/2/883303.jpg" alt="https://forumupload.ru/uploads/0007/e3/f7/2/883303.jpg" /></p> <p>Если вам кажется, что без вырезания картинок в фотошопе тут никак, вы ошибаетесь. Сейчас продемонстрируем, как с точки зрения новичка выполнить это на чистом CSS.</p><table style="table-layout:fixed;width:100%"><tr><td><p style="text-align:center;"><strong>Что делаем?</strong></p></td><td><p style="text-align:center;"><strong>Код</strong></p></td><td><p style="text-align:center;"><strong>Результат</strong></p></td></tr><tr><td><p>Начнем с фона. Нам нужен Квадратный блок и нам надо покрасить его в серо-синий цвет.<br />Я пишу на html код блока и присваиваю ему ID, чтобы потом обращаться к нему на CSS: <br /><span class="highlight-text">&lt;div id=&quot;<span style="color: #e63737">supersquare</span>&quot;&gt;&lt;/div&gt;</span><br />Так как он на данный момент пустой, то отображаться он не будет, если просто вписать фон, поэтому я задаю еще и размер блока - к тому же, нам это пригодится позднее, ведь нам придется &quot;двигать&quot; другие квадраты относительно него.<br /><span class="highlight-text">#supersquare {width: 300px; height:300px;}</span><br />&quot;Крашу&quot; я наш квадрат, естественно, кодом, добавляя:<br /><span class="highlight-text">background-color: #cedcdc;</span><br />Если я не знаю как сделать что-либо из этого, я гуглю <span style="font-style: italic">&quot;CSS как задать размеры блока&quot;</span> или <span style="font-style: italic">&quot;CSS как изменить цвет фона&quot;</span></p></td><td><div class="hidecode" id="block-181490-2"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>[html]&lt;div id=&quot;supersquare1&quot;&gt;&lt;/div&gt;<br />&lt;style&gt;#supersquare1 {width: 300px; height:300px;background-color: #cedcdc;}&lt;/style&gt;[/html]</p></td></tr><tr><td><p>Теперь нам надо &quot;нарисовать&quot; синий квадрат (меньший по размеру, чем основной) и развернуть его. Возможно ли это на CSS? Если я не уверена я гуглю &quot;<span style="font-style: italic">как повернуть блок в css</span>&quot; и нахожу, что это возможно через свойство:<br /><span class="highlight-text">transform: rotate(<span style="color: #e63737">0</span>deg);</span><br />Значит, мы можем смело делать это кодом. я вписываю html-блок для нового квадрата внутрь кода:<br /><span class="highlight-text">&lt;div id=&quot;supersquare&quot;&gt;&lt;div class=&quot;<span style="color: #e63737">ssblue</span>&quot;&gt;&lt;/div&gt;&lt;/div&gt;</span><br />Дальше я пишу стиль. Фон квадрату не нужен, нужна синяя рамка, которую можно сделать через свойство <span class="highlight-text">border</span>. Разворачиваю квадрат с помощью <span class="highlight-text">transform</span>. А размеры пока что можно поставить приблизительно, пока надо посмотреть, что получается.</p></td><td><div class="hidelink" id="block-181490-3"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>[html]&lt;div id=&quot;supersquare2&quot;&gt;<br />&nbsp; &lt;div class=&quot;ssblue&quot;&gt;&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;style&gt;<br />#supersquare2 {<br /> width: 300px; <br /> height:300px;<br /> background-color: #cedcdc; <br />}<br />#supersquare2 .ssblue {<br />&nbsp; border: 2px solid #0481d9;<br />&nbsp; width: 220px;<br />&nbsp; height: 220px;<br />&nbsp; transform: rotate(45deg);<br />}<br />&lt;/style&gt;[/html]</p></td></tr><tr><td><p>Я вижу, что мой синий квадрат &quot;уехал&quot; из-за трансформации. Значит мне нужно его спозиционировать (двигать) относительно серого квадрата. Гуглю <span style="font-style: italic">&quot;css как двигать один блок относительно другого&quot;</span>.<br />После пары небольших гайдов понимаю, что мне нужно задать для <span style="color: #e63737">#supersquare</span> позиционирование <span class="highlight-text">relative</span> и тогда я могу двигать синий квадрат внутри него с помощью свойств <span class="highlight-text">top</span> и <span class="highlight-text">left</span>.<br />Также я прописываю меньшую ширину синего квадрата, ибо стало понятно, что он слишком жирный и не помещается.</p></td><td><div class="hidecode" id="block-181490-4"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>[html]&lt;div id=&quot;supersquare3&quot;&gt;<br />&nbsp; &lt;div class=&quot;ssblue&quot;&gt;&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;style&gt;<br />#supersquare3 {<br /> width: 300px; <br /> height:300px;<br /> background-color: #cedcdc; <br /> position:relative;<br />}<br />#supersquare3 .ssblue {<br />&nbsp; border: 2px solid #0481d9;<br />&nbsp; width: 190px;<br />&nbsp; height: 190px;<br />&nbsp; transform: rotate(45deg);<br />&nbsp; position: absolute;<br />&nbsp; top: 50px;<br />&nbsp; left: 45px;<br />}<br />&lt;/style&gt;[/html]</p></td></tr><tr><td><p>Теперь нарисуем красный квадрат. Он должен быть такого же размера, как и синий, без фона, с красным бордюром.<br />я вставляю этот квадрат внутрь синего и прописываю для него стиль:<br /><span class="highlight-text">&lt;div id=&quot;supersquare&quot;&gt;&lt;div class=&quot;ssblue&quot;&gt;&lt;div class=&quot;<span style="color: #e63737">ssred</span>&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</span><br /><span class="highlight-text">#supersquare .ssred {<br />border: 2px solid #e63737;<br />width: 190px;<br />height: 190px;<br />}</span><br />смотрю, что получилось.</p></td><td><div class="hidecode" id="block-181490-5"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>[html]&lt;div id=&quot;supersquare4&quot;&gt;&lt;div class=&quot;ssblue&quot;&gt;&lt;div class=&quot;ssred&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;<br />&lt;style&gt;#supersquare4 {width: 300px; height:300px;background-color: #cedcdc; position:relative;}<br />#supersquare4 .ssblue {<br />&nbsp; border: 2px solid #0481d9;<br />&nbsp; width: 190px;<br />&nbsp; height: 190px;<br />&nbsp; transform: rotate(45deg);<br />&nbsp; position: absolute;<br />&nbsp; top: 50px;<br />&nbsp; left: 45px;<br />}<br />#supersquare4 .ssred {<br />border: 2px solid #e63737;<br />width: 190px;<br />height: 190px;<br />}&lt;/style&gt;[/html]</p></td></tr><tr><td><p>Так как красный квадрат находится ВНУТРИ синего, то на него автоматически распостранилось свойство <span class="highlight-text">transform</span> - он уже наклонен и находится внутри родительского блока. Я могу еще погуглить <span style="font-style: italic">&quot;css как подвинуть блок&quot;</span> и прийти к выводу, что в этом случае можно сделать это через <span class="highlight-text">margin</span><br />Применяю это свойство к красному квадрату <span style="color: #e63737">#supersquare .ssred</span> - и &quot;рамочка&quot; готова.</p></td><td><div class="hidecode" id="block-181490-6"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>[html]&lt;div id=&quot;supersquare5&quot;&gt;&lt;div class=&quot;ssblue&quot;&gt;&lt;div class=&quot;ssred&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;<br />&lt;style&gt;#supersquare5 {width: 300px; height:300px;background-color: #cedcdc; position:relative;}<br />#supersquare5 .ssblue {<br />&nbsp; border: 2px solid #0481d9;<br />&nbsp; width: 190px;<br />&nbsp; height: 190px;<br />&nbsp; transform: rotate(45deg);<br />&nbsp; position: absolute;<br />&nbsp; top: 50px;<br />&nbsp; left: 45px;<br />}<br />#supersquare5 .ssred {<br />border: 2px solid #e63737;<br />width: 190px;<br />height: 190px;<br />margin-top: -12px;<br />margin-left: 8px;<br />}&lt;/style&gt;[/html]</p></td></tr><tr><td><p>Теперь надо вписать два текста - заголовок и подзаголовок. <br />Т.к. мне их тоже придется двигать поверх квадратов, я их буду добавлять в блоках <span class="highlight-text">div</span>. Те, кто впишут тексты как-то иначе, все равно придут к блокам в процессе практики или просто применят <span class="highlight-text">display: block;</span> к своим тегам.<br />Что важно заметить на этом этапе для упрощения своей работы: у обоих текстов есть общие свойства, а есть различия, поэтому лучше их вписать с разными ID, но одинаковым классом:<br /><span class="highlight-text">&lt;div id=&quot;supersquare&quot;&gt;<br /><span style="color: #e63737">&nbsp; &lt;div id=&quot;text1&quot; class=&quot;text&quot;&gt;Заголовок&lt;/div&gt;<br />&nbsp; &lt;div id=&quot;text2&quot; class=&quot;text&quot;&gt;подзаголовок&lt;br&gt;мелким текстом&lt;/div&gt;</span><br />&nbsp; &lt;div class=&quot;ssblue&quot;&gt;<br />&nbsp; &nbsp; &lt;div class=&quot;ssred&quot;&gt;&lt;/div&gt;<br />&nbsp; &lt;/div&gt;<br />&lt;/div&gt;</span><br />Теперь в стиль я могу добавить <span class="highlight-text">#supersquare <span style="color: #e63737">.text</span> {}</span> - для всех общих свойств. Туда я впишу шрифт.<br />а различие свойств я впишу через коды:<br /><span class="highlight-text">#supersquare<span style="color: #e63737"> #text1</span> {}<br />#supersquare<span style="color: #e63737"> #text2</span> {}</span><br />Пока что добавлю туда цвет.</p></td><td><div class="hidecode" id="block-181490-7"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>[html]&lt;div id=&quot;supersquare6&quot;&gt;<br />&nbsp; &lt;div id=&quot;text1&quot; class=&quot;text&quot;&gt;Заголовок&lt;/div&gt;<br />&nbsp; &lt;div id=&quot;text2&quot; class=&quot;text&quot;&gt;подзаголовок&lt;br&gt;мелким текстом&lt;/div&gt;<br />&nbsp; &lt;div class=&quot;ssblue&quot;&gt;<br />&nbsp; &nbsp; &lt;div class=&quot;ssred&quot;&gt;&lt;/div&gt;<br />&nbsp; &lt;/div&gt;<br />&lt;/div&gt;<br />&lt;style&gt;#supersquare6 {width: 300px; height:300px;background-color: #cedcdc; position:relative;}<br />#supersquare6 .ssblue {<br />&nbsp; border: 2px solid #0481d9;<br />&nbsp; width: 190px;<br />&nbsp; height: 190px;<br />&nbsp; transform: rotate(45deg);<br />&nbsp; position: absolute;<br />&nbsp; top: 50px;<br />&nbsp; left: 45px;<br />}<br />#supersquare6 .ssred {<br />border: 2px solid #e63737;<br />width: 190px;<br />height: 190px;<br />margin-top: -12px;<br />margin-left: 8px;<br />}<br />#supersquare6 .text {font-family:&quot;Franklin Gothic Medium&quot;;}<br />#supersquare6 #text1 {color: #0481d9;}<br />#supersquare6 #text2 {color: #e63737;}<br />&lt;/style&gt;[/html]</p></td></tr><tr><td><p>Спозиционируем текст. Мы это уже проделывали с синим квадратом и, т.к. мы хотим, чтобы текст был поверх квадратов, то действовать будем аналогично - через <span class="highlight-text">position: absolute;</span><br />Чтобы при этом тексты отображалисть по центру, я задам блокам фиксированную ширину (равную основному квадрату) и выравнивание текста по центру через <span class="highlight-text">text-align: center;</span> (как обычно, если вы этого трюка не знали, вам поможет гугл с запросом <span style="font-style: italic">&quot;как выравнивать текст внутри блока по центру&quot;</span>)<br />в каждый текст я вписываю размер шрифта и отступ сверху через свойство <span class="highlight-text">top</span>.</p></td><td><div class="hidecode" id="block-181490-8"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>[html]&lt;div id=&quot;supersquare7&quot;&gt;<br />&nbsp; &lt;div id=&quot;text1&quot; class=&quot;text&quot;&gt;Заголовок&lt;/div&gt;<br />&nbsp; &lt;div id=&quot;text2&quot; class=&quot;text&quot;&gt;подзаголовок&lt;br&gt;мелким текстом&lt;/div&gt;<br />&nbsp; &lt;div class=&quot;ssblue&quot;&gt;<br />&nbsp; &nbsp; &lt;div class=&quot;ssred&quot;&gt;&lt;/div&gt;<br />&nbsp; &lt;/div&gt;<br />&lt;/div&gt;<br />&lt;style&gt;#supersquare7 {width: 300px; height:300px;background-color: #cedcdc; position:relative;}<br />#supersquare7 .ssblue {<br />&nbsp; border: 2px solid #0481d9;<br />&nbsp; width: 190px;<br />&nbsp; height: 190px;<br />&nbsp; transform: rotate(45deg);<br />&nbsp; position: absolute;<br />&nbsp; top: 50px;<br />&nbsp; left: 45px;<br />}<br />#supersquare7 .ssred {<br />border: 2px solid #e63737;<br />width: 190px;<br />height: 190px;<br />margin-top: -12px;<br />margin-left: 8px;<br />}<br />#supersquare7 .text {<br />font-family:&quot;Franklin Gothic Medium&quot;;<br />width: 100%;<br />position: absolute;<br />text-align: center;<br />}<br />#supersquare7 #text1 {<br />color: #0481d9;<br />font-weight: bold;<br />font-size: 50px;<br />top: 70px;<br />}<br />#supersquare7 #text2 {<br />color: #e63737;<br />font-size: 30px;<br />top: 126px;<br />}<br />&lt;/style&gt;[/html]</p></td></tr><tr><td><p>Вижу проблему с тем, что красная линяя квадрата у нас находится поверх текста, а нам надо наоборот.<br />Гуглю <span style="font-style: italic">&quot;как сделать один элемент поверх другого css&quot;</span> и узнаю про прекрасное свойство <span class="highlight-text">z-index</span> - добавляю его в текст.<br />Осталось только загуглить <span style="font-style: italic">&quot;как сделать обводку текста в CSS&quot;</span>, чтобы сделать обводку того же цвета, что и фон, как на образце, чтобы текст не &quot;слеплялся&quot; с линиями рамочки. Узнаю про свойство <span class="highlight-text">text-shadow</span>, использую генератор или какое-нибудь готовое CSS-решение.</p></td><td><div class="hidecode" id="block-181490-9"><div class="quote-box hide-box term-login"><cite>Скрытый текст:</cite><blockquote><p>Для просмотра скрытого текста - <a href="/login.php" rel="nofollow ugc" target="_blank">войдите</a> или <a rel="nofollow ugc" href="/register.php" target="_blank">зарегистрируйтесь</a>.</p></blockquote></div></div></td><td><p>[html]&lt;div id=&quot;supersquare99&quot;&gt;<br />&nbsp; &lt;div id=&quot;text1&quot; class=&quot;text&quot;&gt;Заголовок&lt;/div&gt;<br />&nbsp; &lt;div id=&quot;text2&quot; class=&quot;text&quot;&gt;подзаголовок&lt;br&gt;мелким текстом&lt;/div&gt;<br />&nbsp; &lt;div class=&quot;ssblue&quot;&gt;<br />&nbsp; &nbsp; &lt;div class=&quot;ssred&quot;&gt;&lt;/div&gt;<br />&nbsp; &lt;/div&gt;<br />&lt;/div&gt;<br />&lt;style&gt;#supersquare99 {width: 300px; height:300px;background-color: #cedcdc; position:relative;}<br />#supersquare99 .ssblue {<br />&nbsp; border: 2px solid #0481d9;<br />&nbsp; width: 190px;<br />&nbsp; height: 190px;<br />&nbsp; transform: rotate(45deg);<br />&nbsp; position: absolute;<br />&nbsp; top: 50px;<br />&nbsp; left: 45px;<br />}<br />#supersquare99 .ssred {<br />border: 2px solid #e63737;<br />width: 190px;<br />height: 190px;<br />margin-top: -12px;<br />margin-left: 8px;<br />}<br />#supersquare99 .text {<br />font-family:&quot;Franklin Gothic Medium&quot;;<br />width: 100%;<br />position: absolute;<br />text-align: center;<br />z-index: 99;<br />&nbsp; text-shadow: <br />&nbsp; &nbsp; -0&nbsp; &nbsp;-3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 0&nbsp; &nbsp;-3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -0&nbsp; &nbsp; 3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 0&nbsp; &nbsp; 3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -3px -0&nbsp; &nbsp;0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 3px -0&nbsp; &nbsp;0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -3px&nbsp; 0&nbsp; &nbsp;0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 3px&nbsp; 0&nbsp; &nbsp;0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -1px -3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 1px -3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -1px&nbsp; 3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 1px&nbsp; 3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -3px -1px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 3px -1px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -3px&nbsp; 1px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 3px&nbsp; 1px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -2px -3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 2px -3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -2px&nbsp; 3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 2px&nbsp; 3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -3px -2px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 3px -2px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -3px&nbsp; 2px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 3px&nbsp; 2px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -3px -3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 3px -3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -3px&nbsp; 3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 3px&nbsp; 3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -3px -3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 3px -3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp; -3px&nbsp; 3px 0&nbsp; &nbsp;#CEDCDC,<br />&nbsp; &nbsp;&nbsp; 3px&nbsp; 3px 0&nbsp; &nbsp;#CEDCDC;</p> <p>}<br />#supersquare99 #text1 {<br />color: #0481d9;<br />font-weight: bold;<br />font-size: 50px;<br />top: 70px;<br />}<br />#supersquare99 #text2 {<br />color: #e63737;<br />font-size: 30px;<br />top: 126px;<br />}<br />&lt;/style&gt;[/html]</p></td></tr></table><p>Как вы видите, достаточно просто начать копаться в кодах и раскладывать свои задумки по частям - и вот вы уже делаете дизайны на чистом CSS без того, чтобы под каждый пиксель вырезать картинку.<br />Зайти в этом деле можно очень далеко, например, вот котик, которого <a href="https://forumd.ru/viewtopic.php?id=4303">&quot;чинили&quot; у нас на конкурсе</a>:</p><div class="quote-box quote-main"><blockquote><p>[html]<br />&lt;style&gt;<br />/* ---------------------------------- Parts of body ---------------------------------- */<br />.cat {<br />&nbsp; position: relative;<br />&nbsp; margin: 0px auto;<br />&nbsp; width: 400px;<br />&nbsp; height: 400px;<br />&nbsp; background: transparent;<br />&nbsp; }</p> <p>.head {<br />&nbsp; position: absolute;<br />&nbsp; left: 60px;<br />&nbsp; top: 30px;<br />&nbsp; width: 280px;<br />&nbsp; height: 250px;<br />&nbsp; background: #000;</p> <p>&nbsp; -webkit-border-radius: 280px/250px;<br />&nbsp; &nbsp;-khtml-border-radius: 280px/250px;<br />&nbsp; &nbsp; &nbsp;-moz-border-radius: 280px/250px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-border-radius: 280px/250px;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 280px/250px;<br />&nbsp; }</p> <p>.body {<br />&nbsp; position: absolute;<br />&nbsp; left: 165px;<br />&nbsp; top: 250px;<br />&nbsp; width: 66px;<br />&nbsp; height: 125px;<br />&nbsp; background: #000;</p> <p>&nbsp; -webkit-border-radius: 66px/125px;<br />&nbsp; &nbsp;-khtml-border-radius: 66px/125px;<br />&nbsp; &nbsp; &nbsp;-moz-border-radius: 66px/125px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-border-radius: 66px/125px;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 66px/125px;<br />&nbsp; }</p> <p>/* ---------------------------------- Legs/Paws ---------------------------------- */<br />.left-leg, .right-leg {<br />&nbsp; position: absolute;<br />&nbsp; top: 327px;<br />&nbsp; width: 25px;<br />&nbsp; height: 60px;<br />&nbsp; background: #000;</p> <p>&nbsp; -webkit-border-radius: 25px/60px;<br />&nbsp; &nbsp;-khtml-border-radius: 25px/60px;<br />&nbsp; &nbsp; &nbsp;-moz-border-radius: 25px/60px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-border-radius: 25px/60px;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 25px/60px;<br />&nbsp; }</p> <p>.left-leg {<br />&nbsp; left: 207px;</p> <p>&nbsp; -webkit-transform: rotate(60deg);<br />&nbsp; &nbsp; &nbsp;-moz-transform: rotate(60deg);<br />&nbsp; &nbsp; &nbsp; -ms-transform: rotate(60deg);<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-transform: rotate(60deg);<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: rotate(60deg);<br />&nbsp; }</p> <p>.right-leg {<br />&nbsp; left: 163px;</p> <p>&nbsp; -webkit-transform: rotate(120deg);<br />&nbsp; &nbsp; &nbsp;-moz-transform: rotate(120deg);<br />&nbsp; &nbsp; &nbsp; -ms-transform: rotate(120deg);<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-transform: rotate(120deg);<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: rotate(120deg);<br />&nbsp; }</p> <p>.left-paw, .right-paw {<br />&nbsp; position: absolute;<br />&nbsp; top: 350px;<br />&nbsp; width: 15px;<br />&nbsp; height: 35px;<br />&nbsp; background: #000;</p> <p>&nbsp; -webkit-border-radius: 16px/35px;<br />&nbsp; &nbsp;-khtml-border-radius: 16px/35px;<br />&nbsp; &nbsp; &nbsp;-moz-border-radius: 16px/35px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-border-radius: 16px/35px;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 16px/35px;<br />&nbsp; }</p> <p>.left-paw {<br />&nbsp; left: 205px;<br />&nbsp; }</p> <p>.right-paw {<br />&nbsp; left: 180px;<br />&nbsp; }</p> <p>/* ---------------------------------- Ears ---------------------------------- */<br />.left-ear, .right-ear {<br />&nbsp; position: absolute;<br />&nbsp; top: 40px;<br />&nbsp; width: 30px;<br />&nbsp; height: 60px;<br />&nbsp; background: #000;</p> <p>&nbsp; -webkit-border-radius: 30px/60px;<br />&nbsp; &nbsp;-khtml-border-radius: 30px/60px;<br />&nbsp; &nbsp; &nbsp;-moz-border-radius: 30px/60px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-border-radius: 30px/60px;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 30px/60px;</p> <p>&nbsp; -webkit-transform-origin: 15px 60px;<br />&nbsp; &nbsp; &nbsp;-moz-transform-origin: 15px 60px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-transform-origin: 15px 60px;<br />&nbsp; }</p> <p>.left-ear {<br />&nbsp; left: 300px;</p> <p>&nbsp; -webkit-animation: left-ear 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: left-ear 3s infinite linear normal none;<br />&nbsp; }</p> <p>.right-ear {<br />&nbsp; left: 70px;</p> <p>&nbsp; -webkit-animation: right-ear 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: right-ear 3s infinite linear normal none;<br />&nbsp; }</p> <p>/* ---------------------------------- Whiskers ---------------------------------- */<br />.left-whiskers, .right-whiskers {<br />&nbsp; position: absolute;<br />&nbsp; top: 140px;<br />&nbsp; width: 45px;<br />&nbsp; height: 30px;<br />&nbsp; }</p> <p>.left-whiskers {<br />&nbsp; left: 330px;</p> <p>&nbsp; -webkit-transform-origin: 0px 15px;<br />&nbsp; &nbsp; &nbsp;-moz-transform-origin: 0px 15px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-transform-origin: 0px 15px;</p> <p>&nbsp; -webkit-animation: left-whiskers 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: left-whiskers 3s infinite linear normal none;<br />&nbsp; }</p> <p>.right-whiskers {<br />&nbsp; left: 25px;</p> <p>&nbsp; -webkit-transform-origin: 45px 15px;<br />&nbsp; &nbsp; &nbsp;-moz-transform-origin: 45px 15px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-transform-origin: 45px 15px;</p> <p>&nbsp; -webkit-animation: right-whiskers 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: right-whiskers 3s infinite linear normal none;<br />&nbsp; }</p> <p>.w1, .w3, .w5, .w2, .w4, .w6 {<br />&nbsp; position: absolute;<br />&nbsp; left: 0px;<br />&nbsp; width: 45px;<br />&nbsp; height: 3px;<br />&nbsp; background: #000;<br />&nbsp; }</p> <p>.w1, .w2 {<br />&nbsp; top: 15px;<br />&nbsp; }</p> <p>.w3 {<br />&nbsp; top: 8px;</p> <p>&nbsp; -webkit-transform: rotate(-5deg);<br />&nbsp; &nbsp; &nbsp;-moz-transform: rotate(-5deg);<br />&nbsp; &nbsp; &nbsp; -ms-transform: rotate(-5deg);<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-transform: rotate(-5deg);<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: rotate(-5deg);<br />&nbsp; }</p> <p>.w5 {<br />&nbsp; top: 22px;</p> <p>&nbsp; -webkit-transform: rotate(-355deg);<br />&nbsp; &nbsp; &nbsp;-moz-transform: rotate(-355deg);<br />&nbsp; &nbsp; &nbsp; -ms-transform: rotate(-355deg);<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-transform: rotate(-355deg);<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: rotate(-355deg);<br />&nbsp; }</p> <p>.w4 {<br />&nbsp; top: 8px;</p> <p>&nbsp; -webkit-transform: rotate(5deg);<br />&nbsp; &nbsp; &nbsp;-moz-transform: rotate(5deg);<br />&nbsp; &nbsp; &nbsp; -ms-transform: rotate(5deg);<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-transform: rotate(5deg);<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: rotate(5deg);<br />&nbsp; }</p> <p>.w6 {<br />&nbsp; top: 22px;</p> <p>&nbsp; -webkit-transform: rotate(355deg);<br />&nbsp; &nbsp; &nbsp;-moz-transform: rotate(355deg);<br />&nbsp; &nbsp; &nbsp; -ms-transform: rotate(355deg);<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-transform: rotate(355deg);<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: rotate(355deg);<br />&nbsp; }</p> <p>/* ---------------------------------- Eyes ---------------------------------- */<br />.left-eye, .right-eye {<br />&nbsp; position: absolute;<br />&nbsp; top: 95px;<br />&nbsp; width: 48px;<br />&nbsp; height: 48px;<br />&nbsp; background: #fff;</p> <p>&nbsp; -webkit-border-radius: 48px;<br />&nbsp; &nbsp;-khtml-border-radius: 48px;<br />&nbsp; &nbsp; &nbsp;-moz-border-radius: 48px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-border-radius: 48px;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 48px;<br />&nbsp; }</p> <p>.left-eye {<br />&nbsp; left: 271px;</p> <p>&nbsp; -webkit-animation: left-eye 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: left-eye 3s infinite linear normal none;<br />&nbsp; }</p> <p>.right-eye {<br />&nbsp; left: 81px;</p> <p>&nbsp; -webkit-animation: right-eye 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: right-eye 3s infinite linear normal none;<br />&nbsp; }</p> <p>.left-pupil, .right-pupil {<br />&nbsp; position: absolute;<br />&nbsp; left: 17px;<br />&nbsp; top: 15px;<br />&nbsp; width: 15px;<br />&nbsp; height: 15px;<br />&nbsp; background: #000;</p> <p>&nbsp; -webkit-border-radius: 15px;<br />&nbsp; &nbsp;-khtml-border-radius: 15px;<br />&nbsp; &nbsp; &nbsp;-moz-border-radius: 15px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-border-radius: 15px;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 15px;<br />&nbsp; }</p> <p>.left-pupil {<br />&nbsp; -webkit-animation: left-pupil 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: left-pupil 3s infinite linear normal none;<br />&nbsp; }</p> <p>.right-pupil {<br />&nbsp; -webkit-animation: right-pupil 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: right-pupil 3s infinite linear normal none;<br />&nbsp; }</p> <p>/* ---------------------------------- Tail ---------------------------------- */<br />.tail {<br />&nbsp; position: absolute;<br />&nbsp; left: 200px;<br />&nbsp; top: 290px;<br />&nbsp; width: 85px;<br />&nbsp; height: 70px;<br />&nbsp; background: transparent;<br />&nbsp; border: 5px solid #000;<br />&nbsp; border-top: none;<br />&nbsp; border-left: none;</p> <p>&nbsp; -webkit-border-radius: 85px/70px;<br />&nbsp; &nbsp;-khtml-border-radius: 85px/70px;<br />&nbsp; &nbsp; &nbsp;-moz-border-radius: 85px/70px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-border-radius: 85px/70px;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 85px/70px;<br />&nbsp; }</p> <p>/* ---------------------------------- Mouth ---------------------------------- */<br />.mouth {<br />&nbsp; position: absolute;<br />&nbsp; left: 192px;<br />&nbsp; top: 245px;<br />&nbsp; width: 16px;<br />&nbsp; height: 5px;<br />&nbsp; background: #900;<br />&nbsp; border: 1px solid #600;</p> <p>&nbsp; -webkit-border-radius: 16px/5px;<br />&nbsp; &nbsp;-khtml-border-radius: 16px/5px;<br />&nbsp; &nbsp; &nbsp;-moz-border-radius: 16px/5px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-border-radius: 16px/5px;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 16px/5px;</p> <p>&nbsp; opacity: 0;</p> <p>&nbsp; -webkit-animation: mouth 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: mouth 3s infinite linear normal none;<br />&nbsp; }</p> <p>/* ---------------------------------- Teeth ---------------------------------- */<br />.tooth-tl, .tooth-tr, .tooth-bl, .tooth-br {<br />&nbsp; position: absolute;<br />&nbsp; left: 50%;<br />&nbsp; width: 0px;<br />&nbsp; height: 0px;</p> <p>&nbsp; -moz-transform: scale(0);<br />&nbsp; }</p> <p>.tooth-tl, .tooth-tr {<br />&nbsp; top: 2px;<br />&nbsp; border-bottom: 12px solid transparent;<br />&nbsp; border-top: 8px solid transparent;<br />&nbsp; }</p> <p>.tooth-bl, .tooth-br {<br />&nbsp; bottom: 2px;<br />&nbsp; border-bottom: 8px solid transparent;<br />&nbsp; border-top: 12px solid transparent;<br />&nbsp; }</p> <p>.tooth-tl {<br />&nbsp; margin-left: 5px;<br />&nbsp; border-left: 10px solid #fff;</p> <p>&nbsp; -webkit-animation: tooth-tl 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: tooth-tl 3s infinite linear normal none;<br />&nbsp; }</p> <p>.tooth-tr {<br />&nbsp; margin-left: -15px;<br />&nbsp; border-right: 10px solid #fff;</p> <p>&nbsp; -webkit-animation: tooth-tr 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: tooth-tr 3s infinite linear normal none;<br />&nbsp; }</p> <p>.tooth-bl {<br />&nbsp; margin-left: 5px;<br />&nbsp; border-left: 10px solid #fff;</p> <p>&nbsp; -webkit-animation: tooth-bl 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: tooth-bl 3s infinite linear normal none;<br />&nbsp; }</p> <p>.tooth-br {<br />&nbsp; margin-left: -15px;<br />&nbsp; border-right: 10px solid #fff;</p> <p>&nbsp; -webkit-animation: tooth-br 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: tooth-br 3s infinite linear normal none;<br />&nbsp; }</p> <p>/* ---------------------------------- Mouth Else ---------------------------------- */<br />.tongue {<br />&nbsp; position: absolute;<br />&nbsp; left: 50%;<br />&nbsp; margin-left: -40px;<br />&nbsp; bottom: -8px;<br />&nbsp; width: 80px;<br />&nbsp; height: 30px;<br />&nbsp; background: #f66;</p> <p>&nbsp; -webkit-border-radius: 80px/30px;<br />&nbsp; &nbsp;-khtml-border-radius: 80px/30px;<br />&nbsp; &nbsp; &nbsp;-moz-border-radius: 80px/30px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-border-radius: 80px/30px;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 80px/30px;</p> <p>&nbsp; -moz-transform: scale(0);</p> <p>&nbsp; -webkit-animation: tongue 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: tongue 3s infinite linear normal none;<br />&nbsp; }</p> <p>.throat {<br />&nbsp; position: absolute;<br />&nbsp; left: 50%;<br />&nbsp; margin-left: -25px;<br />&nbsp; bottom: -70px;<br />&nbsp; width: 50px;<br />&nbsp; height: 70px;<br />&nbsp; background: #300;</p> <p>&nbsp; -webkit-border-radius: 60px;<br />&nbsp; &nbsp;-khtml-border-radius: 60px;<br />&nbsp; &nbsp; &nbsp;-moz-border-radius: 60px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-border-radius: 60px;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 60px;</p> <p>&nbsp; -moz-transform: scale(0);</p> <p>&nbsp; -webkit-animation: throat 3s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: throat 3s infinite linear normal none;<br />&nbsp; }</p> <p>.uvula {<br />&nbsp; position: absolute;<br />&nbsp; left: 50%;<br />&nbsp; margin-left: -5px;<br />&nbsp; top: -20px;<br />&nbsp; width: 10px;<br />&nbsp; height: 50px;<br />&nbsp; background: #900;</p> <p>&nbsp; -webkit-border-radius: 10px/50px;<br />&nbsp; &nbsp;-khtml-border-radius: 10px/50px;<br />&nbsp; &nbsp; &nbsp;-moz-border-radius: 10px/50px;<br />&nbsp; &nbsp; &nbsp; &nbsp;-o-border-radius: 10px/50px;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 10px/50px;</p> <p>&nbsp; -webkit-transform-origin: 5px 0px;<br />&nbsp; &nbsp; &nbsp;-moz-transform-origin: 5px 0px;</p> <p>&nbsp; -moz-transform: scale(1);</p> <p>&nbsp; -webkit-animation: uvula 0.1s 2s infinite linear normal none;<br />&nbsp; &nbsp; &nbsp;-moz-animation: uvula 0.1s 2s infinite linear normal none; <br />&nbsp; }</p> <p>/* ----------------------------------&nbsp; &nbsp;---------------------------------- */</p> <p>@-moz-keyframes left-ear {<br />&nbsp; 0% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}<br /> 40% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}<br /> 42% {left: 302px; top: 50px; -moz-transform: rotate(30deg);}<br /> 44% {left: 304px; top: 60px; -moz-transform: rotate(60deg);}<br /> 46% {left: 306px; top: 70px; -moz-transform: rotate(90deg);}<br /> 48% {left: 310px; top: 80px; -moz-transform: rotate(120deg);}<br /> 50% {left: 315px; top: 90px; -moz-transform: rotate(150deg);}<br /> 80% {left: 315px; top: 90px; -moz-transform: rotate(150deg);}<br /> 82% {left: 310px; top: 80px; -moz-transform: rotate(120deg);}<br /> 84% {left: 306px; top: 70px; -moz-transform: rotate(90deg);}<br /> 86% {left: 304px; top: 60px; -moz-transform: rotate(60deg);}<br /> 88% {left: 302px; top: 50px; -moz-transform: rotate(30deg);}<br />100% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}<br />}</p> <p>@-moz-keyframes right-ear {<br />&nbsp; 0% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}<br /> 40% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}<br /> 42% {left: 68px; top: 50px; -moz-transform: rotate(-30deg);}<br /> 44% {left: 66px; top: 60px; -moz-transform: rotate(-60deg);}<br /> 46% {left: 64px; top: 70px; -moz-transform: rotate(-90deg);}<br /> 48% {left: 60px; top: 80px; -moz-transform: rotate(-120deg);}<br /> 50% {left: 55px; top: 90px; -moz-transform: rotate(-150deg);}<br /> 80% {left: 55px; top: 90px; -moz-transform: rotate(-150deg);}<br /> 82% {left: 60px; top: 80px; -moz-transform: rotate(-120deg);}<br /> 84% {left: 64px; top: 70px; -moz-transform: rotate(-90deg);}<br /> 86% {left: 66px; top: 60px; -moz-transform: rotate(-60deg);}<br /> 88% {left: 68px; top: 50px; -moz-transform: rotate(-30deg);}<br />100% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}<br />}</p> <p>@-moz-keyframes left-whiskers {<br />&nbsp; 0% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}<br /> 40% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}<br /> 42% {left: 320px; top: 120px; -moz-transform: rotate(-10deg);}<br /> 44% {left: 310px; top: 100px; -moz-transform: rotate(-20deg);}<br /> 46% {left: 300px; top: 80px; -moz-transform: rotate(-30deg);}<br /> 48% {left: 280px; top: 60px; -moz-transform: rotate(-40deg);}<br /> 50% {left: 265px; top: 50px; -moz-transform: rotate(-50deg);}<br /> 80% {left: 265px; top: 50px; -moz-transform: rotate(-50deg);}<br /> 82% {left: 280px; top: 60px; -moz-transform: rotate(-40deg);}<br /> 84% {left: 300px; top: 80px; -moz-transform: rotate(-30deg);}<br /> 86% {left: 310px; top: 100px; -moz-transform: rotate(-20deg);}<br /> 88% {left: 320px; top: 120px; -moz-transform: rotate(-10deg);}<br />100% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}<br />}</p> <p>@-moz-keyframes right-whiskers {<br />&nbsp; 0% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}<br /> 40% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}<br /> 42% {left: 35px; top: 120px; -moz-transform: rotate(10deg);}<br /> 44% {left: 45px; top: 100px; -moz-transform: rotate(20deg);}<br /> 46% {left: 55px; top: 80px; -moz-transform: rotate(30deg);}<br /> 48% {left: 75px; top: 60px; -moz-transform: rotate(40deg);}<br /> 50% {left: 90px; top: 50px; -moz-transform: rotate(50deg);}<br /> 80% {left: 90px; top: 50px; -moz-transform: rotate(50deg);}<br /> 82% {left: 75px; top: 60px; -moz-transform: rotate(40deg);}<br /> 84% {left: 55px; top: 80px; -moz-transform: rotate(30deg);}<br /> 86% {left: 45px; top: 100px; -moz-transform: rotate(20deg);}<br /> 88% {left: 35px; top: 120px; -moz-transform: rotate(10deg);}<br />100% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}<br />}</p> <p>@-moz-keyframes left-eye {<br />&nbsp; 0% {height: 48px; top: 95px; border-radius: 48px;}<br /> 40% {height: 48px; top: 95px; border-radius: 48px;}<br /> 50% {height: 0px; top: 90px; border-radius: 40px/5px;}<br /> 80% {height: 0px; top: 90px; border-radius: 40px/5px;}<br />100% {height: 48px;}<br />}</p> <p>@-moz-keyframes right-eye {<br />&nbsp; 0% {height: 48px; top: 95px; border-radius: 48px;}<br /> 40% {height: 48px; top: 95px; border-radius: 48px;}<br /> 50% {height: 0px; top: 90px; border-radius: 40px/5px;}<br /> 80% {height: 0px; top: 90px; border-radius: 40px/5px;}<br />100% {height: 48px;}<br />}</p> <p>@-moz-keyframes left-pupil {<br />&nbsp; 0% {top: 15px;}<br /> 40% {top: 15px;}<br /> 50% {top: -7px;}<br />100% {top: 15px;}<br />}</p> <p>@-moz-keyframes right-pupil {<br />&nbsp; 0% {top: 15px;}<br /> 40% {top: 15px;}<br /> 50% {top: -7px;}<br />100% {top: 15px;}<br />}</p> <p>@-moz-keyframes mouth {<br />&nbsp; 0% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 0; border: 1px solid #600;}<br /> 40% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}<br /> 55% {top: 45px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}<br /> 60% {top: 45px; width: 190px; height: 190px; left: 97px; border-radius: 190px; opacity: 1; border: 8px solid #600;}<br /> 85% {top: 45px; width: 190px; height: 190px; left: 97px; border-radius: 190px; opacity: 1; border: 8px solid #600;}<br /> 99% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}<br />100% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 0; border: 1px solid #600;}<br />}</p> <p>@-moz-keyframes tooth-tl {<br />&nbsp; 0% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}<br /> 55% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}<br /> 60% {margin-left: 45px; top: 2px; -moz-transform: scale(1);}<br /> 85% {margin-left: 45px; top: 2px; -moz-transform: scale(1);}<br /> 99% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}<br />100% {margin-left: 5px; top: 2px; -moz-transform: scale(0);}<br />}</p> <p>@-moz-keyframes tooth-tr {<br />&nbsp; 0% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}<br /> 55% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}<br /> 60% {margin-left: -55px; top: 2px; -moz-transform: scale(1);}<br /> 85% {margin-left: -55px; top: 2px; -moz-transform: scale(1);}<br /> 99% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}<br />100% {margin-left: -15px; top: 2px; -moz-transform: scale(0);}<br />}</p> <p>@-moz-keyframes tooth-bl {<br />&nbsp; 0% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}<br /> 55% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}<br /> 60% {margin-left: 45px; bottom: 2px; -moz-transform: scale(1);}<br /> 85% {margin-left: 45px; bottom: 2px; -moz-transform: scale(1);}<br /> 99% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}<br />100% {margin-left: 5px; bottom: 2px; -moz-transform: scale(0);}<br />}</p> <p>@-moz-keyframes tooth-br {<br />&nbsp; 0% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}<br /> 55% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}<br /> 60% {margin-left: -55px; bottom: 2px; -moz-transform: scale(1);}<br /> 85% {margin-left: -55px; bottom: 2px; -moz-transform: scale(1);}<br /> 99% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}<br />100% {margin-left: -15px; bottom: 2px; -moz-transform: scale(0);}<br />}</p> <p>@-moz-keyframes throat {<br />&nbsp; 0% {bottom: -70px; -moz-transform: scale(0);}<br /> 40% {bottom: -70px; -moz-transform: scale(0);}<br /> 55% {bottom: -50px; -moz-transform: scale(0.1);}<br /> 60% {bottom: 0px; -moz-transform: scale(1);}<br /> 85% {bottom: 0px; -moz-transform: scale(1);}<br /> 99% {bottom: -30px; -moz-transform: scale(0.1);}<br />100% {bottom: -70px; -moz-transform: scale(0);}<br />}</p> <p>@-moz-keyframes tongue {<br />&nbsp; 0% {-moz-transform: scale(0);}<br /> 40% {-moz-transform: scale(0);}<br /> 55% {-moz-transform: scale(0.1);}<br /> 60% {-moz-transform: scale(1);}<br /> 85% {-moz-transform: scale(1);}<br /> 99% {-moz-transform: scale(0.1);}<br />100% {-moz-transform: scale(0);}<br />}</p> <p>@-moz-keyframes uvula {<br />&nbsp; 0% {-moz-transform: rotate(0deg);}<br /> 25% {-moz-transform: rotate(5deg);}<br /> 50% {-moz-transform: rotate(0deg);}<br /> 75% {-moz-transform: rotate(-5deg);}<br />100% {-moz-transform: rotate(0deg);}<br />}</p> <p>/* Else Google */ <br />@-webkit-keyframes left-ear { <br />&nbsp; 0% {left:300px; top:40px; -webkit-transform:rotate(0deg);} <br /> 40% {left:300px; top:40px; -webkit-transform:rotate(0deg);} <br /> 42% {left:302px; top:50px; -webkit-transform:rotate(30deg);} <br /> 44% {left:304px; top:60px; -webkit-transform:rotate(60deg);} <br /> 46% {left:306px; top:70px; -webkit-transform:rotate(90deg);} <br /> 48% {left:310px; top:80px; -webkit-transform:rotate(120deg);} <br /> 50% {left:315px; top:90px; -webkit-transform:rotate(150deg);} <br /> 80% {left:315px; top:90px; -webkit-transform:rotate(150deg);} <br /> 82% {left:310px; top:80px; -webkit-transform:rotate(120deg);} <br /> 84% {left:306px; top:70px; -webkit-transform:rotate(90deg);} <br /> 86% {left:304px; top:60px; -webkit-transform:rotate(60deg);} <br /> 88% {left:302px; top:50px; -webkit-transform:rotate(30deg);} <br />100% {left:300px; top:40px; -webkit-transform:rotate(0deg);} <br /> } </p> <p>@-webkit-keyframes right-ear { <br />&nbsp; 0% {left:70px; top:40px; -webkit-transform:rotate(0deg);} <br /> 40% {left:70px; top:40px; -webkit-transform:rotate(0deg);} <br /> 42% {left:68px; top:50px; -webkit-transform:rotate(-30deg);} <br /> 44% {left:66px; top:60px; -webkit-transform:rotate(-60deg);} <br /> 46% {left:64px; top:70px; -webkit-transform:rotate(-90deg);} <br /> 48% {left:60px; top:80px; -webkit-transform:rotate(-120deg);} <br /> 50% {left:55px; top:90px; -webkit-transform:rotate(-150deg);} <br /> 80% {left:55px; top:90px; -webkit-transform:rotate(-150deg);} <br /> 82% {left:60px; top:80px; -webkit-transform:rotate(-120deg);} <br /> 84% {left:64px; top:70px; -webkit-transform:rotate(-90deg);} <br /> 86% {left:66px; top:60px; -webkit-transform:rotate(-60deg);} <br /> 88% {left:68px; top:50px; -webkit-transform:rotate(-30deg);} <br />100% {left:70px; top:40px; -webkit-transform:rotate(-0deg);} <br />} </p> <p>@-webkit-keyframes left-whiskers { <br />&nbsp; 0% {left:330px; top:140px; -webkit-transform:rotate(0deg);} <br /> 40% {left:330px; top:140px; -webkit-transform:rotate(0deg);} <br /> 42% {left:320px; top:120px; -webkit-transform:rotate(-10deg);} <br /> 44% {left:310px; top:100px; -webkit-transform:rotate(-20deg);} <br /> 46% {left:300px; top:80px; -webkit-transform:rotate(-30deg);} <br /> 48% {left:280px; top:60px; -webkit-transform:rotate(-40deg);} <br /> 50% {left:265px; top:50px; -webkit-transform:rotate(-50deg);} <br /> 80% {left:265px; top:50px; -webkit-transform:rotate(-50deg);} <br /> 82% {left:280px; top:60px; -webkit-transform:rotate(-40deg);} <br /> 84% {left:300px; top:80px; -webkit-transform:rotate(-30deg);} <br /> 86% {left:310px; top:100px; -webkit-transform:rotate(-20deg);} <br /> 88% {left:320px; top:120px; -webkit-transform:rotate(-10deg);} <br />100% {left:330px; top:140px; -webkit-transform:rotate(0deg);} <br />} </p> <p>@-webkit-keyframes right-whiskers { <br />&nbsp; 0% {left:25px; top:140px; -webkit-transform:rotate(0deg);} <br /> 40% {left:25px; top:140px; -webkit-transform:rotate(0deg);} <br /> 42% {left:35px; top:120px; -webkit-transform:rotate(10deg);} <br /> 44% {left:45px; top:100px; -webkit-transform:rotate(20deg);} <br /> 46% {left:55px; top:80px; -webkit-transform:rotate(30deg);} <br /> 48% {left:75px; top:60px; -webkit-transform:rotate(40deg);} <br /> 50% {left:90px; top:50px; -webkit-transform:rotate(50deg);} <br /> 80% {left:90px; top:50px; -webkit-transform:rotate(50deg);} <br /> 82% {left:75px; top:60px; -webkit-transform:rotate(40deg);} <br /> 84% {left:55px; top:80px; -webkit-transform:rotate(30deg);} <br /> 86% {left:45px; top:100px; -webkit-transform:rotate(20deg);} <br /> 88% {left:35px; top:120px; -webkit-transform:rotate(10deg);} <br />100% {left:25px; top:140px; -webkit-transform:rotate(0deg);} <br />} </p> <p>@-webkit-keyframes left-eye { <br />&nbsp; 0% {height:48px; top:95px; border-radius:48px;} <br /> 40% {height:48px; top:95px; border-radius:48px;} <br /> 50% {height:0; top:90px; border-radius: 40px/5px;} <br /> 80% {height:0; top:90px; border-radius: 40px/5px;} <br />100% {height:48px;} <br />} </p> <p>@-webkit-keyframes right-eye { <br />&nbsp; 0% {height:48px; top:95px; border-radius:48px;} <br /> 40% {height:48px; top:95px; border-radius:48px;} <br /> 50% {height:0; top:90px; border-radius: 40px/5px;} <br /> 80% {height:0; top:90px; border-radius: 40px/5px;} <br />100% {height:48px;} <br />}</p> <p>@-webkit-keyframes left-pupil { <br />&nbsp; 0% {top:15px;} <br /> 40% {top:15px;} <br /> 50% {top:-7px;} <br />100% {top:15px;} <br />} </p> <p>@-webkit-keyframes right-pupil { <br />&nbsp; 0% {top:15px;} <br /> 40% {top:15px;} <br /> 50% {top:-7px;} <br />100% {top:15px;} <br />} </p> <p>@-webkit-keyframes mouth { <br />&nbsp; 0% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:0; border:1px solid #600;} <br /> 40% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;} <br /> 55% {top:45px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;} <br /> 60% {top:45px; width:190px; height:190px; left: 97px; border-radius: 190px/190px; opacity:1; border:8px solid #600;} <br /> 85% {top:45px; width:190px; height:190px; left: 97px; border-radius: 190px/190px; opacity:1; border:8px solid #600;} <br /> 99% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;} <br />100% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:0; border:1px solid #600;} <br />}</p> <p>@-webkit-keyframes tooth-tl { <br />&nbsp; 0% {margin-left:5px; top:0px; -webkit-transform: scale(0);} <br /> 55% {margin-left:5px; top:0px; -webkit-transform: scale(0);} <br /> 60% {margin-left:45px; top:2px; -webkit-transform: scale(1);} <br /> 85% {margin-left:45px; top:2px; -webkit-transform: scale(1);} <br /> 99% {margin-left:5px; top:0px; -webkit-transform: scale(0);} <br />100% {margin-left:5px; top:2px; -webkit-transform: scale(0);} <br />} </p> <p>@-webkit-keyframes tooth-tr { <br />&nbsp; 0% {margin-left:-15px; top:0px; -webkit-transform: scale(0);} <br /> 55% {margin-left:-15px; top:0px; -webkit-transform: scale(0);} <br /> 60% {margin-left:-55px; top:2px; -webkit-transform: scale(1);} <br /> 85% {margin-left:-55px; top:2px; -webkit-transform: scale(1);} <br /> 99% {margin-left:-15px; top:0px; -webkit-transform: scale(0);} <br />100% {margin-left:-15px; top:2px; -webkit-transform: scale(0);} <br />}</p> <p>@-webkit-keyframes tooth-bl { <br />&nbsp; 0% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);} <br /> 55% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);} <br /> 60% {margin-left:45px; bottom:2px; -webkit-transform: scale(1);} <br /> 85% {margin-left:45px; bottom:2px; -webkit-transform: scale(1);} <br /> 99% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);} <br />100% {margin-left:5px; bottom:2px; -webkit-transform: scale(0);} <br />}</p> <p>@-webkit-keyframes tooth-br { <br />&nbsp; 0% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);} <br /> 55% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);} <br /> 60% {margin-left:-55px; bottom:2px; -webkit-transform: scale(1);} <br /> 85% {margin-left:-55px; bottom:2px; -webkit-transform: scale(1);} <br /> 99% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);} <br />100% {margin-left:-15px; bottom:2px; -webkit-transform: scale(0);} <br />}</p> <p>@-webkit-keyframes throat { <br />&nbsp; 0% {bottom:-70px; -webkit-transform: scale(0);} <br /> 40% {bottom:-70px; -webkit-transform: scale(0);} <br /> 55% {bottom:-50px; -webkit-transform: scale(0.1);} <br /> 60% {bottom:0; -webkit-transform: scale(1);} <br /> 85% {bottom:0; -webkit-transform: scale(1);} <br /> 99% {bottom:-30px; -webkit-transform: scale(0.1);} <br />100% {bottom:-70px; -webkit-transform: scale(0);} <br />}</p> <p>@-webkit-keyframes tongue { <br />&nbsp; 0% {-webkit-transform: scale(0);} <br /> 40% {-webkit-transform: scale(0);} <br /> 55% {-webkit-transform: scale(0.1);} <br /> 60% {-webkit-transform: scale(1);} <br /> 85% {-webkit-transform: scale(1);} <br /> 99% {-webkit-transform: scale(0.1);} <br />100% {-webkit-transform: scale(0);} <br />}</p> <p>@-webkit-keyframes uvula { <br />&nbsp; 0% {-webkit-transform:rotate(0deg);} <br /> 25% {-webkit-transform:rotate(5deg);} <br /> 50% {-webkit-transform:rotate(0deg);} <br /> 75% {-webkit-transform:rotate(-5deg);} <br />100% {-webkit-transform:rotate(0deg);} <br />}<br />&nbsp; &nbsp; &lt;/style&gt;</p> <p>&lt;div id=&quot;content&quot;&gt;<br />&nbsp; &nbsp; &lt;div id=&quot;info&quot;&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;cat&quot;&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;head&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;body&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;left-leg&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;right-leg&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;left-paw&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;right-paw&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;left-ear&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;right-ear&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;left-whiskers&quot;&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;w1&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;w3&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;w5&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;right-whiskers&quot;&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;w2&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;w4&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;w6&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;left-eye&quot;&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;left-pupil&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;right-eye&quot;&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;right-pupil&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;tail&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;mouth&quot;&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;tooth-tl&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;tooth-tr&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;tooth-bl&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;tooth-br&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;throat&quot;&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;uvula&quot;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp;&lt;div class=&quot;tongue&quot;&gt;&lt;/div&gt;</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<br />&nbsp; &nbsp; &lt;/div&gt;<br />&lt;/div&gt;[/html]</p></blockquote></div><p>Этот котик нарисован на чистом CSS и HTML.<br />Конечно, сложно сразу вскочить на такой уровень, да и мало, кто таким заморачивается, но уж &quot;рисовать&quot; простые рамочки и раскрашивать одноцветные фоны вы однозначно сможете без фотошопа. <img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" /></p> <p><a href="https://forumd.ru/viewtopic.php?id=6308#ogl">Наверх к оглавлению</a></p><hr /><p><span style="color: #e63737">контент в разработке:</span><br />проблема &quot;циганских юбок&quot; <br />проблема &quot;бутербродов&quot;</p><div class="no-prof" id="block-181490-10"><p>no-prof</p></div> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">+4</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> </ul> </div> </div> </div> </div> <div class="linksb"> <div class="postlink"><span class="closed">Тема закрыта</span></div> <div class="pagelink">Страница: <strong>1</strong></div> </div> <!-- topic_banner_bottom --> </div> <script type="text/javascript">$(document).trigger("pun_main_ready");</script> <!-- pun_stats --> <!-- banner_mini_bottom --> <!-- banner_bottom --> <div id="pun-break3" class="divider"><hr /></div> <div id="pun-crumbs2" class="section"> <p class="container crumbs"><strong>Вы здесь</strong> <em>&#187;&#160;</em><a href="https://forumd.ru/">ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов</a> <em>&#187;&#160;</em><a href="https://forumd.ru/viewforum.php?id=7">Библиотека статей, гайдов, уроков</a> <em>&#187;&#160;</em><a href="https://forumd.ru/viewforum.php?id=176">Вебдизайн, HTML, CSS</a> <em>&#187;&#160;</em>Как сделать дизайн форума/сайта? Все о создании своего дизайна.</p> </div> <div id="pun-break4" class="divider"><hr /></div> <div id="pun-about" class="section"> <p class="container"> </p> </div> <script type="text/javascript">$(document).trigger("pun_about_ready"); if (typeof ym == 'object') {ym(201230, 'userParams', {UserId:1, is_user:0}); ym(201230, 'params', {forum_id: 517111});}</script> <div id="html-footer" class="section"> <div class="container"><script> </script> <!-- переключение языка --> <script> if ((!window['UserID'] || 1 == UserID) && !['ru', 'ru-RU'].includes(navigator.language) && !~document.cookie.indexOf('lang=')) {document.cookie = "lang=en"; location.reload()} var i,smbCodeArr=[];var arr0=[1026,1027,8218,1107,8222,8230,8224,8225,8364,8240,1033,8249,1034,1036,1035,1039,1106,8216,8217,8220,8221,8226,8211,8212,"0",8482,1113,8250,1114,1116,1115,1119,160,1038,1118,1032,164,1168,166,167,1025,169,1028,171,172,173,174,1031,176,177,1030,1110,1169,181,182,183,1105,8470,1108,187,1112,1029,1109,1111];for(i=0;i<arr0.length;i++)smbCodeArr[arr0[i]]=i+128;for(i=1040;i<=1103;i++)smbCodeArr[i]=i-848; var encodeURIwin1251=function(str){for(var arr=str.split(""),n,i=0;i<arr.length;i++){n=arr[i].charCodeAt();if(n>187&&n<1025||n>1105)arr[i]="&#"+n+";";if(typeof smbCodeArr[n]!="undefined")arr[i]=String.fromCharCode(smbCodeArr[n])}return escape(arr.join("")).replace(/\+/mg,"%2B")};$.fn.extend({serialize:function(){var i=0,s="",obj=this.serializeArray(),Lng=obj.length;for(;i<Lng;i++)s+=(i?"&":"")+encodeURIwin1251(obj[i].name)+"="+encodeURIwin1251(obj[i].value);return s}}); function changeLang(){if(window["UserID"]&&1!=UserID){var url=location.origin+"/profile.php?section=essentials&id="+UserID;$.ajax({url:url,async:false,success:function(res){var f=$(res).find("#profile1");"en"!=f.find('select[name="req_lang"]').val()?f.find('select[name="req_lang"]').val("en"):f.find('select[name="req_lang"]').val("ru");data=f.serialize();var curl=document.URL;history.replaceState(null,"",url);$.ajax({url:url,async:false,data:data,type:"POST",success:function(res){history.replaceState(null, "",curl);location.reload()}})}})}else{$("#pun.en").length?document.cookie="lang=ru":document.cookie="lang=en";location.reload()}}$("#langChange").on("click",changeLang); </script> <!-- изменение кода страниц --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/43819.js?v=5" defer></script> <!-- сайдбар --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/67067.js?v=2" defer></script> <!-- главная форума --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/25287.js?v=5" defer></script> <!-- топиклист --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/13065.js?v=2" defer></script> <!-- подписки в топиклисте --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/26591.js?v=19" defer></script> <!-- топики --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/49006.js?v=5" defer></script><!-- юзерлист --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/18416.js?v=4" defer></script><!-- ЛС --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/20727.js?v=17" defer></script><!-- Профиль --> <!--Добавляем ссылку на форум в crumbs --> <script> if(!$("#pun-index").length&&document.URL.indexOf("/pages/index")==-1){ var s=' »&nbsp;<a href="/=&forum"><span class="cr-txt rus">Форум</span><span class="cr-txt eng">Forum</span></a>'; if ($('#pun').hasClass('en')) { $(".crumbs").find("a:first").text('Home page').after(s) } else { $(".crumbs").find("a:first").text('Главная страница').after(s) } }; if($(".punbb").attr("id")=="pun-index"){ var s=' »&nbsp;<a href="/pages/index" class="rus">Главная страница</a><a href="/pages/index-eng" class="eng">Home page</a> »&nbsp;\ <a href="/=&forum"><span class="cr-txt rus">Форум</span><span class="cr-txt eng">Forum</span></a>'; $(".crumbs").html(s); }; </script> <!-- Аватар и ссылка в цитате © Alex_63 / Мод: Gerda, ForumD.ru --> <script>var FdQuoteAva = '<i class="fa-solid fa-user"></i>';</script> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/79040.js"></script> <script type="text/javascript">setLinkAndAva()</script> <!-- HTML в постах с допуском по группам © Alex_63 --> <script type="text/javascript" src="/files/0015/c4/3f/52361.js"></script> <script type="text/javascript"> HTMLinPost.groups = [1,2]; // Группы, допущенные к вставке HTML в посты HTMLinPost.noAccess = ['Дух осени','Maquis','Romych','Duka']; // Пользователи с запретом вставки HTML в посты HTMLinPost.parseHTMLinPosts() </script> <!-- Выделение и разворот кода © ForumD.ru, Gerda --> <script type="text/javascript"> $(document).ready(function() { $('.code-box').each(function() { var $codeBox = $(this); $codeBox.parents('.code-css').find('pre').wrapInner('<code class="language-css line-numbers"></code>'); $codeBox.parents('.code-javascript').find('pre').wrapInner('<code class="language-javascript line-numbers"></code>'); $codeBox.parents('.code-html').find('pre').wrapInner('<code class="language-html line-numbers"></code>'); $codeBox.find('.legend').html('<span class="copy-code" href="javascript:void(0);"><i><gg class="rus">Скопировать код</gg><gg class="eng">Copy code</gg></i><b><gg class="rus">Скопировано</gg><gg class="eng">Copied</gg></b></span>'); $codeBox.find('.legend').append('<span class="expand-code"><i><gg class="rus">Развернуть</gg><gg class="eng">Expand</gg></i><b><gg class="rus">Свернуть</gg><gg class="eng">Collapse</gg></b></span>'); $codeBox.find('.copy-code').on('click', function () { $codeBox.addClass('copied'); var textarea = document.createElement('textarea'); textarea.value = $codeBox.find('.scrollbox pre').text(); document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); console.log('Код скопирован успешно:', textarea.value); } catch (err) { console.error('Ошибка копирования кода:', err); } finally { document.body.removeChild(textarea); } }); $codeBox.find('.expand-code').on('click', function () { $codeBox.toggleClass('expanded'); }); }); }); </script> <!-- подсветка кода --> <link href="https://forumstatic.ru/files/0007/e3/f7/65930.css" rel="stylesheet"> <script src="https://forumstatic.ru/files/0007/e3/f7/20627.js" async></script> <!-- Полноэкранный просмотр изображений v.3 © ForumD, satsana & Gerda --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/97612.js?v=3" async></script> <!-- Автоматическая подписка на темы --> <script>(function(){var forumLnk=$('#pun-crumbs1 a[href*="viewforum.php"]:last');if(!forumLnk.length)return;if(~[5,6,19].indexOf(+forumLnk.attr('href').match(/id=(\d+)/)[1]))$('#fld6').parent('.checkfield').remove(),$('#pun-viewtopic,#pun-post').find('#post .areafield').append('<input type="checkbox" checked style="display:none" id="fld6" name="subscribe"/>');})()</script> <!-- цветовыделение должностей и мастеров --> <script> $(document).ready(function() { function addDutyClass(element, userId) { var userDuty = dutyData.find(item => String(item.id) === String(userId)); if (userDuty) { $(element).addClass(userDuty.color); } } function addVerifiedClass(element, userId) { var verifiedUser = verifiedData.find(item => String(item.id) === String(userId)); if (verifiedUser) { $(element).addClass(verifiedUser.color); } } $('.post-content a, a.post-mention, #onlinelist a, .modmenu a, .tcl.username a, .tcl.tc-username a, .tc2.pmtc22 a').each(function () { var href = $(this).attr('href'); var userIdMatch = href.match(/\/profile\.php\?id=(\d+)$/); if (userIdMatch) { var userId = userIdMatch[1]; addDutyClass(this, userId); addVerifiedClass(this, userId); } }); }); </script> <!-- Проверка имени при регистрации © Alex_63 --> <style> #username.normal {background-color: #abd4af !important; border: 2px solid #26af33; color: #2f5325;} #username.error {background-color: #e7b8b8 !important; border: 2px solid #e63737; color: #6c1313;} .stclr {margin-left: 10px;} .stclr.normal{color: #26af33; font-family: 'Bebas Neue', 'Book Antiqua'; text-transform: uppercase; font-size: 22px;} .stclr.error {color: #e63737; font-family: 'Bebas Neue', 'Book Antiqua'; text-transform: uppercase; font-size: 22px;} img.preloader{width:12px;height:12px;margin-left:3px;} </style> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/28064.js" defer></script> <!-- Чекбокс "Выбрать все" при модерировании темы и форума © Alex_63 --> <script type="text/javascript">if($('#pun-modviewforum').length){$('th.tcmod').html('Выбрать все: <input type="checkbox" id="CheckAll" title="Выбрать все">');$('#CheckAll').click(function(){if($('#CheckAll').attr('checked')){$(this).parents('table').find('td.tcmod input[type="checkbox"]').attr('checked',true);}else{$(this).parents('table').find('td.tcmod input[type="checkbox"]').attr('checked',false);}});}else if(GroupID<=2 && $('.punbb[id^="pun-multi"]').length){$('.modmenu .button').before('<span>Выбрать все</span><input type="checkbox" id="CheckAll" title="Выбрать все">');$('#CheckAll').click(function(){if($('#CheckAll').attr('checked')){$(this).parents('#pun-main').find('.pl-select input[type="checkbox"]').attr('checked',true);}else{$(this).parents('#pun-main').find('.pl-select input[type="checkbox"]').attr('checked',false);}});}</script> <!-- Всплывающие Подсказки --> <style> #tooltip { display: none; position: absolute; z-index: 9999999999999999; background: rgba(0,0,0,0.8); color: #fff; padding: 5px 8px; border-radius: 4px; max-width: 250px; } </style> <script type="text/javascript"> jQuery.fn.quicktip = function(options){ var defaults = { speed: 500, xOffset: 26, yOffset: -5 }; var options = $.extend(defaults, options); return this.each(function(){ var $this = jQuery(this); var tipTitle = $this.attr('title'); if (tipTitle) { $this.removeAttr('title'); $this.on('mouseover', function(e) { $(this).css('cursor', 'pointer'); $("body").append("<div id='tooltip'>" + tipTitle + "</div>"); $("#tooltip") .css("top", (e.pageY + defaults.xOffset) + "px") .css("left", (e.pageX + defaults.yOffset) + "px") .fadeIn(options.speed); }).on('mouseout', function(e) { $("#tooltip").remove(); }); $this.mousemove(function(e) { $("#tooltip") .css("top", (e.pageY + defaults.xOffset) + "px") .css("left", (e.pageX + defaults.yOffset) + "px"); }); } }); }; // Добавление подсказок $('.post abbr').attr('data-title', function() { return $(this).attr('title') }); $(function() {$(window).on('load', function() { $('.post abbr').attr('title', function() { return $(this).attr('data-title') }); $('*[title]').quicktip({ speed: 700 }); });}); </script> <!-- костыли английской версии --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/52360.js?v=2"></script> <!-- кастомные селекты --> <script> var fdSelects = '#punbbsearch select, #userlist select, #birthday select, #form-area select, .questionary-post select'; </script> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/66411.js" defer></script> <!-- Форма постинга рекламы --> <script> const piarTopicsPrefix = '[Реклама]'; //начало названия топиков, в которых будет форма const piarForumId = '186'; //id форума, в котором лежат топики, в которых будет форма const isPiarTopic = FORUM.topic?.subject.startsWith(piarTopicsPrefix) && FORUM.topic?.forum_id === piarForumId; if (location.pathname === '/viewtopic.php' && isPiarTopic) { const saveToLS = (data) => localStorage.setItem('pr_values', JSON.stringify(data)); const getFromLS = () => JSON.parse(localStorage.getItem('pr_values') || "false"); const removeFromLS = () => localStorage.removeItem('pr_values'); if (GroupID === 3){ const defaultReply = document.querySelector('#post-form'); if (defaultReply) defaultReply.remove(); const piarLogin = 'Ролевой Курьер'; //логин пиар-аккаунта const piarPassword = '1234'; //пароль пиар-аккаунта let linkError = ''; let codeError = ''; const validateFields = (fields) => true; const markup = ` <div id='piar_reply_emulator' class='container'> <form> <fieldset> <legend>Разместить рекламу</legend> <p style="display: grid; grid-template-columns: 1fr;"${linkError ? " class=has-error" : ""}> <label for="our_piar_link">Ссылка на ответную рекламу</label> ${linkError} <input type="text" id="our_piar_link" name="our_piar_link"> </p> <p${codeError ? " class=has-error" : ""}> <label for="your_piar_code">Код вашей рекламы</label><br> ${codeError} <textarea id="your_piar_code" name="your_piar_code" rows="13"></textarea> </p> </fieldset> <p><input type="submit"></p> </form> </div>`; const bottomPagination = document.querySelector('.linksb'); bottomPagination.insertAdjacentHTML('afterend', markup); const piarReplyEmulatorForm = bottomPagination.nextElementSibling.querySelector('form'); piarReplyEmulatorForm.addEventListener('submit', async (ev) => { ev.preventDefault(); const values = {}; for(let elem of piarReplyEmulatorForm){ if(['text', 'textarea'].includes(elem.type)) values[elem.name] = elem.value || '' } if (!validateFields(values)) return false; saveToLS(values); const loginFormMarkup = ` <form id="login" class="container" method="post" action="${location.origin}/login.php?action=in" onsubmit="return true"> <input type="hidden" name="form_sent" value="1"> <input type="hidden" name="redirect_url" value="${location.href}"> <input type="text" id="fld1" name="req_username" size="25" maxlength="25" value="${piarLogin}"> <input type="password" id="fld2" name="req_password" size="16" maxlength="16" value="${piarPassword}"> </form>`; const container = document.createElement('div'); container.innerHTML = loginFormMarkup; document.querySelector('body').append(container); const event = new Event("submit"); container.querySelector('form').submit(); }) } else { const pr_data = getFromLS(); if(pr_data) { document.querySelector('#main-reply').value = ` ${pr_data.your_piar_code} [b]Ваша:[/b] ${pr_data.our_piar_link}`.trim(); removeFromLS(); document.querySelector('#post-form #post').submit?.click() const logoutUrl = `${location.origin}/login.php?action=out&id=${window.UserID}` fetch(logoutUrl); } } } </script> <!-- Баннеры конкурса --> <div class="comp-banner" style="display: none;"> <a href="https://memecross.rusff.me/" target="_blank" title="Meme Crossover"><img src="https://i.ibb.co/Bs2Tsy3/84101.gif"></a> <a href="https://theraven.rusff.me/" target="_blank" title="The raven"><img src="https://forumupload.ru/uploads/001c/00/4d/5/220581.gif"></a> <a href="https://thedome.rusff.me/" target="_blank" title="the dome"><img src="https://forumupload.ru/uploads/001b/60/aa/48/821676.png"></a> <a href="https://curama.mybb.ru" target="_blank" title="Наруто: Печать времени"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/627857.gif"></a> <a href="https://primaltotem.hstn.me/" target="_blank" title="Ойкумена: до начала времен"><img src="https://i.imgur.com/wPEJEYI.gif"></a> </div> <script> $(document).ready(function() { var $compBanner = $('.comp-banner'); var $banners = $compBanner.children(); for (var i = $banners.length - 1; i >= 0; i--) { $compBanner.append($banners.eq(Math.floor(Math.random() * (i + 1)))); } var $clonedBanner = $compBanner.clone().css('display', 'flex'); var forumSelectors = ['#forum_f192', '#forum_f193', '#forum_f194', '#forum_f195']; $.each(forumSelectors, function(index, selector) { var $forum = $(selector); if ($forum.length) { var $descBanner = $forum.find('.desc-banner').after($clonedBanner); } }); var $banners2 = $('.comp-banner2'); for (var i = $banners2.children.length; i >= 0; i--) { $banners2.appendChild($banners2.children[Math.random() * i | 0]); } }); </script> <style> .comp-banner2 p {display: flex;} .comp-banner, .comp-banner2 p { justify-content: center; gap: 5px; flex-wrap: wrap; } .comp-banner2 img {width: 468px; height: 60px;} </style> <!--Копирайт--> <div id="bottom"><div class="inner"> <div id="fdcop1" class="fdcop rus"><a href="/viewtopic.php?id=4505" target='blank'>Отзывы</a> | <a href='/viewtopic.php?id=8309' target='blank'>Сообщить об ошибке</a> | <a href='/viewtopic.php?id=6616' target='blank'>Помочь нам</a> | <a href='/misc.php?action=rules' target='blank'>Правила проекта</a></div> <div id="fdcop2" class="fdcop icons rus"> <a href="https://discord.com/invite/rNWtvk7" target="_blank" title="Наш сервер на дискорде для заказов"><i class="fa-brands fa-discord"></i></a> <a href="/viewtopic.php?id=4506" title="Диалог с администрацией"><i class="fa-regular fa-comment"></i></a> <a href="/viewtopic.php?id=6616" title="Поддержать проект"><i class="fa-solid fa-hand-holding-heart"></i></a> <a href="https://vk.com/forumd" target="_blank" title="Мы в ВК"><i class="fa-brands fa-vk"></i></a> <a href="https://www.youtube.com/@forumd-ru" target="_blank" class="tip" title="Канал на Ютубе"><i class="fa-brands fa-youtube"></i></a> <a href="https://boosty.to/forumd.ru" target="_blank" title="Подписки/донаты на Boosty"><i class="fa-solid fa-money-check-dollar"></i></a> <a href="https://www.donationalerts.com/r/forumdru" target="_blank" title="Донаты на DonationAlerts"><i class="fa-solid fa-coins"></i></a> </div> <div id="fdcop2" class="fdcop icons eng"> <a href="https://discord.gg/Vz8GGZT" target="_blank" title="Our Discord server"><i class="fa-brands fa-discord"></i></a> <a href="/viewtopic.php?id=4506" target="_blank" title="Dialogue with the administration"><i class="fa-regular fa-comment"></i></a> <a href="https://vk.com/forumd" target="_blank" title="Our VK page"><i class="fa-brands fa-vk"></i></a> <a href="https://www.youtube.com/@forumd-ru" target="_blank" title="Our Youtube channel"><i class="fa-brands fa-youtube"></i></a> <a href="https://boosty.to/forumd.ru" target="_blank" title="Subscribe/Donate on Boosty"><i class="fa-solid fa-money-check-dollar"></i></a> <a href="https://www.donationalerts.com/r/forumdru" target="_blank" title="Donate on DonationAlerts"><i class="fa-solid fa-coins"></i></a> </div> <div class="fdcop rus">© ForumD.ru, 2009-2024<br> <a href="https://forumd.ru/viewtopic.php?id=5751#rule" target="_blank">Условия использования бесплатного контента</a></div> <div class="fdcop eng">© ForumD.ru, 2009-2024<br> When publishing our content, please leave a link to the source.</div> <div id="fdbotBANNER" class="fdcop rus"><!-- баннеры --> <!-- форум Coffee table knight --> <a href="https://abyssus.f-rpg.me/" target="_blank"><img src="https://forumupload.ru/uploads/001c/36/d0/3/228996.png" title="Supermassive Black Cross"></a> <!-- форум magia --> <a href="https://magia-frpg.ru/" target="_blank" title="MAGIA"><img src="https://forumupload.ru/uploads/001a/fa/19/2/153026.gif"></a> <!-- ЛИЛ, взаимный референс --><a href="https://urchoice.su" class="tip" title="Каталог форумов" target="_blank"><img src="https://forumstatic.ru/files/000b/09/4f/61730.png"></a> <!-- референс к подкастерам, Герда --> <a href="https://urchoice.su/viewtopic.php?id=58390#p2160217" class="tip" title="Подкаст «НеТЕролевые» - Рассказываем и обсуждаем ФРПГ" target=_blank><img src="https://forumupload.ru/uploads/0014/80/a5/2/729997.png"></a> <!-- рпг-хит - референс --> <a href="http://rpg-hit.ru/vote/forumcard/id/38" title="каталог ролевых: RPG-HIT" target="_blank" class="tip"><img src="https://forumstatic.ru/files/001b/c3/c4/23464.gif"></a> <!-- Top.Roleplay.Ru --> <script type="text/javascript" language="javascript"> var topRPGc="<img src='https://s02.rpgtop.su/cgi-bin-mod/iv.cgi?a=ins&id=26353&rnd=" + Math.random(); topRPGc += "&r="+escape(document.referrer)+"' width='1' height='1' border='0'><a href='https://rpgtop.su/26353' title='Рейтинг Ролевых Ресурсов - RPG TOP' target='_blank'>"+ "<img src='//img.rpgtop.su/88x31x11x8.gif' class='tip' title='Рейтинг Ролевых Ресурсов - RPG TOP' border='0' width='88' height='31'></a> "; document.write(topRPGc); </script> <noscript> <img src='//s02.rpgtop.su/cgi-bin-mod/iv.cgi?a=ins&id=26353' width='1' height='1' border='0'><a href='https://rpgtop.su/26353' class="tip" title='Рейтинг Ролевых Ресурсов - RPG TOP' target='_blank'><img src='//img.rpgtop.su/88x31x11x8.gif' border='0' width='88' height='31'></a> </noscript> <!-- /Top.Roleplay.Ru --> <!-- Yandex.Metrika informer --> <a href="https://metrika.yandex.ru/stat/?id=93794845&amp;from=informer" target="_blank" rel="nofollow"><img src="https://informer.yandex.ru/informer/93794845/3_1_EFEFEFFF_EFEFEFFF_0_uniques" style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" class="ym-advanced-informer" data-cid="93794845" data-lang="ru" /></a> <!-- /Yandex.Metrika informer --> </div> <div id="fdbotMENU" class="rus"> <div class="bmenu"><span>Заказать</span> <ul> <li><a href="/viewtopic.php?id=5760" target='blank'>Дизайн для форумов/сайтов</a></li> <li><a href="/viewtopic.php?id=5768" target='blank'>Графика и арт</a></li> <li><a href="/viewtopic.php?id=6322" target='blank'>Аватары и подписи</a></li> <li><a href="/viewtopic.php?id=5769" target='blank'>Стримы и соцсети</a></li> <li><a href="/viewtopic.php?id=5771" target='blank'>Скрипты и техоснащение</a></li> </ul> </div> <div class="bmenu"><span>Полезное</span> <ul> <li><a href="/viewtopic.php?id=2791" target='blank'>Бесплатные MyBB-дизайны</a></li> <li><a href="/viewtopic.php?id=7051" target='blank'>Бесплатные макеты</a></li> <li><a href="/pages/allscripts" target='blank'>Бесплатные скрипты и коды</a></li> <li><a href="/viewforum.php?id=7" target='blank'>Гайды по вебдизайну</a></li> <li><a href="/viewforum.php?id=96" target='blank'>Поиск специалистов</a></li> </ul> </div> <div class="bmenu"><span>Заказчикам</span> <ul> <li><a href="/viewforum.php?id=75" target='blank'>Техническая поддержка</a></li> <li><a href="/viewforum.php?id=1" target='blank'>Размещение рекламы форума/сайта</a></li> <li><a href="/viewtopic.php?id=5762" target='blank'>Условия работы ForumD.ru</a></li> <li><a href="/viewtopic.php?id=3434" target='blank'>Правила оформления заказов</a></li> </ul> </div> <div class="bmenu"><span>Специалистам</span> <ul> <li><a href="/viewforum.php?id=90" target='blank'>Размещение портфолио</a></li> <li><a href="/viewtopic.php?id=5788" target='blank'>Присоединиться к команде ForumD.ru</a></li> <li><a href="/viewtopic.php?id=6036" target='blank'>Бонусы и привилегии</a></li> <li><a href="/viewtopic.php?id=3434" target='blank'>Правила выполнения заказов</a></li> </ul> </div> </div> <div class="stat-place"></div> </div></div> <!-- ------------------------------------------------------------------------------ --> <!-- Спецпосты - скрипт --> <script type="text/javascript"> ((topic, search, result) => { $(topic).toggleClass(result, $('.post-content .' + search, topic).length > 0); })($('#pun-main'), 'portfoliopost', 'portfoliotopic'); ((topic, search, result) => { $(topic).toggleClass(result, $('.post-content .' + search, topic).length > 0); })($('#pun-main'), 'anketa-hide', 't-anketa'); $('#pun-edit .portfoliotopic h1').after('<div id="portprew"><div class="topic"><div class="post"><div class="container"><div class="post-body"></div></div></div></div></div>'); $('#pun-post .portfoliotopic h1').after('<div id="portprew"><div class="topic"><div class="post"><div class="container"><div class="post-body"></div></div></div></div></div>'); $('#post-preview .post-box').appendTo('#portprew .post-body'); $('.no-prof:contains("no-prof")').parents('.post').addClass('no-prof'); $('.portfoliopost:contains("portfoliopost")').parents('.post').addClass('portfolio'); $('.forsalepost:contains("forsalepost")').parents('.post').addClass('forsale'); $('.saledpost:contains("saledpost")').parents('.post').addClass('saled'); $('.freepost:contains("freepost")').parents('.post').addClass('free'); $('.makeportfoliolight:contains("makeportfoliolight")').parents('.post').addClass('portfolio-light'); $('#pun-searchposts .post:contains("***QUESTIONARY***")').addClass('anketa'); $('.questionary-post').parents('#pun-main').addClass('questionary'); </script></div> </div> </div> </div> </div> </body> </html>