Мой первый сверстанный макет

[Toffler]

Всем здравствуйте!

Примерно 3-4 недели назад я начал осваивать верстку с нуля. Теоретические азы вроде бы освоил, пришло время практиковаться. Накачал бесплатных psd макетов из сети и верстаю их потихоньку. Но т.к. у меня нет человека с которым я мог бы проконсультироваться и который мог бы указать мне на ошибки, я решил создать эту тему.

Собственно вот и все, хотелось бы чтобы Вы оценили верстку данного макета и указали на мои ошибки, а также у меня есть пара вопросов, которые я не смог решить во время верстки.

Работа

Ссылка на макет

Вопросы:

1) Как залить фон прозрачным серым градиентом как в макете?

2) Как сделать разделение между текстом и формой как в макете средствами CSS?

Всем заранее спасибо за ответы и критику.

[Kray Storm]

А что дает такая конструкция? Какой смысл в добавлении <span> внутрь <a>?

<li>
<a href="#">
<span class="menu">Menu Item</span>
</a>
</li>

[Toffler]

А это чтобы тень добавить, к <li> text-shadow почему-то не добавлялась. Хотя сейчас подумал, наверное можно было text-shadow прописать в <a>

[cyklop77]

посмотрел бегло

здесь

	<form class="search" action="get">
		<input value="Search our site...">
	</form>

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

много лишнего в вопросах не пишите в будущем. отвечающие тратят время, деньги

для 3-4 недель слабый результат. растите

Edited December 29, 2012 by cyklop77

[alekseyk24]

Не знаю правильно ли написал, сам еще в процессии обучения,)

По вопросам:

1)footer {

background: linear-gradient(center top , rgba(111, 111, 111, 0.9) 0%, rgba(111, 111, 111, 0.9) 51%, rgba(46, 46, 46, 0.9) 55%, rgba(46, 46, 46, 0.9) 100%) repeat scroll 0 0 transparent;

}

2)В тег article вставляем пустой див с классом например scroll, в css для article добавить position: relative;

для

.scroll{

background: linear-gradient(center top , rgba(92, 101, 116, 0) 0%, #808996 49%, rgba(129, 138, 151, 0.99) 50%, rgba(119, 129, 145, 0.71) 99%, rgba(119, 129, 145, 0.7) 100%) repeat scroll 0 0 transparent;

height: 100%;

position: absolute;

right: 0;

width: 2px;

}

для кроссбраузерности можно добавить:

background: -moz-linear-gradient(top, rgba(92,101,116,0) 0%, rgba(128,137,150,1) 49%, rgba(129,138,151,0.99) 50%, rgba(119,129,145,0.71) 99%, rgba(119,129,145,0.7) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(92,101,116,0)), color-stop(49%,rgba(128,137,150,1)), color-stop(50%,rgba(129,138,151,0.99)), color-stop(99%,rgba(119,129,145,0.71)), color-stop(100%,rgba(119,129,145,0.7)));

background: -webkit-linear-gradient(top, rgba(92,101,116,0) 0%,rgba(128,137,150,1) 49%,rgba(129,138,151,0.99) 50%,rgba(119,129,145,0.71) 99%,rgba(119,129,145,0.7) 100%);

background: -o-linear-gradient(top, rgba(92,101,116,0) 0%,rgba(128,137,150,1) 49%,rgba(129,138,151,0.99) 50%,rgba(119,129,145,0.71) 99%,rgba(119,129,145,0.7) 100%);

background: -ms-linear-gradient(top, rgba(92,101,116,0) 0%,rgba(128,137,150,1) 49%,rgba(129,138,151,0.99) 50%,rgba(119,129,145,0.71) 99%,rgba(119,129,145,0.7) 100%);

background: linear-gradient(to bottom, rgba(92,101,116,0) 0%,rgba(128,137,150,1) 49%,rgba(129,138,151,0.99) 50%,rgba(119,129,145,0.71) 99%,rgba(119,129,145,0.7) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005c6574', endColorstr='#b3778191',GradientType=0 );

[pincher2012]

1) Как залить фон прозрачным серым градиентом как в макете?

Вы понимаете что означает запись rgba(r,g,b,a). И какое значение имеет каждая цифра?

[Toffler]

1) Как залить фон прозрачным серым градиентом как в макете?

Вы понимаете что означает запись rgba(r,g,b,a). И какое значение имеет каждая цифра?

Да, но вопрос в том как сделать это поверх фонового изображения.

[Vin]

для 3-4 недель слабый результат. растите

Я в свои первые 4 нед. и не думал приступать к вёрстке с PSD-макета, тем более довольно сложного, а в основном учил стандарты