Posts Tagged ‘ CSS ’

Бегущая строка на JavaScript своими руками

Сегодня речь пойдет о создании простого скрипта для имитации эффекта бегущей строки. Для начала, придумаем, как это будет работать. По идее должен быть внешний контейнер, который определит размеры блока бегущей строки и ее положение в пространстве на странице, назовем его marquee_container. Также должен существовать блок, содержащий “бегущий” текст, наречем его – marquee_text.

Теперь должно быть все просто, мы задаем родительскому блоку фиксированную ширину, position: relative (для того, чтобы мы могли абсолютно позиционировать блок с текстом относительно текущего), overflow: hidden (для того, чтобы “бегущий” текст скрывался за границами родительского блока). Далее пишем скрипт, который отодвигает текст вправо на ширину родительского блока (теперь он не видим) и потом перемещает его влево с заданной скоростью, пока текст не скроется полностью. И повторяем это действие снова и снова =).

Читать далее…

Стилизированный раскрывающийся список (select в html)

Ниже представлено решение на JavaScript и CSS, с помощью которого можно было бы изменить внешний вид любой части выпадающего списка. При этом соблюдена кроссбраузерность, а также решена проблема, возникающая в IE 6 при перекрытии DIV`ом выпадающего списка select, который оказывался видимым при любом значении z-index.

Читать далее…

Циклическая прокрутка содержимого в блоке div

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

Читать далее…

Графический checkbox с помошью JavaScript

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

Читать далее…

Вертикальное меню

Существует множество способов создания вертикального меню. С помощью таблиц, блочной верстки, с JavaScript или без него … Ниже представлен наиболее простой способ создания вертикального меню, используя списки и CSS.

Читать далее…

Калькулятор средствами JavaScript

Калькулятор предназначен, например, для расчета конечной стоимости продукта или услуги в соответствии с прайсом. Как правило, потребность в использовании on-line калькулятора возникает в том случае, когда коммерческий(ие) продукт(ы) обладают несколькими динамическими свойствами (цвет, тип материала …)

Читать далее…

Горизонтальное меню

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

Читать далее…