Jump to content
  • Урок Восьмой. От теории к практике - 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 и виджет не поместится на Вашу страницу.

    User Feedback

    Recommended Comments

    не могу подключить 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>
        

    Share this comment


    Link to comment
    Share on other sites
    2 часа назад, oybek сказал:

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

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

    Share this comment


    Link to comment
    Share on other sites

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

    Share this comment


    Link to comment
    Share on other sites
    1 час назад, Radomir-m сказал:

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

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

    Share this comment


    Link to comment
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Restore formatting

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...