Перейти к содержимому
  • Урок Восьмой. От теории к практике - Text-Shadow Widget

    Теперь перейдем от теории к практике.

    Сегодня Мы с Вами напишем небольшой простой виджет для тени текста, который будет работать следующим образом – В специально отведенное поле необходимо будет ввести ID элемента, для которого вы захотите прорисовать тень, после чего будут уже идти настройки этой тени.
    Начнем создавать наш виджет:

    • Открываем свой Notepad++;
    • Создаем файл с названием TextShadow.mucow;
    • Приступаем к составлению виджета.

    Для начала пропишем первую строку:

    <?xml version="1.0" encoding="UTF-8"?>

    И пропишем указание начала и конца виджета:

    <HTMLWidget>
    </HTMLWidget>

    Теперь можно приступить к прописанную основных параметров:

    • Для начала укажем имя самого виджета: name=”MyShadow”;
       
    • Если мы хотим, чтоб наш виджет отображаться во всех версиях то определяем его версию как 1: formatNumber=“1”;
       
    • Теперь укажем будем ли мы локализовать виджет при помощи таблицы символов, или оставим это до лучших времен. По моему опыту скажу, лучше это отложить на потом, в виджете частенько приходится что-то добавлять или убирать, т.к. постоянно находятся новые идеи и новые баги а работа с таблицей символов отнимает дополнительное время, по этой причине ее лучше прописать тогда, когда Вы свой виджет уже готовы выпустить в «прод».
      Итого пишем: localization=“none”;
       
    • Как и любой уважающий себя родитель мы же тоже хотим, чтоб смотря на наше творение человек понимал кто сие чудо сделал)) И по этой причине прописываем creator=“Me” и от себя добавляем немного «бла-бла» по желанию: termsText= “I’m the Best of the Best of the Best!!!”
       
    • И напоследок укажем размеры нашего виджета: defaultWidth="20px" defaultHeight="20px";
      И с учетом того, что нам не нужно выводить что-то при помощи этого виджета на дисплей указываем, что его размеры менять нельзя. Да и зачем? : isResizable="false";

    Вот мы и основную информацию о нашем будущем виджете. В куче это будет выглядеть примерно так:

    <HTMLWidget name="MyShadow" formatNumber="1" localization="none" creator="Me" termsText=" I’m the Best of the Best of the Best!!!" defaultWidth="20px" defaultHeight="20px" isResizable="false">

    Для того чтоб начать параметры нам в первую очередь необходимо понять чего вообще мы хотим туда передать. Для этого разберемся немного с атрибутом text-shadow. У него есть несколько способов написания. Я предпочитаю следующий: text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);

    Для предпросмотра эффекта вы всегда можете воспользоваться ресурсом http://css3gen.com/ . Там можно легко выбрать все настройки и сразу увидеть результат, что часто бывает очень полезно.

    Что же за что тут отвечает: text-shadow: 1px 1px 0px rgba(0, 0, 01);

    • Отмеченное зеленым цветом - отвечает за расположение тени.
    • Отмеченное синим - отвечает за размытие тени
    • Отмеченное оранжевым - указывает rgb формат цвета тени
    • Отмеченное красным - указывает прозрачность текста.

    Нам нужно прописать поля для каждого из этих параметров. Помимо их нужно будет поля для указания для какого блока текста Вам необходимо применить тень.
    Приступим...

    • В первую очередь укажем начало и конец блока параметров:
      <parameters>
      </parameters>
    • Первой сделаем возможность ввода ID элемента: Для прописывания этого блока лучше всего подойдет однострочный текстовый блок. <text> Дадим имя этому блоку name= “TextID” и после этого укажем значение по умолчанию defaultValue=“#” в итоге получится строка похожая на эту: 
      <text name="textID" defaultValue="#" />
    • Теперь поместим параметры расположения 
      Для того, чтоб понять как он работает нужно посмотреть на систему координат:

      Размещенное изображение

      при указании 1px 1px тень будет смещена вправо и вниз на 1px, а при -1px и -1px – соответственно на 1px влево и вверх.

      При прописывании этих параметров они будут похожи и отличатся у них будет только имя по этому, и пропишем только один параметр а второй можно будет просто копировать.

      Для прописывания этого параметра очень кстати будет <number>

      Указываем имя блока: name=“hShadow” и его значение по умолчанию: defaultValue=“1”

      Теперь нужно указать минимальные и максимальные значения для данного параметра. (min=“-1000” max=“1000”)

      В итоге получится что-то вроде этого:
      <number name="hShadow" defaultValue="1" min="-1000" max="1000"/>
      <number name="vShadow" defaultValue="1" min="-1000" max="1000"/>
    • Следующим укажем параметры размытия тени. Тут все просто, чем выше значение от 0 тем больше размытие. Прописываем имя name=“blureShadow” и сразу же указываем defaultValue="0". Допустимые значения будут от 0 и до 1000 (min=“0” max=“1000”)
      Итог:
      <number name="blureShadow" defaultValue="1" min="0" max="1000"/>
    • Пришло время присвоить цвет и так как мы указываем его в формате rgb, то нужно вывести поле для трех параметров, которые будут отвечать за каждый цвет. Отличатся у этих полей так же будет только имя.
      Цвет в rgb задается в диапазоне от 0 до 255. Имя присвоим соответствующее каждому цвету. Чтоб было понятно что куда подключать name=“rColor” (для красного цвета). defaultValue=“0” и min=“0” max=“255”. Получаем вот что:
      <number name="rColor" defaultValue="0" min="0" max="255"/>
    • И последний параметр, который мы пропишем – прозрачность тени.
      Увы параметр <number> не подойдет, так как, сколько я не пробовал значение меньше 1,00 там не вводятся (речь идет о значениях после запятой), по этой причине применим параметр <text>.
      Пропишем имя name="textOpacity" и defaultValue="1.00". При этом обязательно следует указать через точку “1.00”. Тут 1.00 значит абсолютно не прозрачный и 0.00 – абсолютно прозрачный.
      <text name="textOpacity" defaultValue="1.00" />

    Вот мы и прописали параметры. Теперь можно приступить и к телу самого виджета. Как вы уже, наверное, знаете то Text-Shadow это стиль оформления текста, поэтому и прописывать его мы будем в месте для стилей – в <head> документа. При этом обязательно внутри <style> ... </style>

    Для того чтоб нам это сделать нам нужно для начала указать то что мы хотим, чтоб виджет добавил этот текст именно в блоке <head>


    Для этого пишем следующие строки:

    <headHTML>
    <[CDATA[
    тут код который надо разместить в <head>
    ]]>
    </headHTML>

    Теперь вписываем то что мы хотим, чтоб виджет добавил. В нашем случае это:

    <style> 
    #someID
    {text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); }
    </style>

    Но при этом все значения нам необходимо заменить на те, которые хотим указать мы. Для этого нужно подключить параметры. Вместо интересующего нас значения пишем {param_ TextID } (Где TextID – это name параметра, который мы хотим подставить в данную область)

    Получится вот такой вот текст в итоге:

    <headHTML>
    <![CDATA[
    <style>
    {param_textID}
    {
    text-shadow: {param_hShadow}px {param_vShadow}px {param_blureShadow}px rgba({param_rColor}, {param_gColor}, {param_bColor}, {param_textOpacity});
    }
    </style>
    ]]>
    </headHTML>

    Сохраните файл .mucow!

    Вот и все. Теперь его можно спокойно перетащить из папки в рабочую область Muse и он будет работать. 

    Главное проверить все ли скобки и параметры закрыты верными скобками. Ведь если нет, то Вам будет выдано сообщение о том, что произошла ошибка XML и виджет не поместится на Вашу страницу.

    Отзывы пользователей

    Рекомендуемые комментарии

    не могу подключить css на id  вот пример 

     

     

     

     

    <?xml version="1.0" encoding="UTF-8"?>
    <HTMLWidget name="Модуль обратного отсчета" formatNumber="2" 
    localization="none" 
    creator="Alexandr Sorokin"
    defaultWidth="350" 
    defaultHeight="40"  
    >
        <parameters>            
            <text name="textID" defaultValue="#" />
            <list name="trans" label="Transition:" defaultValue="bounce">
                <value name="bounce" label="bounce"/>
                <value name="flash " label="flash "/>
                <value name="pulse" label="pulse"/>
                <value name="wobble " label="wobble"/>
                <value name="bounceIn" label="bounceIn"/>
            </list>
         </parameters>    


         <headHTML>
    <![CDATA[    

    <style>
        {param_trans} {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

    {param_trans} {
      -webkit-animation-duration: 2s;
      animation-duration: 2s;
    }

    @-webkit-keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }

      40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
      }

      60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
      }
    }

    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
      }

      40% {
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
      }

      60% {
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);
      }
    }

     {param_trans} {
      -webkit-animation-name: bounce;
      animation-name: bounce;
    }

    @-webkit-keyframes flash {
      0%, 50%, 100% {
        opacity: 1;
      }

      25%, 75% {
        opacity: 0;
      }
    }

    @keyframes flash {
      0%, 50%, 100% {
        opacity: 1;
      }

      25%, 75% {
        opacity: 0;
      }
    }

      {param_flash} {
      -webkit-animation-name: flash;
      animation-name: flash;
    }

    /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

    @-webkit-keyframes pulse {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }

      50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
      }

      100% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    @keyframes pulse {
      0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
      }

      50% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
      }

      100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
      }
    }

    {param_pulse} {
      -webkit-animation-name: pulse;
      animation-name: pulse;
    }

    @-webkit-keyframes shake {
      0%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }

      10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
      }

      20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
      }
    }

    @keyframes shake {
      0%, 100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
      }

      10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        transform: translateX(-10px);
      }

      20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px);
      }
    };
        {param_wobble} {
      -webkit-animation-name: wobble;
      animation-name: wobble;
    }

    @-webkit-keyframes bounceIn {
      0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3);
      }

      50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }

      70% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
      }

      100% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    @keyframes bounceIn {
      0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3);
      }

      50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
      }

      70% {
        -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9);
      }

      100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
      }
    }

    {param_Inbounce}{
      -webkit-animation-name: bounceIn;
      animation-name: bounceIn;
    }

    @-webkit-keyframes bounceInDown {
      0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
      }

      60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
      }

      80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
      }

      100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
    }

    @keyframes bounceInDown {
      0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);
      }

      60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px);
      }

      80% {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
      }

      100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
      }
    }

    </style>

    ]]>
        </headHTML>
        <bodyEndHTML>

        <![CDATA[
        
    ]]>
        </bodyEndHTML>    
        
    </HTMLWidget>
        

    Поделиться комментарием


    Ссылка на комментарий
    Поделиться на других сайтах
    2 часа назад, oybek сказал:

    не могу подключить css на id  вот пример 

    Ну так у Вас нигде ID не прописывается в настройках. Вы не правильно завели параметр, вместо ID вы в стиль вносите анимацию.
    c1456fbcf5.png

    Поделиться комментарием


    Ссылка на комментарий
    Поделиться на других сайтах
    1 час назад, Radomir-m сказал:

    Спасибо за полезные уроки. Только вопрос остался: как наш виджет внести в библиотеку Adobe Muse?

    Просто два раза щелкнуть по файлу с расширением .mucow

    Поделиться комментарием


    Ссылка на комментарий
    Поделиться на других сайтах

    Оставлять сообщения могут только участники клуба

    Вступите в клуб или войдите под своим аккаунт, чтобы писать сообщения

    Вступить в клуб

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас
×