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

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

dreamhelg — Thu, 17 May 2012 19:00:36 +0000

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

1. Minus

Вам, как разработчику (или дизайнеру), наверняка часто требуется выгружать изображения на какой-нибудь хостинг, чтобы поделиться ими с клиентами или коллегами по работе. Множество сайтов предоставляют такую услугу, но Minus выделяется среди них своей простотой и скоростью: просто перетащите изображение на их страничку, и оно будет загружено в сеть. После этого вы получите короткий url, для расшаривания картинки. Регистрации не требуется. Единственное пожелание на будущее, иметь возможность ресайза картинок.

2. Smush It

При использовании изображений в интернете, важно не забывать об их размере. При этом, желательно найти баланс между размером файла и качеством изображения. Smush It – это сервис, разработанный Yahoo!, позволяющий оптимизировать ваши картинки, без потери качества. Для пользователей WordPress есть готовый плагин.

3. Placehold It

Во время работы над макетом сайта, часто требуются заглушки картинок определенного размера. Placehold It – сервис, позволяющий динамически создавать заглушки изображений, для их использования достаточно просто указать в тэге img атрибут src, следующего вида , и на вашей страничке отобразится заглушка размером 350x150 пикселей.

4. Resize images online

Не хотите открывать фотошоп только для ресайза картинки? Этот сервис придет вам на помощь. Просто загрузите картинку, укажите требуемый размер, и все будет сделано.

5. Photoshop online tools

Когда дело доходит до редактирования изображений, Adobe Photoshop является самым распространенным программным обеспечением. Компания Adobe, запустила облегченную версию Photoshop, доступную онлайн. Онлайн-приложение достаточно впечатляющее и содержит множество функций. К сожалению, для использования приложения требуется регистрация на сайте.

6. Pixlr express

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

7. Aviary Phoenix

Разработанный на флеше, Aviary Phoenix – это полноценный и бесплатный редактор изображений. Настоящий “облегченный фотошоп”, который вы можете использовать на любом компьютере, без регистрации на сайте. Перевод статьи “Super useful online tools to work with images”, автор Jean-Baptiste Jung

Псевдо-селектор :target

dreamhelg — Sun, 13 May 2012 11:18:33 +0000

Псевдо-селектор :target срабатывает при совпадении хэша в URL и ID элемента на странице. [html]

Content

[/html] [css] :target { background: yellow; } [/css] Пока URL будет таким как на картинке, блок section будет иметь желтый фон.

Где это можно использовать?

Один из примеров использования – подсветка “состояний”. Когда URL страницы содержит некий хэш, страница находится в соответствующем состоянии. Этот способ напоминает манипулирование именами классов, хотя и не является таким универсальным. Все то, что вы обычно делаете изменяя классы, можно использовать для изменения состояния элемента, когда к нему применяется псевдо-селектор :target. Например: изменение цвета, позиционирования, изменение картинок, отображение/скрытие различных элементов, и т.д. Существует три признака оправданного использования псевдо-селектора :target :

Когда необходимо подчеркнуть “состояние”
Когда приемлемо резкое “перепрыгивание” страницы вниз
Когда приемлемо влияние на историю браузера

Давайте рассмотрим это немного подробнее.

Как получить хэш в URL?

Самый распространенный способ – пользовательский клик по ссылке, включающей хэш. Ссылка может быть как внутренней (которая указывает на текущую страницу), так и полноценной, оканчивающейся хэш-тэгом и значением. Например: [html] Go To There Go To There [/html]

“Перепрыгивание” страницы

Независимо от назначения ссылки, браузер всегда прокручивает страницу до тех пор, пока указанный элемент не окажется вверху. В случае если браузер не может прокрутить точно до указанного элемента, он прокрутит страницу на максимально возможную длину. Такое поведение браузера, накладывает определенные ограничения при использовании :target для подсветки текущего состояния. Например, однажды я (прим. я – Крис Койер, автор блога css-tricks.com) пробовал различные техники, для имитации создания CSS-табов, и в конце-концов остановился на чекбокс-хаке, поскольку только он позволял обойти проблемы с перепрыгиванием страницы. Йен Хэнсон, создатель CSS Science, также реализовал несколько примеров табов. Его третий пример использует :target и абсолютно позиционируемые элементы, спрятанные вверху страницы, для предотвращения “прыжка”. Это довольно умно, но все же не решение проблемы, поскольку страница прыгает вверх, табы должны располагаться ниже области прыжка.

Прекрасный пример: подсветка секций

Проблема: Клик по хэш-ссылке прокручивает страницу к указанной секции, которая по возможности будет удобно расположена в верхней части окна браузера. Но что если на странице немного контента, а скролл и вовсе отсутствует? В этом случае, секция останется в видимой области, но не будет прибита к верху страницы, что странно и не совсем удобно.

Исходя из личного опыта могу заметить, что если клик по внутристраничной ссылке не прокручивает страницу к указанной секции, это безумно раздражает. Чаще всего эта проблема встречается на FAQ-страницах, содержащих большое количество коротких секций. Давайте это исправим! Один из самых знаменитых методов исправления этой проблемы, называется “Yellow Fade Technique” (Техника Желтого Затухания). Эта техника была разработана компанией 37 signals, специально для того чтобы обратить внимание пользователей на только что добавленный на страницу контент . Джонатан Снук портировал эту идею на CSS и объединил ее с псевдо-селектором :target. Вместо желтого затухания, мы будем выделять активную секцию страницы путем плавного сдвига вправо, одновременно добавляя красный маркер слева от текста. Это будет выглядеть следующим образом: http://youtu.be/vqE1MZ0UlaM HTML-структура представляет собой обычную навигацию, с привязкой ссылок к соответствующим секциями через ID: [html]

One

Pellentesque habitant morbi ...

Two

Pellentesque habitant morbi ...

Three

Pellentesque habitant morbi ...

[/html] При активации :target, секция немного сдвигается вправо, через трансформацию translateX, поскольку она предотвращает любые проблемы с отступами и странное выравнивание текста; также слева появляется красный маркер, выполненный с помощью кейфрейм-анимации. [css] :target { -webkit-animation: highlight 1s ease; -moz-animation: highlight 1s ease; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); } @-webkit-keyframes highlight { 0% { border-left-color: red; } 100% { border-left-color: white; } } @-moz-keyframes highlight { 0% { border-left-color: red; } 100% { border-left-color: white; } } section > div { border-left: 40px solid white; padding: 10px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; padding-right: 50px; margin-left: -20px; } [/css] Вот и все. Код отвечает принципам прогрессивного улучшения, поэтому будет нормально выглядеть и работать во всех браузерах. Демо-страница.

Боремся с прыжками страницы

Предположим, вам понравилась идея использования :target для подсветки секций, но при этом хотелось бы избежать прыжков страницы, при клике по хэш-ссылкам. С помощью jQuery вы можете предотвратить дефолтное поведение всех хэш-ссылок, а затем использовать метод pushState() (или replaceState()), для изменения URL без передвижения страницы. [javascript] $("a[href^=#]").on("click", function(e) { e.preventDefault(); history.pushState({}, "", this.href); }); [/javascript] Метод replaceState() отличается от pushState() тем, что не добавляет запись о смене URL в историю браузера. Так что, вы можете использовать любой из этих методов на свое усмотрение.

Плохие новости

При изменении хэша в URL через метод pushState(), предыдущая активная секция должна вернутся к исходному состоянию, а новая выделиться. Однако этого не произойдет (на момент написания статьи тестировалось в последних версиях WebKit и Firefox). Это баг. Теоретически вы можете измерить и сохранить текущую позицию скролла на странице, позволить ссылке передвинуть страницу естественным путем, а затем вернуть ее обратно на то место где она была. Но это выглядит настолько ужасно, что я не могу себя заставить сделать тестовую страницу с этим примером. Перевод статьи "On :target", автор Chris CoyierПсевдо-селектор

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

dreamhelg — Fri, 23 Dec 2011 06:27:55 +0000

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

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

Наиболее распространенное заблуждение относительно свойства vertical-align состоит в том, что оно влияет на вертикальное выравнивание всех дочерних элементов контейнера, к которому применяется. Например, если мы применим к контейнеру свойство vertical-align: top, предполагается, что все содержимое контейнера будет выровнено по верхнему краю контейнера. Это напоминает мне старые, добрые времена табличной верстки: [css] Содержимое ячейки.. [/css] В этом примере табличной ячейки, свойство valign (сейчас уже запрещенное в HTML5), действительно прижмет все содержимое ячейки к верхнему краю. Возможно исходя из этого, CSS-разработчики ожидают похожего эффекта, от применения свойства vertical-align. Но свойство vertical-align так не работает.

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

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

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

Другими словами, следующий код не будет иметь никакого эффекта: [css] div { vertical-align: middle; /* эта строка не будет работать */ } [/css] Почему? Потому что

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

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

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

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

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

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

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

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

Возможно вы не знали, но vertical-align в качестве значения может принимать абсолютные и процентные значения, все приведенные ниже примеры будут правильными: [css] input { vertical-align: 100px; } span { vertical-align: 50%; } img { vertical-align: -300px; } [/css] В чем разница между абсолютными значениями и ключевыми словами, можно почитать в CSS-спецификации, или (что на мой взгляд гораздо полезнее) самостоятельно попробовать различные варианты. Перевод статьи “Understanding CSS’s vertical-align Property”, автор Louis Lazaris

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

dreamhelg — Tue, 22 Nov 2011 11:39:00 +0000

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

Предзагрузка изображений

Предзагрузка изображений весьма удобна: вместо того чтобы загружать картинку по запросу пользователя, мы предварительно подгружаем их в фоне, для того чтобы они сразу были готовы к показу. С помощью jQuery это делается очень просто, смотрите: [javascript] (function($) { var cache = []; // Аргументами являются пути картинок, относительно текущей страницы $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } } jQuery.preLoadImages("image1.gif", "/path/to/image2.png"); [/javascript] Источник: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Ссылки target=”blank”

Следующий фрагмент предназначен для того, чтобы все ссылки, имеющие атрибут rel=”external”, открывались в новом табе/окне. Код легко можно изменить, например открывать ссылки только с определенным классом. [javascript] $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); /* Использование: catswhocode.com */ [/javascript] Источник: http://snipplr.com/view/315/-jquery–target-blank-links

Добавление класса тэгу при включенном ява-скрипте

Этот пример состоит всего из одной строчки, но он является самым простым способом определить включен ли ява-скрипт в клиентском браузере. Если ява-скрипт включен, класс hasJs будет добавлен к тегу . [javascript] $('body').addClass('hasJS'); [/javascript] Источник: http://eisabainyo.net/weblog/2010/09/01/10-useful-jquery-snippets

Плавная прокрутка по ссылке

jQuery хорошо известен своей возможностью легко создавать красивые визуальные эффекты. Одним из таких эффектов, является плавная прокрутка страницы, при нажатии на ссылку. Следующий пример демонстрирует пример такой прокрутки страницы, по клику на ссылку с классом topLink. [javascript] $(document).ready(function() { $("a.topLink").click(function() { $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top + "px" }, { duration: 500, easing: "swing" }); return false; }); }); [/javascript] Источник: http://snipplr.com/view.php?codeview&id=26739

Изменение прозрачности при наведении

Еще один красивый эффект – очень популярный среди клиентов – эффект затухания элемента при движении мыши. Следующий пример кода, реализует плавное изменение прозрачности картинки при наведении/отведении мыши. [javascript] $(document).ready(function(){ $(".thumbs img").fadeTo("slow", 0.6); // Эта строчка при загрузке страницы задает всем миниатюрам прозрачность равную 60% $(".thumbs img").hover(function(){ $(this).fadeTo("slow", 1.0); // Делаем картинку непрозрачной, при наведении мыши },function(){ $(this).fadeTo("slow", 0.6); // Снова возвращаем прозрачность 60%, при отведении мыши }); }); [/javascript] Источник: http://snipplr.com/view/18606

Колонки одинаковой высоты

При создании сайта с колонками, очень часто требуется, чтобы все колонки были одинаковой высоты, как это можно было сделать в старых, добрых таблицах. Этот пример кода вычисляет высоту самой длинной колонки, и автоматически задает ту же высоту всем остальным. [javascript] var max_height = 0; $("div.col").each(function(){ if ($(this).height() > max_height) { max_height = $(this).height(); } }); $("div.col").height(max_height); [/javascript] Источник: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4

Включаем HTML5-разметку в старых браузерах

HTML5 – это будущее клиентской веб-разработки. К сожалению, некоторые старые браузеры не умеют распознавать новые теги, такие как header и section. Этот пример кода, научит старые браузеры распознавать новые HTML5-тэги. [javascript] (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})() [/javascript] Еще лучше будет, если вы подключите .js-файл в секции вашей html-страницы. [javascript] [/javascript] Источник: http://remysharp.com/2009/01/07/html5-enabling-script/

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

Ниже представлена простая jQuery-функция, проверяющая, поддерживает ли браузер клиента определенное CSS3-свойство. В этом примере, мы проверяем свойство border-radius, но его конечно, легко можно изменить на любое другое. Обратите внимание, что при указании свойства, вам нужно опустить дефис, чтобы предотвратить ошибку синтаксиса. Поэтому вместо border-radius, вам нужно написать “borderRadius” или “BorderRadius”. [javascript] var supports = (function() { var div = document.createElement('div'), vendors = 'Khtml Ms O Moz Webkit'.split(' '), len = vendors.length; return function(prop) { if ( prop in div.style ) return true; prop = prop.replace(/^[a-z]/, function(val) { return val.toUpperCase(); }); while(len--) { if ( vendors[len] + prop in div.style ) { // browser supports box-shadow. Do what you need. // Or use a bang (!) to test if the browser doesn't. return true; } } return false; }; })(); if ( supports('textShadow') ) { document.documentElement.className += ' textShadow'; [/javascript] Источник: http://snipplr.com/view/44079

Получаем параметры url

Получение url-параметров с помощью jQuery – довольно простая задача. Следующий пример это продемонстрирует. [javascript] $.urlParam = function(name){ var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); if (!results) { return 0; } return results[1] || 0; } [/javascript] Источник: http://snipplr.com/view/26662

Отключаем клавишу “Enter” в формах

По умолчанию, форма отправляется на сервер при нажатии клавиши “Enter”. Но для некоторых форм, нажатие этой клавиши может вызвать проблемы. Следующий пример кода, поможет вам предотвратить нежелательную отправку формы, путем отключения клавиши “Enter”, с помощью jQuery. [javascript] $("#form").keypress(function(e) { if (e.which == 13) { return false; } }); [/javascript] Источник: http://snipplr.com/view/10943/disable-enter-via-jquery Перевод статьи “10 awesome jQuery snippets”, автор Jean-Baptiste Jung

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

WordPress. Создаем блок «Интересные статьи»

dreamhelg — Wed, 20 Jul 2011 05:35:33 +0000

Меня часто спрашивают читатели, как именно реализован блок «Интересные статьи» у меня на сайте. Никакого секрета тут нет, я использую бесплатный шаблон, и этот блок шел с ним в комплекте, так что любой желающий, может скачать тему и посмотреть. Для того чтобы статья попала в блок, ее необходимо специально отметить, в моем шаблоне это реализовано с помощью плагина FeatureMe. Затем происходит выборка отмеченных статей, и их отображение в блоке. Хочу заметить, что это далеко не единственный способ решения задачи, и сегодня я расскажу как сделать такой блок используя встроенные средства вордпресс. Для примера, я выбрала простую и аккуратную тему tweaker3, с минимальным дизайном.

1. Создание отметок для записей

Прежде всего, нам необходимо иметь возможность отмечать нужные записи для вывода в блок. С этой задачей нам помогут справиться произвольные поля вордпресс. Использовать их очень просто, достаточно придумать название для своего поля, и указать его значение. Произвольные поля находятся на странице редактирования записи, однако в новых версиях вордпресс они по умолчанию скрыты, так что если вдруг вы их не видите, нажмите на кнопку «Настройки экрана», и укажите соответствующую галочку: Вводим название нашего поля featrue, со значением on, поскольку наше поле будет в виде флажка, и нажимаем кнопку «Добавить произвольное поле». Соответственно, если featrue = on, значит статья выводится в блоке: После этой нехитрой процедуры, произвольное поле запишется в базу данных, и вы сможете использовать его в новых записях, просто выбрав из списка: В принципе, этого уже достаточно, чтобы выбирать статьи для блока. Но я считаю, что такой способ отметки статей не очень удобен, поэтому мы пойдем дальше и сделаем удобную обертку для нашего поля, в виде чекбокса. Далее вся работа у нас пойдет в файле темы functions.php. Открывайте его, и вставляйте следующий код: [php] /*Feature Custom Field*/ function feature_customfield(){ } function admin_init(){ add_meta_box('feature', 'Интересные статьи', 'feature_customfield', 'post', 'normal', 'low'); } add_action('admin_init', 'admin_init'); [/php] Функция feature_customfield() отвечает за вывод значения поля, мы добавим ее содержимое на следующем этапе. Функция admin_init() выступает в роли контейнера для функции add_meta_box(), которая в свою очередь добавляет блок feature на страницу редактирования записи. В двух словах опишу параметры функции:

feature – название выводимого блока
"Интересные статьи" - заголовок блока
feature_customfield – название функции, отвечающей за вывод блока
post – вид контента для которого будет выведен блок на странице редактирования, может быть записью, страницей, ссылкой, или пользовательским типом данных.
normal – место вывода блока, указав side можно вывести блок в боковой колонке
low – приоритет вывода блока на странице, поскольку у нас значение low, блок выводится в самом конце, после всех остальных.

Последняя строчка отвечает за выполнение функции добавления блока, при инициировании административной панели. Можете проверить страницу редактирования записи, если вы все сделали правильно, то должны увидеть вот такой блок: Пока что у нас есть только заголовок блока, но мы сейчас это исправим. Помните пустую функцию feature_customfield()? Она как раз и будет отвечать за наполнение блока и отображение сохраненного значения. Вставьте внутри функции следующий код: [php] global $post; $custom = get_post_custom($post->ID); if($custom['feature'][0] == 'on'){ $value = 'checked'; }else{ $value = ''; } echo ""; echo " Вывести запись в блоке интересных статей"; } [/php] Здесь мы сначала объявляем глобальную переменную $post, для доступа к нашей текущей записи, и получаем значение произвольного поля feature (если оно установлено). Далее проверяем его значение, если оно равно on (как в нашем примере), то присваиваем переменной $value значение checked. Все это делается для того, чтобы правильно отобразить в нашем поле, ранее сохраненное значение. Последние две строчки выводят наше поле, с небольшим комментарием. Теперь наш блок выглядит вот так: Осталось совсем немного — сделать так, чтобы статус поля сохранялся после обновления записи. Для этого нам понадобится еще одна функция с экшеном: [php] function update_featurecustomfield(){ global $post; update_post_meta($post->ID, 'feature', $_POST['feature']); } add_action('save_post', 'update_featurecustomfield'); [/php] Здесь просто обновляем значение произвольного поля на указанное в чекбоксе. Последняя строчка отвечает за выполнение этой функции при сохранении записи. Весь код полностью будет выглядеть вот так: [php] /*Feature Custom Field*/ function feature_customfield(){ global $post; $custom = get_post_custom($post->ID); if($custom['feature'][0] == 'on'){ $value = 'checked'; }else{ $value = ''; } echo "<input type='checkbox' name='feature' $value />"; echo " Вывести запись в блоке интересных статей"; } function admin_init(){ add_meta_box('feature', 'Интересные статьи', 'feature_customfield', 'post', 'normal', 'low'); } function update_featurecustomfield(){ global $post; update_post_meta($post->ID, 'feature', $_POST['feature']); } add_action('save_post', 'update_featurecustomfield'); add_action('admin_init', 'admin_init'); [/php] Теперь произвольные поля можно спрятать за ненадобностью, и полюбоваться на наш полностью работающий блок:

2. Вывод отмеченных записей в шаблон

После того, как у нас все заработало в админке, неплохо было бы иметь возможность вывести отмеченные записи в шаблон. С этой задачей легко справится отдельный цикл вывода записей. Отркываем header.php (или любой другой шаблон, в котором вы планируете разместить блок), и вставляем следующий код: [html]

have_posts()): $feature_posts->the_post(); ?>

[/html] Здесь мы создаем новый объект класса WP_Query, со следующими параметрами:

showposts – количество выводимых записей, в нашем случае 5
meta_key — название произвольного поля
meta_value – значение произвольного поля

В результате цикла у нас выводятся пять записей, с заголовком, цитатой и ссылкой «читать далее». Обратите внимание, что каждая запись обернута в индивидуальный блок с классом feature-item, а все эти блоки содержаться внутри блока feature-posts. Такая разметка необходима для правильной работы яваскрипт-слайдера. Осталось совсем немного — сделать для записей красивую обертку.

3. Выбор слайдера

Слайдеров на яваскрипте написано бесчисленное множество, можно выбрать на любой вкус. Я предпочитаю jQuery Cycle Plugin, поскольку он не требователен к разметке, а также имеет множество настроек. Для начала необходимо убедиться, что к вашей теме подключен jQuery, и если его еще нет, необходимо это исправить. В моей теме jQuery уже используется, поэтому мне остается только подключить сам плагин. Скачиваем полную версию плагина с официальной страницы, сохраняем в папку js внутри шаблона, и подключаем на страницу header.php сразу после функции wp_head(). [php] [/php] Далее, здесь же вставляем вызов слайдера, перед тегом body [javascript] [/javascript] Теперь наш блок выглядит вот так:

4. Настройка стилей

Я не буду подробно останавливаться на каждом стиле, думаю любой человек знакомый с CSS все поймет. Единственное, что следует отметить, html-разметка была немного изменена. В частности, был добавлен еще один оборачивающий контейнер и заголовок h2: [html]

Интересные статьи

have_posts()): $feature_posts->the_post(); ?>

[/html] Это не обязательные дополнения, так что без них вполне можно обойтись. Вот такие стили я использовала для нашего слайдера: [css] *Feature Articles*/ #feature-container{ margin-bottom: 15px; width: 620px; color: #fff; position: relative; } #feature-container a{ color: #fff; } #feature-container h2{ color: #90CACC; font-weight: normal; background: #444444; margin-bottom: 0; padding: 10px 20px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; } #feature-posts{ width: 600px; height: 100px; padding: 10px; background: #444444; } .feature-item{ padding: 0 20px; overflow: hidden; } #feature-container #nav{ font-family: Verdana; } #feature-container #nav a{ color: #fff; background: #666666; padding: 7px 10px; text-align: center; margin-right: 1px; } #feature-container #nav a.activeSlide{ background: #444444; } [/css] В результате блок выглядит вот так:

5. Сокращение длины цитаты

Уже под конец написания статьи, я вспомнила об одной возможной проблеме. Дело в том, что анонс статьи в блоке выводится с помощью темлейтного тэга the_excerpt() (цитата). По умолчанию, если вы специально не указали отдельную цитату для записи, его длина равна 55 символам, что в моем примере не очень удобно, поскольку блок по высоте не рассчитан на такой объем текста. Решение довольно простое, можно изменить дефолтную длину цитаты, на нужное количество символов, для этого вставьте следующий код в functions.php: [php] function new_excerpt_length($length) { return 20; } add_filter('excerpt_length', 'new_excerpt_length'); [/php] Строчка return возвращает количество символов цитаты, в моем случае 20. Вот собственно и все, надеюсь приведенный пример будет вам полезен. Архив с примером.

Кое-что интересное о CSS-свойстве border

dreamhelg — Wed, 06 Apr 2011 07:57:11 +0000

Несмотря на годы веб-разработки и чтения тематических блогов и книг по CSS, я по-прежнему сталкиваюсь с неизвестными возможностями давно знакомых CSS-свойств. Возможно это моя вина, я человек привычки, и никогда не рассматирваю подробно вещи, которые мне давно знакомы. Так, во время чтения книги Smashing Book 2, в главе Кристиана Хейлмана был приведен пример следующего CSS-кода: [css] #pagetitle { border-color: black white white black; } [/css] Первое, о чем я подумал: «Это какая-то ошибка. С каких пор свойство border-color позволяет в сокращенной форме указывать цвет для каждой границы блока?». А затем, я вспомнил, что за 10 лет разработки, я использовал это свойство один или два раза, следовательно, что я могу о нем знать? Плюс, я думаю что Кристиан, как опытный разработчик, знает о чем говорит. Фактически, каждый раз, когда мне нужно было указать цвет границы, я использовал сокращенную версию свойства border, вот так: [css] #pagetitle { border: solid 1px black; } [/css] Редко когда мне действительно приходится использовать свойства типа: border-color, border-style, border-left-style или любые другие версии этих длинных свойств. В 99% случаев, свойство border реализует все, что мне требуется. В CSS-справочнике на sitepoint.com сказано:

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

Следовательно, точно так же как для свойств margin и padding, цвет для каждой границы задается в следующем порядке: верхняя граница, правая граница, нижняя граница, левая граница (по часовой стрелке, начиная сверху).

Стиль и ширина границы

Это правило работает также для свойств border-style и border-width, так что вы можете указать разную толщину и стиль границы для каждой из сторон элемента. Ну и конечно, вы можете сокращать свойства, при необходимости: [css] #pagetitle { border-width: 2px 1px; border-style: solid dashed; } [/css] Снова, также как у margin и padding, мы указываем только первые два значения, а остальные просто наследуются от первых.

Запомните

Нельзя использовать эту технику мульти-объявления для сокращенного CSS-свойства border (несмотря на то, что это кажется вполне логичным). Оно применяется только к трем, указанным выше, свойствам, так что следующий код будет неправильным: [css] #pagetitle { /* THIS IS INVALID! */ border: solid dashed 1px 2px black white white black; } [/css] Еще, такой метод не получится применить к свойствам outline-width, outline-style и outline-color. Перевод статьи «Here’s Something Interesting About CSS Borders», автор Louis Lazaris

Изучаем CSS-позиционирование за 10 шагов

dreamhelg — Wed, 16 Feb 2011 13:56:56 +0000

Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о [...]

WordPress. Функции базы данных

dreamhelg — Tue, 07 Dec 2010 11:09:27 +0000

В wordpress существует достаточно обширный класс, предоставляющий набор методов для эффективной работы с базой данных. Вы можете найти описание этого класса а также всех его методов в файле /wp-includes/wp-db.php. В сегодняшней статье будут рассмотрены наиболее важные из этих методов, и небольшие примеры их использования. Важно умение использовать возможности класса $wpdb, для безопасной работы плагинов.

В статье будут приведены примеры использования следующих шести методов:

insert($table, $data, $format) – вставляет строку в таблицу через массивы.
update($table, $data, $where, $format, $where_format) – обновляет строку в таблице через массивы.
get_var($query, $x, $y) – получает одиночную переменную из базы данных.
query($query) — выполняет MySQL-запрос к базе данных, с текущим подключением.
get_results($query, $output) – получает данные SQL-запроса из базы данных (одну или множество строк).
escape($data) – Экранирует контент для вставки в базу данных, используя метод addslashes() для безопасности.

Кроме этого, есть еще несколько интересных методов:

set_prefix($prefix) – используется для установления префикса wordpress-таблиц, также может быть использован для переопределения префикса в любое время.
prepare($query) – безопасно подготавливает SQL-запрос к выполнению, с помощью sprint()-подобного синтаксиса.
get_row($query, $output, $y) – получает одиночную запись из базы данных.
get_col($query, $x) – получает одиночную колонку из базы данных в формате массива.

[code lang="php"] /** * insert */ $wpdb->insert( $wpdb->posts, array( 'post_title' => $mytitle ) ); $wpdb->insert( $wpdb->options, array( 'option_name', 'new_option_key', 'option_value' => 'New Option Value', 'autoload' => 'yes' ) ); /** * update */ $wpdb->update( $wpdb->posts, array( 'post_title' => $mytitle ), array( 'ID' => $myid ) ); $wpdb->update( $wpdb->options, array( 'option_value' => 'New Option Value' ), array( 'option_name' => 'new_option_value' ) ); /** * get_var */ $post_id = $wpdb->get_var( $wpdb->prepare( "SELECT post_id FROM $wpdb->postmeta WHERE post_id = %d AND meta_key = 'enclosure' AND meta_value LIKE (%s)", $post_ID, $url . '&' ) ); $content = $wpdb->get_var( $wpdb->prepare("SELECT post_content FROM " . "$wpdb->posts WHERE " . "post_title = %s AND " . "ID = %d", $title, $id ) ); /** * query */ $wpdb->query( "DELETE FROM $wpdb->options WHERE option_name = '$name'" ); $wpdb->query( "UPDATE $wpdb->posts SET post_title = '$mytitle' WHERE ID = $myid" ); /** * query and escape */ $mytitle = $wpdb->escape( $mytitle ); $myid = absint( $myid ); $wpdb->query( "UPDATE $wpdb->posts SET post_title = '$mytitle' WHERE ID = $myid" ); /** * get_results */ $type = $wpdb->get_results( "SELECT post_type FROM " . "$wpdb->posts WHERE ID=$id" ); [/code]

Перевод статьи “WordPress Database Functions”.

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