Tạo hiệu ứng "inset" bằng cách sử dụng CSS trong các trang web

Tôi rất ấn tượng bởi "inset" như hiệu ứng trong nhiều trang web mới nhất. Một số ví dụ là alt text http://img687.imageshack.us/img687/457/inset2.png Tạo hiệu ứng "inset" bằng cách sử dụng CSS trong các trang web

và

alt text http://img163.imageshack.us/img163/8158/inset1.png

Dòng ở trung tâm. Ngày nay, nhiều trang web sử dụng các loại đường/hiệu ứng này.

Tôi đã cố gắng để đạt được cùng với biên giới nhưng sự kết hợp màu sắc không làm việc cho tôi và nó không phải là thích hợp.

Các trang web khác có sử dụng hình ảnh cho những trang này không? có dễ không?

Bất kỳ ví dụ nào về css?

trang web Ví dụ: http://woothemes.com, http://net.tutsplus.com/, http://www.w3schools.com (trong tiêu đề) và trong thanh bên trang admin wordpress

Nguồn

2010-06-15 Aakash Chakravarthy

Hãy cung cấp cho chúng tôi URL cho các ví dụ và chúng tôi có thể tìm thấy bạn ví dụ về CSS - đó là cách hoạt động của web :) – Skilldrick

Tôi lấy nó mà bạn đã thử 'kiểu đường viền: rãnh;' và thấy nó thiếu? –

Đây là một biến thể gọn gàng: dabblet.com/gist/1609945 –

Không biết nếu điều này sẽ giúp đỡ, nhưng sử dụng 1 biên giới px rằng đang có hơi nhẹ hơn và sẫm màu hơn so với nền của 2 yếu tố liền kề có thể mô phỏng điều này. Ví dụ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Untitled</title> 
<style type="text/css"> 
div{background:#555;} 
.top{border-bottom:#333 solid 1px;} 
.bot{border-top:#777 solid 1px;} 
</style> 
</head> 
<body> 
<div class="top">this</div> 
<div class="bot">andthis</div> 
</body> 
</html>

EDIT:

Là một lưu ý phụ, chuyển đổi ánh sáng và bóng tối trong ví dụ trên sẽ cung cấp cho bạn một/hiệu ứng biên giới nổi hơi nâng lên.

Nguồn

2010-06-15 14:12:35 edl

Rất thông minh! +1 –

[JSFIDDLE] (http://jsfiddle.net/Qym4D/) của bên trên (demo) –

Hiệu ứng 3D trong màn hình máy tính 2D chỉ là hiệu ứng quang học được thực hiện bằng cách sử dụng màu sắc: các biến thể sáng hơn cho thấy vùng sáng (vùng cao hơn) và các biến thể tối hơn gợi ý bóng mờ (vùng dưới). Hầu hết mọi người là thuận tay phải và viết đèn có xu hướng ở phía bên trái của máy tính để bàn, vì vậy bạn sử dụng một nguồn ánh sáng tưởng tượng ở góc trên bên trái của màn hình.

Đó là khả năng để làm điều đó với CSS tinh khiết tại các khu vực hình chữ nhật trong nhiều năm qua:

body{ 
 
\t background-color: #8080C0; 
 
} 
 
div{ 
 
    display: inline-block; 
 
\t margin: 1em; 
 
\t padding: 1em; 
 
\t width: 25%; 
 
\t color: white; 
 
\t background-color: #8080C0; 
 
} 
 
div.outset{ 
 
\t border-width: 1px; 
 
\t border-style: solid; 
 
\t border-color: #A6A6D2 #4D4D9B #4D4D9B #A6A6D2; 
 
} 
 
div.inset{ 
 
\t border-width: 1px; 
 
\t border-style: solid; 
 
\t border-color: #4D4D9B #A6A6D2 #A6A6D2 #4D4D9B; 
 
}

<div class="inset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div> 
 
<div class="outset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

Fonts, tuy nhiên, yêu cầu các thuộc tính CSS mới hơn mà không có sự ủng hộ rộng chưa và, Ngoài ra, không cho phép cung cấp nhiều hơn một màu, vì vậy nó thường sử dụng hình ảnh. Xem http://www.quirksmode.org/css/textshadow.html

Nguồn

2010-06-15 14:23:10

đây là css văn bản bóng property.for có được sử dụng hiệu ứng này

.style{ 
    text-shadow:0 1px #FFFFFF; 
}

nhưng thực sự đây là ảnh hưởng của sự kết hợp màu sắc mà bạn đang sử dụng ở chế độ nền và văn bản. vì vậy bạn nên làm.

sử dụng màu bóng văn bản tối hơn màu nền.
sử dụng màu văn bản bóng tối hơn màu văn bản.

Nguồn

2010-06-15 14:53:15

dễ nhất, vẽ một quy tắc ngang

với phong cách sau đây, độ tương phản có thể thay đổi tùy thuộc vào màu nền:

hr { 
background-color: #000; 
border-top: solid 1px #999; 
border-left: none; 
height:0px; 
}

Nguồn

2012-06-21 21:37:21 user1302036

Sử dụng một <hr> là khá thông minh.

Theo dõi trên user1302036’s answer, tất cả chúng ta cần là để thiết lập màu sắc của biên giới trên và dưới cho một <hr> và thiết lập độ rộng biên giới trái và phải để 0.

hr { 
    border-width: 1px 0px; 
    border-color: #666 transparent #ccc transparent; 
}

Nguồn

2012-08-02 17:04:56 ancestral

Bạn đã thử chưa? – Dementic

Tất nhiên. Đây là một JSFiddle: https://jsfiddle.net/qfsk30h4/ – ancestral

Đây là một nhiều hơn hiện tại và giải pháp linh hoạt có thể được sử dụng.

JSFIDDLE

.hr { 
    background: rgba(0, 0, 0, 0.6); 
    height: 1px; 
    width: 100%; 
    display: block; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.6); 
} 

<span class="hr"></span>

Bằng cách sử dụng RGBA (Red, Green, Blue, Alpha), bạn có thể sử dụng màu trắng/đen với một alpha (opacity) để làm cho ảo giác về một hiệu ứng hình chữ nhật.

Nguồn

2013-10-24 23:51:21

Đơn giản chỉ cần làm như sau:

.hr { 
    opacity: 0.2; 
    border-top: 1px solid #000; 
    border-bottom: 1px solid #fff; 
}

Chơi với opacity và màu sắc cho phù hợp với thiết kế của bạn, Nó hoạt động trên tất cả các nền Tôi nghĩ;)

Nguồn

2014-02-16 15:47:57

Sử dụng border-bottom và hộp bóng.

body { 
    background-color: #D0D9E0; 
} 

h1 { 
    border-bottom: 1px solid #EFF2F6; 
    box-shadow: inset 0 -1px 0 0 #AFBCC6; 
}

Kiểm tra Fiddle và Browser Compatibility cho thuộc tính hộp bóng.

Nguồn

2014-09-22 19:02:58

Tạo hiệu ứng "inset" bằng cách sử dụng CSS trong các trang web

Trả lời

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