HTML/CSS: jak zrobić efekt winiety? 4 obrazy? CSS3 Gradient?

Question

Poszukuję dobrego rozwiązania, aby utworzyć stronę internetową o nazwie vignette effect. Rogi powinny być ciemniejsze niż kolor tła strony, jak gradient radialny.

Dotychczas Próbowałem różnych podejść:

• 4 DIV ustawione na position: absolute, górny/dolny: 0px, lewo/prawo. 0px z jednego obrazu w każdym z nich (zdjęcia blokować linki zły pomysł w ogóle?)
• To samo co powyżej, ale ze stałą wysokością/szerokością dla elementów div i obraz tła zamiast obrazu (nadal blokujące łącza ?!)
• CSS3 wiele środowisk. Dwa na korpusie dla lewego i prawego boku i dodatkowy div na dole z wysokością: 300; margines-górny: -300px, aby zawsze wyświetlał się na dole (złe wsparcie przeglądarki)
• CSS3 gradient radialny na ciele (jako . podczas przewijania tracisz tło dodatkowy div mogli naprawić to również złe wsparcie przeglądarkę ponownie)

O wsparciu przeglądarki. rozwiązanie moszczu praca w najnowszej wersji Firefox, chrome, IE, a jeśli możliwa opera i safari (uporządkowane według ważności). To absolutne minimum. Ale powinno to również działać w starszych przeglądarkach. Firefox 3.6 i IE 8 lub nawet 7 jeśli to możliwe. Nie wiem zbyt wiele o historii wersji chromowanych, ale wygląda na to, że użytkownicy Chrome są prawie na czasie, więc nie ma większego problemu z obniżeniem wsparcia dla Chrome 15 i niższych ?! Czy są jakieś znaczące zmiany, które sprawią, że coś będzie działać w chrome 17, ale nie na przykład 15?

Gradient radialny CSS3 jest moim zdaniem najlepiej wyglądającym rozwiązaniem, ale obawiam się, że wielu użytkowników nie będzie go obsługiwać, ze względu na ich stare przeglądarki. I z rozwiązaniem 4 DIV mam problemy z linkami, których nie można kliknąć, ze względu na blokowanie obrazu. Próbowałem ingerować w indeks Z, ale to nie działa. Podałem DIVs z-index: 1 i #container (gdzie cała zawartość jest umieszczona) z-index 10. Nie powinno to działać? Czy indeks z wpływa na linki?

Co sądzicie, byłoby dobrym rozwiązaniem? Oczywiście potrzebuję pomocy. Dzięki!

Answer 1

Użyłem wcześniej tej techniki wyjaśnionej w this blog i działa to naprawdę dobrze. Nie wiem jednak o obsłudze starszych przeglądarek.

Answer 2

w zależności od tego, co chcesz, coś takiego może zadziałać;

<style> 

height: 100%; 
width: 100%; 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNjUiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 

background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */ 

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(63%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */ 

background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */ 

background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */ 

background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* IE10+ */ 

background: radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* W3C */ 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000',GradientType=1); /* IE6-8 fallback on horizontal gradient */ 


} 
</style> 

Działa w mojej przeglądarce, powinien działać we wszystkich przeglądarkach. To nieporządne, jasne, ale pozwala ci ustawić to na HTML, możesz mieć ciało, na przykład, z wybranym kolorem lub obrazem.

Zobacz to w akcji hereee. http://jsfiddle.net/joshuamartin/taN2Z/4/

http://www.colorzilla.com/gradient-editor/

Answer 3

można użyć wewnętrznej box-shadow

box-shadow: inset 0 0 100px #000; 

Demo: http://jsfiddle.net/ACPUP/

Ale to nie działa w IE7/8.Starsze wersje przeglądarki Firefox, Chrome, Safari lub Opera mogą wymagać prefiksu: -webkit-box-shadow, -moz-box-shadow lub -o-box-shadow.

Możesz także rozmieścić te cienie, aby uzyskać bardziej dramatyczny efekt, ale nie wiem, czy obsługują to starsze wersje przeglądarek.

box-shadow: inset 0 0 120px #000, inset 0 0 80px #000, inset 0 0 40px #000; 

Answer 4

Używanie CSS!

niewielkie zmiany na odpowiedź Willem, tak jak zalecane przez JohnK którzy kapelusz przechylił Chris Coyier:

box-shadow: inset 0 0 85px rgba(0, 0, 0, 0.4); 

JSFiddle: http://jsfiddle.net/charlesgoodwin/wKQ2y/

To działa bardzo dobrze!