Все записи автора dreamhelg

Полезные инструменты для CSS-разработки

Имея под рукой правильный набор инструментов, можно значительно ускорить процесс разработки сайта или веб-приложения. В сегодняшней статье вы найдете список самых новых и полезных инструментов для CSS-разработки.

Pure CSS

pure-css

Pure – это набор CSS-модулей, разработанных компанией Yahoo, которые вы можете использовать как основу в любом веб-проекте. Фреймворк значительно облегчает CSS-разработку и если вы о нем еще не слышали, самое время попробовать.

Больше информации: http://purecss.io/

CSS only responsive navigation

navigation

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

Больше информации: http://valdelama.com/css-responsive-navigation

CSS Trashman

css-trashman

Во процессе разработки крупного проекта, бывает довольно сложно сохранить CSS-файлы чистыми и компактными. Но, не беспокойтесь об этом, CSS Trashman справится с задачей. Этот полезный онлайн-инструмент проверит ваш сайт, сожмет CSS-стили и наконец позволит скачать новую, оптимизированную версию вашего CSS-файла.

Больше информации: http://www.csstrashman.com/

Glue

glue

Вместо того чтобы грузить множество маленьких картинок, гораздо лучше использовать одну большую картинку и технику CSS-спрайтов. Glue – это простой, запускающийся из командной строки, инструмент, который соединяет набор картинок в один файл. Так что вы легко можете использовать CSS-спрайты на своем сайте. Очень удобно.

Больше информации: https://github.com/jorgebastida/glue

Helium CSS

helium

Очень часто в больших CSS-файлах остаются неиспользуемые стили, которые, к сожалению, не так уж просто обнаружить. Helium  — это, запускаемый в браузере, JavaScript-инструмент, определяющий неиспользуемые стили из вашего CSS-файла.

Больше информации: https://github.com/geuis/helium-css

Topcoat

topcoat

Topcoat – это очень аккуратная библиотека CSS-классов, специализирующаяся на элементах формы: кнопках, флажках, слайдерах и т.д.  Самый простой способ украсить ваш сайт или веб-приложение за несколько минут.

Больше информации: http://topcoat.io/

.Fitgrd

fitgrd

.Fitgrd – это прочный фундамент для создания собственного адаптивного сайта. Все в ваших руках, кроме сетки, о ней позаботиться.Fitgrd, сэкономив вам кучу времени на написание несущественного кода.

Больше информации: http://www.fitgrd.com/

Normalize.css

normalize

Normalize.css  это HTML5-альтернатива CSS-сбросам.  Он заставляет браузер отрисовывать все элементы более согласованно и в соответствии с современными стандартами. Normalize.css используется множеством популярных сайтов, таких как Twitter Bootstrap, Soundcloud, TweetDeck и многих других.

Больше информации: http://necolas.github.io/normalize.css/

Bear CSS

bear

Bear CSS это не только красивый сайт, но и очень полезный инструмент. Просто создайте HTML-документ и загрузите туда. Bear CSS автоматически сгенерирует загружаемый CSS-файл, основанный на используемых HTML-элементах. Отличная экономия времени!

Больше информации:  http://bearcss.com/

Перевод статьи “Super useful tools for CSS coding”, автор Jean-Baptiste Jung.

Учимся считать с помощью CSS

Закопавшись в глубины CSS-спецификации, вы наткнетесь на CSS-счетчики. Как следует из названия, они позволяют сосчитать какой либо элемент на странице, увеличивая значение при каждом появлении элемента в документе.

Счетчики могут оказаться весьма полезными, например для сайта рецептов. Любые рецепты, независимо от тематики, состоят из набора этапов, которые автору обычно приходится нумеровать. CSS-счетчики могут сделать это автоматически, с их помощью вы даже можете сосчитать картинки в статье, и затем добавить их номера перед подписями. Читать далее Учимся считать с помощью CSS

WordPress. Создаем плагин для вставки стилизованных ссылок

В далеком 2008 году, когда я только начинала вести свой блог, я как-то не подумала о том, что придется выкладывать много ссылок на архивы с примерами и демонстрационные страницы. Со временем таких статей становилось все больше и больше, а мне приходилось ставить обычные текстовые ссылки, которые никак не выделялись из основного текста. При этом, я уже давно придумала как именно сделать удобную вставку красивых ссылок-кнопок, но дальше фантазий дело не доходило. Пришла пора это исправить, в сегодняшней статье мы создадим плагин для вставки стилизованных ссылок в текстовый редактор WordPress.

Если вы еще не поняли о чем именно идет речь, вот пример того как выглядят подобные ссылки:

Идея не нова, почти все блоги о веб-разработке которые я читаю, так или иначе оформляют ссылки на демо-страницы и архивы, поскольку это красиво и удобно. Сразу хочу сказать, я не знаю как у них это реализовано, не пыталась узнать и не искала плагинов, решающих такую задачу. Поэтому, если вы вдруг начнете обвинять меня в плагиате, я буду все отрицать Smile.

1. Задача

Для начала разберемся с задачей: нам нужно иметь возможность вставлять стилизованные ссылки в любом месте статьи, парами или поодиночке. HTML-разметка будет выглядеть следующим образом:

 <div id="my-article-links">
    <a href="#">Пример кнопки</a>
 </div>

Блок #my-article-links служит для отделения блока от основного текста, чистки потока от флоатов и является контейнером для произвольного количества ссылок. Каждая ссылка будет задаваться двумя параметрами– текстом и URL.

2. Плагин

Создаем папку insert_dr_links (префикс dr для исключения совпадений имен) внутри  wp-content/plugins. Внутри папки создаем файл insert_dr_links.php, и добавляем заголовок плагина:

<?php
/*
Plugin Name: Insert custom dr-links
Plugin URI: http://dreamhelg.ru
Description: Simple plugin for inserting custom links
Version: 1.0
Author: dreamhelg
Author URI: http://dreamhelg.ru
*/

Теперь наш плагин можно увидеть и даже активировать в административной панели вордпресс, правда он пока ничего не умеет.

3. Шорткод

Теперь давайте научим плагин работать. Для этого нам понадобиться создать простой шорткод для вставки в редактор необходимого html-кода.

function add_dr_links($atts) {
    extract($atts);

    $i = 0;
    $output = '<div id="my-article-links">';

    foreach ($atts as $value) {
        if (($i %= 2) == 0) {
            $output .= '<a href="' . $value . '">';
        } else {
            $output .= $value . '</a>';
        }
        $i++;
    }

    $output .= '</div>';
    return $output;
}
add_shortcode('links', 'add_dr_links');

Разберем по порядку его работу. Первым делом, мы распаковываем полученные атрибуты, назначаем переменной $i значение 0, для определения четного элемента, а переменной $output задаем начало разметки блока ссылок.

 extract($atts);

 $i = 0;
 $output = '<div id="my-article-links">';

Поскольку ссылок может быть несколько, циклом перебираем полученные атрибуты, внутри которого четные элементы определяем как ссылку, а нечетные как текст ссылки, добавляя к переменной $output соответствующую разметку. После того как достигнут конец цикла, закрываем блок ссылок, и возвращаем переменную $output.

foreach ($atts as $value) {
        if (($i %= 2) == 0) {
            $output .= '<a href="' . $value . '">';
        } else {
            $output .= $value . '</a>';
        }
        $i++;
    }

    $output .= '</div>';
 return $output;

Последняя строчка регистрирует нашу функцию add_dr_links(), как шорткод links. Теперь, если в вы вставите в редактор следующую строчку, плагин отобразит ее в виде ссылок, завернутых в нужную нам разметку.

[links link="http://ya.ru" text="яндекс" link1="http://google.ru" text1 ="гугл" ]

Полдела сделано, теперь давайте сделаем наш плагин немного удобнее для использования.

4. Плагин для tinyMCE

Шорткод работает, но заниматься вставкой квадратных скобок, прописывать параметры, следить чтобы не было ошибок – все это нудно и не очень удобно. Давайте переложим эту работу на плечи нашего визуального редактора tinyMCE, для этого нам понадобиться всего лишь написать несложный плагин.

Для начала создадим внутри папки с нашим плагином новую папку с названием mce, а внутри нее папку с названием insert_links, а внутри нее файл с именем insert_links.js. В этом файле будет инициализирован наш плагин. Также, внутри папки insert_links создайте папку img, и файл с именем dialog.htm. В папке img будет лежать иконка для кнопки редактора, в моем случае это картинка со звеньями цепи, вы можете выбрать любую на свой вкус. Файл dialog.htm это окно, которое будет открываться по клику на кнопку редактора, чуть позже мы добавим туда нужную html-разметку.

Добавляем плагин в wordpress

Теперь, нам нужно сообщить вордпресс о том, что мы планируем добавить новый плагин визуального редактора, для этого нам потребуется следующий код:

function dr_insert_links($plugin_array){
    $plugin_array['dr_insert_links'] = WP_PLUGIN_URL . '/insert_dr_links/mce/insert_links/insert_links.js';
    return $plugin_array;
}

function dr_add_button($buttons){
    array_push($buttons, "|", "dr_insert_links");
    return $buttons;
}

function dr_custom_button(){
    if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
        return;

    //Add only in Rich Editor Mode
    if( get_user_option('rich_editing') == 'true'){
        add_filter('mce_external_plugins', 'dr_insert_links');
        add_filter('mce_buttons', 'dr_add_button');
    }
}

add_action('init', 'dr_custom_button');

Первая функция dr_insert_links() – добавляет в массив плагинов редактора новый плагин dr_insert_links, указывая путь к предварительно созданному нами файлу insert_links.js. Следующая функция dr_add_button() добавляет новую кнопку редактора, dr_insert_links. Функция dr_custom_button() запускает фильтры, добавляющие плагин и кнопку к редактору, при условии, что пользователь имеет права на редактирование записей и страниц, а также находится в режиме визуального редактора. Последним идет экшен для запуска функции dr_custom_button().

Инициализируем плагин

Возможно вы удивитесь, но после всех этих функций, вы все равно не увидите кнопки в редакторе. Для того чтобы она появилась, нужно отредактировать предварительно созданный нами файл insert_links.js.  Открываем и вставляем следующий код:

(function(){
    tinymce.create("tinymce.plugins.DrInsertLinks",{
        init:function(a, b){
            a.addCommand("drInsert", function(){
                a.windowManager.open({
                    file: b + "/dialog.htm",
                    width: 420,
                    height: 125,
                    inline: 1
                })
            });
          
            a.addButton("dr_insert_links",{
                title: "insert_links.desc",
                cmd: "drInsert",
                image: b + "/img/link.gif"
            });
        },

        getInfo:function(){
            return{
                longname:"Insert custom links",
                author:"dreamhelg",
                authorurl:"http://dreamhelg.ru",
                version:"1.0"
            }
        }
    });
    
    tinymce.PluginManager.add("dr_insert_links",tinymce.plugins.DrInsertLinks)
})();

Сначала создаем функцию create для создания плагина DrInsertLinks, внутри нее запускаем функцию init, инициализирующую плагин, а внутри нее еще две функции: addCommand() и addButton(). Первая функция addCommand() служит для добавления новой команды в редактор, в нашем случае она будет открывать диалоговое окно, путь к которому указывается в свойстве file (переменная b содержит url к папке с плагином).

Вторая функция addButton() добавляет долгожданную кнопку в редактор, в свойствах перечисляются название кнопки, команда, которая будет запущена при нажатии (та команда, которую мы только что создали с помощью функции addCommand) и картинка для кнопки.

Функция getInfo() возвращает информацию об авторе плагина, например для окна помощи.

И наконец последняя строчка добавляет только что описанный нами плагин dr_insert_links. Теперь, если вы все сделали правильно, то должны уже увидеть кнопку, а также диалоговое окно, появляющееся при нажатии.

Окно пустое, потому что мы пока ничего туда не добавили. Давайте это исправим.

Диалоговое окно плагина

Как не трудно догадаться по расширению, диалоговое окно представляет собой обычный html-файл, добавляем в него следующую разметку:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Вставить ссылку</title>
</head>
    
<body> 
<form id="dr-links" method="" action="">
    <div id="dr-container">
        <fieldset>
            <legend>Атрибуты ссылки</legend>
            <span>URL</span><input type="text" id="link" name="link1" /><br/>
            <span>текст</span><input type="text" id="text" name="text1" />
        </fieldset>
    </div>
    
    <div>
        <input type="button" id="add_link" name="add_link" value=" + " class="mceButton"/>
        <input type="button" id="insert" name="insert" value="вставить" />
        <input type="button" id="cancel" name="cancel" value="отменить" />
    </div>
</form>
</body>
</html>

Ничего сложного, доктайп, мета-тег с кодировкой, чтобы русские символы нормально отображались, простая форма с двумя полями ввода, и тремя кнопками. Одно поле для ввода ссылки, другое для текста, кнопка с плюсом доля добавления дополнительных полей. Добавим немного CSS-стилей для красоты:

<style type="text/css">
    fieldset{
        margin: 5px 0 10px 0;
        overflow: hidden;
    }

    fieldset span{
        width: 40px;
        display: block;
        float: left;
        clear: left;
        line-height: 15px;
    }

    fieldset input{
        margin-bottom: 5px;
}
 </style>

Получилось вполне неплохо, только кнопки пока не работают. Чтобы они заработали, нужно подключить в секцию head, jquery и файл tiny_mce_popup.js, с помощью которого мы будем передавать введенные данные в редактор.

<script type="text/javascript" src="/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/wp-includes/js/tinymce/tiny_mce_popup.js"></script>

В принципе jquery тут не обязателен, можно обойтись и без него, просто мне не хочется. Добавим следующий код, для того чтобы кнопки формы заработали:

<script type="text/javascript">
            jQuery(document).ready(function(){

                jQuery("#insert").click(function(){
                    var shortcode = ' ';

                    jQuery("form").find("input:text").each(function(){
                        var att_name = jQuery(this).attr("id"),
                        att_value = jQuery(this).val(),
                        att_result = att_name + '="' + att_value + '" ';

                        shortcode += att_result;
                    })
                
                    shortcode += ']';
                    tinyMCEPopup.editor.execCommand('mceInsertContent', false,  shortcode);
                    tinyMCEPopup.close();
                })

                jQuery("#add_link").click(function(){
                    newid = jQuery("input:text").length / 2;
                    output = '<fieldset><legend>Атрибуты ссылки-' + newid +
                        '</legend><span>URL</span><input type="text" id="link' + newid +
                        '" name="link'  + newid + '" /><br/><span>текст</span><input type="text" id="text' + newid +
                        ' " name="text' + newid  + '" /></fieldset>';
                     
                    jQuery("#dr-container").append(output);
                })

                jQuery("#cancel").click(function(){
                    tinyMCEPopup.close();
                })
            })
        </script>

Первым идет код для кнопки “вставить”. Внутри него мы открываем шорткод (обратите внимание: в строке var shortcode = '1 '; вместо единицы должно быть [links , мой плагин подсветки синтаксиса не справился со своей ролью), затем перебираем каждый инпут с типом “текст”, получаем его значение и добавляем к переменной с открытой скобкой шорткода, затем закрываем шорткод. Теперь, когда у нас есть переменная, содержащая готовый шорткод, нужно вставить его в редактор, для этого нам понадобится команда mceInsertContent, редактора tinyMCE.

Если предполагается использование нескольких ссылок, нужно предусмотреть возможность добавления дополнительных полей. Для этого нам и нужна кнопка с плюсом. Здесь всего лишь нужно сгенерировать дополнительные поля с уникальными идентификаторами. Для получения уникального номера, вначале функции мы берем количество уже существующих полей, и делим полученное значение на два. После того как разметка готова, добавляем ее внутрь формы.

Кнопка “отмена” просто закрывает окно, с помощью метода tinyMCE close().

Диалоговое окно готово, и все кнопки работают, можно добавить сколько угодно дополнительных полей.

Добавляем CSS-стили

Пришла пора навести красоту, для этого нам понадобится создать CSS-файл dr-style.css в корневой директории плагина. Поскольку я делаю плагин в первую очередь для себя, кнопки будут выполнены в стиле моего блога:

#my-article-links{
    overflow: hidden;
    margin: 15px 0;
}

#my-article-links a{
    background: #444444; /* Fallback */
    background: -moz-linear-gradient(top, #444444 0%, #333333 100%); /* FF 3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#333333)); /* Chrome, Safari 4+ */
    background: -webkit-linear-gradient(top, #444444 0%,#333333 100%); /* Chrome 10+, Safari 5.1+ */
    background: -o-linear-gradient(top, #444444 0%,#333333 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #444444 0%,#333333 100%); /* IE10+ */
    background: linear-gradient(top, #444444 0%,#333333 100%); /* W3C */

    color: #fff;
    border-color: transparent;
    border-radius: 10px 0 10px 0;
    display: inline-block;
    font-weight: bold;
    padding: 10px 20px;
    text-shadow: 0 1px 0 #444444;
    -webkit-transition: all 100ms linear;
    -moz-transition: all 100ms linear;
    transition: all 100ms linear;
}

#my-article-links a:hover{
    border-radius: 0px 10px 0px 10px;
}

Теперь нужно подключить этот CSS-файл в секцию head, текущей темы. Используем для этого функцию вордпресс wp_register_style(), регистрирующую новый CSS-стиль для последующего безопасного подключения с помощью функции wp_enqueue_style(). Запускаем выполнение функции dr_add_css() на экшен wp_enqueue_scripts:

function dr_add_css(){
    wp_register_style('dr-links', WP_PLUGIN_URL . '/insert_dr_links/dr-style.css');
    wp_enqueue_style('dr-links');
}

add_action('wp_enqueue_scripts', 'dr_add_css');

После этого CSS-файл будет добавлен к текущей активной теме, и вы увидите кнопки-ссылки во всей красе.

Создаем страницу настроек

Несмотря на то, что основная задача выполнена, конечный результат всегда можно немного доработать. В нашем случае (так как мы все-таки делаем плагин), можно добавить страницу настроек, с тем чтобы предоставить пользователю возможность задания собственного стиля для кнопки-ссылки.

Сначала добавляем новый пункт меню, и пустую страницу:

function register_plugin_menu(){
    add_menu_page('Insert Links Options', 'Insert Links', 'edit_posts', 'dr_insert_links', 'dr_css_change');
}

function dr_css_change(){
}

add_action('admin_menu', 'register_plugin_menu');

Я не буду подробно расписывать все параметры, так как это давно известные штуки, о которых я уже неоднократно писала в своем блоге. Следующим этапом добавляем разметку для страницы настроек внутри функции dr_css_change():

 <div class="wrap">
        <div id="icon-options-general" class="icon32"><br/></div>
        <h2>Внешний вид ссылки</h2>
        <form method="POST" action="">
            <?php wp_nonce_field('update-options'); ?>
            <p>
                <input type="radio" id="" name="insert-default" value="default" <?php echo $checked1; ?>/>
                Использовать встроенный стиль кнопки
                <div id="my-article-links">
                    <a href="#">Пример кнопки</a>
                </div>
            </p>
            <p>
                <input type="radio" id="" name="insert-default" value="custom" <?php echo $checked2; ?> />
                Добавить собственный стиль<br/>
                <code>
                    ID контейнера для кнопки - <strong>#my-article-links</strong>,
                    стиль для кнопки <strong>#my-article-links a</strong>
                </code>
            </p>
            <textarea cols="50" rows="10" name="custom-css" id="custom-css"><?php echo get_option('user-css'); ?></textarea>
            
            <p><input type="submit" id="update-css-option" name="update-css-options" class="button-primary"/></p>
        </form>
    </div>

Используем простую форму с двумя переключателями и одним текстовым полем для ввода пользовательского CSS. Переменные $checked1-$checked2, используются для отображения текущего состояния переключателя. Обратите внимание, что в разметке мы используем пример кнопки, чтобы пользователь мог видеть как именно смотрится кнопка с дефолтным CSS-стилем. Для того, чтобы отобразить кнопку в дефолтном стиле, нам нужно подключить уже знакомый CSS-файл в админ-панель вордпресс, делается это очень просто:

add_action('admin_head', 'dr_add_css');

Теперь наша страница настроек выглядит вот так:

Давайте научим ее работать. Для определения состояния переключателя и хранения пользовательского CSS-стиля, будем использовать механизм опций вордпресс.

function dr_css_change(){
    $checked1 = '';
    $checked2 = '';

    if($_REQUEST['update-css-options']){
        if($_REQUEST['insert-default'] == 'default'){
            update_option('default-css', 'true');
        }else{
            update_option('default-css', 'false');
            update_option('user-css', $_REQUEST['custom-css']);
        }
    }

     if(get_option('default-css') == 'true'){
        $checked1 = 'checked';
        $checked2 = '';
     }else{
        $checked2 = 'checked';
        $checked1 = '';
     }

Вначале объявляем переменные $checked1-$checked2, далее, проверяем пришел ли запрос от кнопки отправки нашей формы и чему равно значение переключателя.  В зависимости от состояния переключателя, обновляем одну или две опции. Затем обновляем значение переменных $checked, в зависимости от значения опции ‘default-css’. Полный код функции dr_css_change() выглядит следующим образом:

function dr_css_change(){
    $checked1 = '';
    $checked2 = '';

    if($_REQUEST['update-css-options']){
        if($_REQUEST['insert-default'] == 'default'){
            update_option('default-css', 'true');
        }else{
            update_option('default-css', 'false');
            update_option('user-css', $_REQUEST['custom-css']);
        }
    }

     if(get_option('default-css') == 'true'){
        $checked1 = 'checked';
        $checked2 = '';
     }else{
        $checked2 = 'checked';
        $checked1 = '';
     }
 ?>
    <div class="wrap">
        <div id="icon-options-general" class="icon32"><br/></div>
        <h2>Внешний вид ссылки</h2>
        <form method="POST" action="">
            <?php wp_nonce_field('update-options'); ?>
            <p>
                <input type="radio" id="" name="insert-default" value="default" <?php echo $checked1; ?>/>
                Использовать встроенный стиль кнопки
                <div id="my-article-links">
                    <a href="#">Пример кнопки</a>
                </div>
            </p>
            <p>
                <input type="radio" id="" name="insert-default" value="custom" <?php echo $checked2; ?> />
                Добавить собственный стиль<br/>
                <code>
                    ID контейнера для кнопки - <strong>#my-article-links</strong>,
                    стиль для кнопки <strong>#my-article-links a</strong>
                </code>
            </p>
            <textarea cols="50" rows="10" name="custom-css" id="custom-css"><?php echo get_option('user-css'); ?></textarea>
            
            <p><input type="submit" id="update-css-option" name="update-css-options" class="button-primary"/></p>
        </form>
    </div>

<?php }

В административной панели все хорошо, переключатель работает как надо, осталось сделать так, чтобы он заработал для текущей темы. Для этого нам понадобится слегка переписать код подключения CSS-файла к шаблону:

$option = get_option('default-css');

function insert_user_css(){
    echo '<style type="text/css">';
    echo get_option('user-css');
    echo '</style';
}

if($option == 'true'){
    add_action('wp_enqueue_scripts', 'dr_add_css');
}else{
    add_action('wp_head', 'insert_user_css');
}

Все просто – объявляем переменную $option со значением опции ‘default-css’ и создаем функцию insert_user_css(), которая будет содержать пользовательский css-файл. Затем, в зависимости от значения переменной $option, либо подключаем в шаблон css-файл плагина, либо выводим пользовательский CSS в секцию head.

На этом работу можно считать законченной, как видите плагин уже работает в моем блоге. Если у вас есть какие-то замечания или предложения по работе плагина, буду рада услышать.

скачать

OKShadow – создаем движущуюся тень.

Те, кто следит за мной в твиттере, видели, что на днях я публиковала ссылку на музей исчезающих звуков, где помимо забавного содержимого сайта, мне на глаза попался интересный эффект следующей за курсором тени. Вся магия этого эффекта реализуется  с помощью jquery-плагина Okshadow, разработанного компаний Okfocus, о нем и пойдет речь в сегодняшней статье.

Плагин работает очень просто: добавляет указанному элементу CSS-свойство box-shadow (для блочных элементов), или text-shadow, для текста, изменяя параметры этих свойств в соответствии с координатами мыши и заданными настройками. Несмотря на достаточно простую реализацию, с помощью плагина можно создавать различные интересные эффекты.

Использование

По умолчанию OKShadow работает только для блоков:

 jQuery("#one").okshadow({
        fuzz: 10,
        xOffset: 30,
        yOffset: 30
  });

С текстом плагин тоже умеет работать, для этого достаточно указать специальное свойство. Единственная разница в сравнении с блоком – нельзя указать размер и движение тени.

 jQuery("#text").okshadow({
        textShadow: true
 });

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Указав значение transparent, можно создать эффект призрачного текста, текст получится невидимым, но останется его тень. Дополнительный CSS-код придает тексту резкость при наведении мыши, а свойство fuzzMin сохраняет размытие остальных параграфов, используйте !important.

jQuery("#ghost-text").okshadow({
        textShadow: true,
        transparent: true
});
#ghost-text p:hover{
        color: #000 !important;
        text-shadow: none !important;
        cursor: pointer;
}

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Параметры

Плагин можно легко настроить по собственному вкусу, вот список доступных параметров:

Свойство

Описание

Значение по умолчанию

color цвет тени

#888

fuzz радиус размытия, в зависимости от расстояния мыши

40

fuzzMin минимальный радиус размытия в пикселях

0

fuzzMax максимальный радиус размытия в пикселях

null

xOffset смещение тени по горизонтали

0

xFactor позиция размытия в зависимости от расстояния мыши, по горизонтали

30

xMax ограничение горизонтального смещения тени, в пикселях

null

yOffset смещение тени по вертикали

0

yFactor позиция размытия в зависимости от расстояния мыши, по вертикали

30

yMax ограничение вертикального смещения тени, в пикселях

null

textShadow применяет тень к тексту, если свойство не указано, тень применяется к контейнеру текста (box-shadow)

false

transparent делает цвет текста прозрачным, для создания эффекта призрачного текста

false

Методы

OKShadow имеет один метод setoption, для изменения параметров после инициализации. Он принимает в качестве аргументов хэш параметров или отдельную строку ключ = значение.

$('#ok').okshadow();
$('#ok').data("okshadow").setoption({
  "color": "red",
  "fuzzMin": 10,
});

С помощью этого метода создан один из примеров с официального сайта плагина, эффект неонового текста:

jQuery("#neon").okshadow({
    color: 'red',
    textShadow: true,
    fuzzMin: 0,
    xMax: 10,
    yMax: 10,
    transparent: true
});


var okshadow = jQuery("#neon").data("okshadow"), //получаем объект okshadow
delay = 100,          //скорость смены цветов
hue = 0,            //цвет
fuzz = 	5,         //радиус размытия
fuzzMax = 10,     // максимальный радиус размытия
fuzzDir = false; // переменная влияющая на смену радиуса размытия


var loop  = function (){
    if(fuzz >= fuzzMax || fuzz === 0) //если начальный радиус размытия больше максимального или равен нулю
        fuzzDir = !fuzzDir;      //присваиваем переменной значение, противоположное текущему

    fuzz += fuzzDir ? 1 : -1;        //изменяем радиус размытия, согласно переменной fuzzDir,
                                    //если true - прибавляем единицу, если false - отнимаем единицу

    hue += 5;                       //присваиваем начальное значение цвета 5
    hue %= 360;                     //и получаем остаток от деления на 360, для генерации цветовых значений

    if(hue == 80)                   //при получении зеленого цвета
        hue += 75;                   //заменяем его на другой оттенок

    jQuery("#neon").css("color", "hsla(" + hue + ",100%, 50%, 0.1)" ); //назначаем цвет текста через CSS-свойство color

    okshadow.setoption({
        "color" : "hsl(" + hue + ",100%, 50%)",  //изменяем цвет тени
        "fuzzMin" : fuzz                         //и радиус размытия
    });

    setTimeout(loop, delay);    //устанавливаем запуск функции по таймеру
};
loop();     
OKFOCUS

Однажды, я уже публиковала пример неонового текста, как вы считаете какой из них лучше?

Примеры

Как уже упоминалось выше, с помощью плагина можно создать довольно разнообразные эффекты, включая симуляцию глубины резкости и эффект фокусировки. Некоторые примеры работают не во всех браузерах (в частности в опере не все в порядке), некоторые заметно подтормаживают, тем не менее они стоят того, чтобы взглянуть.

Скачать плагин.

Репозиторий на гитхабе.

Изучаем CSS-градиенты за час

Вы отказываетесь использовать CSS-градиенты в своих проектах просто потому что не понимаете их, или же вас не устраивает текущая поддержка браузерами? Друзья мои, пришла пора избавиться от изображений, шириной в 1 пиксель. Если вам интересно узнать о том как использовать CSS-градиенты, эта статья для вас. Мы разберем основы синтаксиса, а затем перейдем к сложным эффектам с большим количеством советов и примеров. Читать далее Изучаем CSS-градиенты за час

7 полезных онлайн-инструментов для работы с изображениями

Любому разработчику или дизайнеру часто приходится работать с изображениями, поскольку они, несомненно, представляют собой значительную часть любого сайта. Конечно для этого обычно используются такие десктопные приложения как фотошоп или гимп, но кроме них существует целый ряд полезных онлайн-инструментов, предназначенных для хранения, ресайза и изменения картинок в онлайн-режиме. В сегодняшней статье мы рассмотрим самые лучшие из них. Читать далее 7 полезных онлайн-инструментов для работы с изображениями

Обзор CSS-свойства vertical-align

Довольно часто от веб-разработчиков можно услышать возмущенный возглас: “vertical-align не работает!”.  Несмотря на то, что назначение этого свойства следует из его названия, на практике, начинающие разработчики, равно как и многие ветераны CSS, часто испытывают трудности с его применением.

В сегодняшней статье, я постараюсь раскрыть все непонятные моменты этого CSS-свойства.

Чего не делает vertical-align

Наиболее распространенное заблуждение относительно свойства vertical-align состоит в том, что оно влияет на вертикальное выравнивание всех дочерних элементов контейнера, к которому применяется. Например, если мы применим к контейнеру свойство vertical-align: top, предполагается, что все содержимое контейнера будет выровнено по верхнему краю контейнера.

Это напоминает мне старые, добрые времена табличной верстки:

    <td valign="top">  
      Содержимое ячейки..
    </td>  

В этом примере табличной ячейки, свойство valign (сейчас уже запрещенное в HTML5), действительно прижмет все содержимое ячейки к верхнему краю. Возможно исходя из этого, CSS-разработчики ожидают похожего эффекта, от применения свойства vertical-align.

Но свойство vertical-align так не работает.

Как на самом деле работает vertical-align

Свойство vertical-align можно разделить на три простых правила:

  1. Оно применяется только к элементам со свойствами display: inline; и display: inline-block;
  2. Оно влияет на положение самого элемента, а не его содержимого (за исключением табличных ячеек)
  3. Когда оно применяется к табличной ячейке, то влияет на содержимое ячейки, а не на саму ячейку.

Другими словами, следующий код не будет иметь никакого эффекта:

    div {  
        vertical-align: middle; /* эта строка не будет работать */  
    }  

Почему? Потому что <div>  — это блочный элемент. Конечно, если вы измените у дива свойство display, на inline, или inline-block, vertical-align сразу заработает.

Правильное использование свойства vertical-align, поможет выровнять строчный элемент относительно других строчных элементов на странице. Насколько высоко или низко расположится элемент по вертикали, будет зависеть от размера соседних строчных элементов, или от свойства line-height, заданного  для этой строки.

На картинке ниже, представлен пример того, как ведут себя строчные элементы, когда вы применяете свойство vertical-align:

Значения свойства – ключевые слова

Свойство vertical-align может принимать следующие значения:

  • baseline (значение по умолчанию)
  • bottom
  • middle
  • sub
  • super
  • text-bottom
  • text-top
  • top

Большинство из них вам скорее всего не понадобятся, но всегда хорошо знать из чего можно выбрать. Например, на демо-странице, текстовому полю назначено свойство vertical-align: top, благодаря чему, оно выровнено относительно самого высокого элемента в строке (большой картинки).

А если вы не хотите располагать элемент относительно изображений или других строчных элементов, можно использовать значения text-top или text-bottom, чтобы ваш элемент позиционировался относительно текста, расположенного в строке.

О значении “middle”

К сожалению, vertical-align: middle; не расположит строчный элемент по центру самого большого элемента в строке, как этого можно было бы ожидать. Вместо этого, значение middle расположит элемент относительно гипотетической строчной “x” (также называемой “x-высотой”). По-хорошему, это значение следовало бы назвать “text-middle”, для правильной идентификации его механизма.

На этой демо-странице, размер текста специально увеличен, чтобы вы могли посмотреть, как именно выравниваются элементы, при значении middle. По всему выходит, что это значение, вам будет нужно гораздо реже, чем остальные.

Цифровые значения свойства

Возможно вы не знали, но vertical-align в качестве значения может принимать абсолютные и процентные значения, все приведенные ниже примеры будут правильными:

    input {  
        vertical-align: 100px;  
    }  
      
    span {  
        vertical-align: 50%;  
    }  
      
    img {  
        vertical-align: -300px;  
    }  

В чем разница между абсолютными значениями и ключевыми словами, можно почитать в CSS-спецификации, или (что на мой взгляд гораздо полезнее) самостоятельно попробовать различные варианты.

Перевод статьи “Understanding CSS’s vertical-align Property”, автор Louis Lazaris

10 отличных jQuery-сниппетов

jQuery вдохнул новую жизнь в JavaScript-программирование. Благодаря этому замечательному инструменту, появилась возможность с легкостью создавать мощные и интерактивные страницы. В сегодняшней статье собраны 10 полезных примеров jQuery-кода, которые обязательно вам пригодятся при разработке клиентской стороны сайта. Читать далее 10 отличных jQuery-сниппетов