Очередной блог фрилансера » css3

CSS-Transitions без использования :hover

dreamhelg — Mon, 14 Nov 2011 13:08:23 +0000

До недавнего времени, наиболее распространенным вариантом использования CSS-transitions – было сочетание его с хорошо известным псевдо-классом CSS :hover. Далее представлен наиболее простой пример изменения цвета ссылки, при наведении мыши, выполненный на чистом CSS: [css] a, a:link, a:visited { color: lightblue; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -o-transition: color .4s linear; -ms-transition: color .4s linear; transition: color .4s linear; } a:hover { color: white; } [/css] Этот код запустит анимацию свойства color, когда вы подведете мышь к ссылке. Наверняка этот простой пример не раз попадался вам на разных сайтах, но это не значит, что transitions ограничивается использованием псевдо-класса :hover. С помощью transitions, вы можете анимировать различные CSS-свойства, используя определенные CSS-приемы. Некоторые из этих приемов, (включая демо-версию каждого) приведены в сегодняшней статье.

Transitions с использованием :active

Псевдо-класс :active применяется к любому элементу, находящемуся в процессе активации. Основным способом “активации” элемента, является щелчок мышью или нажатие кнопки мыши. Далее представлен CSS-пример, демонстрирующий использование :active совместно с CSS3-transitons, для имитации события mousedown: [css] .box { width: 300px; height: 300px; background: #222; -webkit-transition: width 2s ease, height 2s ease; -moz-transition: width 2s ease, height 2s ease; -o-transition: width 2s ease, height 2s ease; -ms-transition: width 2s ease, height 2s ease; transition: width 2s ease, height 2s ease; } .box:active { width: 500px; height: 500px; } [/css] Подведите курсор мыши к блоку и нажмите кнопку, вы увидите как высота и ширина блока анимируются, становясь больше, пока вы держите кнопку нажатой. Стоит вам отпустить кнопку, и размеры блока плавно вернутся к исходному значению. Пример.

Transitions с использованием :focus

Вы можете использовать псевдо-класс :focus, для получения эффекта, описанного в предыдущем примере. В этот раз мы используем форму, и анимируем ширину любого элемента формы, получившего фокус: [css] input, textarea { width: 280px; -webkit-transition: width 1s ease; -moz-transition: width 1s ease; -o-transition: width 1s ease; -ms-transition: width 1s ease; transition: width 1s ease; } input:focus, textarea:focus { width: 340px; } [/css] Пример.

Transitions с использованием :checked

Вы можете анимировать чекбоксы и радиобаттоны, когда они становятся отмеченными – хотя, тут есть некоторые ограничения, поскольку вы не можете изменить их родную стилизацию. Поэтому, мы сделаем простое изменение ширины, которое будет появляться в качестве подтверждения отметки текущего элемента: [css] input { height: 20px; -webkit-transition: width 1s ease; -moz-transition: width 1s ease; -o-transition: width 1s ease; -ms-transition: width 1s ease; transition: width 1s ease; } input:checked { width: 30px; } [/css] Пример.

Transitions с использованием :disabled

Продолжая тему стилизации веб-форм, в этот раз мы комбинируем css3-transitions с jQuery, для запуска анимации фонового цвета элементов формы, при их отключении через атрибут disabled: [css] input[type="text"], textarea { background: #e2e2e2; -webkit-transition: background 1s ease; -moz-transition: background 1s ease; -o-transition: background 1s ease; -ms-transition: background 1s ease; transition: background 1s ease; } input:disabled, textarea:disabled { background: #666666; } [/css] И немного jQuery, чтобы удалять/добавлять атрибут disabled: [javascript] $(function() { $('input[type="radio"]').click(function() { if ($(':checked').val() === "other") { $('input[type="text"]').removeAttr("disabled"); } else { $('input[type="text"]').attr("disabled", "disabled"); } }); }); [/javascript] Итак, если отмечен последний из радиобаттонов (тот, что со значением “Другое”), у текстового поля удаляется атрибут disabled, при отметке остальных радиобаттонов, атрибут disabled, заново применяется к текстовому полю. Псевдо-класс :disabled применяется к элементу, имеющему одноименный атрибут, поэтому анимация будет срабатывать всякий раз при удалении или добавлении этого атрибута. Пример.

Transitions с использованием Медиа-запросов

Последний пример, возможно, наименее полезный из всех, поскольку, давайте смотреть правде в глаза, единственные люди, изменяющие размер окна браузера, чтобы посмотреть что получится – это веб-разработчики. Тем не менее, это еще один способ использования CSS3-transitions. Такой прием используется на сайте modernizr.com. [css] .box { width: 440px; height: 440px; background: #222; margin: 0 auto; -webkit-transition: width 2s ease, height 2s ease; -moz-transition: width 2s ease, height 2s ease; -o-transition: width 2s ease, height 2s ease; -ms-transition: width 2s ease, height 2s ease; transition: width 2s ease, height 2s ease; } @media only screen and (max-width : 960px) { .box { width: 300px; height: 300px; } } [/css] Этот пример одновременно анимирует два свойства, разделенных запятой. Медиа-запрос велит блоку уменьшиться, если размер экрана становится меньше 961 пикселя. Измените размер окна демонстрационной страницы, чтобы увидеть как это работает. Пример.

Несколько замечаний относительно примеров кода

В каждом фрагменте кода, стандартное название css3-свойства включено последним, несмотря на то, что пока не один из известных мне браузеров не поддерживает его в этом виде. Кроме того, добавлен префикс –ms, и хотя IE8 и IE9 не поддерживают transitions, но эта поддержка очевидно будет добавлена в версии IE10. А еще, примеры кода, которые вы видели в статье намеренно упрощены, в сравнении с теми, что используются на демо-страницах, для того чтобы сфокусироваться только на тех частях, которые мы обсуждали в статье. Перевод статьи “CSS3 Transitions Without Using :hover”, автор Louis Lazaris

23 полезных CSS-приема для разработчика

dreamhelg — Thu, 12 Aug 2010 04:00:52 +0000

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

Прячем текст с помощью абзаца

Такой прием будет весьма полезен для логотипа компании. Чаще всего, в качестве логотипа используется картинка, однако для SEO, было бы неплохо отобразить название компании в тегах h1. Данный пример – самый лучший способ это реализовать. Фактически, мы просто скрываем текст за пределами экрана, и вместо этого назначаем фоновую картинку. [css] h1 { text-indent:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url("images/logo.jpg") no-repeat scroll; } [/css]

Стилизация ссылок в зависимости от формата файла

Этот пример направлен на улучшение пользовательского интерфейса. Зачастую в интернете, мы переходим по ссылкам, абсолютно не зная куда они ведут. Следующий фрагмент кода используется для отображения небольших иконок рядом со ссылками. Такие картинки будут подсказывать пользователю, что это внешняя ссылка, электронный адрес, pdf-файл, картинка и т.д. [css] /* внешняя ссылка */ a[href^="http://"]{ padding-right: 20px; background: url(external.gif) no-repeat center right; } /* электронная почта */ a[href^="mailto:"]{ padding-right: 20px; background: url(email.png) no-repeat center right; } /* pdfs */ a[href$=".pdf"]{ padding-right: 20px; background: url(pdf.png) no-repeat center right; } [/css]

Удаляем полосы прокрутки многострочного поля в IE

Internet Explorer имеет раздражающую привычку добавлять полосы прокрутки в многострочное поле, даже когда его содержимое не превышает заданный размер. Этот недостаток легко исправляется следующей строчкой кода: [css] textarea{ overflow:auto; } [/css]

Буквица

На сегодняшний день очень распространенное явление в блогах и новостных сайтах. Вы удивитесь, насколько просто она реализовывается, а также прекрасно деградирует в старых браузерах. [css] p:first-letter{ display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px; font-family:Georgia; } [/css]

CSS-прозрачность

Прозрачность – это свойство, которое разным браузерам, назначается по-разному. С помощью следующего фрагмента кода, вы сможете назначить прозрачность всем браузерам сразу. [css] .transparent { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } [/css]

CSS Reset от Эрика Мейера

Фактически, css-reset, предложенный Эриком Мейером, уже стал повсеместным стандартом использования. Поскольку он был адаптирован многими известными разработчиками, вы можете не сомневаться в его качестве. [css] html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } [/css]

Предзагрузчик картинок

Иногда бывает полезно предварительно загрузить ваши картинки, с тем чтобы исключить задержку и мерцание при доступе к нужному элементу. [css] div.loader{ background:url(images/hover.gif) no-repeat; background:url(images/hover2.gif) no-repeat; background:url(images/hover3.gif) no-repeat; margin-left:-10000px; } [/css]

Простой css-спрайт для кнопки

Наличие кнопки или ссылки с фоновым изображением – обычное дело, кроме того, к таким элементам часто применяются дополнительные эффекты, улучшающие пользовательский интерфейс. Один из таких эффектов – индикатор наведения курсора мыши на кнопку. С помощью спрайта, мы можем реализовать такой эффект путем изменения свойства background-positon, на заданное значение, с тем, чтобы отобразить фоновую картинку при наведении мыши на кнопку. Простое, но эффективное решение. [css] a { display: block; background: url(sprite.png) no-repeat; height: 30px; width: 250px; } a:hover { background-position: 0 -30px; } [/css]

Google Font API

Не так давно, Google реализовал замечательный ресурс для веб-разработчиков, позволяющий загружать и использовать на странице новые, нестандартные шрифты. К загрузке доступны даже различные варианты шрифтов, жирный, курсив и т.д. Несмотря на то, что коллекция Google пока ограничена, в наличии достаточно большое количество шрифтов. Сначала подключите динамически составленный CSS-файл с названием шрифтов и необходимых вам вариантов, а затем просто используйте названия шрифтов в CSS, в обычном режиме. Дополнительную информацию по Google Font API можно прочитать здесь. [css] Inconsolata:italic|Droid+Sans"> [/css] [css] body { font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; } [/css]

Хаки для различных браузеров

Иногда бывает полезно исправить баг у конкретного браузера, и условные комментарии не всегда являются лучшим решением для этого. Этот список браузерных хаков от Криса Койера, поможет вам назначить нужные свойства для определенных браузеров, посредством простого css. [css] /* IE 6 */ * html .yourclass { } /* IE 7 */ *+html .yourclass{ } /* IE 7 and modern browsers */ html>body .yourclass { } /* Modern browsers (not IE 7) */ html>/**/body .yourclass { } /* Opera 9.27 and below */ html:first-child .yourclass { } /* Safari */ html[xmlns*=""] body:last-child .yourclass { } /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:nth-of-type(1) .yourclass { } /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:first-of-type .yourclass { } /* Safari 3+, Chrome 1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { .yourclass { } } [/css]

Фиксированный подвал

Возможно, вы подумаете, что создать подвал, всегда приклеенный к низу экрана, это сложная задача. Однако, это совсем не сложно, если вам нужен простой подвал. Здесь нам придется использовать небольшой хак для IE6, но в остальном, это очень легко. [css] #footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; } /* IE 6 */ * html #footer { position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); } [/css]

Поворот изображения

Вращение картинки может оказаться весьма полезным, особенно если его можно использовать вместо загрузки новой, предварительно развернутой картинки. Предположим, вы хотите использовать только одну картинку для стрелки, но у вас на странице их несколько, причем развернутых в разные направления. Вот решение вашей проблемы: [css] img.flip { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } [/css]

Clearfix

Не так давно, кто-то решил, что пришло время очищать поток от флоатов, не добавляя дополнительной разметки к документу. В результате этого решения, был создан класс, который можно применять к контейнеру, содержащему плавающие элементы, для их очистки. Это очень удобный, и широко распространенный способ на сегодняшний день. [css] .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack */ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ [/css]

Закругленные углы

С постепенным внедрением CSS3 в современных браузерах, создавать закругленные углы стало очень просто. К сожалению, пока нет поддержки CSS3 в IE, включая восьмую версию, но она будет добавлена в IE9. [css] .round{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */ } [/css]

Переопределение стилей

Меня продолжают удивлять люди, незнающие об !important в CSS, поскольку это очень мощный и удобный в использовании инструмент. Очень просто, любое правило с !important на конце, будет переопределять такое же правило, примененное к этому элементу, в любом месте CSS-файла или в линейных стилях. [css] p{ font-size:20px !important; } [/css]

Font face

Font-face не использовался широко до прошлого года, хотя он известен еще с тех времен, когда IE6 считался современным браузером. Сейчас это свойство неплохо поддерживается современными браузерами и предлагает отличный способ использования небезопасных шрифтов в своих проектах. Чтобы сэкономить время, можно воспользоваться специальным генератором Font Squirrel Font Face. [css] @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); } [/css]

Центрирование сайта

Распространенный дизайнерский прием – горизонтальное центрирование сайта. Это реализуется очень просто. [css] .wrapper { width:960px; margin:0 auto; } [/css]

Min-height в IE

Этот пример исправляет простой, но досадный баг в IE, при установке минимальной высоты. Вообще, IE интерпретирует высоту в качестве минимальной высоты, так что, если в IE значение высоты не установлено в auto, следующий прием исправит этот баг. [css] .box { min-height:500px; height:auto !important; height:500px; } [/css]

Загрузка картинки

Этот эффект загрузки изображения, имитирует ajax-загрузку, отображая прелоудер, пока весь контент не будет загружен. Такое решение отлично подойдет для больших, медленно загружающихся картинок. [css] img { background: url(loader.gif) no−repeat 50% 50%; } [/css]

Вертикальное центрирование

Это небольшой фрагмент кода, позволит вам вертикально центрировать содержимое контейнера, без использования дополнительной разметки. Вам понадобится просто отобразить контейнер в качестве ячейки таблицы, а затем задать значение атрибуту vertical-align. [css] .container { min-height: 10em; display: table-cell; vertical-align: middle; } [/css]

Создаем врезы

Для начала, давайте разберемся, что же такое врез? Врезы обычно встречаются на новостных ресурсах и сайтах-журналах, в виде небольшого блока текста, расположенного внутри статьи, иногда в них размещаются мнения людей или цитаты. Вы будете рады узнать, что их очень легко сделать, и при правильном использовании, врезы могут значительно улучшить восприятие статьи пользователем. [css] .pullquote { width: 300px; float: right; margin: 5px; font-family: Georgia, "Times New Roman", Times, serif; font: italic bold #ff0000 ; } [/css]

Выделение текста

Не все знают о том, что существует возможность изменить цвет выделенного в браузере текста. Для этого потребуется всего два селектора. [css] ::selection { color: #000000; background-color: #FF0000; } ::-moz-selection { color: #000000; background: #FF0000; } [/css]

Добавляем разрыв страницы

Этот пример, снова направлен на улучшения пользовательского интерфейса, при выводе на печать. Например, при печати статьи, возможно будет полезно отделить комментарии от текста статьи, и перенести их на отдельную страницу. Если добавить класс .page-break к блоку комментариев, то все комментарии, при печати, будут выведены на отдельной странице. И вообще, этот класс можно использовать в любом месте вашего сайта. [css] .page-break{ page-break-before:always; } [/css] Перевод статьи “25 Incredibly Useful CSS Snippets for Developers”, автор Matthew Corner

Фантастическая CSS3 лайтбокс галерея с помощью jQuery

dreamhelg — Tue, 22 Dec 2009 11:31:42 +0000

С удовольствием принимаю эстафету по обзору полезных зарубежных ресурсов, предложенную блоггером cuprum, и сегодня, хочу представить вашему вниманию англоязычный блог - tutorialzine.com. Этот блог отличается от других, главным образом тем, что в нем регулярно публикуются очень красивые, а главное полезные, готовые решения для веб-разработчика. И сегодняшняя статья – не исключение. В сегодняшней статье, мы создадим отличную фото-галерею, которая использует новейшие техники CSS3 и Jquery. Созданный нами скрипт, будет сканировать папку с картинками на вашем веб-сервере, и строить на основе полученных данных полноценную drag-and-drop галерею. Это решение будет SEO-дружелюбным, кроме того оно будет работать даже с браузерами, выпущенными в одно время с IE6 (за исключением потери нескольких красивых эффектов). Мы будем использовать jQuery, jQuery UI (для реализации drag-and-drop) и плагин jQuery fancybox в дополнение к PHP и CSS, для интерактивности и стилизации. Прежде чем мы начнем, взгляните на конечный результат. Итак, давайте перейдем к первому шагу.

Шаг 1 – XHTML

Основная идея в том, чтобы использовать PHP для генерации необходимой XHTML-разметки для каждого изображения. Сгенерированный код, в дальнейшем будет включен в файл demo.php. demo.php [html]

[/html] Здесь нет ничего сложного. Обратите внимание на блок с id =”modal” - он используется для создания модального окна, которое отображается, если пользователь перетаскивает изображение на блок "drop to share". Но подробнее об этом, мы поговорим позже.

Шаг 2 – CSS

Теперь, когда у нас есть вся необходимая разметка, пришло время ее стилизовать. Сначала, нам нужно включить CSS-файлы в секции head нашей страницы. demo.php [html] [/html] После этого, можно перейти к написанию стилей. demo.css [css] body{ /* Styling the body */ color:white; font-size:13px; background: #222222; font-family:Arial, Helvetica, sans-serif; } #gallery{ /* The pics container */ width:100%; height:580px; position:relative; } .pic, .pic a{ /* Each picture and the hyperlink inside it */ width:100px; height:100px; overflow:hidden; } .pic{ /* Styles specific to the pic class */ position:absolute; border:5px solid #EEEEEE; border-bottom:18px solid #eeeeee; /* CSS3 Box Shadow */ -moz-box-shadow:2px 2px 3px #333333; -webkit-box-shadow:2px 2px 3px #333333; box-shadow:2px 2px 3px #333333; } .pic a{ /* Specific styles for the hyperlinks */ text-indent:-999px; display:block; /* Setting display to block enables advanced styling for links */ } .drop-box{ /* The share box */ width:240px; height:130px; position:absolute; bottom:0; right:0; z-index:-1; background:url(img/drop_box.png) no-repeat; } .drop-box.active{ /* The active style is in effect when there is a pic hovering above the box */ background-position:bottom left; } label, input{ /* The modal dialog URL field */ display:block; padding:3px; } label{ font-size:10px; } fieldset{ border:0; margin-top:10px; } #url{ /* The URL field */ width:240px; } [/css] Один из представленных выше классов нуждается в пояснении, это CSS-класс pic. Он используется для того картинки выглядели как полароидные снимки. Для достижения такого эффекта, каждому изображению добавляется белая рамка. Кроме того, в этом классе используется CSS3-свойство box-shadow, благодаря которому, каждый снимок отбрасывает тень. Если вы посмотрите на демо-страницу, то увидите, что фотографии разбросаны по страницы и развернуты в разные стороны. Такой эффект достигается с помощью CSS, на стороне PHP, как вы скоро увидите. Остальные стили очень простые, и не нуждаются в детальном объяснении.

Шаг 3 – PHP

Как вы помните, на шаге 1, мы рассмотрели часть XHTML-разметки, и отметили, что PHP будет использоваться для создания специальной разметки, для каждого изображения. И вот как это делается: demo.php [php] /* Configuration Start */ $thumb_directory = 'img/thumbs'; $orig_directory = 'img/original'; $stage_width=600; $stage_height=400; /* Configuration end */ $allowed_types=array('jpg','jpeg','gif','png'); $file_parts=array(); $ext=''; $title=''; $i=0; /* Opening the thumbnail directory and looping through all the thumbs: */ $dir_handle = @opendir($thumb_directory) or die("There is an error with your image directory!"); $i=1; while ($file = readdir($dir_handle)) { /* Skipping the system files: */ if($file=='.' || $file == '..') continue; $file_parts = explode('.',$file); $ext = strtolower(array_pop($file_parts)); /* Using the file name (withouth the extension) as a image title: */ $title = implode('.',$file_parts); $title = htmlspecialchars($title); /* If the file extension is allowed: */ if(in_array($ext,$allowed_types)) { /* Generating random values for the position and rotation: */ $left=rand(0,$stage_width); $top=rand(0,400); $rot = rand(-40,40); if($top>$stage_height-130 && $left > $stage_width-230) { /* Prevent the images from hiding the drop box */ $top-=120+130; $left-=230; } /* Outputting each image: */ echo '

'.$title.'

'; } } /* Closing the directory */ closedir($dir_handle); [/php] Сначала, мы открываем папку миниатюр с помощью opendir (с помощью модификатора @, мы предотвращаем появление любых возможных проблем, отображаемых пользователю) и проходим циклом по всем картинкам. В цикле, мы пропускаем файлы, не являющиеся изображениями, и генерируем некоторый XHTML-код для каждого изображения, который выводится непосредственно на экран. Как уже упоминалось ранее, в части CSS, PHP отвечает за вращение и разброс картинок по странице. Каждое изображение позиционируется по случайным X и Y координатам, и поворачивается в диапазоне от -40 до 40 градусов (для предотвращения переворачивания снимков вверх ногами). Все это генерируется с помощью PHP-функции rand() и включается в качестве CSS-стиля картинки, с помощью атрибута style. Существуют две папки с картинками, использующиеся галереей – thumbs, в которой содержатся миниатюры картинок, размером 100 х 100 пикселей, и original, которая содержит картинку реального размера. Обратите внимание на важную деталь, изображения в папке thumbnail и original, должны иметь одно и то же имя, иначе галерея будет работать не правильно. Единственно, что осталось сделать – добавить немного интерактивности.

Шаг 4 – jQuery

Итак, у нас на руках отличная CSS-галерея. Но это ничего не значит, если мы не можем перетаскивать понравившиеся картинки по экрану и увеличивать их для более детального просмотра, не так ли? Пришло время JQuery. script.js [javascript] $(document).ready(function(){ // Executed once all the page elements are loaded var preventClick=false; $(".pic a").bind("click",function(e){ /* This function stops the drag from firing a click event and showing the lightbox */ if(preventClick) { e.stopImmediatePropagation(); e.preventDefault(); } }); $(".pic").draggable({ /* Converting the images into draggable objects */ containment: 'parent', start: function(e,ui){ /* This will stop clicks from occuring while dragging */ preventClick=true; }, stop: function(e, ui) { /* Wait for 250 milliseconds before re-enabling the clicks */ setTimeout(function(){ preventClick=false; }, 250); } }); $('.pic').mousedown(function(e){ /* Executed on image click */ var maxZ = 0; /* Find the max z-index property: */ $('.pic').each(function(){ var thisZ = parseInt($(this).css('zIndex')) if(thisZ>maxZ) maxZ=thisZ; }); /* Clicks can occur in the picture container (with class pic) and in the link inside it */ if($(e.target).hasClass("pic")) { /* Show the clicked image on top of all the others: */ $(e.target).css({zIndex:maxZ+1}); } else $(e.target).closest('.pic').css({zIndex:maxZ+1}); }); /* Converting all the links to a fancybox gallery */ $("a.fancybox").fancybox({ zoomSpeedIn: 300, zoomSpeedOut: 300, overlayShow:false }); /* Converting the share box into a droppable: */ $('.drop-box').droppable({ hoverClass: 'active', drop:function(event,ui){ /* Fill the URL text field with the URL of the image. */ /* The id of the image is appended as a hash #pic-123 */ $('#url').val(location.href.replace(location.hash,'')+'#' + ui.draggable.attr('id')); $('#modal').dialog('open'); } }); /* Converts the div with id="modal" into a modal window */ $("#modal").dialog({ bgiframe: true, modal: true, autoOpen:false, buttons: { Ok: function() { $(this).dialog('close'); } } }); if(location.hash.indexOf('#pic-')!=-1) { /* Checks whether a hash is present in the URL */ /* and shows the respective image */ $(location.hash+' a.fancybox').click(); } }); [/javascript] Сначала, мы вешаем, обработчик событий на клик по картинке, с тем, чтобы лайтбокс не срабатывал, когда мы просто перетаскиваем изображение. После этого, мы делаем все картинки перетаскиваемыми, а затем настраиваем lightbox. Теперь, нам нужно сделать блок «Drop to share», «принимающим», то есть блок сможет определять, когда к нему подвели и отпустили картинку. Это позволит нам применить специальный стиль к контейнеру, и открыть модальное окно. Модальное окно – это компонент пользовательского интерфейса, поставляемый вместе с jQuery UI. Он прячет все элементы страницы, под полупрозрачный слой, тем самым блокируя их использование для пользователя. Единственная вещь, полностью привлекающая внимание пользователя – это окно с сообщением, которое в нашем случае, окно содержит URL картинки. И наконец, у нас есть несколько строк кода, которые проверяют, есть ли строки вида #pic-123 в URL, c помощью которых, лайтбокс показывает соответствующие изображения при загрузке страницы. Наша CSS3-галерея готова. Скачать архив с примером. Перевод статьи «An Awesome CSS3 Lightbox Gallery With jQuery», автор Martin

Другие участники эстафеты:

Cuprum.name – Работа с цветовой моделью RGBA
rotorweb.ru — Скажем прощай overflow: hidden!

Хотите принять участие в эстафете? Это очень просто, опубликуйте перевод статьи из представляемого ресурса, сообщите мне, и я с удовольствием поставлю ссылку на ваш блог. Обязательное условие – статьи и ресурсы не должны повторятся.

HTML 5 и CSS3: Техники, которые мы скоро будем использовать

dreamhelg — Mon, 13 Jul 2009 06:14:26 +0000

В сегодняшней статье мы собираемся создать страницу блога, используя техники нового поколения – HTML5 и CSS3. Статья продемонстрирует вам процесс разработки веб-сайтов, после того как окончательно утвердят спецификации и поставщики [...]

Переведите свою работу на новый уровень CSS3

dreamhelg — Fri, 19 Jun 2009 04:28:20 +0000

Перевод статьи (2 часть) Inayaili de León “Take Your Design To The Next Level With CSS3“, в которой рассматриваются оставшиеся CSS-3 свойства, и примеры их использования. Первая часть статьи 7. @font-face-Атрибут [...]

Переведите свою работу на новый уровень с CSS3

dreamhelg — Tue, 16 Jun 2009 12:51:42 +0000

Перевод статьи (1 часть) Inayaili de León «Take Your Design To The Next Level With CSS3« Каскадные таблицы стилей появились 13 лет назад, а наиболее распространенный стандарт CSS 2.1 существует [...]