Бесплатная регистрация сайта в поисковиках Yandex, Google, Rambler - Зарегистрировать сайт в поисковых системах

Бесплатная регистрация сайта в поисковиках Yandex, Google, Rambler - Зарегистрировать сайт в поисковых системах

Cross browser text shadow \ Кросс браузерная тень для текста

    -moz-text-shadow: 1px 1px 1px #000;
  -webkit-text-shadow: 1px 1px 1px #000;
 text-shadow: 1px 1px 1px #000;
  /* For IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000')";
 /* For IE 5.5 - 7 */
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000');

Корзина заказов с использованием jQuery и PHP

http://cart.99points.info/


Решение для  корзины в интернет-магазине.

Выравнивание горизонтального меню (или пейджера) по центру страницы

Многим новичкам кажется очень сложным выровнять горизонтальное меню (пейджер) по центру веб-страницы. Из-за этого появилось много вариантов центрирования с помощью хаков и с использованием яваскрипт-программирования.

Cufon в двух словах

Cufon конвертируют свой нестандартный шрифт в свой внутренний формат, и потом отображают сконвертированный шрифт с помощью canvas в современных браузерах и VML в Internet Explorer’е. Большой плюс такого подхода в том, что не нужен плагин для отображения flash. По сравнению с sIFR cufon обладает большей скоростью и работает абсолютно на всех компьютерах.

Полезные сервисы для web-разработчика и не только. Страница в закладки

По мере того, как человек «обживается» в Интернете, у него появляются любимые сервисы, которые могут помочь с выполнением какой-либо задачи. Это очень приятно, и приносит ему много радости. Но вот беда! Помним-то мы далеко не все интересные штуки, которые повстречались нам на просторах «интернетов». Конечно же, самые распространенные или часто используемые мы будем помнить долго и при необходимости использовать, а как же быть с теми, которые употребляются реже, но так же нам приносят много пользы и экономят время.
Для того, чтобы рационально использовать свое время, и во многом перестать использовать дедовские методы, я вам рекомендую добавлять в закладки полезные ресурсы и периодически их просматривать. Если же по какой-то причине вы все же потеряли то, что так долго собирали, или еще не делали таких коллекций вовсе, можете начать с этого немаленького списка, который очень облегчает жизнь мне.
Внимание! Список будет пополняться. Все ссылки откроются в новом окне.

96 ресурсов, которые облегчат жизнь web-разработчику

У web-дизайнеров успех в большой степени зависит от эффективности рабочего процесса, в прочем, так же, как и у других специалистов. К счастью, существует целый ряд отличных ресурсов, которые сделают вашу жизнь легче, а вашу работу — более быстрой и эффективной. Сегодня предлагаем вашему вниманию 96 полезных ресурсов для web-дизайнера. Конечно же, мы не можем охватить все лучшее в Интернете, но мы попытались охватить как можно больше.

CSS3

CSS3 для украшения страниц

Рельефный текст
Обратите внимание, как сайт Analog использует тень в один пиксель на тексте, чтобы придать ему рельефный вид. Изображение в зеленом круге взято из браузера, поддерживающего text-shadow , а изображение в красном круге взято из браузера, не поддерживающего этот параметр.

Flash-8(Preloader)"прелоадер", Preloader-показатель загрузки объекта

Как это работает?

Список полезных инструментов для CSS разработчика

Это не попытка создать список всех существующих инструментов для CSS разработки. Только некоторые, наиболее полезные были отобраны и размещены в соответствующих категориях.

CKEditor

Новая ветка от FCKEditor'a CKEditor. Новый web-редактор с более легким и красивым интерфейсом. 
http://ckeditor.com/

Спецсимволы

Таблица спецсимволов HTML

Как правильно создать html письмо

Статья является переводом “How to Code HTML Email Newsletters”, написанной Тимом Слэйвином (Tim Slavin) для сайта sitepoint.com.

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

Code-only rounded HTML boxes

Идем, читаем, качаем, делаем

ie6 PNG backgrounds - отображение png фонов IE6

Известен следующий баг «народного» браузера — картинки в формате .png, содержащие участки с альфа-прозрачностью отображаются неправильно. А именно — область этих участков заливается серым цветом .

Оформляем таблицу средствами css

Таблица тянется по ширине в зависимости от наполнения.



html:

<table class="table"><tr><td>content</td></tr></table>

css:

.table{
border:none;
margin:0;
padding:0;
width:auto;
}
.table td{
border:1px solid #cccccc;
border-collapse:collapse;
padding:4px;
vertical-align:top;
}

Скрипт - вертикально раскрывающееся меню

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



Содержимое файла script.js:

var id_menu = new Array('sub_menu_1','sub_menu_2');
function allclose() {
for (i=0; i < id_menu.length; i++){
document.getElementById(id_menu[i]).style.display = "none";
}
}
function openMenu(id){
for (i=0; i < id_menu.length; i++){
if (id != id_menu[i]){
document.getElementById(id_menu[i]).style.display = "none";
}
}
if (document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
}

В head вашего html линкуем созданный файл скрипта:

<script language="JavaScript" type="text/javascript" src="scripts/script.js"></script> 

В body закрываем все открымые элементы подменю

<body onload="allclose()">  

А вот и само меню:

<ul class="leftmenu">
<li><a href="#" onClick="openMenu('sub_menu_1');return(false)">Законодательство</a>
<ul id="sub_menu_1" >
<li><a href="#">Законодательство</a></li>

<li><a href="#">Структуры и ведомства</a></li>
<li><a href="#">Статьи о недвижимости</a></li>
<li><a href="#">Документы для строительства</a></li>

<li><a href="#">Экологическая карта</a></li>
</ul>
</li>
<li><a href="#" onClick="openMenu('sub_menu_2');return(false)" >Структуры и ведомства</a>
<ul id="sub_menu_2" >

<li><a href="#">Законодательство</a></li>
<li><a href="#">Структуры и ведомства</a></li>
<li><a href="#">Статьи о недвижимости</a></li>

<li><a href="#">Документы для строительства</a></li>
<li><a href="#">Экологическая карта</a></li>
</ul>
</li>
</ul>

Предварительная загрузка изображений средствами css (Preload Images with CSS)

Этот метод позволяет избежать использования javascript для предварительной загрузки изображений.

Метод достаточно прост и эффективен и состоит из двух частей css и html код.



CSS:

#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}

HTML:

<div id="preloadedImages"></div> 

Как это работает?

Браузер загружает preloadedImages css как фоновые изображения не отображая их, но помещает их в кэш браузера, что позволяет в последствии быстро обращаться в предварительно загруженным изображениям.

Шпаргалки

Cascading Style Sheet (CSS) hacks phespirit.info styles are defined in a single CSS document: www.phespirit.info/stylesheet/phespirit.css phespirit.css hacks have been tested for consistency and accessibility using the following browsers: Netscape 4.78 (NN4) on Windows 98 and Windows XP Professional Netscape 6.21 (NN6) on Windows 98 Netscape 7.00 (NN7) on Windows 98 Mozilla Firefox 1.5.0.9 (FF1) on Windows XP Professional Microsoft Internet Explorer 5.50 (IE5) on Windows 98 Microsoft Internet Explorer 6.00 (IE6) on Windows 2000 and Windows XP Professional Opera 6.04 (OP6) on Windows 98 and Windows XP Professional Opera 7.54 (OP7) on Windows XP Professional Opera 8.02 (OP8) on Windows XP Professional CSS Hack 1 : hiding CSS from NN4 Example code - to hide a horizontal rule width setting of 100% from NN4: /*/*/a{} hr { width : 100%; } /* */ By preceding single or multiple style(s) with /*/*/a{} and terminating the style(s) with /* */ all content in between will be invisible to NN4. Hacks for other browsers can be used inside this hack. CSS Hack 2 : hiding CSS from IE4/5 Example code - to set a paragraph font-size of x-small for IE4/5 and a font-size small for IE6: p { font-size : x-small; voice-family : "\"}\""; voice-family : inherit; font-size : small; } Microsoft Internet Explorer versions 4 and 5 cannot detect styles after voice-family : "\"}\""; due to a bug in their implementation of voice-family. This example initially sets the font-size to a keyword value of x-small for all browsers, then terminates the style settings for IE4/5, recovers the voice-family style for IE6 (along with other browsers which do not have this bug) and finally resets the font-size to small. CSS Hack 3 : hiding CSS from IE4/5/6 Example code - to hide a horizontal rule width setting of 100% from IE4/5/6: html>body hr { width : 100%; } Microsoft Internet Explorer versions, up to and including version 6, are unable to recognise style rules which include a child selector (two or more selectors separated by a ">" symbol) in the definition. This example checks for horizontal rule elements which are the descendant of a body element which in turn is the child of the html element. CSS Hack 4 : hiding CSS from OP6 Example code - to hide a horizontal rule width setting of 100% from OP6: head:first-child+body hr { width : 100%; } Opera is unable to recognise style rules which include the :first-child pseudo-element in the definition. This example checks for horizontal rule elements which are the descendant of a body element which in turn is the first child (i.e. immediately follows) a head element. CSS Hack 5 : hiding CSS from IE4/5/6 and OP6 Example code - to hide a horizontal rule width setting of 100% from IE4/5/6 and OP6: html>head:first-child+body hr { width : 100%; } By combining hack 3 and hack 4, CSS can be hidden both from versions of Microsoft Internet Explorer up to and including version 6, and from versions of Opera up to and including version 6. CSS Font-Size Hack : setting equivalent font-size keywords for NN4/6/7, FF1, IE4/5/6 and OP6/7 Example code - to set a paragraph font size equivalent to HTML size=2 in all browsers: EXAMPLE 1: this example assumes either that no DTD be applied or that the DTD applied is: p { font-size : small; } /*/*/a{} body p { font-size : x-small; } html>head:first-child+body p { font-size : small; } /* */ The paragraph font-size is set four times in this example. It is initially set as small for NN4, after which all subsequent code is hidden within hack 1. It is then reset to x-small for IE4/5/6 and OP6, using the more-specific body p descendant selector method. It is then reset to small again, this time for NN6/7, FF1 and OP7, using hack 5, which contains even more specific methods. EXAMPLE 2: in which the DTD applied is that used by phespirit.info: p { font-size : small; } /*/*/a{} body p { font-size : x-small; voice-family : "\"}\""; voice-family : inherit; font-size : small; } html>body p { font-size : x-small; } html>head:first-child+body p { font-size : small; } /* */ The paragraph font-size is set three times in this example. It is initially set as small for NN4, after which all subsequent code is hidden within hack 1. It is then reset to x-small for IE4/5 and back to small for IE6, using the more-specific body p descendant selector method. It is then set to x-small once more for OP6, and finally back to small for NN6/7, FF1 and OP7, using hack 5, which contains even more specific methods. Example table - equivalences for CSS keyword font-size in various Microsoft Windows browsers: Browser HTML size 1 HTML size 2 HTML size 4 Netscape 4.78 see note (i) below x-small; small; medium; bold; Netscape 6.20 x-small; small; large; Netscape 7.00 x-small; small; large; Mozilla Firefox 1.00 x-small; small; large; Microsoft Internet Explorer 5.50 xx-small; x-small; medium; Microsoft Internet Explorer 6.00 (case 1) xx-small; x-small; medium; Microsoft Internet Explorer 6.00 (case 2) x-small; small; large; Opera 6.04 xx-small; x-small; medium; Opera 7.54 x-small; small; large; Notes: There is no exact keyword equivalent to HTML size 4 for Netscape 4.78; phespirit.css uses keyword medium together with font-weight bold in preference to keyword large with font-weight normal. Microsoft Internet Explorer 6.00 (case 1) assumes either that no DTD has been applied or, as in the case of phespirit.css, that the DTD used is: Microsoft Internet Explorer 6.00 (case 2) assumes that any other DTD has been applied.

Real Dotted-line <hr> / Точечный <hr>

hr {color: #fff; background-color: #fff; border: 1px dotted #ff0000; border-style: none none dotted; }

Очень просто сделать, но сложно найти как ))