http://crazycatx.rusff.me/ Crazy Cat ru-ru Sun, 02 Jun 2019 06:04:08 +0300 MyBB/mybb.ru http://crazycatx.rusff.me/viewtopic.php?pid=135#p135 <p><span class="highlight-text">-</span><br />[html]<br />&lt;style&gt;.personalpage{background:url(<a href="https://i.imgur.com/WhZGsTg.png" rel="nofollow" target="_blank">https://i.imgur.com/WhZGsTg.png</a>);width:660px;height:460px;font-family:Ginebra;color:#33627e}.pphed span{font-size:8px!important}.pphed{text-align:-webkit-right!important;width:350px;padding-top:5px;font-size:12px;text-transform:lowercase;line-height:70%}.ppname{width:475px;margin:10px 0 0 5px;text-transform:lowercase;text-align:-webkit-center;font-size:16px}.ppphoto{margin:-20px 0 0 513px;background-color:#efd47e;width:125px}.ppphoto img#ppphoto1{margin:10px;border:3px solid #33627e}.ppcontainer{margin:-96px 0 0 -174px}.pptabs{margin:0 auto;position:relative;width:477px;height:380px}.pptab{display:block}.pptab input[type=radio]:checked~label{z-index:2;box-shadow:0 0 20px 0 #10100e;font-size:17px}.pptab label{display:block;width:165px;height:25px;position:relative;left:487px;top:106px;font-size:12px;text-align:-webkit-center;z-index:3}.pptab input[type=radio]{display:none}.ppcontent{position:absolute;top:0;bottom:0;left:0;right:0; height:355px; overflow-y:auto;padding:20px 0 5px 20px;background:#f0e7f9}.pptab input[type=radio]:checked~label~.ppcontent{z-index:1}.pppabt{width:163px;position:absolute;display:block;margin:-197px 0 0 492px}.pppabttt{text-align:center;font-size:18px;text-transform:lowercase}.pppabtcnt{padding:9px;margin:9px 0 0 0;overflow-y: auto;height: 148px;font-family:Myriad Pro!important;text-transform:lowercase}.ppcontent img{margin-right: 30px;}<br />&lt;/style&gt;<br />&lt;div class=&quot;personalpage&quot;&gt;&lt;div class=&quot;pphed&quot;&gt;profile&lt;br&gt;&lt;span&gt;On the stars I write your name, I feel more than just your fame Endless just like the sea&lt;/span&gt;&lt;/div&gt;</p> <p>&lt;div class=&quot;ppname&quot;&gt; Kim Hyuna, 24&lt;sup&gt;y.o.&lt;/sup&gt;&lt;/div&gt;</p> <p>&lt;div class=&quot;ppphoto&quot;&gt;&lt;img id=&quot;ppphoto1&quot; src=&quot;https://via.placeholder.com/100&quot;&gt; </p> <p>&lt;/div&gt;&lt;div class=&quot;ppcontainer&quot;&gt;&lt;div class=&quot;pptabs&quot;&gt;&lt;div class=&quot;pptab&quot;&gt;&lt;input type=&quot;radio&quot; id=&quot;pptab-1&quot; name=&quot;pptab-group-1&quot; checked&gt;&lt;label for=&quot;pptab-1&quot;&gt; profile &lt;/label&gt;&lt;div class=&quot;ppcontent&quot;&gt;</p> <p>&lt;img src=&quot;https://i.imgur.com/WF0ekUL.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/VDC9rse.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/up9VNVV.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/eafFsUm.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/gstrDqQ.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/EtZqYmq.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/WF0ekUL.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/VDC9rse.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/up9VNVV.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/eafFsUm.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/gstrDqQ.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/EtZqYmq.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/WF0ekUL.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/VDC9rse.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/up9VNVV.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/eafFsUm.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/gstrDqQ.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/EtZqYmq.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/WF0ekUL.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/VDC9rse.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/up9VNVV.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/eafFsUm.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/gstrDqQ.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/EtZqYmq.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/WF0ekUL.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/VDC9rse.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/up9VNVV.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/eafFsUm.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/gstrDqQ.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/EtZqYmq.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/WF0ekUL.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/VDC9rse.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/up9VNVV.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/eafFsUm.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/gstrDqQ.png&quot;&gt;&lt;img src=&quot;https://i.imgur.com/EtZqYmq.png&quot;&gt;</p> <p>&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;pptab&quot;&gt;&lt;input type=&quot;radio&quot; id=&quot;pptab-2&quot; name=&quot;pptab-group-1&quot;&gt;&lt;label for=&quot;pptab-2&quot;&gt; collections &lt;/label&gt;&lt;div class=&quot;ppcontent&quot;&gt;</p> <p>tab two stuff</p> <p>&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;pptab&quot;&gt;&lt;input type=&quot;radio&quot; id=&quot;pptab-3&quot; name=&quot;pptab-group-1&quot;&gt;&lt;label for=&quot;pptab-3&quot;&gt; awards &lt;/label&gt;&lt;div class=&quot;ppcontent&quot;&gt;</p> <p>tab three stuff</p> <p>&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;pppabt&quot;&gt; &lt;div class=&quot;pppabttt&quot;&gt;about me&lt;/div&gt;&lt;div class=&quot;pppabtcnt&quot;&gt;</p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;[/html]</p> mybb@mybb.ru (Max Skywalker) Sun, 02 Jun 2019 06:04:08 +0300 http://crazycatx.rusff.me/viewtopic.php?pid=135#p135 http://crazycatx.rusff.me/viewtopic.php?pid=133#p133 <p><span style="display: block; text-align: center"><strong><span style="font-family: Century Gothic"><span style="font-size: 16px">Нарезка: от ПСД к отдельным частям дизайна.</span></span></strong></span></p><div class="quote-box quote-main"><blockquote><p>В первую очередь, надо убедиться, что у тебя на компе есть все шрифты, использованные в псд, а недостающие скачать и установить.<br />Почему: </p> <p> [indent]&#9658; Во-первых, фотошоп может неправильно отображать шрифты, которых на компе нет.<br /> [indent]&#9658; Во-вторых, потому что, возможно, тебе придется заливать эти шрифты на форум.</p><div class="quote-box spoiler-box"><div onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');">Вот я открыла псд в фш и мне понадобилось скачать два шрифта</div><blockquote><p><img class="postimg" loading="lazy" src="https://i.imgur.com/ZdeBbe6.png" alt="https://i.imgur.com/ZdeBbe6.png" /></p></blockquote></div><p>После этого, я обычно создаю отдельную папку, где буду сохранять все части и туда же скину шрифты.(чисто организационный пунктик)<br /> </p><hr /><p>итак, мы открыли псд в фш:<br />Определенных правил нарезки псд не существует. Всё зависит от самого диза. <br />Например: шапка форума может состоять из одной картинки пнг, или из двух пнг + гиф, или даже из трёх составляющих пнг + гиф + рамка прописаная кодом (но это в крайних случаях и вообще не советую). </p> <p>Именно поэтому мы будем сначала <em class="bbuline">осматривать наш диз и расчитывать как будем переносить ВИД в КОД</em>: где лучше картинку поставить, а где лучше часть нарисовать кодом (ведь код весит меньше, чем крупная картинка, соответственно дизайн будет загружаться быстрее).</p> <p>Кодом лучше, если части очень простые. </p><div class="quote-box spoiler-box"><div onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');">пример #1</div><blockquote><p>на дизе, что стоит сейчас, кодом я прописала профиль:<br /><span style="display: block; text-align: center"><img class="postimg" loading="lazy" src="https://i.imgur.com/JhyYrRO.png" alt="https://i.imgur.com/JhyYrRO.png" /></span><br />тут даже заметно, что я лоханулась с оттенком<br />но сам код простой:<br />задний план профиля в теме: background: #dcd6e7; ( ну и ширину и тд...)<br />верхнюю часть: задний план ника background: #e7d382; + border-bottom: 4px solid #46627c;<br /><span style="display: block; text-align: center"><img class="postimg" loading="lazy" src="https://i.imgur.com/0EzOy4j.png" alt="https://i.imgur.com/0EzOy4j.png" /></span><br />для низа я &quot;смухлевала&quot;, для того, чтобы &quot;обмануть&quot; кнопку личной страницы хд <br />прописала всему контейнеру профиля border-bottom и box-shadow хдд <br /><span style="display: block; text-align: center"><img class="postimg" loading="lazy" src="https://i.imgur.com/cAFtig2.png" alt="https://i.imgur.com/cAFtig2.png" /></span><br /><strong>НО!</strong> я могла просто вырезать три части - картинки: <br />верх (желтенькая и синенькая полоска), низ ( синенькая и желтая) и серединку который фон, и поставить их все три сразу бэкграунд картинкой (помнишь, мы это уже делали) для всего профиля но в этом случае появилась проблема с личной страницей и пришлось переделать</p></blockquote></div><div class="quote-box spoiler-box"><div onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');">пример #2 (проще хд )</div><blockquote><p>форумы на старом дизе прописаны без изображений, а простым кодом<br />потому что у нас фон одного цвета и тонкая рамка. всё просто прописать:<br /><img class="postimg" loading="lazy" src="https://i.imgur.com/kLQ13hN.png" alt="https://i.imgur.com/kLQ13hN.png" /><br />если как в новом дизе, фон форума идет картинкой, значит эту картинку нам надо вырезать из псд и добавить в код.</p></blockquote></div></blockquote></div><p><strong><span style="display: block; text-align: center"><span style="font-size: 16px">TO BE CONTINUED</span></span></strong></p> mybb@mybb.ru (Max Skywalker) Sun, 02 Jun 2019 04:23:14 +0300 http://crazycatx.rusff.me/viewtopic.php?pid=133#p133 http://crazycatx.rusff.me/viewtopic.php?pid=66#p66 <p>только margin может уходить в минус</p><table style="table-layout:fixed;width:100%"><tr><td><p>[html]</p> <p>&lt;div class=&quot;a&quot;&gt;MY NAME IS A&lt;/div&gt;<br />&lt;div class=&quot;b&quot;&gt;MY NAME IS B&lt;/div&gt;<br />&lt;style&gt;<br />.a<br />{height:150px;<br />width:150px;<br />background:#d8949b;}<br />.b<br />{height:148px;<br />width:148px;<br />background:#;<br />border: 1px solid;<br />margin-top:-80px}<br />&lt;/style&gt;</p> <p>[/html]</p></td><td><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 30em"><pre>[html] &lt;div class=&quot;a&quot;&gt;MY NAME IS A&lt;/div&gt; &lt;div class=&quot;b&quot;&gt;MY NAME IS B&lt;/div&gt; &lt;style&gt; .a {height:150px; width:150px; background:#d8949b;} .b {height:148px; width:148px; background:#; border: 1px solid; margin-top:-80px} &lt;/style&gt; [/html]</pre></div></div></div></td></tr></table> mybb@mybb.ru (Max Skywalker) Wed, 27 Feb 2019 23:33:53 +0300 http://crazycatx.rusff.me/viewtopic.php?pid=66#p66