проблема со шрифтом и тенью

[Denni]

Здравствуйте!

При верстке учебного макета Влада http://htmlbook.ru/samlayout/verstka-na-html5/maket-saita столкнулся с двумя проблемами:

1. шрифт jacob_ctt.ttf ну ни как не хочет отображаться на страничке. Хотя в систему (виндовс) ставится нормально. Если вместо него подсунуть в css дпугой шрифт - все работает. Подключаю фонт так:

@font-face {  font-family: JacobCTT;  src: url(../mock_up/jakob_ctt.ttf);}

 

2. как не пытался не смог "подсунуть" .informer:after под .informer или "перекрыть" .informer:after .informer`ом.

для создания тени.

 

Подскажите, как решить эти 2 проблемы?

 

Сама верстка находится тут: http://snake3.16mb.com/Lion/page.html

Edited December 3, 2014 by Denni

[Denni]

1. В попытке разобраться сделал минимальную инсталяцию http://jsfiddle.net/dennila2/4bkL5qv4/

Подскажите, как засунуть тень между 2-мя закрашенными слоями?

 

2. Подключил другой фонт. Все отображается нормально. Предварительный вывод: что-то не так со шрифтом JacobCTT. Жду коментариев сообщества =)

[npofopr]

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

2. плохо понимаю про какую вы тень. У вас там z-index: -1; стоит, потому она и прячется под зеленый блок.

 

Вы, я так понимаю, еще и веб-инспектором/ фаербагом не пользуетесь? Стоило бы начать. Там удобно все эти :after и тени разглядывать и искать. Может ошибаюсь.

[paralex]

может быть хотелось вот такого эффекта http://jsfiddle.net/4bkL5qv4/1/ с тенью

[Denni]

может быть хотелось вот такого эффекта http://jsfiddle.net/4bkL5qv4/1/ с тенью

если включаю опаковость 0,99 у слоя .content - тень начинает проступать(синяя стрелочка), но побочный эффект - трава начинает перекрывать слой .content. (красная стрелочка)

У меня развивается когнитивный диссонанс. Я думал что с помощью z-index могу свобожно тасовать слои и не думал, что изменяя опаковость в одном слое как-бы поднимаю его над не связанным с ним.

 

 

 

Вы, я так понимаю, еще и веб-инспектором/ фаербагом не пользуетесь? Стоило бы начать. Там удобно все эти :after и тени разглядывать и искать. Может ошибаюсь.

Пользуюсь =\ Как только я не тасовал элементы. Прямоугольник, который потом будет отбрасывать тень или прячется под самый нижний слой или лажится на самый верх. А просунуть его между родителем и подлежащим слоем мне не удалось.

[Denni]

1. Попробовал преобразовать фонт Jacob на http://www.fontsquirrel.com/tools/webfont-generator : "The font 'jakob_ctt.ttf' is corrupt and cannot be converted."

 

2. Со слоями разобрался. Помогло: http://htmlbook.ru/css/z-index и http://habrahabr.ru/post/166435/