ЯС библиотека curvycorners для создание закругленных уголков

Иногда, что бы обойти большое количество геморроя при верстке страницы c закругленными уголками помогает замечательная яваскрипт библиотека под названием curvycorners(оф.сайт)

Что она умеет: ДЕМО / ДЕМО 2 / ДЕМО 3

Изменение размера уменьшеного изображения при помощи Overflow

Иногда при создании галерей или просто красивого оформления странички необходимо пренебречь размерами изображения и вписать в дизайн.

Изменение размера уменьшеного изображения при помощи Overflow

Этот способ позволяет сделать это с минимальными затратами.

СМОТРЕТЬ ДЕМО

Карта Украины для сайта

Карта Украины для сайта

Стянул по быстрому откуда-то карту, может кому-то пригодится.
Карта Демо / скачать

update 30/09/11
Нашелся разработчик данной карты – kiphir
Вот ее оригинал http://rozumdim.com.ua/new/content/blogsection/7/47/lang,russian/

Спасибо ему за карту -)

upd: еще одна хорошая карта украины

Текстовый ролловер(rollover)

Очень просто реализовать текстовый ролловер(rollover):

<a href="#">Не активная<span>Активная</span></a>

a { 
    display:block;
    width:100px;
    background:#F2F2F2;
    border:1px solid #DDDDDD;
    font-size:14px;
    line-height:26px;
    color:#000000;
    text-decoration:none;
    text-align:center;
}
a:hover {
    text-indent:-999em;
    position:relative;
}
a span{
    display:none;
}
a:hover span{
    text-indent:0;
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
}

Вот и все. Демо Текстовый ролловер

Автор сайта другим цветом в комментариях DLE

Захотелось мне выделять свои комментарии от других.
Например вот как здесь: https://dev.xfor.top/273-100-multiyazych…ne.html#comment
Похожее что-то находил когда-то в нете.
Как сделал это я:
/engine/classes/comments.class.php перед

if( $row['is_register'] and $row['icq'] ) $tpl->set( '{icq}', stripslashes( $row['icq'] ) );

вставить

if( $row['is_register'] ) $tpl->set( '{color}', 'qwerty1' );
else $tpl->set( '{color}', 'qwerty2' );

И не забыть вставить в comments.tpl – {color}
То есть все кто зарегистрированы на сайте будут подсвечиваться классом qwerty1, все остальные qwerty2, а так как регистрация запрещена здесь, то подсвечивается только мои. Задача выполнена.

Пропорциональное масштабируемое видео и валидный 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>

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

ДЕМО: https://dev.xfor.top/uploads/files/demo/003/index.html

css map и jquery notes

Более продвинутая реализация Image Map. Суть работы та же как и в предыдущем примере. Описывать метод не буду, проще посмотреть демку https://dev.xfor.top/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: https://dev.xfor.top/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 — для чтения и записи.

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

  1. 1
  2. ...
  3. 20
  4. 21
  5. 22
  6. 23
  7. 24
  8. 25
  9. 26
  10. 27
Scroll Up