CSS, yatay kural/çizgi dışı div efekti, resimsiz olarak soluyor

Görüntülerin minimal kullanımının büyük bir hayranıyım ve herkesin bir taktik (veya eğer mümkün ise) saf statik CSS ile bu tür bir şey yaratıp yaratmadığını merak ettim ?CSS, yatay kural/çizgi dışı div efekti, resimsiz olarak soluyor

http://www.flickr.com/photos/jahimandahalf/6780397612/

Bir hattın etkisi görünüşte skinnier alma ve dışarı solma ve bunun altında gölge efekti kastediyorum.

Ben üçgenler gibi onunla CSS şekil hile yapmak mümkün olabileceğini düşünüyordum: belki

http://css-tricks.com/snippets/css/css-triangle/

Veya box-shadow üzerinde rotasyonla 'dönüşümü' kullanarak:

zenelements .com/blog/css3-dönüşümü/

Herhangi bir fikir?

kaynak

2012-02-24 ja_him

Sen CSS3 en durur kullanabilir ve :after sözde eleman böyle bir etki elde etmek. Hile <hr> öğeye :after sözde öğeyi kullanarak bir kenarlık eklemek ve ilk degradenin ortasına, degrade ile biten yumuşak bir renkle yerleştirmektir.

Bazı renkler kullanarak hızlı bir demo ve başka bir demo.

kaynak

2012-02-25 13:05:27

hmm çok şık, bu cevap için teşekkürler! Bununla bir oyun oynamalıyım. –

Yatay kuralı yeniden üretmek için CSS3 doğrusal gradyanını kullanabilirsiniz.

background: #ffffff; /* Old browsers */ 
background: -moz-linear-gradient(left, #ffffff 0%, #2989d8 25%, #207cca 75%, #ffffff 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(25%,#2989d8), color-stop(75%,#207cca), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, #ffffff 0%,#2989d8 25%,#207cca 75%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, #ffffff 0%,#2989d8 25%,#207cca 75%,#ffffff 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, #ffffff 0%,#2989d8 25%,#207cca 75%,#ffffff 100%); /* IE10+ */ 
background: linear-gradient(left, #ffffff 0%,#2989d8 25%,#207cca 75%,#ffffff 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1); /* IE6-9 */

bir görüntü < için geri düşmek isteyebilirsiniz, filter renk duraklarını desteklemiyor unutmayın: Yalnızca takip CSS (gerektiğinde renklerini değiştirmek) yaklaşık 3 piksellik yüksekliği ile bir div oluşturmak ve uygulamak IE10. (Aslında teşvik edilmez ise!) http://www.colorzilla.com/gradient-editor/

kaynak

2012-02-24 20:22:11

hmm –

Cevabınızı bulabileceğiniz için mutluyum! –

Tamam bu yüzden benim kendi soru cevap ettik ama Stackoverflow forumları okudum ve kabul edilebilir gibi görünüyor

burada kendi CSS3 gradyan kurmak Yani ...

HTML:

<html> 
<head> 
<TITLE>TEST</TITLE> 
<link rel="stylesheet" type="text/css" href="test.css" /> 
</head> 
<body> 

<div id="wrap"> 
<div id="gradient"> 
</div> 
</div> 

</body> 
</html>

CSS:

#wrap 
{ 
overflow:hidden; 
height:10px; 
width:600px; 
height:20px; 
margin:auto; 
margin-top:200px; 
} 


#gradient 
{ 
height:20px; 
width:580px; 
margin:auto; 
margin-top:-11px; 
background: -moz-radial-gradient(center, ellipse cover, rgba(10,10,10,1) 0%, rgba(8,8,8,1) 19%, rgba(3,3,3,0) 80%, rgba(1,1,1,0) 100%); /* FF3.6+ */ 
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(10,10,10,1)), color-stop(19%,rgba(8,8,8,1)), color-stop(80%,rgba(3,3,3,0)), color-stop(100%,rgba(1,1,1,0))); /* Chrome,Safari4+ */ 
background: -webkit-radial-gradient(center, ellipse cover, rgba(10,10,10,1) 0%,rgba(8,8,8,1) 19%,rgba(3,3,3,0) 80%,rgba(1,1,1,0) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-radial-gradient(center, ellipse cover, rgba(10,10,10,1) 0%,rgba(8,8,8,1) 19%,rgba(3,3,3,0) 80%,rgba(1,1,1,0) 100%); /* Opera 12+ */ 
background: -ms-radial-gradient(center, ellipse cover, rgba(10,10,10,1) 0%,rgba(8,8,8,1) 19%,rgba(3,3,3,0) 80%,rgba(1,1,1,0) 100%); /* IE10+ */ 
background: radial-gradient(center, ellipse cover, rgba(10,10,10,1) 0%,rgba(8,8,8,1) 19%,rgba(3,3,3,0) 80%,rgba(1,1,1,0) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a0a0a', endColorstr='#00010101',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
}

kaynak

2012-02-25 12:38:05

hr { 
 
    height: 1px; 
 
    margin: 50px 0; 
 
    background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0)), color-stop(0.5, #333333), to(rgba(0, 0, 0, 0))); 
 
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0)); 
 
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0)); 
 
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0)); 
 
    background: linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0)); 
 
    border: 0; 
 
} 
 
hr:after { 
 
    display: block; 
 
    content: ''; 
 
    height: 30px; 
 
    background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 116, color-stop(0%, #cccccc), color-stop(100%, rgba(255, 255, 255, 0))); 
 
    background-image: -webkit-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%); 
 
    background-image: -moz-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%); 
 
    background-image: -o-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%); 
 
    background-image: radial-gradient(farthest-side at center top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); 
 
}

<hr>

, teşekkürler kesinlikle cevabını yol açtı ettik ama ben (benim orijinal yayına değişiklik olacak) yanı gittikçe daha ince yönü arıyordu oldukça vardı. Ama sen bana yolu gösterdi, şerefe. (ve üzgünüm bile sana oy veremiyorum! Not 'nuf rep!)

kaynak

2013-08-23 18:43:26

CSS, yatay kural/çizgi dışı div efekti, resimsiz olarak soluyor

cevap

İlgili konular