shadowdialog.php

13.9 KB PHP
        <div class="app-interface__window unvisible" id="shadowdialog-interface__window">
            <header class="app-interface__titlebar" id="shadowdialog-interface__titlebar">
                <div class="app-interface__titlebaricon" id="shadowdialog-interface__titlebaricon">
                    <i class="fas fa-square"></i>
                </div>
                <div class="app-interface__titlebarcaption" id="shadowdialog-interface__titlebarcaption">
                    Свойства тени
                </div>
                <div class="app-interface__closebutton" id="shadowdialog-interface__closebutton">
                    <i class="fas fa-times"></i>
                </div>
            </header>
            <div class="app-interface__content" id="shadowdialog-interface__content">
                <!-- Your App Here -->

                <!-- TAB: Box-Shadow-->
                <section class="shadowdialog-buttonshadow shadowdialog-tabsection" data-info="buttonshadow">
                    <div class="shadowdialog-optionblock">
                        <div class="om-label shadowdialog-optionblock__label">Тень по X</div>
                        <input class="om-range shadowdialog-optionblock__range"
                               id="shadowdialog-optionblock__range_boxshadowx" type="range" value="0" min="-50" max="50">
                        <input class="om-field shadowdialog-optionblock__field"
                               id="shadowdialog-optionblock__field_boxshadowx" type="text" value="0" maxlength="3">
                        <div class="om-button om-button__icon om-button__help shadowdialog-optionblock__button"
                             data-help="Сброс">
                            <i class="fas fa-redo"></i> 
                        </div>
                    </div>
                    <div class="shadowdialog-optionblock">
                        <div class="om-label shadowdialog-optionblock__label">Тень по Y</div>
                        <input class="om-range shadowdialog-optionblock__range"
                               id="shadowdialog-optionblock__range_boxshadowy" type="range" value="0" min="-50" max="50">
                        <input class="om-field shadowdialog-optionblock__field"
                               id="shadowdialog-optionblock__field_boxshadowy" type="text" value="0" maxlength="3">
                        <div class="om-button om-button__icon om-button__help shadowdialog-optionblock__button"
                             data-help="Сброс">
                            <i class="fas fa-redo"></i> 
                        </div>
                    </div>
                    <div class="shadowdialog-optionblock">
                        <div class="om-label shadowdialog-optionblock__label">Радиус размытия</div>
                        <input class="om-range shadowdialog-optionblock__range"
                               id="shadowdialog-optionblock__range_boxshadowblur" type="range" value="0" min="0" max="100">
                        <input class="om-field shadowdialog-optionblock__field"
                               id="shadowdialog-optionblock__field_boxshadowblur" type="text" value="0" maxlength="3">
                        <div class="om-button om-button__icon om-button__help shadowdialog-optionblock__button"
                             data-help="Сброс">
                            <i class="fas fa-redo"></i> 
                        </div>
                    </div>
                    <div class="shadowdialog-optionblock">
                        <div class="om-label shadowdialog-optionblock__label">Размер тени</div>
                        <input class="om-range shadowdialog-optionblock__range"
                               id="shadowdialog-optionblock__range_boxshadowsize" type="range" value="0" min="-20" max="100">
                        <input class="om-field shadowdialog-optionblock__field"
                               id="shadowdialog-optionblock__field_boxshadowsize" type="text" value="0" maxlength="3">
                        <div class="om-button om-button__icon om-button__help shadowdialog-optionblock__button"
                             data-help="Сброс">
                            <i class="fas fa-redo"></i> 
                        </div>
                    </div>
                    <div class="shadowdialog-rgbacodeblock">
                        <div class="om-label shadowdialog-rgbacodeblock__label"
                             id="shadowdialog-buttonshadow__label_color">Цвет тени</div>
                        <span class="shadowdialog-rgbacodeblock__prefix"
                              id="shadowdialog-buttonshadow__prefix_r">R:
                            <input  type="text"
                                class="shadowdialog-rgbacodeblock__rgba"
                                id="shadowdialog-rgbacodeblock__rgba_boxshadowr"
                                maxlength="3"
                                value="255">
                        </span>
                        <span class="shadowdialog-rgbacodeblock__prefix"
                              id="shadowdialog-buttonshadow__prefix_g">G:
                            <input  type="text"
                                class="shadowdialog-rgbacodeblock__rgba"
                                id="shadowdialog-rgbacodeblock__rgba_boxshadowg"
                                maxlength="3"
                                value="0">
                        </span>
                        <span class="shadowdialog-rgbacodeblock__prefix"
                              id="shadowdialog-buttonshadow__prefix_b">B:
                            <input  type="text"
                                class="shadowdialog-rgbacodeblock__rgba"
                                id="shadowdialog-rgbacodeblock__rgba_boxshadowb"
                                maxlength="3"
                                value="0">
                        </span>
                        <span class="shadowdialog-rgbacodeblock__prefix"
                              id="shadowdialog-buttonshadow__prefix_a">A:
                            <input  type="text"
                                class="shadowdialog-rgbacodeblock__rgba"
                                id="shadowdialog-rgbacodeblock__rgba_boxshadowa"
                                maxlength="4"
                                value="1.0">
                        </span>
                        <div class="shadowdialog-rgbacodeblock__resultcolor"
                             id="shadowdialog-rgbacodeblock__resultcolor_button"></div>
                        <div
                            class="om-button om-button__icon shadowdialog-buttonshadow__button"
                            id="shadowdialog-buttonshadow__button_boxshadowtype" data-info="none">Нет</div>
                    </div>
                    <div class="shadowdialog-codeblock__panel">
                        <div class="shadowdialog-codeblock__codetab"
                             id="shadowdialog-codeblock__codetab">CSS</div>
                        <div class="shadowdialog-codeblock__copy">Копировать</div>
                        <div class="shadowdialog-codeblock__codearea"
                             id="shadowdialog-codeblock__codearea_buttonshadow">
                            <span class="shadowdialog-codeblock__linenumbers">1</span>
                            <div class="shadowdialog-codeblock__code"
                                 id="shadowdialog-codeblock__code_buttonshadow">box-shadow: 0px 0px 0px 3px #3dc21b;</div>
                        </div>
                    </div>
                </section>

                <!-- TAB: Text-Shadow-->
                <section class="shadowdialog-textshadow shadowdialog-tabsection unvisible" data-info="textshadow">
                    <div class="shadowdialog-optionblock">
                        <div class="om-label shadowdialog-optionblock__label">Тень по X</div>
                        <input class="om-range shadowdialog-optionblock__range"
                               id="shadowdialog-optionblock__range_textshadowx" type="range" value="0" min="-50" max="50">
                        <input class="om-field shadowdialog-optionblock__field"
                               id="shadowdialog-optionblock__field_textshadowx" type="text" value="0" maxlength="3">
                        <div class="om-button om-button__icon om-button__help shadowdialog-optionblock__button"
                             data-help="Сброс">
                            <i class="fas fa-redo"></i> 
                        </div>
                    </div>
                    <div class="shadowdialog-optionblock">
                        <div class="om-label shadowdialog-optionblock__label">Тень по Y</div>
                        <input class="om-range shadowdialog-optionblock__range"
                               id="shadowdialog-optionblock__range_textshadowy" type="range" value="0" min="-50" max="50">
                        <input class="om-field shadowdialog-optionblock__field"
                               id="shadowdialog-optionblock__field_textshadowy" type="text" value="0" maxlength="3">
                        <div class="om-button om-button__icon om-button__help shadowdialog-optionblock__button"
                             data-help="Сброс">
                            <i class="fas fa-redo"></i> 
                        </div>
                    </div>
                    <div class="shadowdialog-optionblock">
                        <div class="om-label shadowdialog-optionblock__label">Радиус размытия</div>
                        <input class="om-range shadowdialog-optionblock__range"
                               id="shadowdialog-optionblock__range_textshadowblur" type="range" value="0" min="0" max="100">
                        <input class="om-field shadowdialog-optionblock__field"
                               id="shadowdialog-optionblock__field_textshadowblur" type="text" value="0" maxlength="3">
                        <div class="om-button om-button__icon om-button__help shadowdialog-optionblock__button"
                             data-help="Сброс">
                            <i class="fas fa-redo"></i> 
                        </div>
                    </div>
                    <div class="shadowdialog-rgbacodeblock">
                        <div class="om-label shadowdialog-rgbacodeblock__label">Цвет тени</div>
                        <span class="shadowdialog-rgbacodeblock__prefix">R:
                            <input  type="text"
                                class="shadowdialog-rgbacodeblock__rgba"
                                id="shadowdialog-rgbacodeblock__rgba_textshadowr"
                                maxlength="3"
                                value="255">
                        </span>
                        <span class="shadowdialog-rgbacodeblock__prefix">G:
                            <input  type="text"
                                class="shadowdialog-rgbacodeblock__rgba"
                                id="shadowdialog-rgbacodeblock__rgba_textshadowg"
                                maxlength="3"
                                value="0">
                        </span>
                        <span class="shadowdialog-rgbacodeblock__prefix">B:
                            <input  type="text"
                                class="shadowdialog-rgbacodeblock__rgba"
                                id="shadowdialog-rgbacodeblock__rgba_textshadowb"
                                maxlength="3"
                                value="0">
                        </span>
                        <span class="shadowdialog-rgbacodeblock__prefix">A:
                            <input  type="text"
                                class="shadowdialog-rgbacodeblock__rgba"
                                id="shadowdialog-rgbacodeblock__rgba_textshadowa"
                                maxlength="4"
                                value="1.0">
                        </span>
                        <div class="shadowdialog-rgbacodeblock__resultcolor"
                             id="shadowdialog-rgbacodeblock__resultcolor_text"></div>
                        <div class="om-button om-button__icon shadowdialog-buttonshadow__button"
                            id="shadowdialog-buttonshadow__button_textshadowtype" data-info="none">Нет</div>
                    </div>
                    <div class="shadowdialog-codeblock__panel">
                        <div class="shadowdialog-codeblock__codetab">CSS</div>
                        <div class="shadowdialog-codeblock__copy">Копировать</div>
                        <div class="shadowdialog-codeblock__codearea"
                             id="shadowdialog-codeblock__codearea_textshadow">
                            <span class="shadowdialog-codeblock__linenumbers">1</span>
                            <div class="shadowdialog-codeblock__code"
                                 id="shadowdialog-codeblock__code_textshadow">text-shadow: 0px 1px 0px #2f6627;</div>
                        </div>
                    </div>
                </section>

                <section class="shadowdialog-tabssection">
                    <div class="shadowdialog-tabssection__tab shadowdialog-tabssection__tab_active"
                         id="shadowdialog-tabssection__tab_buttonshadow">
                         <i class="fas fa-square"></i>
                        <span class="shadowdialog-tabssection__title">Кнопка</span>
                    </div>
                    <div class="shadowdialog-tabssection__tab"
                         id="shadowdialog-tabssection__tab_textshadow">
                         <i class="fas fa-font"></i>
                        <span class="shadowdialog-tabssection__title">Текст</span>
                    </div>
                </section>
                <!-- END: Your App Here -->
            </div>
        </div>

        <script src="/js/ShadowDialog.js"></script>

О проекте

Описание

Генератор CSS кнопок с настраиваемыми стилями, тенями, границами и анимациями

Лицензия

GPL-3.0

Технологии

PHP JavaScript CSS HTML