Nút đóng X chỉ sử dụng css

Làm thế nào để tạo dấu chéo (X) chỉ trong css3, để sử dụng làm nút đóng?Nút đóng X chỉ sử dụng css

Tôi đã tìm kiếm từ lâu, tôi không thể tìm thấy cách .... Khi tôi xem mã nguồn trên trang web bằng cách sử dụng nó, luôn có điều gì đó kỳ lạ khiến mã tôi mất không sử dụng được.

Nút X i muốn: http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

Khi bạn nhấp vào một hình ảnh, đây là cây thập tự bên phải.

Tôi nghĩ rằng đây sẽ là tuyệt vời nếu ai đó có thể gửi một mã css phổ đơn giản để thực hiện một X chéo đơn giản trong css3

Thx

Nguồn

2013-09-04 hedi

Một bản sao của http: // stackoverflow.com/questions/10019797/pure-css-close-button – AurA

bạn có thể sử dụng fontawesome .. –

CSS thực sự * thực sự * công cụ sai cho công việc này. Chỉ là về bất cứ điều gì khác sẽ tốt hơn. Một phông chữ với glyph thích hợp, một hình ảnh, SVG, Canvas, bất cứ điều gì. Nhưng không phải CSS. – Spudley

điểm chính bạn đang tìm kiếm là

tag-remove:before { 
content: 'x'; // here is your X(cross) sign. 
color: #fff; 
font-weight: 300; 
font-family: Arial, sans-serif; 
}

remaings bạn có thể làm cho nó một mình rất dễ dàng.
EDIT:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#mdiv 
{ 
width:25px; 
height:25px; 
background-color:red; 
border:1px solid black; 
} 
.mdiv 
{ 
height:25px; 
width:2px; 
margin-left:12px; 
background-color:black; 
transform: rotate(45deg); 
-ms-transform: rotate(45deg); /* IE 9 */ 
-webkit-transform: rotate(45deg); /* Safari and Chrome */ 
Z-index:1; 

} 
.md 
{ 
height:25px; 
width:2px; 

background-color:black; 
transform: rotate(90deg); 
-ms-transform: rotate(90deg); /* IE 9 */ 
-webkit-transform: rotate(90deg); /* Safari and Chrome */ 
Z-index:2; 

} 
</style> 
</head> 
<body> 

<div id="mdiv" > 
<div class="mdiv"> 
<div class="md"> 
</div> 
</div> 

<div> 

</body>

Nguồn

2013-09-04 10:28:53 Yup

Thêm nội dung: 'x' trên stylesheet không phải là những gì tôi muốn làm beacause X chéo sẽ phụ thuộc quá nhiều vào font-family được sử dụng. Tôi muốn làm cho nó với shss tinh khiết css. – hedi

@ user2746369: vui lòng kiểm tra chỉnh sửa. là nó bạn đang tìm kiếm. – Yup

Cảm ơn bạn rất nhiều! Đó chính xác là những gì tôi đang tìm kiếm! cảm ơn lô – hedi

Dưới đây là một số đa dạng cho bạn với nhiều kích cỡ và di chuột hình ảnh động .. demo(link)

enter image description here

<ul> 
    <li>Large</li> 
    <li>Medium</li> 
    <li>Small</li> 
    <li>Switch</li> 
</ul> 

<ul> 
    <li class="ele"> 
    <div class="x large"><b></b><b></b><b></b><b></b></div> 
    <div class="x spin large"><b></b><b></b><b></b><b></b></div> 
    <div class="x spin large slow"><b></b><b></b><b></b><b></b></div> 
    <div class="x flop large"><b></b><b></b><b></b><b></b></div> 
    <div class="x t large"><b></b><b></b><b></b><b></b></div> 
    <div class="x shift large"><b></b><b></b><b></b><b></b></div> 
    </li> 
    <li class="ele"> 
    <div class="x medium"><b></b><b></b><b></b><b></b></div> 
    <div class="x spin medium"><b></b><b></b><b></b><b></b></div> 
    <div class="x spin medium slow"><b></b><b></b><b></b><b></b></div> 
    <div class="x flop medium"><b></b><b></b><b></b><b></b></div> 
    <div class="x t medium"><b></b><b></b><b></b><b></b></div> 
    <div class="x shift medium"><b></b><b></b><b></b><b></b></div> 

    </li> 
    <li class="ele"> 
    <div class="x small"><b></b><b></b><b></b><b></b></div> 
    <div class="x spin small"><b></b><b></b><b></b><b></b></div> 
    <div class="x spin small slow"><b></b><b></b><b></b><b></b></div> 
    <div class="x flop small"><b></b><b></b><b></b><b></b></div> 
    <div class="x t small"><b></b><b></b><b></b><b></b></div> 
    <div class="x shift small"><b></b><b></b><b></b><b></b></div> 
    <div class="x small grow"><b></b><b></b><b></b><b></b></div> 

    </li> 
    <li class="ele"> 
    <div class="x switch"><b></b><b></b><b></b><b></b></div> 
    </li> 
</ul>

css

.ele div.x { 
-webkit-transition-duration:0.5s; 
    transition-duration:0.5s; 
} 

.ele div.x.slow { 
-webkit-transition-duration:1s; 
    transition-duration:1s; 
} 

ul { list-style:none;float:left;display:block;width:100%; } 
li { display:inline;width:25%;float:left; } 
.ele { width:25%;display:inline; } 
.x { 
    float:left; 
    position:relative; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
    background:#CCC; 
    border-radius:2px; 
    border:solid 2px #FFF; 
    transition: all .3s ease-out; 
    cursor:pointer; 
} 
.x.large { 
    width:30px; 
    height:30px; 
} 

.x.medium { 
    width:20px; 
    height:20px; 
} 

.x.small { 
    width:10px; 
    height:10px; 
} 

.x.switch { 
    width:15px; 
    height:15px; 
} 
.x.grow { 

} 

.x.spin:hover{ 
    background:#BB3333; 
    transform: rotate(180deg); 
} 
.x.flop:hover{ 
    background:#BB3333; 
    transform: rotate(90deg); 
} 
.x.t:hover{ 
    background:#BB3333; 
    transform: rotate(45deg); 
} 
.x.shift:hover{ 
    background:#BB3333; 
} 

.x b{ 
    display:block; 
    position:absolute; 
    height:0; 
    width:0; 
    padding:0; 
    margin:0; 
} 
.x.small b { 
    border:solid 5px rgba(255,255,255,0); 
} 
.x.medium b { 
    border:solid 10px rgba(255,255,255,0); 
} 
.x.large b { 
    border:solid 15px rgba(255,255,255,0); 
} 
.x.switch b { 
    border:solid 10px rgba(255,255,255,0); 
} 

.x b:nth-child(1){ 
    border-top-color:#FFF; 
    top:-2px; 
} 
.x b:nth-child(2){ 
    border-left-color:#FFF; 
    left:-2px; 
} 
.x b:nth-child(3){ 
    border-bottom-color:#FFF; 
    bottom:-2px; 
} 
.x b:nth-child(4){ 
    border-right-color:#FFF; 
    right:-2px; 
}

Nguồn

2014-09-12 18:45:40 davidcondrey

Là một giải pháp tinh khiết CSS cho biểu tượng của thời gian 'thân hoặc bạn có thể sử dụng mã ISO với nội dung tài sản. Tôi thường sử dụng điều này cho: sau hoặc: trước khi chọn giả.

Mã nội dung là \ 00d7.

Ví dụ

div:after{ 
    display: inline-block; 
    content: "\00d7"; /* This will render the 'X' */ 
}

Bạn có thể sau đó phong cách và vị trí của bộ chọn giả trong bất kỳ cách nào bạn muốn. Hy vọng điều này sẽ giúp ai đó :).

Nguồn

2014-12-03 01:30:18 andycrone

Bạn có thể sử dụng svg.

<svg viewPort="0 0 12 12" version="1.1" 
 
    xmlns="http://www.w3.org/2000/svg"> 
 
    <line x1="1" y1="11" 
 
      x2="11" y2="1" 
 
      stroke="black" 
 
      stroke-width="2"/> 
 
    <line x1="1" y1="1" 
 
      x2="11" y2="11" 
 
      stroke="black" 
 
      stroke-width="2"/> 
 
</svg>

Nguồn

2017-07-05 02:36:23 YangMingYuan

Hãy thử này Cross In CSS

.close { 
 
    position: absolute; 
 
    right: 32px; 
 
    top: 32px; 
 
    width: 32px; 
 
    height: 32px; 
 
    opacity: 0.3; 
 
} 
 
.close:hover { 
 
    opacity: 1; 
 
} 
 
.close:before, .close:after { 
 
    position: absolute; 
 
    left: 15px; 
 
    content: ' '; 
 
    height: 33px; 
 
    width: 2px; 
 
    background-color: #333; 
 
} 
 
.close:before { 
 
    transform: rotate(45deg); 
 
} 
 
.close:after { 
 
    transform: rotate(-45deg); 
 
}

<a href="#" class="close">

Nguồn

2017-11-09 07:52:01

Trả lời

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