Перейти к содержимому

Фотография

Курсы web разаботка


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 53

#41
zavuch

zavuch

    ЗАВеду У Чащу )

  • В доску свой
  • 2 063 сообщений

Если идёт речь уж о КорелДро, то тамошний вижуалбейсик хорошо делает кривые.. Зачем лекалами на планшете рисовать - там хошь фракталы, хощь тангир, хошь 3д проекции уравнений в плоскость..!!! Мне нравилось.

Только задачку ставил другую себе - рисовать типа тех драконов, а тут да - планшет в руки, или бумагу-карандаши-сканер а потом уже отрисовка в колеле/флэше или просто ретушь в Шопе   


  • 0

#42
lexx821

lexx821
  • Свой человек
  • 816 сообщений
А понятно, спасибо за инфо. 
Короче я вот думаю, я вот этот лейаут смогу наверно осилить https://www.webdesig...webdesign/yunko
Это я делаю спомощью Corel Draw 12, Corel Paint Shop Pro X, Ulead Photoimpact XL. Просто мне сказали забыть C#, Visual Basic, ABAP, итд. И лучше изучать PHP, HTML5, CSS3, JavaScript.
 
Синим помечено какие картинки я уже сделал или почти сделал (результат см. ниже в спойлере).
webdesign_yunko_b_ready-min.jpg
 
Больше провозился с подарком, пока не могу нарисовать вот такой бантик - https://blender.stac...-model-a-ribbon завтра ночью займусь им.
 
 
Это HTML код:
<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <style>
      * { margin:0; padding:0; font-family:Sans-serif; }
      body { background-color:#fff; color:#000; }
      @media screen and (min-width:800px) and (max-width:1023px) {
         #containter { position:relative; margin:0px 0px; width:1000px; min-height:1000px; border:1px solid #ccc; box-shadow:0px 0px 15px 5px #aaa; }
      }


      @media screen and (min-width:1024px) {
         #containter { position:relative; margin-right:auto; margin-left:auto; margin-top:50px; margin-bottom:200px; width:1000px; min-height:1000px; border:1px solid #ccc; box-shadow:0px 0px 15px 5px #aaa; }
      }




      #header { width:100%; height:200px; background-color:red; }
      #menu { width:100%; height:25px; background-color:darkred; }
      #content { width:100%; min-height:800px; }
      #footer { width:100%; min-height:200px; background-color:red; }
      .lnk_white { color:#fff; text-decoration:underline; }
      .lnk_white:hover { color:#fff; text-decoration:none; }
      .lnk_black {color:#000; text-decoration:none; }
      .lnk_black:hover { color:#000; text-decoration:underline; }
      .white { color:#fff; }
      .field { border:1px solid red; color:black; background-color:#fff; width:100px; }
      .field_label { width:95px; display:inline-block; float:left; }
      .left_block { float:left; }
    </style>
  </head>
  <body>
    <div id="containter">
      <div id="header">
       <div>
         HEADER
         <div style="float:right; width:250px;" class="white">
           <a class="lnk_white" href="#">FAQ</a>&nbsp;|&nbsp;<a class="lnk_white" href="#">Friends invite</a>&nbsp;|&nbsp;<a class="lnk_white" href="#">Contact</a><br>
           <span class="field_label">Login:</span><input class="field" type="text"><br>
           <span class="field_label">Password:</span><input class="field" type="text"><br>
           <a class="lnk">Registration</a>&nbsp;|&nbsp;<a class="lnk">Password recovery</a>
         </div>
       </div>
      </div>
      <div id="menu">
      MENU
      </div>
      <div id="content">
        <div class="left_block" style="width:200px;">
          Category:<br>
          <a class="lnk_black" href="#">- All -</a><br>
          <a class="lnk_black" href="#">Menu 1</a><br>
          <a class="lnk_black" href="#">Menu 2</a><br>
          <a class="lnk_black" href="#">Menu 3</a><br>
          <a class="lnk_black" href="#">Menu 4</a><br>
          <a class="lnk_black" href="#">Menu 5</a><br>
          <a class="lnk_black" href="#">Menu 6</a><br>
          <a class="lnk_black" href="#">Menu 7</a><br>
          <a class="lnk_black" href="#">Menu 8</a><br>
          <a class="lnk_black" href="#">Menu 9</a><br>
          <a class="lnk_black" href="#">Menu 10</a><br>
          <a class="lnk_black" href="#">Menu 11</a><br>
          <a class="lnk_black" href="#">Menu 12</a><br>
          <a class="lnk_black" href="#">Menu 13</a><br>
          <a class="lnk_black" href="#">Menu 14</a><br>
          <a class="lnk_black" href="#">Menu 15</a><br>
          <a class="lnk_black" href="#">Menu 16</a><br>
          <a class="lnk_black" href="#">Menu 17</a><br>
          <a class="lnk_black" href="#">Menu 18</a><br>
          <a class="lnk_black" href="#">Menu 19</a><br>
          <a class="lnk_black" href="#">Menu 20</a><br>
          <a class="lnk_black" href="#">Menu 21</a><br>
          <a class="lnk_black" href="#">Menu 22</a><br>
          <a class="lnk_black" href="#">Menu 23</a><br>
          <a class="lnk_black" href="#">Menu 24</a><br>
          <a class="lnk_black" href="#">Menu 25</a><br>
          <a class="lnk_black" href="#">Menu 26</a><br>
        </div>
        <div class="left_block" style="width:600px;">
        CONTENT
        </div>
        <div class="left_block" style="width:200px;">
        ...
        </div>
      </div>
      <div id="footer">
      FOOTER
      </div>
    </div>
  </div>
  </body>
</html>
Это этапы создания лейаута и результат:
Скрытый текст

 


  • 0

#43
lexx821

lexx821
  • Свой человек
  • 816 сообщений

Немного код подправил:

#header { width:100%; height:180px; background-color:red; background-image:url(bg.png); background-repeat:no-repeat; }

Вот результат натянул на шапку сайта картинку:

Скрытый текст

  • 0

#44
lexx821

lexx821
  • Свой человек
  • 816 сообщений
Вот что-то получилось у меня, результат примерно выглядет так, немножко коряво, но на первый раз пойдёт:
1. Divы повернул спомощью transform:rotate(...):
<div style="position:absolute; left:420px; top:0px; z-index:20;"><a href="#"><img src="products.gif" height="120px" width="auto"></a></div>
<div style="position:absolute; left:500px; top:2px; z-index:21; transform:rotate(-10deg);"><a href="#"><img src="about.gif" height="120px" width="auto"></a></div>
<div style="position:absolute; left:580px; top:2px; z-index:22; transform:rotate(5deg);"><a href="#"><img src="imprint.gif" height="120px" width="auto"></a></div>
 
2. Генерировал бордюры спомощью - http://snapbuilder.c...mage_generator/:
generator-min.jpg
 
Результат:
Скрытый текст
 
Исходники:
Прикрепленный файл  web.zip   211,59К   Количество загрузок: 114

  • 0

#45
lexx821

lexx821
  • Свой человек
  • 816 сообщений

Итак вот результат, сайты очень похожи:

result-min.jpg

 

Хочу попробывать сделать сегодня ночью такой сайт:

webdesign_furniture1_b-min.jpg

 

Нарисую план квартиры, который был в Алматы, сначало рисовал план в Microsoft Visio, потом попытался в Corel Draw, но скорей всего буду делать прям в Blender 3D модель квартиры, а чтобы время сэкономить попробывал использовать оперсоурсной программой Sweet Home 3D - https://sourceforge....ts/sweethome3d/, экспортировал ванную и туалет в формат obj и импортировал в Blender, надо ещё раковину.  Вчера нарисовал в Corel Draw лого сайта.

 

Результаты:

Скрытый текст

 

P.S.

Скрытый текст

  • 0

#46
lexx821

lexx821
  • Свой человек
  • 816 сообщений

Хочу ещё сегодня ночью попытаться превратить вот это в svg формат и сгенерировать вот этим вебсайтом http://snapbuilder.c...mage_generator/ border image

 

Это в svg превращу:

borderl.gif

 

borderr.gif


  • 0

#47
lexx821

lexx821
  • Свой человек
  • 816 сообщений

Как обещал сделал, что-то типа такого получилось:

myweb__result-min.jpg

 

Ванную, туалет, и раковину взял из open source ПО Sweet Home 3D - https://sourceforge....ts/sweethome3d/ всё остально (всю квартиру) сам нарисовал в Blender, где-то ушло 4 часа только на 3D модель квартиры, и 5-10 минут на HTML:

house_plan-min.jpg

 

Код:

Скрытый текст

 

Исходники:

Прикрепленный файл  layout_03_14_13_04_2020.zip   316,23К   Количество загрузок: 94


  • 0

#48
lexx821

lexx821
  • Свой человек
  • 816 сообщений

В общем сейчас пока изучаю Grid Layout и Flexbox Layout. То что обещал сделаю позже. В общем все фотки на сайте нужно конвертировать в формат WebP, WebP меньше весит вроде как чем PNG и JPEG. Нужна десктопная программа для генерации Clip Path, уверен что в современном Фотошопе или в Dreamweaver есть такой инструмент, просто у меня денег на это нет. Нашёл онлайн генератор https://bennettfeely.com/clippy/ а мне нужен десктопный или оффлайн генератор.

 

P.S.

Скрытый текст

  • 0

#49
lexx821

lexx821
  • Свой человек
  • 816 сообщений

На некоторых сайтах есть красивые анимированные счётчики. В css есть counter-increment см. http://htmlbook.ru/c...unter-increment и https://developer.mo...ng_CSS_counters но это не то, что мне надо. Я посмотрел современные веб дизайнеры используют готовый JQuery плагин. Поскольку я не фанат JQuery, я сам написал счётчик на JavaScript, но это чисто мой способ:

Скрытый текст

  • 0

#50
lexx821

lexx821
  • Свой человек
  • 816 сообщений

Grid Layout изучаю по этому видео https://www.youtube....h?v=yfDwiukzuUQ очень сложно, но этот ютубер очень внятно, понятным языком объясняет про Grid Layout.

 

P.S. В будущем тени прозрачных картинок буду делать не в Corel Draw, а спомощью css filter drop-shadow https://developer.mo...ion/drop-shadow


Сообщение отредактировал lexx821: 27.04.2020, 23:29:51

  • 0

#51
lexx821

lexx821
  • Свой человек
  • 816 сообщений

Как обещал вот сделал что-то, вот как-то так пока получилось, потом улучшу:

Вместо картинок использовал css3. Все картинки преобразовал в формат webp.

 

HTML код:

Скрытый текст

 

Лейаут:

Скрытый текст

 

Вот исходники:

Прикрепленный файл  web02052020_0529.zip   43,63К   Количество загрузок: 98

 

 


  • 0

#52
lexx821

lexx821
  • Свой человек
  • 816 сообщений

Попытался сделать сайт, как вот этот, сделал только лейаут, картинку постараюсь позже сделать в Blender 3D, пока взял у них картинку:

layout020520202223-min.jpg

 

HTML код:

Скрытый текст

 

Мой результат (картинку 3D EXPLOSION взял у оригинального лейаута):

Скрытый текст

 

Потомо попытаюсь вот так в Blender 3D сделать текст 3D Explosion:

Скрытый текст

 

Исходники (без картинки):

Прикрепленный файл  web020520202223.zip   12,17К   Количество загрузок: 105

 

P.S. Все эффекты сделаны на CSS3


  • 0

#53
lexx821

lexx821
  • Свой человек
  • 816 сообщений

Всем привет, была такая проблема как обновление js, css, html файлов, т.к. всё это кэшируется и лейаут отображается старый, недавно пришла гениальная идея, как решить проблему если закэшированы css, js, html файлы, вот хочу поделиться бесплатно своей идеей. Короче версию я запихал в css файл, потом проверяю версию спомощью javascript:

Старый файл main.css:

body { background-color:yellow; }
#version { visibility:hidden; } /* Невидимый Div */
#version::before { content:"1.2.3"; } /* Версия 1.2.3 */

Новый файл main2.css:

body { background-color:red; }
#version { visibility:hidden; } /* Невидимый Div */
#version::before { content:"1.2.4"; } /* Версия 1.2.4 */

Текущая версия getcurrversion.html:

1.2.4

Основной файл index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <link type="text/css" rel="stylesheet" href="main.css">
  <script>
   function ajax(url, method, param, callback) {
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
       if(this.readyState == 4 && this.status == 200) {
         callback(this.responseText);
       }
     }
     xhttp.open(method, url, true);
     if(method == 'POST') {
       xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
       xhttp.send(param);
     }
     else
       xhttp.send();
   }

   window.onload = function() {
    var version = window.getComputedStyle(document.getElementById('version'), ':before').getPropertyValue('content'); /* Получаю из свойство content из version::before */
    ajax('getcurrversion.html', 'GET', '', (data) => {
      if(data != version) { /* Проверяю версию, из скрытого Divа, если в файле getcurrversion.html новее версия чем в css, то загружаю новый css файл */
        var el = document.getElementsByTagName('link');
        el[0].setAttribute('href', 'main2.css');
      }
    });
   }
  </script>
</head>
<body>
  <div id="version"></div>
</body>
</html>

Проверял, вроде работает. Сначало отображается жёлтый фон, т.к. в main.css стоит body { background-color:yellow; }, а потом быстро становится красным, т.к. загружается main2.css, т.к. там стоит body { background-color:red; }. В javascript тоже можно в переменную/константу запихать версию, и так-же проверть, и вместо

var el = document.getElementsByTagName('link');

el[0].setAttribute('href', 'main2.css');

заменить на 

var el = document.getElementsByTagName('script');

el[0].setAttribute('src', 'имяфайла.js');

 

У кого-нибудь может найдётся идея получше?


  • 0

#54
vasilisaprekrasnaya

vasilisaprekrasnaya
  • Случайный прохожий
  • 1 сообщений

А мне посчастливилось пройти крутые курсы верстки в Минске https://chr.by/study/html-css-js-basic . Все четко, доступно, современно.


vasilisaprekrasnaya.1990@mail.ru


  • 0


Количество пользователей, читающих эту тему: 1

пользователей: 0, неизвестных прохожих: 1, скрытых пользователей: 0

Размещение рекламы на сайте     Предложения о сотрудничестве     Служба поддержки пользователей

© 2011-2022 vse.kz. При любом использовании материалов Форума ссылка на vse.kz обязательна.