Незначительная проблема CSS - PullRequest
Новая
       7

Незначительная проблема CSS

2 голосов
/ 10 февраля 2011

Я новичок в мире проектирования / программирования, поэтому я уверен, что проблему легко решить.Я пытаюсь добавить эффект moz-box-shadow в мой заголовок.Но как только я добавляю этот компонент, заголовок, занимающий пространство по горизонтали, укорачивается.Я хочу, чтобы заголовок был похож на твиттер, где они используют эффект тени. 

#header {
    background-color: #990000;
    width:101.3%;
    margin-left:-8px;
    margin-top:-8px;
    height:40px;
    -moz-box-shadow: 1px 1px 10px #D7D7D7;
}

Кроме того, способ, которым я установил ширину, может вызвать кросс-браузерные проблемы?

Ответы [ 3 ]

4 голосов
/ 10 февраля 2011

Вот версия, аналогичная той, что есть у Twitter :
Это версия Twitter, более или менее:

Демонстрация в реальном времени ( edit )

HTML: 

<div id="top-fixed">
    <div id="top-bar"></div>
</div>

CSS: 

html, body {
    margin: 0; padding: 0
}
body {
    padding-top: 50px;
    background: #c0deed
}
#top-fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
}
#top-bar {
    height: 40px;
    width: 100%;

    background-color:#00a0d1;
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#00a0d1),to(#008db8));
    background-image:-moz-linear-gradient(#00a0d1,#008db8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8');
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8')";

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
2 голосов
/ 10 февраля 2011

Уловка, которую использует Твиттер, заключается в том, чтобы поместить в абсолютно позиционированный бокс и дать этому блоку ширину 100% и тень.Используя overflow-x: hidden на своем родителе, вы получите эффект, который вы ищете.

1 голос
/ 10 февраля 2011

Я делал тени с .png. Я не вижу никакой пользы от этого (особенно если предположить, что браузеры начали поддерживать .png до поддержки теней от ящиков , см., Например, утверждение Мозилы о том, что FF начал поддерживать тени от ящиков в FF3,5 ,) конечно, если это лучше, чем делать тени через .png, не стесняйтесь оставлять комментарии, доказывающие, что я ошибаюсь!

...