Оценка верстки

[Orarifish]

Здравствуйте! Оцените, пожалуйста, верстку. 

 

Макет: http://savepic.net/5854344.htm

 

Верстка: 

 

 

Есть и некоторые вопросы:

1) Текст с градиентом.  В Chrome, Opera, Safari -- текст с градиентом отображается нормально, а вот в  Mozilla и в IE -- не отображается.

2) Стрелки -треугольники. Как можно стрелку (белым цветом) сделать прозрачной? 

3) Фон. Не получается наложить градиент на текстуру.

4) Слайдер пока не устанавливала, на него не обращайте внимание.

 

Спасибо.

Edited October 20, 2014 by Orarifish

[Ironimus]

1. background-clip:text; это чисто вебкитовское значение свойства, оно и не должно работать нигде кроме браузеров на этом движке. Лучше использовать картинку. 

2. Я так и не понял что вы имеете ввиду, но возможно вам поможет это и это.

3. В макете, вроде бы, и нет никакой текстуры.

 

А теперь о самой верстке:

1. Слишком маленький текст. 

2. Нет градиентов и тени присутствующих на макете. 

3. Зачем на счетчиках в футере картинки?

4. Зачем хеадеру давать класс header a футеру footer?

5. Вместо <div class="sidebar"> можно использовать тег <aside>.

[Veseloff]

В целом ок. Вот только я бы задал min-width для body, ибо в маленьком окне текст липнет к краям.

[afdw]

Добавьте префиксы.

.button {  box-shadow: 15px 15px 30px #ebc5c2;}.secondary {  height: 100px;}.main {  margin-top: -50px;}body {  background: linear-gradient(#e6ecea, white 200px);}

[Orarifish]

Спасибо за ответы.

Но вот, по поводу фона: если присмотреться, то можно увидеть, что фон не белый, а картинкой (текстура с шумом)...

Так вот, если к body добавить градиент, то фон исчезает...поэтому, я и спрашивала, как наложить градиент на текстуру? Чтобы был фон (который с шумом) и сверху градиент. 

Там, на макете видно, что сверху идет синеватый градиент плавно переходящий в прозрачный.

Edited June 25, 2014 by Orarifish

[Ironimus]

Если этот фон полупрозрачный, то можно поставить его поверх градиента, а в противном случае поможет лишь полупрозрачный градиент.

[afdw]

body {

background: url(../images/bg.png);

}

.wrap {

background: -webkit-linear-gradient(#e6ecea, transparent 333px);

}