Пропорциональное масштабируемое видео и валидный youtube #

Пропорциональное масштабируемое реализовано за счет позиционирования блоков и процентных соотношений. Применимо на резиновых сайтах.
CSS
#containingBlock {
  width:50%;
}
.videoWrapper {
  position: relative;
  padding-bottom:56.25%;
  padding-top:25px;
  height:0;
  overflow:hidden;
}
.videoWrapper div,
.videoWrapper object {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
}

Код видео с ютуба по умолчанию не валидный, здесь же он добавлен в соответствии стандартам

HTML

  

    

      
      
      
      
        
        
        

Get Adobe Flash player


      

    

    

Following is the description of the video embeded in this document


    

This short clip is about YouTube widescreen formatting. It shows the two main formats (16:9, 4:3) and also explains the best way to create a Flash movie according to the new widescreen format.


  

  ...

Очень мне нравится девочка с видео демки -)

ДЕМО: https://veselov.sumy.ua/uploads/files/demo/003/index.html

css map и jquery notes #

Более продвинутая реализация Image Map. Суть работы та же как и в предыдущем примере. Описывать метод не буду, проще посмотреть демку https://veselov.sumy.ua/uploads/files/demo/002/index.html

css map и jquery notes

Но самая классная как по мне реализация это jquery notes. Красиво юзабельно, но яваскрипт тяжел.
demo: http://jquery-notes.rydygel.de/samples.php

Image Maps c помощью спрайта #

Это один из простейших способов построения карты.

Заключается в смене позиционирования бекграунда при наведении на определенную зону картинки.
Недостаток большая картинка и неюзабильно.

Image Maps c помощью спрайта


CSS:
dd#monitorDef{ top: 65px; left: 114px; }
dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }
dd#monitorDef a span{ display: none; }
dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }

dd#monitorDef a:hover span{
display: block;
text-indent: 0;
vertical-align: top;
color: #000;
background-color: #F4F4F4;
font-weight: bold;
position: absolute;
border: 1px solid #BCBCBC;
bottom: 100%;
margin: 0;
padding: 5px;
width: 250%;
}


HTML:


DEMO: https://veselov.sumy.ua/uploads/files/demo/001/index.html

Псевдоклассы #

Как вы думаете, сколько, помимо этих четырех, существует псевдоклассов? :first-child, last-child? Кто еще? Все? А на самом деле всего их 33.

Название и назначение псевдоклассов

:link — отвечает за стили непосещенной ссылки;
:hover — состояние объекта (не обязательно ссылки) при наведении на него мышкой;
:active — состояние активного объекта (например, для ссылки и зажатие ее мышкой);
:visited — состояние посещенной ссылки;
:focus — когда вы используете какой-то объект на страницы, то на нем устанавливается фокус (в случае и текстовым поле это постановка курсора в это поле);
:first-child — первый дочерний элемент текущего элемента;
:last-child — соответственно, последний дочерний элемент чего-то;
:only-child — применяет стиль к элементу, если он единственный дочерний элемент;
:nth-child() — какой-то по счету с начала дочерний элемент, например p:nth-child(4);
:nth-last-child() — аналогично, только отчет с конца; интересно, что в этом и предыдущем селекторах можно задавать не только конкретные цифры, но и счетность, к примеру вот так: ul li:nth-last-child(2n+1);
:lang() — если у элемента указан язык (с помощью атрибута lang, например lang="en"), то этот элемент можно выбрать так;
:root — дает указание применить стиль к корневому элементу (в html документе это тег );
:not() — дает ограничение на применение стилей по селектору (то есть селектор .red-block:not(div) применит указанный стиль ко всем элементам с классом .red-block, только есть этот элемент не div );
:empty — выбирает пустые элементы;
:first-of-type — применяет стиль к первому элементу этого типа, то есть если у вас есть два дива, стиль будет работать только для первого из них;
:last-of-type — аналогично предыдущему, только для последнего элемента;
:only-of-type — применяет стили к элементы, если он имеет уникальный тип внутри своего родителя;
:nth-of-type() — выбирает указанный по счету с начала элемент текущего типа;
:nth-last-of-type() — тоже самое, но отсчет с конца;
:target — например, если у вас адрес имеет вид index.html#anchor, то этот псевдо класс задаст правило для элемента с id="anchor";
:enabled — выбирает активные инпуты;
:disabled — а этот неактивные;
:checked — отмеченные чекбоксы и выбранные радиобаттоны;
:indeterminate — для радиобаттонов и чекбоксов опеределяет состояние, когда они «никакие», то есть ни выбраны, ни не выбраны (ужас как написал ;-)
:default — элемент по-умолчанию, например кнопка отправки формы;
:valid — стиль для правильного инпута (когда указана data type в HTML 5);
:invalid — когда, соответственно, инпут невалиден;
:in-range — когда значение инпута находиться в заданных границах (type="range", задан min и max, но это все только в HTML 5);
:out-of-range — когда не попадает в границы;
:required — все обязательные поля;
:optional — все необязательные;
:read-only — те элементы, которые доступны только для чтения;
:read-write — для чтения и записи.


Многие браузеры, многие псевдоклассы не поддерживают -( взято с временно.нет

Динамические колонки #

Существует два типа колонок, используемых на веб-сайтах: фиксированной ширины и тянущиеся в ширину в зависимости от размера экрана (их еще называют “резиновыми”).

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

“Резиновые” же колонки не оставляют избыточных пустого пространства и прекрасно вписываются в родительский блок. Однако их недостаток заключается в том, что в строку мы можем поместить только фиксированное число столбцов:
Динамические колонки

Решение

Суть решения заключается в том, чтобы взять преимущества обоих ситуаций и объединить их в одно. Что мы должны получить в итоге:
Блок должен вмещать столько фиксированных колонок, сколько позволяет размер экрана.
Если в блоке образовалось лишнее свободное пространство, равномерно распределить его на каждую из колонок, чтобы заполнилось все свободное пространство в блоке.
При растяжении колонок ориентироваться на их базовую ширину и растягивать их до той поры, пока потенциальное свободное пространство не вместит очередную колонку.
Динамические колонки

Посмотреть пример

hover и IE6 #

Многие верстальщики сталкивались с необходимостью использования :hover в своих шаблонах. Практически всегда данный псевдокласс используется для ссылок (тег a), для которых :hover работает всегда и везде, но бывают ситуации, когда встает задача сделать подсветку для других элементов, например для div или td, и вот здесь появляется «подводный камень», известный нам как IE6. С данным браузером всегда было достаточно много проблем, но все они само собой имеют пути решения. В данном топике я приведу 3 способа реализации :hover для IE6

1) hover.htc



Как пользоваться скриптом
Для начала его необходимо подключить к файлу стилей, например, так (если нужно предусмотреть возможность его применения к любому html-элементу):
* {behavior:url("hover.htc")}

Либо, вот так (если хотим его применить только к конкретному элементу):
li {behavior:url("hover.htc")}

А непосредственно реализация ховер-эффекта делается следующим образом. Например, если это меню с выпадающим списком:
li:hover ul, /* для современных браузеров */
li.hover ul { /* для Internet Explorer 6 */
  display: block
}

Обратите внимание, что класс .hover — это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.

2) SuckerFish hover
sfHover = function() {
   var sfEls = document.getElementById("Id родительского элемента").getElementsByTagName("Имя тега для :hover");
   for (var i=0; i

Как пользоваться скриптом
Сначала нам нужно подключить его в шаблон либо просто вставив в его целиком

или же создать, допустим, файл hover.js и подключить его так

Так как данный скрипт не нужен никому, кроме тех посетителей, которые используют IE6 сделаем его подключение через условный комментарий

В css шаблона
li:hover ul, /* для современных браузеров */
li.sfhover ul { /* для Internet Explorer 6 */
  display: block
}

Обратите внимание, что класс .sfhover — это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.

3) Ну и само собой использование jQuery
Сначала нам нужно скачать саму библиотеку jQuery, затем подключить ее в шаблон
Подключение библиотеки через условный комментарий аналогичен сути предыдушего метода

После этого добавить инициализацию
$('#Тут id элемента с указанием тега, требующего :hover (например, #block div)  ').hover(function() {
  $(this).addClass('hover');
}, function() {
  $(this).removeClass('hover');
});

В итоге получается

В css шаблона
#block:hover div, /* для современных браузеров */
#block.hover div { /* для Internet Explorer 6 */
  display: block
}

Подводя итоги о работе данных способов можно сказать, что использование способа 3) не рационально без использования jquery на сайте вообще, так как подгружать ~55кб библиотеки jquery ради реализации работы :hover в IE6 не имеет смысла, когда есть два других значительно сжатых способа.
Способ 1) Самый минимальный в плане кода, а способ номер 2) имеет наивысшую совместимость со старыми версиями IE Начиная от 5.0, так же он валиден в плане css, так не требует использования behavior