Проблема с тенью и градиентом

[grifin85]

Добрый день, форумчаны!

Столкнулся с несколькими проблемами с версткой и прошу Вашего совета как пофиксить

1 Это кросбраузерность теней в разных браузерах. Для генерации тени для блока использовал вот этот сервис css3generator.com

Проблема в том что в разных браузерах разная интенсивность тени. Это нормально?

Код тени таковой

    -webkit-box-shadow: 0 3px 10px -4px #555555;
    -moz-box-shadow: 0 3px 10px -4px #555555;
    box-shadow: 0 3px 10px -4px #555555;

Это нормально? Само лучше показывается FireFox

2. Это кросбраузерность градиенты

А точнее у меня глюк отображения градиента в 2 браузерах опера и експлоер

У меня не отображается не градиент и не картинка

Вот так выглядит подвал блока в Фоксе и Хроме и Сафари

А вот так выглядит в Опере и Експлоере

HTML данного блока

		<section class="content">
			<img src="/images/news/@Model.NewsImage" class="news-img" alt="@Model.Title" />
			<header class="short-content">
				<a href="/News/@Model.TitleTranslit">
					<h1>@Model.Title</h1>
				</a>
			</header>
			<time class="calendar">@Model.DatePublished.ToLongDateStringOrDayTitle()
			</time>
			<aside class="reting">
				@Html.Reting(Model.Rating)
			</aside>
			<article class="short-content">
				@Html.DisplayTextFor(m => m.Description)
			</article>
			<footer class="short-content">
				<div class="hr">
					<span class="first"></span><span class="second"></span><span class="third"></span>
				</div>
				<div class="author">
					Опубликовал: @Model.AuthorPublish</div>
				<div class="view">
					Просмотров: @Model.Views</div>
				<div class="commentbar">
					Комментариев: @Model.Comments</div>
			</footer>
		</section>

CSS

.hr span
{
    border: medium none;
    display: block;
    height: 80px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -80px;
    z-index: -100;
}
.hr .first
{
    background: url(img/background-ft.png) no-repeat 0 0;
    background: -webkit-radial-gradient(bottom right,circle,rgba(0, 0, 0, .08),transparent 80px,transparent 100%);
    background: -moz-radial-gradient(bottom right,circle,rgba(0, 0, 0, .08),transparent 80px,transparent 100%);
    background: -o-linear-gradient(bottom right,circle,rgba(0, 0, 0, .08),transparent 80px,transparent 100%);
    left: 0;
    width: 80px;
}
.hr .second
{
    background: url(img/background-ft.png) no-repeat 114px 0;
    background: -webkit-radial-gradient(bottom left,circle,rgba(0, 0, 0, .08),transparent 80px,transparent 100%);
    background: -moz-radial-gradient(bottom left,circle,rgba(0, 0, 0, .08),transparent 80px,transparent 100%);
    background: -o-linear-gradient(bottom left,circle,rgba(0, 0, 0, .08),transparent 80px,transparent 100%);
    right: 0;
    width: 80px;
}
.hr .third
{
    background: url(img/background-ft-bg.png);
    background: -moz-linear-gradient(bottom,rgba(0, 0, 0, .12),rgba(0, 0, 0, .08) 1px,rgba(0, 0, 0, .08) 1px,transparent 80px,transparent 100%);
    background: -webkit-linear-gradient(bottom,rgba(0, 0, 0, .12),rgba(0, 0, 0, .08) 1px,rgba(0, 0, 0, .08) 1px,transparent 80px,transparent 100%);
    background: -o-linear-gradient(bottom,rgba(0, 0, 0, .12),rgba(0, 0, 0, .08) 1px,rgba(0, 0, 0, .08) 1px,transparent 80px,transparent 100%);
    margin-left: 80px;
    margin-right: 80px;
    position: relative;
    top: -80px;
}

background-ft.png

Заранее спасибо за помощь!

[SilentImp]

То что вы не получаете пиксельперфекта при отоборажении тени это нормально. Нужен пиксельперфект — используйте картинку.

Градиенты перегенерируйте например этим http://www.colorzilla.com/gradient-editor/

[grifin85]

То что вы не получаете пиксельперфекта при отоборажении тени это нормально. Нужен пиксельперфект — используйте картинку.

Градиенты перегенерируйте например этим http://www.colorzilla.com/gradient-editor/

Это не решение. Потом как я понял это проблемы не как с градиэнтом, а с отображением спрайта

[sasha^]

у всех проблемы с градиентами в ослике)))

поставьте картинки место него и размножьте по екс или игрик...

[grifin85]

у всех проблемы с градиентами в ослике)))

поставьте картинки место него и размножьте по екс или игрик...

Вы наверное не заместили что я использую также спрайты?