CSS làm mờ hiệu ứng ngang/hiệu ứng đường kẻ ngang mà không có hình ảnh

Tôi là một fan hâm mộ lớn sử dụng tối thiểu hình ảnh và tự hỏi liệu có ai có chiến thuật (hoặc nếu có thể) để tạo ra loại điều này với CSS tĩnh thuần túy ?CSS làm mờ hiệu ứng ngang/hiệu ứng đường kẻ ngang mà không có hình ảnh

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

tôi đề cập ảnh hưởng của một dòng dường như nhận được gầy hơn và mờ dần ra và hiệu ứng đổ bóng bên dưới nó.

Tôi đã suy nghĩ nó có thể là có thể làm một thủ thuật hình dạng CSS với nó như hình tam giác:

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

Hoặc có lẽ với luân chuyển trên hộp bóng sử dụng 'biến':

zenelements .com/blog/css3-transform/

Mọi ý tưởng?

Nguồn

2012-02-24 ja_him

Bạn có thể sử dụng điểm dừng CSS3 và giả nguyên tố :after để đạt được một hiệu ứng như vậy. Bí quyết là thêm đường viền vào phần tử <hr> bằng cách sử dụng phần tử giả :after và định vị nó ở giữa gradient ban đầu với màu mềm kết thúc bằng gradient.

Đây là một cách nhanh chóng demo và một demo sử dụng một số màu khác.

Nguồn

2012-02-25 13:05:27

hmm rất phong cách, cảm ơn câu trả lời đó! Tôi sẽ phải chơi đùa với nó. –

Để tái tạo quy tắc ngang đó, bạn có thể sử dụng gradient tuyến tính CSS3. Chỉ cần tạo một div với khoảng một chiều cao 3px và áp dụng các CSS sau (thay đổi màu sắc khi cần thiết):

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 */

Hãy ghi nhớ rằng filter không hỗ trợ dừng màu, vì vậy bạn có thể muốn một hình ảnh rơi trở lại cho < IE10.

Xây dựng Gradient CSS3 của riêng bạn ở đây: http://www.colorzilla.com/gradient-editor/

Nguồn

2012-02-24 20:22:11

hmm, cảm ơn bạn đã chắc chắn gây ra câu trả lời nhưng bạn đã không hoàn toàn có tôi đang tìm kiếm những khía cạnh dần dần mỏng hơn cũng như (sẽ sửa đổi bài ban đầu của tôi). Nhưng bạn chỉ cho tôi cách, cổ vũ. (và xin lỗi tôi thậm chí không thể bỏ phiếu cho bạn lên cho nó! Không phải 'nuf rep!) –

Tôi rất vui vì bạn đã có thể tìm thấy câu trả lời của bạn! –

Ok vì vậy tôi đã trả lời câu hỏi của riêng tôi nhưng tôi đã đọc các diễn đàn Stackoverflow và nó có vẻ là chấp nhận được (nếu không thực sự khuyến khích!)

Vì vậy, ...

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 */ 
}

Nguồn

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>

Nguồn

2013-08-23 18:43:26

CSS làm mờ hiệu ứng ngang/hiệu ứng đường kẻ ngang mà không có hình ảnh

Trả lời

Các vấn đề liên quan