Prootime » CSS

CSS оформление select

dzantiev — Sat, 15 Jan 2011 20:35:49 +0000

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

В демке представлено 4 селекта смотрим.

ДЕМО ВЕРСИЯ
посмотреть в действии СКАЧАТЬ
скачать на компьютер

Вконтакте извините я спер у вас оформление и цвета селекта .

Возьмем обычный select с несколькими option примерно вот:

Обернем его в div с классом “sel_wrap”, в начале которого выстроим структуру нашего селекта дивами. Если представить это все дело на картинке то получится следующая картина:

А код получится следующим:


    
        
            Значение 19

        
        
            Значение 19
            Значение 18
            Значение 17
            Значение 16
            Значение 15
            Значение 14
            Значение 13

Далее приступим к стилям. Естественно скрываем наш обычный селект, а структуру эмилирующую селект стилизуем как нам хочется:

.sel_wrap{
    background:#efefef;
    margin-bottom:5px;
    padding:7px;
}
.sel_wrap select{
    display:none;
}
.sel_imul{
    width:300px;
}
.sel_imul .sel_selected{
    background:#fff;
    border:1px solid #bbb;
    padding:3px 6px;
    font-size:14px;
    font-family:Times;
    cursor:pointer;
    position:relative;
}
.sel_imul.act .sel_selected{
    background:#efefef;
}
.sel_selected .sel_arraw{
    height:100%;
    width:20px;
    background:url('http://bit.ly/gudLNa') 50% 50% no-repeat;
    position:absolute;
    top:0px;
    right:0px;
}
.sel_imul:hover .sel_selected .sel_arraw{
    background-color:#e0e0e0;
    border-left:1px solid #bbb;
}
.sel_imul.act .sel_selected .sel_arraw{
    background-color:#e0e0e0;
    border-left:1px solid #bbb;
}
.sel_imul .sel_options{
    background:#fff;
    border:1px solid #dbdbdb;
    border-top:none;
    overflow:auto;
    position:absolute;
    width:298px;
    display:none;
    z-index:10;
}
.sel_options .sel_option{
    padding:3px 4px;
    font-size:14px;
    font-family:Times;
    border:1px solid #fff;
    border-right:none;
    border-left:none;
}
.sel_options .sel_option:hover{
    border-color:#dbdbdb;
    cursor:pointer;
}
.sel_options .sel_option.sel_ed{
    background:#dbdbdb;
    border-color:#dbdbdb;
}

/*second variant*/
.sec .sel_imul{
    width:200px;
}
.sec .sel_imul .sel_selected{
    border:1px solid #C0CAD5;
}
.sel_imul.act .sel_selected{
    background:#fff;
}
.sec .sel_imul:hover .sel_selected .sel_arraw{
    background-color:#e1e8ed;
    border-left:1px solid #d2dbe0;
}
.sec .sel_imul.act .sel_selected .sel_arraw{
    background-color:#e1e8ed;
    border-left:1px solid #d2dbe0;
}
.sec .sel_imul .sel_options{
    background:#fff;
    border:1px solid #d2dbe0;
    width:198px;
}
.sec.overf .sel_imul .sel_options{
    height:100px;
}
.sec .sel_options .sel_option:hover, .sec .sel_options .sel_option.sel_ed{
    background:#587da1;
    border:1px solid #2a5883;
    color:#fff;
    cursor:pointer;
}
.sec .sel_imul .sel_selected .sel_arraw{
    background-image:url('http://vkontakte.ru/images/darr_dd_out.gif');
}

.sec.round .sel_imul .sel_selected{
    -webkit-border-radius:5px;
}
.sec.round .sel_imul .sel_selected .sel_arraw{
    -webkit-border-radius:0 5px 5px 0;
}
.sec.round .sel_imul .sel_options{
    -webkit-border-radius:0 0 5px 5px;
}
/*green*/
.sec.green .sel_imul .sel_selected{
    border-color:#FFAD99;
}
.sec.green .sel_imul:hover .sel_selected .sel_arraw,
.sec.green .sel_imul.act .sel_selected .sel_arraw{
    background-color:#FFD6CC;
    border-left:1px solid #FFAD99;
}
.sec.green .sel_options .sel_option:hover,
.sec.green .sel_options .sel_option.sel_ed{
    background:#FF9980;
    border:1px solid #FF704D;
    color:#fff;
    cursor:pointer;
}

Здесь уже стили предусматривающие работу javascript’а, и несколько типов селектов.

Дальше приступим к javascript‘у. Во первых сделаем так чтобы при клике на див эмулирующий select, открывался или закрывался список option’ов:

$('.sel_imul').live('click', function() {

    $('.sel_imul').removeClass('act');
    $(this).addClass('act');

    if ($(this).children('.sel_options').is(':visible')) {

        $('.sel_options').hide();

    }
    else {

        $('.sel_options').hide();
        $(this).children('.sel_options').show();

    }

});

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

$('.sel_option').live('click', function() {

    //меняем значение на выбранное
    var tektext = $(this).html();
    $(this).parent('.sel_options').parent('.sel_imul').children('.sel_selected').children('.selected-text').html(tektext);

    //активируем текущий
    $(this).parent('.sel_options').children('.sel_option').removeClass('sel_ed');
    $(this).addClass('sel_ed');

    //устанавливаем значение для селекта
    var tekval = $(this).attr('value');
    tekval = typeof(tekval) != 'undefined' ? tekval : tektext;
    $(this).parent('.sel_options').parent('.sel_imul').parent('.sel_wrap').children('select').children('option').removeAttr('selected').each(function() {
        if ($(this).val() == tekval) {
            $(this).attr('selected', 'select');
        }
    });
});

Ну еще напишем меленький код который будет закрывать селект при холостом клике, blur так зказать:

var selenter = false;
$('.sel_imul').live('mouseenter', function() {
    selenter = true;
});
$('.sel_imul').live('mouseleave', function() {
    selenter = false;
});
$(document).click(function() {
    if (!selenter) {
        $('.sel_options').hide();
        $('.sel_imul').removeClass('act');
    }
});

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

function reselect(select, addclass) {

    addclass = typeof(addclass) != 'undefined' ? addclass : '';

    $(select).wrap('');

    var sel_options = '';
    $(select).children('option').each(function() {
        sel_options = sel_options + '' + $(this).html() + '';

    });

    var sel_imul = '\
                \
                    ' + $(select).children('option').first().html() + '\
                    \
                \
                ' + sel_options + '\
            ';

    $(select).before(sel_imul);

}

Здесь что то нормально не удается показать функцию, можете посмотреть ее в демке

ДЕМО ВЕРСИЯ
посмотреть в действии СКАЧАТЬ
скачать на компьютер

CSS хак для Google Chrome

dzantiev — Sat, 18 Dec 2010 21:50:16 +0000

Очередной супер короткий пост, который будет посвящен одному единственному хаку для браузера Google Chrome, относительно новый браузер, но уже успел полюбиться многим, особенно за скорость работы. Так вот на днях мне понадобился хак для Хрома, который был найден, и я решил им поделиться с народом . Вот:

@media all and (-webkit-min-device-pixel-ratio:0) {
  /*здесь стили для хрома*/
}

Единственное надо отметить что этот хак будет также работать и на Safari, так как у них один движок. Именно под хром так и не нашел хак, кто обладает информацией о таком хаке пишем в комментарии

Красивый input file

dzantiev — Mon, 08 Nov 2010 20:13:20 +0000

Столкнулся с такой проблемой как input типа file, наверное все знают что он выглядит в разных браузерах по разному, и применять к нему какие то стили нету смыла так как они будут работать везде по разному. В общем цель сделать красивый выглядящий везде одинаково input типа file.
Начнем с HTML, пытаться применить к инпуту стили даже не будем и искать Jquery плагин тоже, хотя можно было б найти наверно подходящий. Давайте просто сэмулируем внешний вид инпута, а при нажатии на симулированную кнопку будем пытаться javascript’ом открыть диалоговое окно выбора файла, а чтоб было лучше давайте расположим настоящий инпут над симулированной кнопкой “Обзор”, и сделаем его прозрачным, выглядеть это будет примерно так:

Ну и разметка

Теперь нужно как то расположить это правильно как я уже говорил “CSS”:

.im_input{
    float:left;
}
.im_input input{
    border:1px solid #9f9f9f;
    padding:2px;
    font-size:12px;
    width:250px;
    margin-right:4px;
}
.im_button{
    width:60px;
    height:19px;
    overflow:hidden;
    background:#aeaeae;
    border:1px solid #949494;
    position:relative;
}
.im_button.act{
    background:#bfbfbf;
}
.inptext{
    font-size:13px;
    line-height:19px;
    margin-left:12px;
    position:absolute;
}
#imulated{
    width:60px;
    border:none;
    opacity:0;
    filter: alpha(opacity=0);
    padding:0px;
    margin:0px;
    position:absolute;
}

Сейчас наша штука выглядит так:

В принципе все работает но при выборе файла текстовое поле слева остается пустым исправим это “Javascript”
Будем при onchange настоящего инпута типа файл, менять значение текстового поля. Конечно будем использовать Jquery:

$('#imulated').change(function(){

    $('.im_input input').val($(this).val());

});

Сделаем еще эффект при наведении для кнопки обзор, будем добавлять ему класс:

$('#imulated').mouseover(function(){

    $('.im_button').addClass('act');
    $(this).css('cursor','pointer');

});

$('#imulated').mouseout(function(){

    $('.im_button').removeClass('act');

});

Простым Css это к сожалению не получиться потому что :hover для имулирующей кнопки не срабатывает так как над ним находится прозрачный input.
Ну и последнее будем пробовать нажимать на инпут при нажатии на текстовое поле:

$('.im_input input').click(function(){

    $('#imulated').trigger('click');

});

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

Если вам нужно обменять валюту вам сюда ->обмен валюты

Ну и напоследок несколько видов того как он может выглядеть ото че то сероватый получился

С фантазией у меня не очень так что дальше сами фантазируйте со стилями

ДЕМО ВЕРСИЯ
посмотреть в действии СКАЧАТЬ
скачать на компьютер

Редактируемый список

dzantiev — Sat, 25 Sep 2010 21:01:41 +0000

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

Конечно же будем использовать javascript также библиотеку jQuery, для перемещения элементов по списку. Ну а начнем как всегда с html.

HTML

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


	1. Element1
	2. Element2
	3. Element3

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


	1.
	Element1

Далее нужно проделать тоже самое со всеми элементами. Теперь наши элементы имеют следующую структуру:

С html вроде все понятно давайте теперь приведем это все в божеский вид. Приступим к CSS.

CSS

Зададим списку какую нибудь ширину и расположим посередине, еще уберем отступы зададим фон в общем вот:

.mylist{
    background:#eee;
    padding:0px;
    list-style:none;
    margin:0px;
    width:250px;
    margin:0px auto;
    border:1px solid #aaa;
    border-top:none;
  }

Дальше приступим к самим элементам списка, установим отступы (pdding), ну и какой нибудь эффект при наведении:

.mylist li{
    border-top:1px solid #aaa;
    padding:4px 7px;
    overflow:hidden;
  }
.mylist li:hover{
    background:#bbb;
  }

Теперь уже приступим к содержимому самих элементов это два span’a и три div’a начнем со span’ов:

.mylist .num{
    color:#000;
    width:30px;
    float:left;
  }
.mylist .subj{
    color:#444;
    width:150px;
    float:left;
  }

Цвет текста, ширины и float’a думаю достаточно, все таки это пост не о том как красивее оформить список . Дальше приступим к div’ам , кнопкам, скроем их и будем показывать только при наведении на элемент списка, ну еще разукрасим в разные цвета чтоб они отличались, допустим кнопка вверх будет зеленым цветом, вниз – оранжевым, кнопка удаления – красным:

.mylist div{
    visibility:hidden;
    cursor:pointer;
  }
.mylist li:hover div{
    visibility:visible;
  }
.mylist .top{
    height:17px;
    width:17px;
    float:left;
    background:green;
  }
.mylist .bottom{
    height:17px;
    width:17px;
    float:left;
    background:orange;
  }
.mylist .delete{
    height:17px;
    width:17px;
    float:left;
    background:red;
  }

Теперь мы имеем готовый стилизованный кое как список выглядящий вот так:

Осталось написать javascript функции управления этим списком, приступим.

Javascript

Начнем раздел javascript чуть чуть не с javascript’a , я решил все таки вынести этот пункт сюда. Нашим кнопка следует прописать onclck равным функциям которые будут вызываться по нажатию на определенный тип кнопки. Вот список того кому че нужно прописывать:

top – onclick=”move_top([здесь порядковый номер элемента в списке])”
bottom – onclick=”move_bottom([здесь порядковый номер элемента в списке])”
delete – onclick=”delete([здесь порядковый номер элемента в списке])”

В итоге элемент, допустим второй будет выглядеть так:



  2.
   Elemen2

И наконец приступим к javascript’у для начала создадим функцию создания элемента входным параметрами которого будут порядковый номер элемента в списке и текст создаваемого элемента:

function create_new_li(el_id,el_text){

    return '\
      \
      '+el_id+'.\
       '+el_text+'\
      \
      \
      \
      \
      \
      \
    ';  

}//end of the function create_new_li

Функция как вы заметили не создает а просто возвращает строку содержащую разметку нового элемента. Начнем написание функция которые мы прописывали для кнопок. Итак функция move_top:

function move_top(el_id){

  if(el_id!=1){

    //узнаем ид верхнего li
    var top_li_id = el_id-1;

    //узнаем текст верхнего li
    var top_li_text = $('li.li'+top_li_id+' .subj').html();

    //удаляем верхний li
    $('li.li'+top_li_id).remove();

    //узнаем текст перемещаемого элемента
    var per_li_text = $('li.li'+el_id+' .subj').html();

    //создаем копию перемещаемого вверх элемента над ни же с другим ид
    var newli = create_new_li(top_li_id,per_li_text);
    $('li.li'+el_id).before(newli);

    //удаляем перемещаемый элемент
    $('li.li'+el_id).remove();

    //зодаем под до этого созданным элементом эелемент который был до этого над
    //перемещаемым вверх, создаем его с ид на 1 меньше
    var newli = create_new_li(el_id,top_li_text);
    $('li.li'+top_li_id).after(newli);

  }//end if

}//end of the function move_top

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

function move_bottom(el_id){

   //узнаем количество элементов в списке
   var li_count = $('.mylist li').size();

   //проверяем не пытаемся ли мы сместить вниз последний элемент
   if(el_id!=li_count){

     //узнаем порядковый номер нижнего элемента
    var bot_li_id = el_id+1;

    //узнаем текст элемента расположенного под перемещаемым
    var bot_li_text = $('li.li'+bot_li_id+' .subj').html();

    //удаляем елемент расположенный под перемещаемым
    $('li.li'+bot_li_id).remove();

    //узнаем текст перемещаемого элемента
    var per_li_text = $('li.li'+el_id+' .subj').html();

    //создаем копию перемещаемого вниз элемента под ним же с другим ил +1
    var newli = create_new_li(bot_li_id,per_li_text);
    $('li.li'+el_id).after(newli);

    //удаляем перемещаемый элемент
    $('li.li'+el_id).remove();

    //создаем над созданным элементом копию элемнета котрый был расположен под
    //перемещаемым элементом
    var newli = create_new_li(el_id,bot_li_text);
    $('li.li'+bot_li_id).before(newli);

   }//end if

}//end function move_bottom

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

function delete_li(el_id){

  //узнаем количество элементов в списке
  var li_count = $('.mylist li').size();

  //если елемент не последний пересоздаем нижние элементы
  //с другими ид
  if(el_id!=li_count){

    //узнаем количество элементов после удаляемого
    var dif = li_count - el_id;

    //удаляем удаляемый элемент
    $('li.li'+el_id).remove();

    //копмруем порядковый номер удоля
    var count = el_id;

    //проходим циклом под элементам расположенныым под удаленным
    //и пересоздаем их
    for(i=1;i<=dif;i++){

      //узнаем порядковый номер следующего элемента
      var next_el = count*1 + 1;

      //узнаем текст следующего элемента
      var next_li_text = $('li.li'+next_el+' .subj').html();

      //пересоздаем элемент
      var newli = create_new_li(count,next_li_text);
      $('li.li'+next_el).before(newli);

      //удаляем элемент
      $('li.li'+next_el).remove();

      count++
    }

  }
  //если элемент последний просто удоляем его
  else{

    //удаляем элемент
    $('li.li'+el_id).remove();

  }//end else

}//end function delete_li

Функция сперва проверяет последний ли проверяемы элемент или нет, если последний просто удаляем его а если не последний удаляем элемент и пересоздаем нижние элементы с новыми порядковыми номерами.
Прогнозы на спорт
Вот и все вот и tutorial'у конец . Смотрим тестируем комментируем ->

ДЕМО ВЕРСИЯ
посмотреть в действии СКАЧАТЬ
скачать на компьютер

CSS хаки для IE

dzantiev — Sun, 12 Sep 2010 13:50:29 +0000

В этом маленьком уроке хочу показать вам как написать CSS стили которые будут работать только в IE6, IE7 или IE8. Эти хаки, которые я вам покажу, очень полезны особенно при появлении проблем с кроссбраузерностью. Никому не секрет что IE очень часто, криво отображает сайты которые во всех остальных браузерах работают нормально. Существует несколько видов CSS хаков, начнем с самых распространенных условных комментарий.

Условные комментарии

Условные комментарии работают только на IE под Windows для других браузеров это обычные HTML комментарии и они их игнорируют. Структура условных комментариев следующая:

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

! – отрицание
lt – меньше
gt – больше
lte – меньше или равно
gte – больше или равно

Примерно так их надо использовать:

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

Чаще всего условные комментарии используют для подключения стилей для определенного браузера, вот)). С условными комментариями вроде все. Далее рассмотрим хаки которые пишутся внутри самих стилей путем добавления звездочек и все такое.

Хаки для IE6

Первый способ это добавление знака подчеркивания(_) перед свойством тем самым это свойство будет восприниматься только IE6. Например так:

body{
    _background:#ooo;
}

Второй способ добавление следующего кода вот этого *html перед селекторами тем самым теперь уже все свойства становятся видны для IE6 и ниже. Примерно так:

*html body{
    background:#000;
}

Хаки для IE7

Для IE7 существует большое количество хаков все даже наверное не получиться рассмотреть, потому что я их все и не знаю Ну начнем с хака который похож на последний рассмотренный хак для IE6, полоучается он путем добавления *+html перед селектором. Пример:

*+html body{
    background:#000;
}

Следующий хак будет виден не только IE7 , а наоборот всем современным браузерам кроме IE7 хак опять же добавляется в начало селектора. Пример:

html>/**/body {
    background:#000;
}

Следующий хак опять же добавляется перед селектором после чего свойства работают только для IE7, но на мой взгляд он немножко громоздкий *:first-child+html вот собственно что нужно добавить перед селектором. Пример:

*:first-child+html body{
    background:#000;
}

Хак который рассмотрим далее будет работать в IE7 и во всех современных браузерах, наверное такое тоже иногда бывает нужно . Пример:

html>body {
    background:#000;
}

Ну и последний хак для ie7, добавляем перед свойством звездочку и все чики пуки:

body {
    *background:#000;
}

Хак для IE8

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

body {
 background: #000\0/;
}
/*свойство следует добавлять в последнюю очередь*/

Вот и все вроде как, если кто знаком еще с какими то хаками пишем в комментарии

Создание lightbox как в Facebook

dzantiev — Sun, 05 Sep 2010 09:53:58 +0000

В этом уроке попробуем создать всплывающее окно(lightbox) как в Facebook, в котором можно будет размещать не только картинки но и любой другой контент, кто не видел фесбуковкий лайтбокс снизу показано:

Будем конечно же использовать javascript как и в любых других lightbox’ах, но начнем мы с HTML и CSS.

HTML & CSS

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

Указываем для этого div’a следующие стили

height:100%;
width:100%;
opacity:0.5;
position:fixed;
top:0;
z-index:100;

Тоесть указываем диву 100% ширину и высоту, фиксированное позиционирование чтоб при скроллинге он не съезжал, и указываем 100ый z-index можно было поставить и поменьше но для надежности 100 z-index помогает делать все остальные элементы у которых z-index меньше 100 неактивными точнее они будут активными но будут расположены нашим дивом и не будут кликабельными, а активными будут только те элементы у которых z-index больше 100 , а это будут элементы нашего лайтбокса’.
Дальше собственно приступаем к созданию самого лайтбокса HTML будет примерно следующим- это четыре вложенных дива первые два для позиционирования по центру так удобней третий для эффекта прозрачных границ мы же хотим как в Facebook так как сами границы прозрачными не получиться седлать создаем этот третий див который будет больше последнего четвертого дива, и будет иметь прозрачный фон в итоге получиться такой эффект, ну и последний четвертый див в котором будет располагаться весь нужный контент. Естественно все дивы имеют разные ид:



		
			
				Загаовок лайтбокса
				
				Здесь будет контент

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

#gogo_wrap{
	height:0;
	left:0;
	overflow:visible;
	position:absolute;
	top:0;
	width:100%;
	z-index:101;
}
#gogo_box{
	height:0;
	margin:auto;
	overflow:visible;
	position:relative;
}

Далее стилизуем следующий див, а это див с id gogo_contant он должен иметь скругленные углы и прозрачный серый фон:

#gogo_contant{
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	-border-radius:8px;
	background:none repeat scroll 0 0 rgba(163, 163, 163, 0.7);
	padding:10px;
}

Как видно мы указали 8 пиксельное скругление углов, и сделали прозрачный фон, а padding нужен для того чтобы в дальнейшем он был больше следующего дива и получился эффект прозрачных границ в нашем случае границы будут шириной 10px. Далее преходим к стилизации остальных элементов нашего lightbox’а. Самое главное нужно указать для следующего дива непрозрачный, белый фон:

#gogo_last_cont{
	background:#fff;
}
h2#gogo_head{
	background:#829ACE;
	font-size:16px;
	font-weight:normal;
	padding:4px 6px;
	color:#fff;
	border-bottom:1px solid #333;
}
#gogo_close_panel{
	text-align:right;
	height:30px;
	border-top:1px solid #ccc;
	margin-top:4px;
}
button#close-gogo_box{
	border:1px solid #333;
	padding:3px;
	margin:3px 5px 3px 3px;
	background:#4B6EB9;
}
button#close-gogo_box:hover{
	color:#E6E6E6;
	cursor:pointer;
}

Вот и все со стилизацией мы закончили, в итоге у нас получилось то что показано снизу на картинке.

Javascript

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

Теперь давайте сделаем функцию которая будет создавать на нашей странице наш lightbox для этого будем использовать Jquery подключаем его, допустим с гугловсого архива:

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

function create_gogo_box(title,contant){
		$("body").append('\
			\
				\
					\
						'+title+'\
						\
						'+contant+'\
						\
						\
							\
						\
					\
				\
			\
		\
		');
	}

Далее делаем так чтоб при клике на кнопку которую мы создали до этого, а она была с ид show_gogo_box, вызывалась наша функция:

$('#show_gogo_box').click(function(){

	create_gogo_box('Здесь заголовок','Здесь контэнт')}

	);

Вот и все теперь осталось написать функцию для удаления лайтбокса со страницы, называться она должна close_gogo_box так как мы уже прописали ее для нашей кнопки, пишем:

function close_gogo_box(){
	$('#gogo_wrap').remove();
	$('#gogo_overly').remove();
	}

Ну а вот так он будет выглядеть с картинкой:

Вот теперь точно все.

ДЕМО ВЕРСИЯ
посмотреть в действии СКАЧАТЬ
скачать на компьютер

Создание календаря средствами PHP и CSS

dzantiev — Fri, 27 Aug 2010 11:25:52 +0000

Сейчас мы попробуем сделать простенький календарь для сайта или еще для чего нибудь, не знаю ). Календарь будет не совсем простым можно будет переключатся между месяцами, а текущий день будет выделен среди других дней также другим цветом(красным) будут выделены выходные, правда только воскресения субботы я чето не стал выделять, ну это не важно.
Так как календарь будет переключатся между месяцами мы должны это как то передавать например методом GET т.е. через url адрес. Также напишем для календаря простенькие CSS чтоб можно было смотреть)) так это календарь удобней всего оформить его в виде таблицы. Внешне календарь будет выглядеть примерно так:

На PHP мы создадим две переменные $calendar_head и $calendar_body соответственно в $calendar_head мы будем записывать html код верхней части календаря т.е. название месяца, дни недели и две ссылки по краям для выбора месяца. А в $calendar_body будем сохранять остальной код то есть таблицу дней недели. Ниже на скрине показано:

Теперь рассмотрим сам php код:

// проверяем передали ли нам месяц и год
if(isset($_GET["ym"])){

	$year  = (int)substr($_GET["ym"], 0, 4);
	$month = (int)substr($_GET["ym"], 4, 2);

}
else{ // иначе выводить текущие месяц и год

	$month = date("m", mktime(0,0,0,date('m'),1,date('Y')));
	$year  = date("Y", mktime(0,0,0,date('m'),1,date('Y')));

}

$skip          = date("w", mktime(0,0,0,$month,1,$year)) - 1; // узнаем номер дня недели
if($skip < 0){
	$skip = 6;
}
$daysInMonth   = date("t", mktime(0,0,0,$month,1,$year));	// узнаем число дней в месяце
$calendar_head = '';	// обнуляем calendar head
$calendar_body = '';	// обнуляем calendar boday
$day = 1;	// для цикла далее будем увеличивать значение

for($i = 0; $i < 6; $i++){ // Внешний цикл для недель 6 с неполыми

	$calendar_body .= '';	// открываем тэг строки
	for($j = 0; $j < 7; $j++){	// Внутренний цикл для дней недели

		if(($skip > 0)or($day > $daysInMonth)){ // выводим пустые ячейки до 1 го дня ип после полного количства дней

			$calendar_body .= ' ';
			$skip--;

		}
		else{

			if($j == 0)	// если воскресенье то омечаем выходной
				$calendar_body .= ''.$day.'';
			else{	// в противном случае просто выводим день в ячейке
				if ((date(j)==$day)&&(date(m)==$month)&&(date(Y)==$year)){//проверяем на текущий день
					$calendar_body .= ''.$day.'';
				}
				else{
					$calendar_body .= ''.$day.'';
				   }
				 }
			$day++; // увеличиваем $day
		}

	}
	$calendar_body .= ''; // закрываем тэг строки
}

// заголовок календаря
$calendar_head = '
  
	« Пред
  	'.date("F, Y", mktime(0,0,0,$month,1,$year)).'
  	След »
  
  
    Понедельник
    Вторник
    Среда
    Четверг
    Пятница
    Суббота
    Воскресенье
  ';

Я думаю здесь уже нечего объяснять комментариев кажется достаточно, единственно я бы хотел пояснить почему 6 строк ведь недель в месяце всего четыре так вот, так как мы месяц начинаем выводить не с понедельника, то есть месяц не всегда начинается с понедельника, у нас появляются неполные недели и посчитав максимальное количество неполных и полных недель вы получите шесть недель вот поэтому и шесть). Но так как 6 недель встречаются не очень часто, то последняя строка в таблице чаще всего будет пустой.
Далее осталось написать HTML код и вывести в нужных местах $calendar_head и $calendar_body, ну и прописать CSS стили. Рассмотрим содержание тега :

Как видим календарь состоит полностью из таблицы заголовка и тела. Теперь наш календарь выглядит примерно аот так:

То есть осталось прописать CSS стили, ну примерно вот такие:

body{
	margin:0 auto;
	width:800px;
	padding:10px;
}
#calendar{
	border:0px;
}
#calendar tbody tr{
	height:40px;
}
#calendar td{
	width:80px;
	border:0px;
	border:solid 1px #99FF99;
	font-size:22px;
	text-align:center;
}
#calendar th{
	background-color:#4DDBFF;
	border:solid 1px #00CCFF;
	color:#ffffff;
}
#calendar td.none{
	border:0px;
}
#calendar td.holiday{
	background-color:#FF6633;
	border-color:#FF531A;
	color:#94E4FF;
}
.day{
	background-color:#CCFFCC;
	color:#00B32D;
}
#calendar td.today{
	background-color:#FFFF99;
	border-color:#FF531A;
}

Ну вот и все теперь календарь выглядит примерно так:

Весь исходный код можете посмотреть здесь

ДЕМО ВЕРСИЯ
посмотреть в действии СКАЧАТЬ
скачать на компьютер

Как работает CSS позиционирование

dzantiev — Tue, 03 Aug 2010 10:51:07 +0000

Конечно позиционирование является одним из самых полезных инструментов дизайнеров. Однако существует несколько понятий в позиционировании которые могут помешать начинающим в его освоении.

Что такое позиционирование

Когда браузер открывает вашу страницу, он начинает читать элементы (дивы, параграфы, заголовки и т.д.) в порядке появления в HTML разметке страницы. Позиционирование это естественный способ организации отображения элементов. Существует четыре типа позиционирования: static, relative, absolute и fixed.

По умолчанию все элементы имеют позиционирование static

Все элементы по умолчанию имеют статическим позицию. Статическое позиционирование означает, что каждый элемент расположен в естественном порядке.

Относительное позиционирование (relative)

Применение относительного позиционирования само по себе не имеет какой либо заметной разницы в том как элементы отображаются на странице. Но теперь вы можете переместить элемент с его нормального положения использую такие CSS свойства как: top, left, bottom и right.

.relativeDiv{
	/*
		Сдвигаем div наверх и влево
		с его нормального места:
	 */
	position:relative;
	top:-50px;
	left:-100px;
}

Блог о Drupal

Фиксированное позиционирование (fixed)

Добавляя position:fixed в CSS стили элемента, он принимает позицию относительно окна браузера, то есть при прокрутке страницы элемент будет стоять на фиксированной позиции. Это позволяет показывать панели инструментов, панели навигации которые будут расположены на фиксированных местах при прокрутке страницы.

.fixedDiv{
	/*
		Фиксируем div снизу в 20px
		от окна браузера:
	 */
	position:fixed;
	right:20px;
	bottom:20px;
}

Единственным недостатком этого позиционирования является то что оно не поддерживается старыми браузерами такими как IE6.

Абсолютное позиционирование (absolute)

Абсолютно позиционированный элемент отображается на относительно документа, или родительского элемента с позиционированием отличным от статического. Вы сможете применять к элементу top, left, bottom и right CSS свойства для для более точного позиционирования. Это позволяет центрировать дивы горизонтально и вертикально.

.parentDiv{
	/*
		Располагаем div в 50px справа и в 90px
		сверху от родительского элемента
	 */
	position:absolute;
	right:50px;
	top:90px;
}

Используя эти свойства позиционирования вы сможете создать страницы любого типа. Также использую такое CSS свойство как z-index вы сможете менять параметры наложения элементов.

ДЕМО ВЕРСИЯ
посмотреть в действии СКАЧАТЬ
скачать на компьютер

Красивая форма с использованием HTML5 и CSS3

dzantiev — Mon, 05 Jul 2010 13:06:34 +0000

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

HTML

Как видно на картинке будем делать форму для оплаты какового нибудь товара.Начнем с html разметки. Форма будет разделена на три логические секции это:
1. Личная инфомация о покупателе
2. Адрес покупателя
3. Информация о кредитной карточке
Как я уже говорил будем использовать нововведения HTML5, в данном случае будем использовать новые атрибуты для input’ов для создания более удобной формы и как меньшего использования классов и идентификаторов.:
1. email – для поля email’а
2. tel – для поля телефона
3. number – для поля кредитной карточки и капчи
4. required – для обязательных полей
5. autofocus – для автоматического фокуса после загрузки страницы
В HTML5 ввели большое число новых атрибутов для input’ов и для форм в целом, можете посмотреть их зедсь
Каждая секция будет находится в отдельном fieldset‘е. Также используем упорядоченный список для группировки всех пар label/input. Это позволит нам более легко стилизавать форму. В итоге должно получиться следующее:

А вот его разметка, с которой мы будем дальше работать:

  
  
	  Your details
	  
		  
			  Name
			  
		  
		  
			  Email
			  
		  
		  
			  Phone
			  
		  
	  
  
  
	  Delivery address
	  
		  
			  Address
			  
		  
		  
			  Post code
			  
		  
		  
			  Country
			  
		  
	  
  
  
	  Card details
	  
			  
			  
				  Card type
				  
					  
						  
						  VISA
					  
					  
						  
						  AmEx
					  
					  
						  
						  Mastercard
					  
				  
			  
		  
		  
			  Card number
			  
		  
		  
			  Security code
			  
		  
		  
			  Name on card

CSS

Перед началом стилизации нашей формы нужно сбросить некоторые стили что бы все браузеры открывали одинаково:

html, body, h1, form, fieldset, legend, ol, li {
	margin: 0;
	padding: 0;
	}

body {
	background: #ffffff;
	color: #111111;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding: 20px;
	}

Далее будем стилизовать элементы формы которые находятся вне секций fildset

form#payment {
	background: #9cbc2c;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	counter-reset: fieldsets;
	padding: 20px;
	width: 400px;
	}

Теперь уберем границы с fieldset‘ов и добавим снизу небольшой отступ. Используя псевдо класс :last-of-type уберем отступ с последнего fieldset‘а.

form#payment fieldset {
	border: none;
	margin-bottom: 10px;
	}

form#payment fieldset:last-of-type {
	margin-bottom: 0;
	}

Следующее что мы сделаем это стилизуем наши legend‘ы седлаем их жирными и применим к ним светло синий text-shadow :

form#payment legend {
	color: #384313;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 10px;
	text-shadow: 0 1px 1px #C1F7FF;
	}

Наши legend выглядят так скажем нормально, но как к ним добавить индикаторы того сколько шагов имеет наша форма? Вместо того чтобы вручную добавлять шаг к каждому legend мы можем использовать автоматически генерирующийся контент.
Чтобы добавить счетчик к элементу, мы должны использовать или :before или :after. Будем следовать следующим шагам:
1. Создадим счетчик использую свойство counter-reset для элемента form
2. Вызываем счетчик со свойством content
3. С помощью свойства counter-increment увеличиваем счетчик на 1

form#payment > fieldset > legend:before {
	content: "Шаг " counter(fieldsets) ": ";
	counter-increment: fieldsets;
	}

Сейчас нам нужно изменить стили legend которая является частью radio группы, сделаем его похожим на label:

form#payment > fieldset > legend:before {
	content: "Шаг " counter(fieldsets) ": ";
	counter-increment: fieldsets;
	}

Теперь стилизуем наш список, добавим некоторое скругление углов и прозрачность для фона и границ. Так как мы используем RGB цвета, мы должны добавить исключения для тех браузеров которые не поддерживают их:

form#payment ol li {
	background: #71b8ff;
	background: rgba(255,255,255,.3);
	border-color: #c6e3ff;
	border-color: rgba(255,255,255,.6);
	border-style: solid;
	border-width: 2px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	line-height: 30px;
	list-style: none;
	padding: 5px 10px;
	margin-bottom: 2px;
	}

form#payment ol ol li {
	background: none;
	border: none;
	float: left;
	}

Осталось стилизовать элементы label, input и button
Все label должны выглядеть одинаково, кроме label‘а который прописан для элементов radio. Выравняем их по левому краю и придадим ширину.
Для кнопок выбора кредитной карточки добавим иконки как фон. Для большей удобности формы добавим добавим cursor:pinter для рабио баттоонов при наведении мышки :hover то есть при наведении на радио кнопке курсор будет меняться на руку.

form#payment label {
	float: left;
	font-size: 13px;
	width: 110px;
	}

form#payment fieldset fieldset label {
	background:none no-repeat left 50%;
	line-height: 20px;
	padding: 0 0 0 30px;
	width: auto;
	}

form#payment label[for=visa] {
	background-image: url(visa.gif);
	}
form#payment label[for=amex] {
	background-image: url(amex.gif);
	}
form#payment label[for=mastercard] {
	background-image: url(mastercard.gif);
	}

form#payment fieldset fieldset label:hover {
	cursor: pointer;
	}

Теперь стилизуем все input кроме инпутов типа radio для этого используем псевдо класс исключения :not(). С его помощью мы можем прописать стили для всех инпутов и исключить инпуты типа radio.

form#payment input:not([type=radio]),
form#payment textarea {
	background: #ffffff;
	border: none;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
	font: italic 13px Georgia, "Times New Roman", Times, serif;
	outline: none;
	padding: 5px;
	width: 200px;
	}

form#payment input:not([type=submit]):focus,
form#payment textarea:focus {
	background: #eaeaea;
	}

form#payment input[type=radio] {
	float: left;
	margin-right: 5px;
	}

Осталось поменять button. Добавим к его тексту тень, и сделаем какой нить эффект при наведении.

form#payment button {
	background: #62C5FF;
	border: none;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;
	border-radius: 20px;
	color: #ffffff;
	display: block;
	font: 18px Georgia, "Times New Roman", Times, serif;
	letter-spacing: 1px;
	margin: auto;
	padding: 7px 25px;
	text-shadow: 0 1px 1px #C1F7FF;
	text-transform: uppercase;
	}

form#payment button:hover {
	background: #8BE0FF;
	cursor: pointer;
	}

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

ДЕМО ВЕРСИЯ
посмотреть в действии СКАЧАТЬ
скачать на компьютер

Выделение заглавных букв

dzantiev — Thu, 24 Jun 2010 15:26:50 +0000

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

HTML

Для того чтобы выделить первую букву параграфа, мы должны обернуть его в специальный HTML элемент к которому мы затем сможем применять некоторые CSS стили. Для этого я собираюсь использовать простой span элемент с классом initialcap. Результат будет выглядеть примерно так:

Первая буква текст текст текст, ...

Только не повторяйте букву после span‘a

CSS

Пришло время для написания CSS стилей, но для начала условимся что наш параграф имеет размер шрифта 14 пикселей, и высоту строки в 18 пикселей.
1.Сдвинем нашу первую букву влево, что бы весь текст параграфа обтекал его

span.initialcap{
    float: left;
}

2. Применим к нему размер шрифта 40 пикселей и высоту строки в 35 пикселей, чтобы буква отличалась от остального текста.

span.initialcap{
    float: left;

    font-size: 40px;
    line-height: 35px;
}

Каталог исходников.

3. Ну и применим к нашей букве шрифт Serif, синий цвет и добавим маленькое пространство справа.

span.initialcap{
    float: left;

    font-size: 40px;
    line-height: 35px; 

    font-family: Georgia, "Times New Roman", Times, serif;
    color: #2583ad; /* синий */
    padding-right: 5px;
}

Автоматизация

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

function wpguy_initial_cap($content){

    $searchfor = '/>(]+>)?([^
Поясним как работает функция. Во первых ей нужно передать контент в котором нужно выделить первую букву, функция находит ее благодаря регулярным выражениям и оборачивает ее в наш span с классом initialcap, ну и возвращает обратно уже отформатированный контент.

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