Юрий Артюх — специалист по верстке с многолетним стажем. Принимал участие в разработке нескольких сотен проектов среди которых такие как kremlin.ru, groupon.ru, subscribe.ru, sports.ru, ukr.net, zn.ua, delo.ua, pravda.com.ua.

Мастер-класс может быть интересен и полезен всем, кто работает с фронт-эндом.

Уже более 7 лет Юрий ведет популярный блог посвященный проблемам верстки CSSing.org.ua. Также является активным участником сообщества русского крыла веб-стандартистов, и организатором первой украинской конференции веб-разработчиков UA WEB.

В конце мастер-класса у нас будет возможность задать любые вопросы.

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

Дополнительная информация и подробный план мастер-класса можна посмотреть на сайте

• Zend Framework Day
• Мастер-класс по Sphinx
• Конференция ZFConf 2011
• ZFConf Ukraine
• Анонс мастер-классов по JavaScript’у
• Мастер-классы по JavaScript’у
• PDFEED – или RSS2PDF в новом обличье

#!/bin/bash
# Javascript source
SRC="./src/"
RES="./project.min.js"

# declare script array
ARRAY=( 'jquery' 'jquery-ui' 'jquery.tooltip' 'jquery.colorbox')
# get number of elements in the array
ELEMENTS=${#ARRAY[@]}

rm $RES

# echo each element in array
# for loop
for (( i=0;i<$ELEMENTS;i++)); do
    echo "Compress file '${ARRAY[${i}]}'"
    echo "/*${ARRAY[${i}]}*/" >> $RES
    java -jar yuicompressor-2.4.2.jar --charset utf-8 $SRC${ARRAY[${i}]}.js >> $RES
done

Запускаем скрипт и ждем окончания выполнения – вуаля – у нас один сжатый скрипт, использование которого облегчает жизнь серверу…

Для CSS написан аналогичный скрипт, лишь разница в путях, можно и объединить скрипты в один, но меняя JS пережимать еще и CSS не хочется…

Другие посты на эту тему

• Получение реального размера картинки при помощи jQuery

Решил я начать новую серию статей – “CSS для начинающих”, надеюсь, будет полезно многим. Первый урок будет посвящен кнопкам…

Рисуем кнопку

Для начала нам необходимо нарисовать кнопку, вроде этой:

Для этого лучше всего нам подойдет инструмент “Rounded Rectangle Tool” в Photoshop, с него и начнем – нарисуем нечто вроде:

Изменяя параметр Radius вы сможете задать желаемое загругление кнопок ( в примере для наглядности контент полностью прозрачный (“Fill Opacity” => 0%)):

Ширина объекта в данном примере 320px – т.е. я предполагаю, что кнопок большего размера не будет.

Границу выводим с помощью “Stroke” (из “Blending Options”), тип – градиент – от #000000 до #676767:

Теперь не мешало бы и залить кнопочку градиентом (сверху указан параметр opacity, внизу цвет; инструмент “Gradient Overlay” из “Blending Options”):

Результат:

Результат с залитой границей:

Если мы сделаем цветной фон:

Ну вот – кнопочка и готова, приступим к следующему шагу…

Простая CSS кнопка

Самый простой вариант – у нас все кнопки одного размера и одного/двух цветов, соответственно готовим небольшой “спрайт” на все случаи жизни (простым копированием слоя с кнопкой):

Теперь нам остается лишь слегка подправить CSS для таких кнопок:

.button {
    cursor:pointer;
    display:block;
    height:70px;
    width:320px;
    line-height:70px;
    text-align:center;
    background-image:url('images/buttons.png');
    background-repeat:no-repeat;
}
.button.green { background-position:0 0 } /* зеленая кнопка */
.button.green:hover { background-position:0 -350px } /* активная зеленая кнопка */
/* и т.д. */

Сам HTML код элементарен:

<a href="#" title="Label" class="button green">Label</a>
<a href="#" title="Label" class="button white">Label</a>
<a href="#" title="Label" class="button black">Label</a>
<a href="#" title="Label" class="button orange">Label</a>
<a href="#" title="Label" class="button red">Label</a>

Результат предсказуем:

Резиновая CSS кнопка

Теперь усложним задачу – мы не имеем представления какого цвета будут кнопки, и какого размера, мы лишь предполагаем, что кнопки не будут больше 320px в ширину.

Строим DOM

Каждая кнопка будет представлять из себя элемент <a>, обернутый в <li>. Элемент <em> нам так же понадобится для создания резиновых кнопок, чтобы внести ясность приведу следующий скрин:

Ну и сам HTML код:

    <ul class="small">
        <li class="button"><a href="#" title="Label">Label<em></em></a></li>
        <li class="button green"><a href="#" title="Label">Label<em></em></a></li>
        <li class="button white"><a href="#" title="Label">Label<em></em></a></li>
        <li class="button black"><a href="#" title="Label">Label<em></em></a></li>
        <li class="button orange"><a href="#" title="Label">Label<em></em></a></li>
        <li class="button red"><a href="#" title="Label">Label<em></em></a></li>
    </ul>

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

<script type="text/javascript">
    $(document).ready(function(){
        $('form :button, form :submit').each(function(){
            var className = $(this).attr('class');

            $(this).wrap('<div class="button '+className+'"></div>');
            $(this).after('<em></em>');
        });
    });
</script>
<form class="rubber" onsubmit="return false;">
    <input type="button" class="green" title="Button" value="Button"/>
    <input type="submit" class="red" title="Submit" value="Submit"/>
</form>

Пишем CSS

Читаем комментарии по коду:

.button {
    /*
      у нас кнопка с закруглением - значит нам необходимо
      у DOM элемента так же скруглить углы
     */
    border-radius:10px;
    -moz-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-border-radius: 10px;

    /*
      внутренний элемент <a> должен быть смещен относительно <li>
      на 20px - освобождаем место для <em>
     */
    padding-right:20px;

    /*
       данные элемент будет relative - т.е.
       все элементы внутри него с абсолютным
       позиционированием будут плясать от него
    */
    position:relative;
}
.button a, .button em{
    /* ссылке и элементу em задаем одинаковое фоновое изображение */
    background-image:url('css/images/button.png');
    background-repeat:no-repeat;
}
.button a{
    /*
       ссылку делаем блочным элементом
       задаем высоту элемента, а так же свойство
       line-height - с его помощью мы выравниваем текст по вертикали
    */
    display:block;
    height:52px;
    line-height:52px;

    outline:none;
    color:#333;
    font-size:18px;
    text-indent:20px;
    text-decoration:none;
    text-align:center;
    text-shadow: #333 0px -1px 0px;
}
.button em{
    /*
       внутренний элемент так же будет блочным
       с размером 52х20, с абсолютной позиционированием
    */
    display:block;
    position:absolute;
    background-position:100% 0;
    width:20px;
    height:52px;
    top:0px;
    right:0px;
}
/* цвет шрифта для некоторых кнопок лучше поменять */
.button.green a,
.button.black a,
.button.red a
{
    color:#fff;
}
/* тут указываем цвет наших кнопок */
.button.green { background-color:#009e0f }
.button.green:hover{ background-color:#068612 }
.button.white{ background-color:#f0f0f0 }
.button.white:hover{ background-color:#c0c0c0 }
.button.black{ background-color:#000 }
.button.black:hover{ background-color:#333 }
.button.orange{ background-color:#ff7800 }
.button.orange:hover{ background-color:#c60 }
.button.red{ background-color:#f00 }
.button.red:hover{ background-color:#c00 }

Наблюдаем результат

Сравним результат наших трудов в разных браузерах:

Как вы можете заметить, есть несколько проблем с данной реализацией:

• полупрозрачность в IE6 не работает – можем докрутит хаки, но зачем – IE6 можно считать умершим
• box-radius в IE и Opera не работает – либо отказываемся от данной фичи, либо зарисовываем свободное пространство фоновым цветом (для IE так же есть грязный хак, см.: Curved corner (border-radius) cross browser)

Кнопочки можно пощупать на демо, все сорцы доступны по следующей ссылке:

Еще ссылки по теме:

• Scalable CSS Buttons Using PNG and Background
• Bold CSS Buttons
• How to make sexy buttons with CSS
• Make fancy buttons using CSS sliding doors technique
• CSS Sliding Door using only 1 image
• CSS Oval buttons

Другие посты на эту тему

• No Related Post

Уже давненько я поднимал вопрос о стандартах кодирования в PHP, и вот решился описать правила хорошего тона для (X)HTML, CSS и JavaScript’a.

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

• (X)HTML – markup layer – верстка
• CSS – presentation layer – представление
• JavaScript – behavioural layer – поведение

Но давайте по порядку…

Strict DOCTYPE

Не будем вступать в дискуссию, какой стандарт лучше HTML 4.0 иль XHTML 1.0 – оба они хороши и вполне подходят в качестве стандарта, но я придерживаюсь XHTML’a ;). А вот насчет DOCTYPE – то пора уже взрослеть и переходить на strict… если конечно у Вас не табличная верстка, иначе прийдется остаться на transitional…

<!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">

Ссылки:

• W3C: Recommended DTDs to use in your Web document
• Почему так важен DOCTYPE
• XHTML Coding Rules от Виталия Харисова

Кодировка и спец-символы

Кодировка UTF-8 и точка. Не надо разводить холивар, принимаем сие как стандарт.

Далее нам надо бы сию кодировочку прописать в нашем HTML’е – для этого необходимо поместить соответствующий тег внутрь тэга <head>, но есть небольшой подводный камень – есть большой соблазн запихнуть <title> до объявления кодировки – не ведитесь – иначе браузер может заняться произволом и попытается определить кодировку самостоятельно по тексту в <title>, и обычно не очень удачно.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Anton Shevchuk's Home</title>
</head>

Насчет символов аля &, <, > – если вы хотите соответствовать стандартам – то заменяем сие неподобство на соответствующую последовательность &amp;, &lt;, &gt;

Валидация

Зеленый текст W3C validator’а – это наша цель, так что не забывайте закрывать теги, да прописывать обязательные параметры…

<!-- найди ошибки - получи пирожок -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nunc urna metus, ultricies eu, congue vel, laoreet id, justo.
Aliquam fermentum adipiscing pede. Suspendisse dapibus ornare
quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<p>
<a href="/index.php?mod=default&act=image"><img src="/img001.jpg"></a>
<!-- подсказка - их тут пять (XHTML 1.0 Strict)-->

Ссылки:

• The W3C Markup Validation Service
• XHTML-CSS Validator

Форматирование отступами

Отступы – невидимые в браузере, но такие незаменимые для верстки (X)HTML’а – они в разы повышают читаемость кода.
И их использование – просто песня – начинаешь новый вложенный тег – сделай отступ, закрываешь – убери.
В качестве отступа принято использовать символ табуляции (tab) либо несколько пробелов (обычно 4).

Сравните код:

    <ul class="bigBarNavigation"><li>
<a href="/">Home</a></li><li>
<a href="/about.html">About Us</a></li><li>
<a href="/contact.html">Contact Us</a><div class="subMenu"><!-- Example --></div></li></ul>

И код с отступами:

<ul class="bigBarNavigation">
    <li><a href="/">Home</a></li>
    <li><a href="/about.html">About Us</a></li>
    <li>
        <a href="/contact.html">Contact Us</a>
        <div class="subMenu"><!-- Example --></div>
    </li>
</ul>

Точно так же можете применять отступы в вашем CSS файле:

#header  { .. }
    #header h1 { .. }
    #header h2 { .. }

#content { .. }
    #content .title { .. }
    #content .post  { .. }

P.S. Когда займетесь блошиной оптимизацией вашего сайта, то решите, что 4 пробела – это в 4-ре раза больше трафика чем один символ табуляции :)

Теги любят порядок

Очень часто в шапке нашего сайта мы пишем тег <h1> с названием нашего сайта, да еще и оформляем его ссылкой на главную страницу сайта, и для этого обрамляем наш тег <h1> в <a>. Большинство браузеров адекватно отобразит нам сие творение, но с технической точки зрения это не верно, т.к. тег <a> отображается как inline, а <h1> как block, а block элементы не должны располагаться в inline элементах (это bad practices).

Плохо:

<a href="/index.html"><h1>Мой сайт</h1></a>

Хорошо:

<h1><a href="/index.html">Мой сайт</a></h1>

Ссылки:

• Свойства CSS – display

“Дивная” верстка

В английском языке есть термин “divits” – сим термином награждают HTML разметку с чрезмерным использованием div’ов без потребности, я же обзываю такие творения “дивными”. Обычно таким грешат новички, которые для применения стилей CSS оборачивают элементы в div’ы, что и приводит к их размножению без нужды.

<div class="topNav">
    <ul class="bigBarNavigation">
        <li><a href="/">Home</a></li>
        <li><a href="/about.html">About Us</a></li>
        <li>
            <a href="/contact.html">Contact Us</a>
            <div class="subMenu"><!-- Example --></div>
        </li>
    </ul>
</div>

В данном примере, div (с классом “topNav”), оборачивает ul (с классом “bigBarNavigation”). Оба, div и ul, являются блочными элементами, так что нам нет необходимости заворачивать <ul> в <div>; все, что мы можем сделать с <div> мы можем проделать и с <ul>.

Выбираем правильные имена

Самое время обсудить правила именования id и class’ов. Возьмем пример из предыдущего абзаца – у нас использовался неупорядоченные список с идентификатором “bigBarNavigation.” “Navigation” – эта часть имени несет смысловую нагрузку о содержимом списка, но “big” и “Bar” относится лишь к внешнему представлению, актуальному на данный момент, но если мы изменим дизайн сайта (и, скажем, навигация у нас будет выпадающим меню), то данный ID будет неактуальным и добавит лишь путаницы.

<h1>Мой сайт о <span class="blue italic">ёжиках</span></h1>
<!-- Сегодня blue и italic, а завтра red и bold? -->

Приведу примеры “правильных” id и class’ов: “mainNav”, “subNav”, “sidebar”, “footer”, “metaData”, а так же “неправильные” имена (которые описывают дизайн): “bigBoldHeader”, “leftSidebar”, “roundedBox”.

CSS’у CSS’ное

Очень часто, в меню сайтов, используют написание текста в верхнем регистре. Конечно это легко сделать используя клавишу Shift на клавиатуре, но мы то не просто так CSS изучали, так что сей функционал стоит перенести в CSS, для это цели стоит воспользоваться {text-transform: uppercase}. Теперь, если вы вдруг передумаете, Вы сможете с легкостью изменить вид вашего меню изменив лишь одну строчку в CSS.

HTML практически без изменений:

<ul>
    <li><a href="/index.html">Home</a></li>
    <!-- ... -->
</ul>

И совсем чуть-чуть изменений в CSS:

ul li a {text-transform: uppercase}

Ссылки:

• Свойства CSS – text-decoration
• Свойства CSS – text-transform

Class/id для <body>

Зачем? Объясню на примере – представьте – у Вас есть страница сайта на которой расположение элементов иное нежели на всех остальных, дабы сие сотворить Вам необходимо внести изменения в существующий стиль для div’a с id=”mainContent”, для этого создаете новый id=”mainContent-500″, создаете и вносите изменения, и так для каждого элемента в нашем шаблоне, а если у нас таких страниц несколько?, а потом сие еще внедрять разработчику сайта…

Если же у body был класс, то мы бы добавили к нему еще один (<body class=”blogLayout width-500″>) и уже в CSS прописывали измения для всех дочерних элементов (не зря ж это ”’каскадная”’ таблица стилей). Таким образом мы очень сильно упрощаем жизнь разработчикам, которые будут внедрять наш дизайн.

body.width-500 #mainContent {
   width:500px;
}

Логический порядок

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

<body class="body">
    <div id="header"></div>
    <div id="wrapper">
        <div id="content"></div>
    </div>
    <div id="sidebar"></div>
    <div id="footer"></div>
</body>

CSS во внешних файлах

Вы можете добавить описание стилей CSS в самом теле HTML, используя соответствующий тег <style type=”text/css” media=”screen”>…</style>, но только за такое творчество хочется дать по рукам, ведь такой стиль будет применяться только для определенной страницы (хотя иногда в этом есть необходимость), гораздо удобней вынести сие во внешний файл CSS.

Вроде смотрится неплохо:

<style type="text/css" media="screen">
    body { background:pink }
    /* etc */
</style>

Но таки так лучше:

<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" charset="utf-8" />

То же самое касается и JavaScript’a, но о нем чуть позже.

Стандарты кодирования CSS

К сожалению я не нашел стандартов для написания файлов стилей, лишь пожелания:

• Комментарии к элементам
• Форматирование отступам – от этого не все в восторге
• Правильные имена селекторов – уже обсуждалось выше

Ссылки:

• CSS Techniques for Web Content Accessibility Guidelines 1.0
• CSS Validation Service
• Стандарты описанные Виталием Харисовым

Отделяем Javascript от (X)HTML

Нам следует отделить всю функциональность JavaScript’а от (X)HTML’а и запихнуть её в отдельный файл. Для этой цели лучше всего нам подойдет jQuery фреймворк, ибо удобно, быстро, и красиво (да и взгляните на график)

Никогда не используйте аттрибуты on** для установки обработчиков событий, приведу примеры.

Плохо:

<a onclick="doSomething()" href="#">Click!</a>

Хорошо:
Все обработчики событий помещаем во внешний файл, который подключим в начале страницы используя тег <script>. Соответственно немного переделаем предыдущий код:

<a href="backuplink.html" class="doSomething">Click!</a>

В JavaScript файле будет что-то типа:

...
$('a.doSomething').click(function(){
    // Do something here!
    alert('You did something, woo hoo!');
});
...

Семантическая верстка

Возвращаясь к теме верстки стоит упомянуть – дабы писать красивый JavaScript код с использованием jQuery нам необходима максимально прозрачная структура документа.

Очень Плохо:

<table>
    <tr>
        <td onclick="doSomething();">First Option</td>
        <td>First option description</td>
    </tr>
    <tr>
        <td onclick="doSomething();">Second Option</td>
        <td>Second option description</td>
    </tr>
</table>

Плохо:
Вроде получше, но надо бы избавиться от обработчиков событий:

<dl>
    <dt onclick="doSomething();">First Option</dt>
    <dd>First option description</dd>
    <dt onclick="doSomething();">Second Option</dt>
    <dd>Second option description</dd>
</dl>

Хорошо:
Мы убрали все лишние, и добавили id к элементу dl – дабы в JavaScript’е мы смогли добавить обработчики событий для элементов dt:

<dl id="OptionList">
    <dt>First Option</dt>
    <dd>First option description</dd>
    <dt>Second Option</dt>
    <dd>Second option description</dd>
</dl>

К примеру вот так будет выглядеть обработчик событий:

$('#OptionList dt').click(function(){
    /* do something */
});

Лечим JavaScript зависимость

При разработке web-приложений стоит избегать JavaScript зависимости, т.е. наш сайт должен работать и при отключенном JavaScript’e, конечно, каких-то красивостей не будет, но сайт должен работать.

Плохо:

Приведу простейший пример, в данном случае, в зависимости от времени в браузере появится надпись “Доброе утро!” либо “Добрый день!”, но стоит нам отключить JavaScript, и пользователь не увидит ни то, ни другое приветствие.

var now = new Date();
if(now.getHours() < 12)
    document.write('Доброе утро!');
else
    document.write('Добрый день!');

Хорошо:

Приветствие размещается в теле странички:

<p title="Good Day Message">Доброе утро!</p>

И заменяется другим приветствием в зависимости от времени суток:

var now = new Date();
if(now.getHours() >= 12)
{
    var goodDay = $('p[title="Good Day Message"]');
    goodDay.text('Добрый день!');
}

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

Теперь приведу более сложный пример, реализация которого невозможна без изменений серверной части нашего приложения. Давайте сделаем загрузка контента страницы посредством AJAX’а, но при этом оставим поддержку браузеров с отключенным JavaScripti’om, возьмем уже знакомый нам пример с меню сайта:

<ul class="Navigation">
    <li><a href="/">Home</a></li>
    <li><a href="/about.html">About Us</a></li>
    <li><a href="/contact.html">Contact Us</a></li>
</ul>
<div id="MainContent"><!-- Content --></div>

Данный пример работает у нас без JavaScript’a, все страницы в нашем меню используют один и тот же шаблон для вывода информации, и по факту у нас изменяется лишь содержимое div’a с id=”MainContent”. Естественно можно улучшить данный функционал используя для загрузки контента AJAX – для этого добавим следующий код:

$(document).ready(function()
{
    // вешаем обработчик на все ссылки в нашем меню Navigation
    $("ul.Navigation a").click(function(){
        var url = $(this).attr("href"); // возьмем ссылку
            url =+ "?ajax=true";        // добавим к ней параметр ajax=true
        $("#MainContent").load(url);    // загружаем обновленное содержимое
        return false;                   // возвращаем false - дабы не сработал переход по ссылке
    });
});

В данном примере мы предполагаем, что сервер видя параметр ajax=true вернет нам не полностью всю страницу, а лишь обновление для div’a с id=”MainContent” (конечно сервер может быть умнее и не требовать увного указания на использования AJAX’а, а вполне удовлетвориться словив header X_REQUESTED_WITH со значением XMLHttpRequest)

Событие onload

Обычно все Javascript события вешались на “onload” тега <body> – это позволяло нам выполнять их по завершению загрузки страницы. Забудьте это.
jQuery предоставляет нам специальный метод, называемый “ready”, именно он, позволит нам выполнять код после полной загрузки DOM. Именно благодаря ему, мы можем внедрять ненавязчивые скрипты, при этом полностью отделив Javascript от разметки. Используя $(document).ready(), мы можем поставить в очередь целый ряд событий и все они будут выполнены после загрузки страницы.

Слайды, слайды…

Плохо
Приведу пример кода для отображения alert-сообщения с текстом “Hello World”, без использывания jQuery и события onload:

alert('Hello World');

Хорошо
Old-school style – хорошо, коли у Вас нет необходимости во фремворках:

  window.onload = (function(){
    alert('Hello World');
  });

А теперь с использованием jQuery напишем следующий скрипт:

$(document).ready(function()
{
    alert('Hello World');
});

Как видите – действительно просто.

Стандарты кодирования JavaScript

Хорошо, что мы определились с тем, что JavaScript у нас лежит у нас в отдельном файле, но надо бы его привести в божеский вид, т.е. нам нужны стандарты кодирования:

• JavaScript-кодинг-гидлайн от компании Siemens BT
• JavaScript style guide
• Code Conventions for the JavaScript Programming Language
• JavaScript Style Guide

Написание комментариев, так же является хорошим тоном, но если они еще и будут помогать в генерации документации – будет лучше:

• ScriptDoc comprehensive tag reference
• JSDoc – JavaScript Documentation Tool

Так же правилом хорошего тона является сжатия исходных кодов JavaScript’а для уменьшения времени загрузки (для live-сервера):

• Сравнение средств компрессия для JavaScript’ов

P.S.

Если с jQuery у Вас возникли трудности, то советую почитать следующие статьи:

• jQuery для начинающих
• jQuery для начинающих. Часть 2. JavaScript Меню
• jQuery для начинающих. Часть 3. AJAX

Данная статья подготовлена по материалам:

• jQuery and JavaScript Coding: Examples and Best Practices
• 12 Principles For Keeping Your Code Clean

Другие посты на эту тему

• PHP jQuery Cookbook
• jQuery для начинающих. Часть 9. Пишем плагины анимации
• jQuery для начинающих. Часть 8. Расширяем фильтры
• jQuery для начинающих. Часть 7. Пишем плагины
• jQuery для начинающих. Часть 6. События
• (a) Sexy Images jQuery плагин
• jQuery для начинающих. Часть 5. Эффекты
• jQuery iPhone UI

Есть подозрения, что Вы читали мой предыдущий перевод о том, как создать эффект градиента для текста, и вот продолжение, но в этот раз мы займемся фото-галереей…

Всё очень просто – всё что нам понадобиться это дополнительный элемент с картинкой в качестве фона для создания эффекта наложения. И так – приступим…

Основная концепция

Добавляем тэг <span> внутрь <div>, и применяем к нему стиль с фоновым изображением – таким образом у нас получиться эффект наложения двух картинок (вы так же можете воспользоваться jQuery для добавления тэга на лету, пример далее).

В CSS необходимо обратить внимание на то, что тэг div у нас position:relative, а span – position:absolute. Это необходимо, чтобы свойства top и left у элемента span позиционировали его относительно div’a.

IE PNG Hack

Как обычно IE6 отличается умом и сообразительностью – он не отображает нормально полупрозрачные PNG, специально для него существует хак – iepngfix.htc. Скачайте файл iepngfix.htc и вставьте следующий код в тэг <head>:

<!--[if lt IE 7]>
<style type="text/css">
  .photo span { behavior: url(iepngfix.htc); }
</style>
<![endif]-->

Стили

Изменяя свойства тэга <span> Вы можете с легкостью создать свой неповторимый стиль, вот пример 15-ти стилей:

Добавление элемента с помощью jQuery

Как многие знают, добавление пустого элемента не есть ТРУ, по этой причине будем добавлять его средствами JavaScript’a, а именно при помощи библиотеки jQuery. Для этой цели нам необходимо добавить следующий код в тэг :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag
  $(".photo a").prepend("<span></span>");

});
</script>

#1. Простая галерея

Используя предыдущую информацию Вы слегкостью можете создать следующую галерею:

#1b. Мини иконки

В данном примере показана возможность того, что иконки можно спозиционировать по Вашему желанию (примечание: имя CSS класса обязателен для тэга span)

#2. Фото + текст

Создадим галерею, с подписями к картинкам. (тэг em).

#2b. Текст-посказка

#3. Скрепка

#4. Галеряя на “пробке”

Версия для IE6.

sIFR версия (Flash Text Replacement)
В данном примере используется sIFR библиотека – которая заменяет шрифты на рукописные:

#4b. Пробковое дерево и липкая лента

Версия для IE6.

#5. Художественная галерея – Черная рамка

#5b. Художественная галерея – Золотая рамка

#6. Затертость

sIFR версия

#7. Глянец

#8. Дерево

И как завершающий пример – демонстрация того, как с легкостью можно изменить фоновые изображения для любого элемента галереи: ul, li, и em.

Вывод

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

Данный пример доступен для скачивания:

DownloadCSS Photo Gallery

Вольный перевод: CSS Decorative Gallery

Другие посты на эту тему

• PHP jQuery Cookbook
• jQuery для начинающих. Часть 9. Пишем плагины анимации
• jQuery для начинающих. Часть 8. Расширяем фильтры
• jQuery для начинающих. Часть 7. Пишем плагины
• jQuery для начинающих. Часть 6. События
• (a) Sexy Images jQuery плагин
• jQuery для начинающих. Часть 5. Эффекты
• jQuery iPhone UI

Вы хотите добавить эффект градиента для заголовков на страницах вашего сайта, но не хотите заморачиваться с Photoshop’ом? Ну тогда данная статья для Вас.

Это простенький CSS трюк, покажет Вам как можно добавить эффект градиента при помощи PNG картинки (никакого Flash’a и JavaScript’a, только CSS). Всё что Вам потребуется – это добавить пустой тэг <span> в ваши заголовки (имеется ввиду <h1>,<h2> и т.д.) и указать фоновое изображение. Этот способ работает практически во всех браузерах.

Начнем с HTML – добавляем пустой тэг <span> в заголовок:

<h1><span></span>CSS Gradient Text</h1>

Ну и естественно изменяем CSS:

h1 {
    font: bold 330%/100% "Lucida Grande";
    color: #464646;
    /* тут соль */
    position: relative;
}
h1 span {
    /* указываем изображение с градиентом */
    background: url(gradient.png) repeat-x;
    /*позиционируем абсолютно */
    position: absolute;
    /*отображаем блоком на всю ширину заголовка */
    display: block;
    width: 100%;
    height: 31px;
}

И всё, множество примеров можете найти на это странице. Сам пример можете скачать по данной ссылке (в архиве вы найдете все градиенты, готовые к применению).

Чуть не забыл, надо еще повоевать с IE6, для этого в HTML код вставляем следующее:

<!--[if lt IE 7]>
<style>
h1 span {
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->

Кстати, если Вы не хотите править горы HTML кода, за Вас это может сделать jQuery:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //prepend span tag to H1
    $("h1").prepend("<span></span>");
});
</script>

Вольный перевод : http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

Другие посты на эту тему

• Гламурная галерея картинок на CSS
• 12 сайтов, которые хотят увидеть ваш дизайн
• Шпаргалки по PHP, HTML, CSS, Javascript, MySQL и SVN

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

Фон для меню

Для начала создадим background, я конечно не мастер PhotoShop’a, но вот что у меня получилось за пару минут:

Графические кнопочки

Создаем изображения которые у нас будут использовать как ссылки в меню. Для этого воспользуемся PhotoShop’ом:

1. Создаем новый файл размером этак 144x58px. (размер ссылки для первого элемента в меню)
2. Наполняем графическим содержимым сей пункт меню (у меня это лишь надпись выполненная забавным шрифтом):
   
3. Далее увеличим размер полотна (canvas size) в два раза:
   
4. И дорисуем внешний вид элемента меню для реализации события hover
     
   Как сия конструкция будет работать? Да очень просто – ссылке мы явно указываем размер 144x58px, а но событие mouseover перемещаем фоновое изображение вверх:
   
5. Создадим новый файл с произвольным размером и текстом – это будет наша подсказка к ссылке
6. Повторим все предыдущие пункты для создания всех пунктов меню, в результате анаших манипуляций у нас должен получиться вот такой набор изображений:
   

HTML код

Закончили строить из себя дизайнеров, пора начинать кодить – создадим не нумерованный список – <ul>:

• элементу <ul> присвоеим id=”menu”
• каждой ссылке <a> присвоим уникальное имя класса
• Внутрь тэга <a> закинем пустой тэг <span> (понадобиться для реализации подсказок к ссылкам)

<ul id="menu">
<li><a href="#" class="home">Home <span></span></a></li>
<li><a href="#" class="about">About <span></span></a></li>
<li><a href="#" class="rss">RSS <span></span></a></li>
</ul>

CSS код

#menu
Для начала убираем padding и margin у меню, list-style выставляем в none, position указываем как relative . Указываем высоту и ширину меню (см. размеры menu-bg.jpg). Добавляем фоновое изображение.

#menu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 774px;
	height: 210px;
	background: url(images/menu-bg.jpg) no-repeat;
	position: relative;
}

#menu span
Для элементов span параметр display выставляем в none (по умолчанию не будут отображаться). Так же выставляем position как absolute.

#menu span {
	display: none;
	position: absolute;
}

#menu a
Для ссылок нам необходимо спрятать текст, для этого параметру text-indent присваиваем негативное значение (-900%), и текст будет скрыт.

#menu a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}

#menu a:hover
Теперь мы хотим сдвинуть картинку на линке по событию mouseover, для этого добавим в CSS следующий код:

#menu a:hover {
	background-position: left bottom;
}

#menu a:hover span
Так же по событию mouseover необходимо отобразить подсказку

#menu a:hover span {
	display: block;
}

#menu .home
Теперь нам необходимо правильно расставить элементы меню. Для начала укажем размер элемента и фоновое изображение, а затем займемся позиционированием, будем изменять параметры left и top пока не почувствуем морального удовлетворения от внешнего вида меню:

#menu .home {
	width: 144px;
	height: 58px;
	background: url(images/home.gif) no-repeat;
	left: 96px;
	top: 96px;
}

#menu .home span
Теперь проведем подобную операцию для всплывающей подсказки

#menu .home span {
	width: 86px;
	height: 14px;
	background: url(images/home-over.gif) no-repeat;
	left: 28px;
	top: -20px;
}

#menu .about

Копируем всё что мы сделали для элемента .home и переименовываем в .about. Подгоняем размер и расположение, так же заменяем фон.

#menu .about {
	width: 131px;
	height: 51px;
	background: url(images/about.gif) no-repeat;
	left: 338px;
	top: 97px;
}
#menu .about span {
	width: 40px;
	height: 12px;
	background: url(images/about-over.gif) no-repeat;
	left: 44px;
	top: 54px;
}

#menu .rss

Повторим для .rss

#menu .rss {
	width: 112px;
	height: 47px;
	background: url(images/rss.gif) no-repeat;
	left: 588px;
	top: 94px;
}
#menu .rss span {
	width: 92px;
	height: 20px;
	background: url(images/rss-over.gif) no-repeat;
	left: 26px;
	top: -20px;
}

Всё в одном

#menu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 774px;
	height: 210px;
	background: url(images/menu-bg.jpg) no-repeat;
	position: relative;
}
#menu span {
	display: none;
	position: absolute;
}
#menu a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}
#menu a:hover {
	background-position: left bottom;
}
#menu a:hover span {
	display: block;
}
#menu .home {
	width: 144px;
	height: 58px;
	background: url(images/home.gif) no-repeat;
	left: 96px;
	top: 73px;
}
#menu .home span {
	width: 86px;
	height: 14px;
	background: url(images/home-over.gif) no-repeat;
	left: 28px;
	top: -20px;
}
#menu .about {
	width: 131px;
	height: 51px;
	background: url(images/about.gif) no-repeat;
	left: 338px;
	top: 97px;
}
#menu .about span {
	width: 40px;
	height: 12px;
	background: url(images/about-over.gif) no-repeat;
	left: 44px;
	top: 54px;
}
#menu .rss {
	width: 112px;
	height: 47px;
	background: url(images/rss.gif) no-repeat;
	left: 588px;
	top: 94px;
}
#menu .rss span {
	width: 92px;
	height: 20px;
	background: url(images/rss-over.gif) no-repeat;
	left: 26px;
	top: -20px;
}

Это всё, протестировать меню можете тут, а скачать пример тут.

Вольный перевод : http://www.webdesignerwall.com/tutorials/advanced-css-menu/

Другие посты на эту тему

• No Related Post

Вы сделали (ре-)дизайн сайта и хотите похвастаться своим достижением? Не надо спамить социалки – редкий юзер оценит Ваши труды. Для этих целей есть множество подходящих сайтов, и о них далее…

Их достаточно, правда не все любят “нашего” брата – так, что описание лучше придумать позаковыристей и на английском, и так – поехали:

1. BeInspired (RUS)
2. Best Web Gallery – CSS & Flash Design Inspiration
3. CSS Based
4. CSS Creme
5. CSS Beauty Gallery Entries
6. CSS Blast (RUS)
7. CSS Design Yorkshire
8. CSS Gallery – web design gallery
9. CSS Gallery Web Design Gallery For Inspiration
10. CSS Remix
11. css|box (RUS)
12. CSS Vault Gallery
13. CSSGaleri.Com
14. Design Expanse – Best web design resource from Pakistan
15. Design Shack Blog
16. Stylegala | gallery
17. Unmatched Style | Gallery
18. Web Design Gallery

updated: Спасибо Хабру – добавил еще 6 сайтов, включая отечественного производителя.

Те кто предпочитает читать новости в RSS формате я собрал OPML файлик (19-ым в списке каналов идет мой собственный блог ;) ): 18-CSS-design-galleries

Другие посты на эту тему

• Гламурная галерея картинок на CSS
• Аппетитная RSS иконка
• Отдам тему для Wordpress в хорошие руки
• Плагиат добрался до дизайна
• CSS градиент
• Свершилось…
• Шпаргалки по PHP, HTML, CSS, Javascript, MySQL и SVN

Совсем недавно я писал о новом сервисе от Google – Charts API. А теперь пишу о старте нового проекта основанного на данном API: Hohli Charts.

На данный момент проект находиться на стадии alpha разработки и в нем реализованы далеко не все возможности Charts API (что не удивительно – API на свет появилось только 6-го числа ;)). В дальнейшем постараюсь реализовать весь функционал, а пока милости прошу…

Другие посты на эту тему

• Google Closure руководство для начинающих
• Обновление сервиса Charts.HoHli.com
• The Official Google Blog
• jQuery + AJAX + (Google Search API || Yahoo Search API)
• Analyser – специализированный поиск
• Обновление Google PR
• Блог Inside AdSense теперь на русском языке
• Google Chart API

Дошли у меня руки до обновления своего блога, и решил я не только wordpress обновить до версии 2.3.1, но и дизайн сделать более дружелюбным. Так что прошу в гости – критика приветствуется, комментарии требуются :) …

Немного попозже расскажу о истории создания данного дизайна…

Другие посты на эту тему

• Best Ukrainian Blog Awards 2008
• Читателям блога баннер в подарок
• Аппетитная RSS иконка
• Мир, Труд, Май – Анализируй и продвигай
• Отдам тему для Wordpress в хорошие руки
• Плагиат добрался до дизайна
• MS Office OneNote на службе блогера
• 12 сайтов, которые хотят увидеть ваш дизайн