Разделы
Veselov CV | vvShop © 2008 – 2017
Контакты
email: igor@veselov.sumy.ua
skype: utz0r2

Пропорциональное масштабируемое видео и валидный 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
<div id="containingBlock">
  <div class="videoWrapper">
    <div>
      <!--[if IE]>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="295">
        <param name="movie" value="http://www.youtube.com/v/mDRYnaajUcY&amp;hl=en&amp;fs=1&amp;showinfo=0" />
      <![endif]-->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/mDRYnaajUcY&amp;hl=en&amp;fs=1&amp;showinfo=0" width="480" height="295">
      <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <p><a href="http://www.adobe.com/go/getflashplayer"><img alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"/></a></p>
      </object>
    </div>
    <p>Following is the description of the video embeded in this document</p>
    <p>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.</p>
  </div>
  ...
</div>

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

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

css map и jquery notes


Более продвинутая реализация Image Map. Суть работы та же как и в предыдущем примере. Описывать метод не буду, проще посмотреть демку http://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:
<dl id="officeMap">
<dt id="monitor">1. Monitor</dt>
<dd id="monitorDef"><a href="#"><span>Here's my 17" Monitor.  I wish I had an LCD!</span></a></dd>
<dt id="phone">2. Phone</dt>
<dd id="phoneDef"><a href="#"><span>Does this thing ever stop ringing?</span></a></dd>
<dt id="case">3. PC Case</dt>
<dd id="caseDef"><a href="#"><span>This is my crazy Linux box! Gotta love that Linux...</span></a></dd>
<dt id="notebook">4. IBM ThinkPad</dt>
<dd id="notebookDef"><a href="#"><span>Here's my Linux notebook.  Some crazy coding going on.</span></a></dd>
<dt id="floppy">5. External Floppy Drive</dt>
<dd id="floppyDef"><a href="#"><span>Floppy Drive.  Ancient... I know!</span></a></dd>
</dl>


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

Желание верить -(


Люди испытывают сильнейшее желание во что-нибудь верить. Желания часто порождают парадокс: чем больше вы за чем-нибудь гоняетесь, тем труднее оно дается в руки, ускользая; чем больше интереса вы выказываете к объекту желаний, тем сильнее он отталкивает от себя.

Задумайтесь, как бы вы себя начали вести, если бы узнали, что осталось жить 1 месяц…

Знания, интеллект, мудрость


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

Ощущение, что кто-то другой умнее нас, почти непереносимо.

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

Куда безопаснее смешаться со всеми и быть как все.

Безоглядная открытость


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

Безоглядная открытость ведет к тому, что вы становитесь таким предсказуемым, таким понятным, что вас почти невозможно уважать или бояться…

Пс: сейчас у меня длинные волосы и меня многие знакомые не узнают -)
«»
Вверх