Свойство Background используют для определения фоновых эффектов элемета.

CSS-свойства для определения фоновых эффектов элемента:

1. background-color задаёт цвет фона
2. background-image задаёт фоновое изображение
3. background-repeat задаёт повторения для фонового изображения
4. background-attachment задаёт фиксацию фонового изображения
5. background-position задаёт позицию фонового изображения

Читать полностью »

Давайте создадим прекрасную временную шкалу, похожую на такую же шкалу Google, которую создали к юбилею (10 лет). ( http://www.google.com/tenthbirthday/).

Временная шкала воспользуется  PHP, MySQL, CSS и jQuery,

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

Прибавка нового события, простая вставка новой строчки в таблицу для информации. 

Действие первое.  - XHTML.

Создадим структуру XHTML. (Файл demo.php)

<div id="timelineLimiter"> <!-- Скрывает выступающие div timelineScroll -->
<div id="timelineScroll"> <!-- Содержит временную шкалу и расширяет ее для заполненияы -->
<!-- PHP код, который генерирует список событий -->   
<div class="clear"></div> 
</div> 
<div id="scroll"> <!-- Год временной шкалы -->
<div id="centered"> <!-- Размер устанавливается jQuery для запооленеия всех лет -->
<div id="highlight"></div> <!-- Светлоголубая полоска позади надписей с годами -->
<?=$scrollPoints?> <!-- Данная переменная PHP сожержит года, которые имеют события -->
<div class="clear"></div> 
</div> 
</div> 
<div id="slider"> <!-- Контейнер слайдера -->
<div id="bar"> <!-- Полоска, которую можно перетаскивать мышкой -->
<div id="barLeft"></div>  <!-- Левая стрелка на полоске -->
<div id="barRight"></div>  <!-- Правая стрелка на полоске, обе стилизованы с помощью CSS -->
</div> 
</div> 
</div>

Читать полностью »

При помощи  Yahoo API и jQuery возможно поменять вид сайта в зависимости от того, какая температура воздуха на улице! В данном уроке вы узнаете, как это сделать.

Начните с того что создайте четыре фона для погоды (солнечная, дождливая, облачная, снежная ). Потом, при помощи скрипта jQuery  

«закинем» прогноз погоды. И в заключении, изготовим управление темой (ручное), с помощь которого пользователь сам выберет что захочет.

Создание темы.

Создадим четыре изображения в крупном масштабе. Шаблон для всех рисунков один и тот же. Но, каждый подогнанный под определённую  погоду.

Получаем сведения о погоде

$(document).ready(function() {
$.YQL = function(query,
callback) {
var encodedQuery =
encodeURIComponent(query.toLowerCase()), 
url =
'http://query.yahooapis.com/v1/public/yql?q=' + 
encodedQuery  
+
'&format=json&callback=?';
$.getJSON(url, callback);
};
$.YQL("select * from rss
where url='http://weather.yahooapis.com/forecastrss?p=UKXX0133'",function(data){
var w =
data.query.results.item;
var class =
w.condition.text;
var encodedclass =
class.replace(/\s+/g, '-').toLowerCase();
$('body').addClass(encodedclass);
});
});

Читать полностью »

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

Для начала создадим простой каркас для нашего меню: он будет состоять из списка, и создадим в файле menu.html:Читать полностью »

Допустим у нас есть форма:

<form method="post" action="script.php">
Имя<br />
<input type="text" name="login"/><br /><br />
Email<br />
<input type="text" name="email"/><br /><br />
Пароль<br />
<input type="password" name="pass"/><br /><br />
<input type="submit" name="submit" value="подписаться"/>
</form>

Пока у нас форма не красивая, как хотелось бы.

Для начала создадим файл style.css, и подключим его в файле с формой, который пусть называется form.html:Читать полностью »