Как воровать элементы дизайна сайта

Эта статья или заметка (называйте, как хотите) написана не в совсем привычном ключе.
Речь пойдёт, как можно заметить из названия, о воровстве. На самом деле я не призываю красть чужую интеллектуальную или какую-нибудь собственность, а лишь описываю такую техническую возможность.

Бывает, что гуляя по сайтам в поисках козырной информации, можно найти довольно зачётные дизайнерские работы, будь то менюшки, блоки и т.п. Или хочется сделать похожий на чьё-то творение сайт. Что дальше? Можно, владея css или html, попробовать повторить оригинал. А если не охота возиться, да и знания слабоваты? Правильно, будем заимствовать чужой код. Вполне возможно, что на его основе получится нечто более удачное, или проснётся заинтересованность в углублении своих знаний.

Приступим.
Сегодняшним объектом исследования станет сайт www.onextrapixel.com. В самом дизайне блога на первый взгляд нет ничего особенного - обычный перегруженный вордпресс, но одна менюшка в сайдбаре мне понравилась. Её можно увидеть, спустившись чуть ниже по странице: About OXP.

На скриншоте на подопытный элемент смотрит стрелка:


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

Самая ответственная часть работы - правильно выделить мышью нужной элемент, чтобы не потерять ничего важного. В данном случае все пункты меню. И так, выделяем мышью аккуратно, начиная от названия меню, которое может пригодится, и через правую клавишу мыши "исходный код выделенного фрагмента" (речь идёт о mozilla firefox) получаем такой исходник (скриншот):


Копируем в блокнот.

В данном отрезке кода страницы нас интересуют те элементы контейнера, которые указывают на параметры в стилях, это:
span id="homeicon"
span id="contacticon"
span id="abouticon"
span id="authoricon"
li class="lastline"
span id="adverticon"

А также:
div class="oxplist"
ul class="oxpleft"
ul class="oxpright"

Теперь снимаем выделение с меню и открываем исходник всей страницы, ищем ссылку на файл со стилями css. Файлов может быть несколько, в данном случае он один (print не в счёт):


Открываем этот файл, с помощью поиска ищем все слова (те, что в кавычках) из предыдущего списка (вместе с параметрами и тоже копируем в блокнот).

Получится вот набор стилей, который нужно заключить в теги style:


В данном случае повезло, пути к картинкам прописаны целиком, включая имя хоста. Если попадётся ссылка вида /img/143.jpg, значит до первого слеша нужно подставить имя сайта.

И так, если код с блокнота поставить сразу в блог (виджет html), то будет точная копия того меню:


А теперь живое демо, адаптированное под blogger (картинка (все иконки берутся через позиционирование с одной png) перенесена на хостинг пикассы):




Здесь наблюдается небольшой сдвиг, но в сайдбаре (см.скриншот) всё в порядке.




Получившийся код:

<style>
#about {background:url(http://2.bp.blogspot.com/-3yJBbICydl8/Tm7dM_9iA_I/AAAAAAAAF5M/ent8M6gNcX4/s1600/f.png) no-repeat -2px -311px; text-indent:-9999px; display:block; width:360px; height:36px;}
.oxplist {background:#fff; overflow:hidden; width:360px;}
.oxplist li:hover {border-left:2px solid #c2615f;}
.oxpleft {float:left; border-right:1px solid #eeeeed; width:160px;}
.oxpright {float:left; width:196px;}
.oxpleft li, .oxpright li { padding:5px 15px; border-bottom:1px solid #eeeeed; overflow:hidden;}
.oxpleft li span, .oxpright li span  {float:left;}
.oxpleft li a {padding:2px 0 0 30px; display:block;}
.oxpright li a {padding:2px 0 0 30px; display:block;}
#homeicon {background:url(http://2.bp.blogspot.com/-3yJBbICydl8/Tm7dM_9iA_I/AAAAAAAAF5M/ent8M6gNcX4/s1600/f.png) no-repeat -275px -58px; width:20px; height:20px; display:block;}
#contacticon {background:url(http://2.bp.blogspot.com/-3yJBbICydl8/Tm7dM_9iA_I/AAAAAAAAF5M/ent8M6gNcX4/s1600/f.png) no-repeat -275px -75px; width:20px; height:20px; display:block;}
#abouticon {background:url(http://2.bp.blogspot.com/-3yJBbICydl8/Tm7dM_9iA_I/AAAAAAAAF5M/ent8M6gNcX4/s1600/f.png) no-repeat -275px -93px; width:20px; height:20px; display:block;}
#authoricon {background:url(http://2.bp.blogspot.com/-3yJBbICydl8/Tm7dM_9iA_I/AAAAAAAAF5M/ent8M6gNcX4/s1600/f.png) no-repeat -275px -133px; width:20px; height:20px; display:block;}
#adverticon {background:url(http://2.bp.blogspot.com/-3yJBbICydl8/Tm7dM_9iA_I/AAAAAAAAF5M/ent8M6gNcX4/s1600/f.png) no-repeat -275px -111px; width:20px; height:20px; display:block;}
#writeicon {background:url(http://2.bp.blogspot.com/-3yJBbICydl8/Tm7dM_9iA_I/AAAAAAAAF5M/ent8M6gNcX4/s1600/f.png) no-repeat -314px -57px; width:20px; height:20px; display:block;}
#artcleicon {background:url(http://2.bp.blogspot.com/-3yJBbICydl8/Tm7dM_9iA_I/AAAAAAAAF5M/ent8M6gNcX4/s1600/f.png) no-repeat -314px -74px; width:20px; height:20px; display:block;}
#tagicon {background:url(http://2.bp.blogspot.com/-3yJBbICydl8/Tm7dM_9iA_I/AAAAAAAAF5M/ent8M6gNcX4/s1600/f.png) no-repeat -316px -131px; width:20px; height:20px; display:block;}
#twittericon {background:url(http://2.bp.blogspot.com/-3yJBbICydl8/Tm7dM_9iA_I/AAAAAAAAF5M/ent8M6gNcX4/s1600/f.png) no-repeat -314px -92px; width:20px; height:20px; display:block;}
#rssicon {background:url(http://2.bp.blogspot.com/-3yJBbICydl8/Tm7dM_9iA_I/AAAAAAAAF5M/ent8M6gNcX4/s1600/f.png) no-repeat -314px -110px; width:20px; height:20px; display:block;}
.lastline {border-bottom:none;}

#sidebar h2 {margin-bottom:0;}
#sidebar .sidewbox h2, .feedcountdiv, #boxleft h2 {font:bold 23px Helvetica,Arial; color:#4a4a4a; letter-spacing:-0.02em; text-shadow:0 1px 0 #fff; margin-bottom:10px;}
</style>

<div class="oxplist">
<ul class="oxpleft">
<li><span id="homeicon"></span><a href="http://ссылка" rel="nofollow">Домой</a></li>
<li><span id="contacticon"></span><a href="http://ссылка"  rel="nofollow">Контакт</a></li>
<li><span id="abouticon"></span><a href="http://ссылка" rel="nofollow">О блоге</a></li>
<li><span id="authoricon"></span><a href="http://ссылка" rel="nofollow">Об авторе</a></li>
<li class="lastline"><span id="adverticon"></span><a href="http://ссылка" rel="nofollow">О рекламе</a></li>
</ul>

<ul class="oxpright">
<li><span id="writeicon"></span><a href="http://ссылка" rel="nofollow">Отправить статью</a></li>
<li><span id="artcleicon"></span><a href=http://ссылка" rel="nofollow">Все статьи блога</a></li>
<li><span id="tagicon"></span><a href="http://ссылка" rel="nofollow">Оглавление</a></li>
<li><span id="twittericon"></span><a class="twitlink" href="http://ссылка" rel="nofollow">Мы в Twitter</a></li>
<li class="lastline"><span id="rssicon"></span><a class="rsslink" href="http://ссылка" rel="nofollow">RSS подписка</a></li>
</ul>
</div>

Для будущего использования код надо подредактировать, проставить свои ссылки, убрать с нужных тег nofollow.

Комментариев нет:

Отправка комментария