Главная → Программирование → by

Сильнее, Better, Faster дизайн с CSS3

В нашей последней статье о CSS3, “ Нажатие кнопок практической CSS3, мы говорили об использовании новых CSS3 методов, таких как градиенты, границы радиуса и отбрасывание тени, чтобы создать убедительный, гибкой и (в некоторых случаях) веселыйbuttons.

В этой второй статье we’ повторно собирается сосредоточиться на использовании этих методов CSS (и немного JavaScript) на создать некоторые практические элементы и layouts.Как и прежде, предостережение coder — много свойств CSS we’ собираетесь использовать имеют ограниченную поддержку, если таковые имеются, в IE6 / 7 и, вероятно, 8.Firefox 3.5 и Safari 4 ваш лучший выбор прямо сейчас, чтобы увидеть все самое интересное происходит в CSS прямо сейчас (Chrome делает очень хорошую работу, тоже)

Зачем возиться с CSS, который имеет такую ​​ограниченную поддержку?Это won’ т всегда имеют ограниченную поддержку, и эти статьи все о подготовке к будущему веб-дизайна (и просто делать некоторые действительно классные вещи).Очевидно, что если вы один из тех людей, которые ждут, пока с использованием прогрессивных CSS является безопасным, потому что все основные браузеры поддерживают те же CSS в то же время, Вы живете в фантастическом world, так it’ просто в нужное времячтобы получить вещи прокатки с CSS3.

Готовы?Let’ S roll.

Встроенные формы Labels

Everyone’ S знакомы со встроенными метками форме — хранения метки поля в value атрибута и использование некоторых незначительных JavaScript, чтобы стереть текст, когда фокус поля выгоды.Это works… хорошо, но основная проблема в том, что, как только пользователь нажимает кнопку, они теряют этикетке полностью.Если они вкладками прямо в него, они не могут даже прочитать этикетку, в этом случае they’ повторно только guessing.

Первое место мы увидели, что это была фиксированная MobileMe от Apple, на их логин screen.

Что происходит с Apple, является то, что нажав на поле исчезает метка назад, но doesn’ T стереть его.Cooler еще в том, что курсор остается расположены оставили так что вы можете начать печатать, и JavaScript решений, которые происходят не слишком сложные — it’ просто трюки макета.Они позиционируют этикетку за вход, содержащая имя field. При нажатии на поле они используют JavaScript, чтобы применить класс на этикетке, что отбрасывание его назад, и другой класс, как вы начинаете печатать, чтобыэтикетке vanish.

Мы написали Блог post об этом эффекте некоторое время назад, описывая, как вы могли бы повторить это самостоятельно.Проблема в том, что с течением времени создания страницы, чтобы поддерживать эту isn’ T под ключ, как we’ бы хотел, чтобы we’. Нас пересмотрена и перестроена это только для вас (и, конечно, для нас)

Создать встроенный Label

Наш новый подход значительно проще — использовать его в наших собственных продуктов (например, Notable __ и 8 | Scrumptious) мы просто добавляем class="inlined" на этикетке, и вуаля!Here’ ы, как мы делаем it.

Начать с обычной этикеткой и ввод: 

	<label for="demoForm1">Email Address</label>
	<input class="input-text" id="demoForm1" />

В предыдущей итерации этого метода мы пошли в проблему упаковки и этикетки входе в элемент уровня блока и использовать абсолютное позиционирование, чтобы поставить метку за вход.Не больше.Во-первых, we’ будем добавлять “ inlined” класса only метки: 

	<label for="demoForm1" class="inlined">Email Address</label>
	<input class="input-text" id="demoForm1" />

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

	label.inlined + input.input-text {
		margin-top: -22px;
		background-color: transparent;
		position: relative; z-index: 2;
	}

Этот код указывает браузеру, чтобы применить стиль к любому input.input-text который следует сразу после label.inlined — Таким образом, мы можем использовать отрицательные поля тянуть входе и на этикетке самого.Мы также задать цвет фона transparent и дать входной относительное положение и z-index value.

Далее нам нужно стиль этикетки себя.You’ должны будете адаптировать стиль здесь, чтобы отражать вашу ввод текста стиле — цель для текста внутри метки появляются, как будто это на самом деле часть входа.Вот критических частей: 

	label.inlined {
		padding-left: 6px;
		font: normal 12px/18px "Helvetica Neue";
		position: relative; z-index: 1;
		opacity: 0.75;
		-webkit-transition: opacity 0.15s linear;
	}

Let’ S разорвать этот вниз.Заполнение и шрифт просто, чтобы отразить входной стиль.Позиционирование и г-индекс убедитесь, что метка остается за вход — В противном случае вход can’ т быть выбраны.Теперь самое интересное частей:. opacity и -webkit-transition

Наши этикетки формы работы путем плавного назад этикетки в разных точках.Начнем с этикеткой исчезли немного назад, следовательно, opacity: 0.75.Вы также можете использовать color отказаться от этикетки назад, но непрозрачность работает независимо от цвета шрифта.Мы добавляем в -webkit-transition, так что всякий раз, когда непрозрачность изменений, браузер (Safari или Chrome, в данном случае) будет менять прозрачность плавно о 1/8th доли секунды.Так когда же изменения непрозрачности

Два раза — когда пользователь сосредоточен на поле, и когда они начинают печатать.Let’ с создания двух классов CSS мы можем применить для этих государств. focus и has-text 

	label.focus {
		opacity: 0.35;
	}

	label.has-text {
		opacity: 0.0;
		-webkit-transition-duration: 0s;
	}

Как вы можете видеть, мы уменьшаем непрозрачность этикетке, когда пользователь нажимает в, а затем сделать его невидимым, когда они начинают набирать.Мы изменяем продолжительность нашей перехода, с тем, что, как пользователь начинает набирать, этикетки исчезает сразу, а не уходят назад, как они типа.Сейчасчто у нас есть поле структурно создана и стиле, как мы хотим, последним шагом является немного JavaScript.

Добавление JavaScript

Несмотря на CSS3 появились новые трюки, как анимации и переходов, наличие все еще король, когда дело доходит до взаимодействия.Чтобы получать наши этикетки себя вести, мы должны использовать несколько простых функций JavaScript.В этих примерах we’ буду писать для jQuery, но they’ Re легко адаптироваться к Prototype или прямо JavaScript.

JavaScript должен сделать три вещи:

  1. Добавить focus класса на этикетке, когда пользователь нажимает на field
  2. Добавить has-text класса, как только они начинают typing
  3. На этикетке обратно, если они оставить это поле пустым, и переключиться на другую field.
$(document).ready(function(){
	$("label.inlined + input.input-text").each(function (type) {

		$(this).focus(function () {
			$(this).prev("label.inlined").addClass("focus");
		});

		$(this).keypress(function () {
			$(this).prev("label.inlined").addClass("has-text").removeClass("focus");
		});

		$(this).blur(function () {
			if($(this).val() == "") {
				$(this).prev("label.inlined").removeClass("has-text").removeClass("focus");
			}
		});
	});
});

Мы won’ T корпеть над JavaScript гораздо — it’ с довольно очевидны.JQuery let’ с нами быстро ориентироваться на входах мы хотим, признавая тот же селектор we’ повторное использование в CSS, но в остальном it’ все, вырезать и сушат.И там это: встроенный этикетки, которые появляются как изысканный версии стандартных встроенных ярлыков, но намного более гладкой взаимодействия.Забегая вперед теперь мы можем сделать любой ярлык встроенных путем добавления class="inlined" на этикетке — CSS и JavaScript будет заботиться о rest.

Смотреть Live Demo »

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

Быстрый, легкий Drop-в Modals

Следующая we’ покажу вам, как создавать простые модальности, которым можно управлять с помощью всего одной строки JavaScript.Мы используем модальностей с большим эффектом в нашу обратную связь инструментом, Notable, и в то время как в заметных мы используем Ajax, чтобы загрузить модальностей на лету, в этом примере мы покажем вам, как легко можно создать на странице modal.

Основная структура нашего модальности является div.modal, содержащий все, что мы хотим.Это может быть предупреждение вызвано вашей страницы, вход в систему или регистрационную форму, или другую информацию или действия, которые мы don’ т хотим, чтобы вызвать полную загрузку страницы.We’ будем использовать некоторые из наших новых стилей CSS3, чтобы модальности выглядят удивительными и feel… хорошо, модальных, затем включите их в одну строку JavaScript.

Простой Modal

Наш первый пример модальной является более простой стиль, с простой анимацией.We’ VL стиль div напоминать мягкие, плавающие коробки со стандартным тени так это, кажется, наведите курсор мыши на странице.Чтобы он появился, we’ буду исчезать его изНепрозрачность 0, и, чтобы закрыть его, we’ буду уволить его immediately.

Модальный стиль здесь использует несколько новых элементов CSS3: -webkit-box-shadow чтобы создать тень и -webkit-transition (которые you’ будем признать, от встроенного этикетки выше) будет постепенно исчезать в JavaScript без использования анимации.Ниже перечислены стили для модальных; we’ пойдем по новому штук в …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.