HTML и CSS

Знакомство с HTML5, первые ощущения

Логотип HTML5 Так сложилось, что ли, что ажиотаж, создаваемый различными новшествами, меня абсолютно не задевает, ну или совсем поверхностно. Вышел первый телефон на андроиде, я почитал о нём, подумал, отметил в блокнотике с надписью «желания» что надо бы такой когда нибудь приобрести, отложил его и забыл на пару лет.

Аналогичное поведение у меня было относительно выхода HTML5. Наверное, в моём подсознании, сам не подозревая об этом, у меня всплывает ассоциация — всё новое, ещё очень сырое и не стабильное, поэтому я пробую что-либо лишь через некоторый значительный промежуток времени.
(далее…)

HTML и CSS

Расположение непрозрачного элемента внутри прозрачного (css)

Расположение непрозрачного элемента внутри прозрачного (css) Здравствуйте. Где-то месяц назад я опубликовал статью о том, как реализовать прозрачность cредствами css, где я пообещал в следующем посте рассказать как решить проблему прозрачности, когда все дочерние элементы унаследуют прозрачность от родителя и ничего нельзя с этим сделать. Для решения данной проблемы есть два способа.
(далее…)

HTML и CSS

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

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

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

(далее…)

HTML и CSS

Прозрачность средствами css (для начинающих)

Прозрачность средствами css (для начинающих)

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

Чтобы сделать полупрозрачный элемент на фоне, например, какого-либо рисунка, можно использовать PNG-прозрачность, но данный способ не подходит для Интернет, поскольку изображения PNG-24 почти не сжимаются и имеют достаточно большой вес, а не все пользователи Рунета живут в центральной части и имеют высокоскоростной доступ в сеть. Как же быть в таком случае, чтобы угодить всем? Можно сделать взять фоновый рисунок, а затем наложить на него слой в графическом редакторе, слой сделать полупрозрачным, а затем сохранить полученное изображение в формате JPEG с приемлемой степенью сжатия. Этот метод подойдёт для небольшого блока фиксированных размеров, а если у нас большой блок с контентом, который ещё и динамически изменяется, то данный метод опять отпадает из-за большого веса изображений (при условии хорошо качества) и не возможности растягивать их. В таком случае у нас один выход, как и при использовании не прозрачного фона для блоков с динамически изменяющимися параметрами – полупрозрачность через использование каскадных таблиц стилей (CSS).

С помощью CSS прозрачность делает очень просто, достаточно к стилю элемента добавить всего 3 строки.

filter:alpha(opacity=100);  /* Здесь непрозрачность указывается в процентах (указывается только числовое значение). */
-moz-opacity:1;  /* Здесь в сотых долях от единицы. 1 = 100% не прозрачный блок. 0.5 (обязательно через точку – ни каких запятых) = 50% не прозрачности т.е. полу прозрачный. */
opacity: 1; /* Аналогично предыдущей строки */

Если честно, то достаточно только третей строки, но, к сожалению, не все браузеры поддерживают стандарты, поэтому для старых браузеров мы добавляем первые две строки. Первая для Internet Explorer, а вторая для старых версий Moziila, третья поддерживается всеми современными браузерами. Как видите, всё очень просто, но здесь есть одна хитрость – прозрачность передаётся «по наследству» от родительского контейнера, ко всем контейнерам внутри него (назовём их, дочерними).

«Унаследование» прозрачности вы можете наблюдать на картинке в начале статьи. К тому же, «унаследованную» прозрачность нельзя убрать, даже если установить для отдельного элемента 100% непрозрачность. Чтобы обмануть браузер, в прямом смысле, и сделать не прозрачный элемент внутри прозрачного, придётся создать 2 блока, один сделать полупрозрачным, а другой оставить «как есть», а затем с помощью CSS «заставить» браузер отобразить один поверх другого. Этот способ не слишком удобный, но есть ещё один – о нём я расскажу в следующем посте.

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

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

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 вам придётся использовать свадебные платья и прочие украшения, например ювелирные.

HTML и CSS

Как создать эффект свечения с CSS3

Как создать эффект свечения с CSS3 Это очень простой способ добавления эффекта свечения на контент с помощью такого свойства ccs3, как «бросить тень». Данный способ займёт у вас очень малое количество времени из-за мизерного количества кода, а следовательно и практически не увеличивает вес страницы и не увеличивает время загрузки. Для него не нужны ни какие графические файлы, всё работает на «голом» css.
(далее…)

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;
}

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

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

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

HTML и CSS

Памятка №1

Эх блин. Что-то не как не могу запомнить и из-за этого меня всегда терзают сомнения, когда я сталкиваюсь с данной ситуацией. Каждый раз, когда необходимо сделать какой-либо текст заголовком и ссылкой одновременно — я на несколько секунд впадаю в ступор — «Как же правильно — так или так?». Затем, я открываю любой сверстанный макет и смотрю как правильно. Чтобы подобное действие в будущем отнимало ещё меньше времени, то я решил создать заметку в своём блоге.

Если необходимо окружить тэгами текст, располагающийся внутри тэгов <h1>…<h6>, то он окружается внутри тэгов <h1>…<h6>.

Пример: <h1><a href=»www.zhitenev.ru»>Блог Ильи Житенёва</a></h1>

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