HTML и CSS

Создание тянущейся шапки с логотипом (для начинающих)

Создание “резиновой” шапки с логотипом (для начинающих)

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

(далее…)

HTML и CSS

Использование тэга span для форматирования текста

Использование тэга span для форматирования текста Что же это за тэг такой, <span>? Данный тэг необходим для форматирования элементов. Он не является блочным элементом и позволяет, например, изменить стиль для одного слова. Его можно использовать внутри блочных элементов (<p>,<table>,<div>). Span поддерживается всеми известными браузерами (ну ещё бы он не поддерживался каким-либо браузером — стыд и позор :lol:)

Приступим к самому форматированию текста. В html это требует лишь пару символов кода, а всё остальное – чистый css. Хотя, можно прописать стили в html-коде, но это не хорошо, т.к. «нагружает» страницу лишним кодом, поэтому стили надо выносить в отдельный файл. Поскольку <span> это тэг для форматирования, то большая часть статьи будет о изучении и синтаксисе CSS.

Итак, дан текст: «Шел Грека через реку, видит Грека в реке рак, сунул грека руку в реку
рак его за руку цап…». Наши задачи:

  1. Придать словам «река» и «рак» синий цвет шрифта.
  2. Выделить жирным имя героя, без использования тэгов strong или b
  3. Изменить фон  и цвет глаголов, при наведении на них курсора мыши.

Задачи трудные, но это только на первый взгляд. На самом деле всё очень просто. Для начала «окружим» эти слова тэгом <span>. Должно получиться что-то, типа <span>рак</span>. Затем, необходимо присвоить класс к каждому тэгу span. У нас имеется 3 задачи, поэтому нам надо будет ко всем тэгам span присвоить один из трёх соответствующих классов, которые мы назовём, к примеру, “color” (1 задание), ”hero” (2 задание) и ”glagol” (3 задание). Пример присвоения классов к тэгу span — <span class=”color”>рак</span>. Всё, с html покончено, далее будет только CSS.

Создаём отдельный файл (назовите его style.css) и сохраняем его в том же каталоге, что и html файлы с нашим текстом. Подключаем файл стилей к нашей странице, сохраняем сделанные на  html странице изменения и можете смело её закрывать, теперь нам понадобиться только файл style.css. Для начала, ознакомлю вас с синтаксисом CSS. Он очень прост, задаётся селектор (название класса, айди или элемента), а затем идут различные свойства и их параметры. Сложно? Не переживайте, ниже будет пример кода, где вам всё станет понятно.

Итак, ранее мы создали 3 класса для каждой задачи. Теперь будем создавать стили для каждого их классов. Ниже я приведу отрывок кода с комментариями, где вы без труда разберётесь с синтаксисом CSS и не только. Небольшая шпаргалка: поскольку селекторы бывают разных типов, то они могут иметь одинаковые имена (Например, класс «color» и айди «color»), поэтому нам надо «сообщить» браузеру какой именно элемент нам нужен – для этого перед названием элемента ставятся специальные символы (без пробелов): «#» — перед айди, «.» — перед классом и ничего не ставиться перед названием тэга (например, span {} – этот стиль будет применяться для всех тэгов span, встречающихся в документе).

.color { /*Название селектора. В данном случае он называется «color.*/

Color:  #0000ff; /*Задаём тексту синий цвет. Color – свойство, а #ffff00 – параметры свойства.*/

}

.hero {

Font-weight: bold; /* Делаем текст жирным.*/

}

.glagol:hover { /*Дополнительное свойство селектора :hover позволяет задать стиль для данного элемента, который будет отображаться при наведении мыши на элемент.*/

Background: #eeeeee; /*Задаём фоновый цвет.*/

Color:  #666666;

}

Сохраняем написанные стили, запускаем html-файл в браузере и радуемся результату. Если вы всё сделали правильно, то вы увидите то же самое, что и на картинке к данной статье. А если у вас что-то не работает, то посмотрите исходники и найдите свои ошибки.

__________________

Украшать веб-страницы мы научились, теперь пора украшать свою девушку . Тут вместо CSS вам придётся использовать свадебные платья и прочие украшения, например ювелирные.

JavaScript и jQuery

Меню с эффектом наложения на jQuery

Меню с эффектом наложения на jQuery В этом уроке мы создадим простое меню, которое будет выделяться из всей страницы, при наведении на него курсора мыши, затемняя всю остальную часть страниц, при этом само меню будет оставаться незатемнённым, а под-меню будет будет «выезжать» из-под него. «Этот эффект мы воссоздадим используя jQuery.

Разметка

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

<div class="oe_wrapper">
	<div id="oe_overlay" class="oe_overlay"></div>
	<ul id="oe_menu" class="oe_menu">
		<li>
			<a href="">Collections</a>
			<div>
				<ul>
					<li class="oe_heading">
						Summer 2011
					</li>
					<li><a href="#">Milano</a></li>
					...
				</ul>
				<ul>
					...
				</ul>
				<ul>
					...
				</ul>
			</div>
		</li>
		<li>
			<a href="">Projects</a>
			<div style="left:-111px;">
				...
			</div>
		</li>
		<li>
			<a href="">Fragrances</a>
			<div style="left:-223px;">
				<ul class="oe_full">
					<li class="oe_heading">
						Fashion Fragrances
					</li>
					<li><a href="#">De?lure</a></li>
					<li><a href="#">Violet Woman</a></li>
					<li><a href="#">Deep Blue for Men</a></li>
					<li><a href="#">New York, New York</a></li>
					<li><a href="#">Illusion</a></li>
				</ul>
			</div>
		</li>
		<li><a href="">Events</a>
			<div style="left:-335px;">
				...
			</div>
		</li>
		<li><a href="">Stores</a>
			<div style="left:-447px;">
				...
			</div>
		</li>
	</ul>
</div>

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

Стили

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

Начнём со слоя наложения, который будет затемнять остальную часть страницы.

.oe_overlay{
	background:#000;
	opacity:0;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

Позиция данного слоя является фиксированной т.е. он всегда будет на экране монитора, вне зависимости от прокрутки страницы.

Главное меню будет иметь следующий стиль:

ul.oe_menu{	
	list-style:none;
	position:relative;
	margin:30px 0px 0px 40px;
	width:560px;
	float:left;
	clear:both;
}

«Прижимаем» меню к левому краю, оставляя отступ 40 пикселей слева и 30 сверху. Теперь рассмотрим следующий очень важный момент — позиционирование элементов списка.

ul.oe_menu > li{
	width:112px;
	height:101px;
	padding-bottom:2px;
	float:left;
	position:relative;
}

Элементы списка будут позиционироваться относительно, что даёт нам возможность иметь элементы меню, позиционирование которых будет задаваться в абсолютных координатах.

Заголовок главного меню мы превращаем из простого текста в контейнер с текстом. Он будет иметь следующий стиль:

ul.oe_menu > li > a{
	display:block;
	background-color:#101010;
	color:#aaa;
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
	width:90px;
	height:80px;
	padding:10px;
	margin:1px;
	text-shadow:0px 0px 1px #000;
	opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
	background:#fff;
	color:#101010;
	opacity:1.0;
}

В нашем JavaScript коде мы добавим класс «hovered» на элементы главного меню, благодаря чему, при наведении курсора мыши на элемент, фон элемента будет сменяться на белый:

.oe_wrapper ul.hovered > li > a{
	background:#fff;
	text-shadow:0px 0px 1px #FFF;
}

Сделаем под-меню невидимыми, так как они показываются только при наведении курсора мыши на тот или иной элемент главного меню:

ul.oe_menu div{
	position:absolute;
	top:103px;
	left:1px;
	background:#fff;
	width:498px;
	height:180px;
	padding:30px;
	display:none;
}

Затем зададим стиль для ссылок внутри списков под-меню.

ul.oe_menu div ul li a{
	text-decoration:none;
	color:#222;
	padding:2px 2px 2px 4px;
	margin:2px;
	display:block;
	font-size:12px;
}
ul.oe_menu div ul li a:hover{
	background:#000;
	color:#fff;
}

Так как мы будем показывать одновременно только одну подменю, то сделаем так, чтобы оно занимало всё пространство по длине главного меню.

ul.oe_menu div ul.oe_full{
	width:100%;
}

Если же внутри под-меню у нас не один список, то мы задаём им ширину в 150 пикселей, что позволяет нам разместить до трёх списков в один ряд.

ul.oe_menu li ul{
	list-style:none;
	float:left;
	width: 150px;
	margin-right:10px;
}

И наконец, выделим заголовок под меню особым стилем:

li.oe_heading{
	color:#aaa;
	font-size:16px;
	margin-bottom:10px;
	padding-bottom:6px;
	border-bottom:1px solid #ddd;
}

Работу со стилями мы закончили. Теперь перейдём к созданию эффектов с помощью javascript фреймворка jQuery.

Javascript

Основная идея заключается в том, чтобы затемнить всю страницу, за исключением меню. Слой наложения всегда будет поверх страницы, но под меню, потому, что в html-коде он идёт после всего, но раньше меню. К тому же, здесь нам помогает свойство z-index задающее положение элементов по оси z (направленна к нам, относительно плоскости монитора).

Начнём с того, что зарезервируем некоторые элементы.

var $oe_menu		= $('#oe_menu');
var $oe_menu_items	= $oe_menu.children('li');
var $oe_overlay		= $('#oe_overlay');

Когда мы наводим курсор мыши на один из элементов главного меню, то к соответствующему элементу присваиваются классы «selected» и «slided». В этот момент один соответствующий слой под-меню выезжает, а остальные остаются невидимыми, для этого мы даём очень большое значение свойству z-index данного слоя. Когда мы убираем курсор мыши с элемента главного меню, то класс «selected» снимается с данного элемента.

$oe_menu_items.bind('mouseenter',function(){
	var $this = $(this);
	$this.addClass('slided selected');
	$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
		$oe_menu_items.not('.slided').children('div').hide();
		$this.removeClass('slided');
	});
}).bind('mouseleave',function(){
	var $this = $(this);
	$this.removeClass('selected').children('div').css('z-index','1');
});

Класс «selected» необходим для оформления, а вспомогательный, в данном случае, класс «slided» лишь для идентификации элемента, находящегося в данный момент времени в раскрытом состоянии.

После наведения курсора мыши на меню, мы устанавливаем прозрачность слоя наложения равной 60% и добавляем класс «hovered» на контейнер для меню, что устанавливает на всё меню в целом белый фон.

$oe_menu.bind('mouseenter',function(){
	var $this = $(this);
	$oe_overlay.stop(true,true).fadeTo(200, 0.6);
	$this.addClass('hovered');
}).bind('mouseleave',function(){
	var $this = $(this);
	$this.removeClass('hovered');
	$oe_overlay.stop(true,true).fadeTo(200, 0);
	$oe_menu_items.children('div').hide();
})

Вот и всё! Наше меню готово! Надеюсь, что данный урок был интересен и полезен для вас.

Демонстрация работы | Скачать.

Данная статья является моим переводом с обработкой статьи с сайта tympanus.net.
______________________
Если вы любите посидеть вконтакте, то наверняка вы уже слышали фразы в свою сторону типа: «Опять ни черта не делал — весь день вконтакте онлайн!». Тогда вам в помощь статусы про обман — специальный скрипт для Opera 9, позволяющий сидеть вконтакте offline.

HTML и CSS

Трюки с текстовым полем

Трюки с текстовым полем Эх, текстовые поля. Сколько всяких причуд есть у вас. Представляю вам подборку из девяти «трюков», которые могут вам пригодиться.

1. Фоновое изображения для текстового поля, которое исчезает при вводе текста.

Вы можете добавить фоновую картинку к вашему текстовому полю или любой другой элемент. Например, на изображении ниже, фоновая картинка просит пользователей быть добрыми. ;-) Фоновое изображение в текстовом поле Если вы добавите фоновую картинку, то это может «уничтожить» стандартный стиль браузера для текстового поля. По умолчанию стандартная однопиксельная рамка, вокруг текстового поля, будет заменена на толстую границу. Для того, чтобы вернуть стандартный стиль браузера, вы можете просто задать стиль границы в css.

/* css code */
textarea {
  background: url(images/benice.png) center center no-repeat; /* Данный код разрушит стандартную рамку */
  border: 1px solid #888;
}

В этом примере фоновое изображение будет влиять на читаемость текста, если текст зайдёт на надпись на рисунке, то у пользователя возникнут проблемы с его чтением. ;-) Поэтому, мы используем следующий код, основанный на фреймворке jQuery, для того, чтобы убирать фоновое изображение при клике на текстовое поле и возвращать его только тогда, когда текстовое поле абсолютно пустое.

/* jQuery code */
$('textarea')
  .focus(function() { $(this).css("background", "none") })
  .blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });

2. Замещающий текст (HTML5)

Замещающий текст в HTML5
Placeholder — это новый атрибут в html 5, который показывает серый текст, заданный данным атрибутом, (он также работает для текстовых полей с атрибутом text-style), но этот эффект исчезает когда поле начинают редактировать или принимает какое-либо значение.

<!-- HTML code -->
<textarea placeholder="Remember, be nice!" cols="30" rows="5"></textarea>

Однако, у этого способа есть пока один временный минус — он работает только в следующих браузерах: Safari 5, Mobile Safari, Chrome 6, и Firefox 4 alpha.

3. Замещающий текст (HTML5 и jQuery)

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

// JavaScript code
function elementSupportsAttribute(element, attribute) {
  var test = document.createElement(element);
  if (attribute in test) {
    return true;
  } else {
    return false;
  }
};

Затем мы можем написать код так, что если браузер поддерживает атрибут placeholder, то мы будем использовать данный атрибут, а если браузер его не поддерживает, то воспользуемся jQuery скриптом.

// JavaScript code
if (!elementSupportsAttribute('textarea', 'placeholder')) {
  // Если браузер не поддерживает атрибут placeholder, то используем jQuery
  $("#example-three")
    .data("originalText", $("#example-three").text())
    .css("color", "#999")
    .focus(function() {
        var $el = $(this);
        if (this.value == $el.data("originalText")) {
          this.value = "";
        }
    })
    .blur(function() {
      if (this.value == "") {
          this.value = $(this).data("originalText");
      }
    });
} else {
  // Браузер поддерживает атрибут placeholder, поэтому используем его
  $("#example-three")
    .attr("placeholder", $("#example-three").text())
    .text("");
}

4. Удаление голубой рамки

Удаление голубой рамки
Все браузеры использующие WebKit, Firefox 3.6 и Opera 10 добавляют голубую рамку вокруг текстового поля на время его редактирования. Мы можем убрать её из всех WebKit браузеров используя следующий код:

/* CSS code */
textarea {
  outline: none;
}

Вы можете применить этот стиль к :focus, т.к. это работает в любом случае. Я ещё не нашёл способа, чтобы удалить рамку либо из Firefox, либо из Opera, но css атрибут -moz-outline-style был последним, который я проверил.

Напоминание: Голубая рамка выглядит более жирно, в отличии от стандартной, и, если нарушить этот стандарт, то это вызовет неудобства у ваших пользователей. Если вы всё же нарушите это правило, то у вас должна быть веская причина на это и стиль для :focus должен быть не менее жирным, в отличии от стандартного.

5. Удаление маркера изменения размера текстового поля

Удаление маркера изменения размера текстового поля
Браузеры использующие WebKit добавляю небольшой элемент пользовательского интерфейса (UI) в правый нижний угол текстового поля, с помощью которого пользователи могут изменять размер поля методом «нажал и перетащил». Если у вас есть веская причина, чтобы лишить пользователей этой возможности, то используйте следующий css стиль:

/* CSS code */
textarea {
  resize: none;
}

6. Добавление маркера изменения размера текстового поля

Добавление маркера изменения размера текстового поля
jQuery UI имеет функцию для изменения размера, которая может быть применена и к текстовым полям. Этот метод работает во всех браузерах, замещая данную функцию в WebKit браузерах.

Для использования этого метода, вам необходимо подключить jQuery, jQuery UI и добавить следующий простейший код:

// JavaScript code
$("textarea").resizable();

7. Автоматическое изменение размера соответственно введённому тексту

Автоматическое изменение размера соответственно введённому тексту
Джеймс Падолси написал отличный jQuery скрипт для автоматического изменения размера текстовых полей. Скрипт настолько прост, насколько большой отрывок кода вам необходимо будет добавить: :mrgreen: изначально текстовое поле имеет обычный (заданный) размер, но при вводе текста оно начинает расширяться таким образом, чтобы весь введённый текст был виден вам без всяких полос прокрутки, однако ограничение на высоту всё же есть — при достижении максимальной высоты (по умолчанию 1000 пикселей, но можно задать свой размер) — появляется полоса прокрутки.

Этот скрипт имеет несколько различных опций, но чтобы начать его использовать вам достаточно подключить jQuery, файл скрипта, который вы можете скачать по ссылке выше, и выполнить следующий код:

 // JavaScript code
$('textarea').autoResize();

8. Отключение автоматичесокго переноса

Отключение автоматичесокго переноса
Чтобы текст не переносился автоматически, вы используйте #whatever { white-space: nowrap; }. Но почему-то это не работает с текстовыми полями. Если вы хотите, чтобы текст не переносился автоматически пока вы не нажмёте клавишу «Enter», то используйте html-атрибут wrap=»off».

 <!-- HTML code -->
<textarea wrap="off" cols="30" rows="5"></textarea>

9. Избавляемся от стандартных полос прокрутки в Internet Explorer

Избавляемся от стандартных полос прокрутки в Internet Explorer
IE puts a vertical scrollbar by default on all textareas. You can hid it with overflow: hidden, but then you don’t get any scrollbars at all when you expand. Thankfully auto overflow works to remove the scrollbar but still put them back when needed.
IE по умолчанию добавляет вертикальную полосу прокрутки на все текстовые поля. Вы можете убрать их добавив css-свойство overflow: hidden.

/* CSS code */
textarea {
  overflow: auto;
}

Примеры всех трюков вы можете посмотреть здесь.

Ссылка на оригинал статьи.

Как вам перевод? Это мой второй перевод, но с этим было труднее. Некоторые моменты сократил, некоторые описал подробнее. Все недочёты в переводе пишите в комментарии — постараюсь исправить и скорее набраться опыта в переводах.

Это интересно!

Где взять темы для Drupal?

Где взять темы для Drupal? Здравствуйте уважаемые блогеры и читатели. Обращаюсь к вам с вопросом. Где можно найти и бесплатно скачать красивые, стильные и функциональные темы для Drupal? Просидев пару часов в Интернет, мне так и не удалось найти чего-либо стоящего. Может быть я плохо искал или не там? Возможно. Поэтому спрашиваю у вас, ведь может кто-то из вас работал с этой CMS и сталкивался с подобной трудностью. Ведь есть же красивые дизайнерские темы для Вордпресс и абсолютно бесплатные, а почему нет таких для Друпал? Или есть? Поделитесь ссылочками пожалуйста.

Заранее всем огромное спасибо.

Новости

Первая работа верстальщика

Закончил верстку первой странички для портфолио. Потратил 12 часов т.к. были проблемы с графикой и кроссбраузерностью, но потом всё решил. Все проблемы связанные с отображением в браузере были из-за Internet Explorer с 6 по 8 (бета) версии. Больше всего проблем было с 6 версией, но на помощь пришли «хаки». Если в css перед свойством добавить символ «_» (например _width), то это свойство будет выполнено только Internet Explorer 6, а другие браузеры (в том числе IE 7 и более версии) пропустят данное свойство. Правда на такие «хаки» ругается валидатор, но он также ругается на тэг , которого не существует не в одном стандарте потому, что его придумал Яндекс. А данный тэг бывает очень полезен. Но это не главное. Главное то, что страница правильно отображается в браузере в соответствии с макетом. (далее…)

Новости

Первые шаги во фриланс

Вчера днём наконец-то стал собирать портфолио. Начинать собирать портфолио я хотел ещё до поездки в Москву. Я написал на нескольких форумах, что бесплатно сверстаю пару страниц для портфолио, но до сих пор мне не кто не ответил. «Неужели русский народ разлюбил халяву?» — подумал я. Оказалось, дело в самих форумах. Вчера написал на форуме searchengines.ru и через пару часов со мной связалось 2 человека. А сегодня ещё 2. В данный момент делаю первую работу. Уже в первый же день столкнулся с трудностями, но потом всё наладилось. О результатах первой верстки «для дяди», а не для себя обязательно отпишусь. (далее…)

Новости

Смена дизайна

Сверстал новый дизайн. Не веб 2.0, но для блога пойдёт. Обновил движок до последней версии и прикрутил парочку новых плагинов. Оцениваем тему, а также сообщаем обо всех глюках и проблемах обновлённого движка.