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

Обзор 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

Кое-что интересное о 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

WordPress. Создаем встроенную форму обратной связи

dreamhelg — Wed, 30 Jun 2010 06:30:45 +0000

Множество существующих плагинов wordpress позволяют встраивать форму обратной связи на ваш блог, но использование плагинов – не обязательное условие. В сегодняшней статье, вы узнаете как создать встроенную контактную форму, с помощью собственной WordPress-темы.
Пример такой формы можно найти на сайте PHP Snippets, там она выглядит следующим образом:

Шаг 1: Создание шаблона

Сначала, нам понадобится создать шаблон страницы. Для этого, скопируйте содержимое файла page.php в новый файл, и сохраните его под именем page-contact.php. Для того, чтобы WordPress определил наш файл как шаблон, нам нужно добавить комментарий, следующего вида: [php] [/php] В результате наш файл page-contact.php должен выглядеть вот так: [php]

[/php]

Шаг 2: Создание формы

Теперь, создадим простую форму обратной связи. Просто вставьте приведенный код внутри блока entry-content. [php] [/php] Код формы очень простой, и не нуждается в разъяснениях. Обратите внимания на тэг input type=”hidden”, добавленный в строке 19 – позже, он будет использоваться для проверки была ли отправлена форма.

Шаг 3: Обработка данных и ошибок

Наша форма выглядит прекрасно, но пока что является бесполезной, поскольку не отправляет сообщения. Прежде всего, перед отправкой сообщения, нам нужно проверить была ли отправлена форма, и правильно ли заполнены все поля. Если поля заполнены правильно, мы получаем почтовый адрес администратора блога и отправляем ему сообщение. Если поля заполнены частично или с ошибками, сообщение не отправляется, и пользователю выводится список ошибок. Вставьте следующий код между комментарием с названием шаблона и функцией get_header(). [php] ' . "\r\n" . 'Reply-To: ' . $email; mail($emailTo, $subject, $body, $headers); $emailSent = true; } } ?> [/php] В этом коде, проверяется отправка формы и корректное заполнение полей. Если появляются ошибки, в виде пустого поля или неправильно указанного почтового адреса, формируется сообщение об ошибке и форма не отправляется. Теперь, нам нужно отобразить сообщение об ошибке, рядом с нужным полем, например “Пожалуйста, введите имя”. Ниже приведен полный код шаблона, который вы можете использовать в своей теме. [php] ' . "\r\n" . 'Reply-To: ' . $email; mail($emailTo, $subject, $body, $headers); $emailSent = true; } } ?>

id="post-">

Thanks, your email was sent successfully.

Sorry, an error occured.

[/php]

Шаг 4: Добавляем проверку jQuery

Наша форма уже работает прекрасно, но мы можем улучшить ее, добавив проверку на клиенте. Для этого, мы будем использовать jQuery и плагин jQuery Validation. Это отличный плагин, позволяющий легко и быстро проверить правильное заполнение полей. Cкачайте плагин и поместите его в папку с вашей темой, внутри папки /js. После этого, вставьте следующие строки в новый файл: [javascript] $(document).ready(function(){ $("#contactForm").validate(); }); [/javascript] Сохраните файл под именем verif.js в папке /js. Теперь, нам нужно подключить ява-скрипт файлы в нашу тему. Откройте файл header.php и вставьте следующий код внутри тэгов : [html] [/html] После этого, ваша форма будет проверяться плагином на клиентской стороне. Плагин работает довольно просто – выбирает элементы формы, имеющий css-класс required и проверяет их на корректное заполнение. В случае ошибки, отображается сообщение. Надеюсь, вам понравится ваша новая WordPress-форма. Перевод статьи “How to create a built-in contact form for your WordPress theme”, автор Jean-Baptiste Jung

Обзор CSS-свойства white-space

dreamhelg — Mon, 21 Jun 2010 10:00:31 +0000

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

Небольшое HTML-введение

При вставке текста в (X)HTML, независимо от того, сколько пробелов вы поставите между словами, при выводе страницы в окне браузера, все эти пробелы, по умолчанию, будут сокращены до одного. Это довольно удобно, поскольку мы легко можем форматировать текст в коде, с тем чтобы улучшить его читаемость, при этом, не создавая дополнительных пробелов и ненужных разрывов строк. Однако, если же вы хотите отобразить все пробелы и переносы строк – вам поможет тэг

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

Кроме того, в (X)HTML есть возможность использовать неразрывный пробел ( ), который используется для создания множественных пробелов. Ранее, для этих целей использовался, устаревший на сегодняшний день, тэг .

Свойство white-space – это CSS-аналог всех вышеперечисленных (X)HTML-методов управления пробелами.
Описание и возможные значения
С помощью набора возможных значений, свойство white-space, позволяет нам управлять поведением браузера, при обработке множественных пробелов.

Далее представлен список различных значений свойства white-space, вместе с визуальной демонстрацией их действия.
Значение: normal
Это дефолтное значение, при котором текст отображается обычным способом. Значение normal следует использовать только в одном, единственном случае – если вы уже назначили тексту другой способ обработки, и теперь хотите переопределить его для какого-то фрагмента.



Значение: nowrap

Это наиболее распространенное значение свойства white-space, поскольку оно полностью идентично значению normal, за исключением одной особенности. Значение nowrap полностью игнорирует переносы строк, независимо от того, были ли они проставлены в коде, или же появились при обработке текста, за счет ограниченного контейнера.

Элемент, которому назначено свойство white-space: nowrap, вместо того, чтобы переносить текст или другие строчные элементы на новую строку, расширит границы родительского блока, до тех пор, пока содержимое не уместится в одну строку. В дополнение, множественные пробелы будут сокращены до одного, также как при значение normal.


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


Значение: pre-line
Это значение работает точно также как дефолтное значение normal, за исключением одной детали: при обработке будут учитываться переносы строк. Так что, множественные пробелы будут как обычно проигнорированы, но если в вашей разметке есть переносы строк, то все они появятся при выводе в браузере.

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

	Internet Explorer – начиная с версии 7
	Firefox – начиная с версии 3.0
	Opera  - начиная с версии 9.2


Значение: pre-wrap
Это значение практически тоже самое что и pre, за исключением того, что текст выводится в границах своего родительского элемента. Следовательно, текст не будет вытягиваться в одну строку для имитации форматирования в коде, но множественные пробелы и переносы строк будут учтены.

Поддержка браузерами:

	Internet Explorer – начиная с версии 7
	Firefox -  начиная с версии 3.0


Примеры использования
Наиболее часто, свойство white-space, используется для устранения нежелательных переносов строки. Взгляните на картинку:



В состав ссылки “read more” входит символ » (кавычка), перенесенный на другую строку в связи с нехваткой свободного пространства. Эту ситуацию легко можно исправить, применив свойство white-space в значении nowrap. Благодаря этому, ссылка будет целиком перенесена на новую строку как единый объект.

Этот пример еще раз иллюстрирует тот факт, что свойство white-space действует только на содержимое элемента, к которому оно применяется. Поэтому, несмотря на то, что ссылка была перенесена на другую строку, текст внутри ссылки не был разделен переносом строки.
Заключение
Чтобы исключить возможное появление проблем, при использовании свойства white-space, следует помнить главное: область его действия распространяется только на строчные элементы контейнера, к которому применяется свойство.

Как уже упоминалось выше, наиболее полезным из всех возможных значений свойства white-space – является значение nowrap. В связи с отсутствием в Internet Explorer полной поддержки значений pre-line и pre-wrap, они используются не так часто, хотя тоже могут принести немало пользы, если получат более широкую поддержку.

Перевод статьи “The CSS white-space Property Explained”, автор Louis Lazaris

Эффект неонового текста с помощью CSS и JQuery

dreamhelg — Wed, 09 Jun 2010 05:00:07 +0000

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

Шаг 1 – Дизайн

Первым делом, для достижения такого эффекта, нам нужно создать фоновое изображение, содержащее две, слегка отличающиеся версии текста. jQuery будет плавно переключаться между этими изображениями, создавая красивый эффект свечения. Итак, открываем фотошоп и создаем новый документ, 650х300 пикселей, в качестве фонового цвета указываем #141414. Для заголовка используйте свой любимый шрифт, в приведенном примере – это Century Gothic, размер 60px. После этого, Ctrl + клик по иконке текстового слоя в палитре слоев, для выделения всего текста. Используйте инструмент прямоугольного выделения, зажав Shift + Alt, для того, чтобы ограничить выделение текста одним словом. Далее, сохраняя выделение, создайте новый слой под названием “gradients”, и кликните по нему, для активации. Теперь, возьмите инструмент градиента и раскрасьте каждое слово, поочередно переключая выделение между отдельными словами. Выделение отдельных слов требуется для ограничения области действия градиента, к тому же мы предварительно активировали слой “gradients”, с тем, чтобы все изменения были сохранены на нем. После того, как вы раскрасите весь заголовок, дублируйте слой, расположив его ниже основного, и примените другой набор градиентов. В результате, у нас получилась картинка, с двумя разноцветными заголовками, так что мы легко сможем переключаться между ними, путем простого изменения свойства background-position в CSS. Вы найдете psd-файл данного изображения, в архиве с приведенным примером.

Шаг 2 – XHTML

XHTML-разметка очень простая, вам понадобится только контейнер (#neonText H1), который будет содержать две версии фона. [html]

Neon Text Effect With jQuery & CSS.

[/html] Слой layer1, постепенно уменьшая свою прозрачность, создает плавный эффект неонового свечения, за счет того, что он расположен поверх слоя layer2. Исходя из соображений поисковой оптимизации, мы также создадим текст, соответствующий надписи на картинке, который будет скрыт с помощью отрицательного значения свойства text-indent.

Шаг 3 – CSS

Стили, используемые для этого эффекта – также очень простые. Два элемента span, которым назначено одинаковое фоновое изображение, с разницей в позиционировании. Один элемент показывает только верхнюю часть картинки, а второй, только нижнюю. [css] /* The two text layers */ #neonText span{ width:700px; height:150px; position:absolute; left:0; top:0; background:url('img/text.jpg') no-repeat left top; } span#layer1{ z-index:100; } span#layer2{ background-position:left bottom; z-index:99; } /* The h1 tag that holds the layers */ #neonText{ height:150px; margin:180px auto 0; position:relative; width:650px; text-indent:-9999px; } [/css] Контейнер #neonText позиционирован относительно, с тем, чтобы внутренние элементы span, располагались точно один над другим. Кроме того, обратите вниманием на свойство text-indent, которое скрывает текстовое содержимое нашего контейнера.

Шаг 4 – jQuery

Последнее, что нам осталось сделать – создать анимацию переключения блоков. Поскольку мы используем jQuery (предварительно подключив его на страницу тэгом script), в нашем распоряжении есть два удобных метода fadeIn и fadeOut, которые мы используем в следующем коде. [javascript] $(document).ready(function(){ setInterval(function(){ // Selecting only the visible layers: var versions = $('.textVersion:visible'); if(versions.length<2){ // If only one layer is visible, show the other $('.textVersion').fadeIn(800); } else{ // Hide the upper layer versions.eq(0).fadeOut(800); } },1000); }); [/javascript] Функция, расположенная внутри выражения setinterval, выполняется каждую секунду, отображая/скрывая слой с первым контейнером span. Скачать архив с примером. Перевод статьи “Neon Text Effect With jQuery & CSS”, автор Martin