Красивые переходы в шапке сайта

12 Дек
2011

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

image



Итак, в чем же суть?



Возьмем пример — мы делаем сайт-визитку. В верхний угол кидаем логотип, справа хотим показать пару-тройку картинок на красивом фоне. Но вот проблема — либо логотип не соответствует цветовой гамме, которую мы выбрали, либо картинки, данные нам заказчиком не подходят туда. Определенно надо взять различные цвета. Но оформлять все в виде ячеек таблицы с border-ом как-то неохота, а выполнить надо. Тут и возникают идея — почему бы не использовать в качестве перехода какую-нибудь картинку? Для меня, в частности, подошла идея сделать переход в Эйфелевой башни (делал сайт на строительную тему.) Имеется в виду, что с одной стороны один цвет, с другой стороны идет уже 2 цвет. Гениально и просто.

Зачем это нужно? Что еще можно сделать?



Во-первых, это смотрится красиво (ну у каждого свои вкусы, лично мне понравилось, когда сделал). Во-вторых, неплохо бы сделать сайт немного необычным — этот же переход может чуть-чуть вылезать за шапку. Думаю кое-где это может показаться красивым. Делается это путем создания 2 строк, в 1 строке идут логотип, вверх картинки-перехода и еще какая нибудь хрень то, что мы хотим сделать справа.

<html>
<head>
<title> Пример
</title>
</head>
<body>
 
<table width="100%" cellspacing="0" cellpadding="0" border="0" >
 

<tr height="высота шапки">

<td width="ширина1ячейки"> <a href="index.html"> <img src="Шапка1.jpg"height="высота картинки" border="0"> </a> </td>
 
<td width="ширина картинки-перехода" > <div align="left"> <img src="картинка-переход-вверх.jpg" width="155" height="300" border="0"> </div> </td>

 <td bgcolor="#цвет 2" valign="top"> картинки, которые нам дали  </td>
 </tr>
 
<tr valign="top">*
 <td width="400">  


Тут идет меню, адаптированное под сайт  </td>
 <td > <img src="Картинка-переход-низ.jpg" width="длина" height="высота" border="0"> </td>
<td> Тут можно записать небольшое приветствие)</td>


 </table>
 </body>
</html>



*Чтобы картинка-переход-низ подошла вплотную к картинка-переход-вверх.

Получаем симпатичный такой переход.

А какие переходы можете предложить вы? И необходимо ли это?
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх