Раздвижные ссылки как на GitHub. Style Sliding Links Like GitHub

Заметил на GitHub прикольный эффект раздвижных ссылок.По умолчанию ссылки имеют усеченный текст, а при наведении на ссылку, появляется полностью его содержимое. Для реализации этого эффекта можно использовать один лищь CSS. Итак позвольте мне показать вам как это делается. (далее…)

Генератор HTML+CSS шаблонов

Не могу упустить возможность, чтобы не упомянуть про замечательный генератор HTML+CSS шаблонов.

Очень сильно понравилось, а главное очень просто в использовании!

Проблема с отступами IE6

Скажу о том, что речь идет о проблеме плавающих блоков, когда им задается margin слева или справа, в IE фактическое значение этих отступов удваивается, так вот, для того, чтобы решить эту проблеме блоку нужно добавить свойство display: inline.

Добавления тегу IMG свойств ALT и TITLE из свойства SRC

Рад приветствовать, в этой статье я хотел бы с вами поделится одним полезным скриптом, который берет из свойства SRC изображения URL проводит с ним некоторые манипуляции? получает название картинки и записывает его в title и alt. Этот скрипт будет полезен людям(как и мне самому) которым ну очень уж не очень хочется писать эти важные свойства изображения.

Первым делом возьмем набор каких нибудь изображений для этого используем тег

<img src="">

или просто возьмите следующий код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Изменение атрибуда ALT у изображени PONTYK.com.ua</title>
<link rel="stylesheet" type="text/css" href="resets.css"/>
</head>
<body>
<img src="img/1.jpg" width="250" />
<img src="img/2.jpg" width="250" />
<img src="img/3.jpg" width="250" />
<img src="img/3.jpg" width="250" />
<img src="forum/img/5.jpg" width="250" />
<img src="img/sac/wdas/5.jpg" width="250" />
<img src="asdasdasd5.jpg" width="250" />
</body>
</html>

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

Для того чтобы вам было понятно что делает весь этот код, я его прокомментировал.

<script type="text/javascript">
    function changeAlt() {
		// получаем все объекты изображения на странице
	    var allImage = document.getElementsByTagName("IMG");

		// запускаем перебор этих элементом циклом
		for (i = 0; i < allImage.length; i ++) {
			// теперь в новую переменную получаем и записываем атрибут src, при этом разделяем его и переворачиваем встроенными функциями  JavaScript
			var attrSrc = allImage[i].getAttribute("src").split("/").reverse();

			// тут разделяем название изображения и разширения, и записываем в переменную
			attrSrc[0] = attrSrc[0].split(".");
			// теперь задаем все атрибуты
			allImage[i].setAttribute("title", attrSrc[0][0]);
			allImage[i].setAttribute("alt", attrSrc[0][0]);
        }
    }
    // запуск функции
    onload = changeAlt;
</script>
Если кому интересно справка по встроенным функциям JavaScript
Закругление углов через CSS

Здраствуйте. В этой статье разговор пойдет о «великом и могучем» CSS третьей версии. Как мы знаем то поддерживается он частично всеми браузерами, но совсем он не поддерживается Interne Explorer.

Эта статья предназначается менее опытным пользователем, или даже начинающим «покорителям» CSS. Итак можно приступить. Первым делом мы попробуем закруглить уголки у блока. Привожу листинг

#box {
  width: 300px;
 height: 150px;
 border: 1px solid #003c7b;
 background: #58a7f6;
 -webkit-border-radius: 10px; /* Отвечает за скругление уголков у Google Chrome и Apple Safari  */
 -moz-border-radius: 10px; /* Mozilla Firefox */
 }

Поддерживается Google Chrome, Mozilla Firefox, Apple Safari. Demo смотрим здесь

Эффект отбрасываемой тени:

#box {
            width: 300px;
            height: 150px;
            border: 1px solid #003c7b;
            background: #58a7f6;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            /*Эффекты*/
            -webkit-box-shadow: #999999 3px 3px 3px;
            -moz-box-shadow: #999999 3px 3px 3px;
            box-shadow: #999999 3px 3px 3px;
        }

Поддерживается Google Chrome, Mozilla Firefox, Apple Safari.

Эффект отбрасываемой тени текстом

#box {
            width: 300px;
            height: 150px;
            border: 1px solid #003c7b;
            background: #58a7f6;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-box-shadow: #999999 3px 3px 3px;
            -moz-box-shadow: #999999 3px 3px 3px;
            box-shadow: #999999 3px 3px 3px;
            /*Эффекты*/
            text-shadow: #fff 3px 3px 3px;
        }