Here's a picture of exactly what I'm trying to produce.Czy możesz utworzyć tę linię gradientu w cieniu za pomocą CSS3?
udało mi się styl do <hr /> użyciu SVG jako obraz tła, aby stworzyć ten efekt, ale chciałby, aby móc produkować to samo za pomocą CSS3 mam ale były kłopoty.
Zastanawiam się, czy ktokolwiek z guru CSS może wiedzieć, w jaki sposób osiągnąć to samo lub czy nie jest to możliwe z czystym CSS?
Dzięki za pomoc.
ja stworzyć efekt, który chcesz sprawdzić to proszę:
próbowałem stworzyć efekt z trzech warstw, dwie tła z alfa kryciem. Jedna rozpoczynająca się od góry i zatrzymująca się na środku, druga zaczynająca się od środka na końcach u dołu i jedna tło z plasterkiem powtórzonym w osi y.
śledzę ten URL dla samouczka warstwy: http://css-tricks.com/css3-gradients/
kod HTML, działa tylko w Chrome, substytut/nadpisać właściwość "-webkit gradientem" dla konkretnego Broser:
<html>
<head>
<style>
.gradient {
width:76px;
height:200px;
border:0;
background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(rgba(192,192,192,1)), to(rgba(192,192,192,0))),
-webkit-gradient(linear, 0% 50%, 0% 100%, from(rgba(192,192,192,0)), to(rgba(192,192,192,1))),
url(http://i41.tinypic.com/omwky.gif);
background-repeat:repeat-y,repeat-y, repeat-y;
}
</style>
</head>
<body>
<hr class="gradient"/>
</body>
</html>
Wielką praca, dziękuję! –
Jedyny problem jaki widzę z tym, to że nie skaluje się. Gdybyś miał zwiększyć wysokość .bor, czy mógłbyś uzyskać cień, który by pasował bez twardego kodowania wysokości cienia za każdym razem? –
Właściwie ustawienie góry i dołu do około ~ (-55px); zamiast ustawiania wysokości na '.sha: after' prawie to robi :) –