1. Zuhause
  2. Frage und Antwort
  3. X nur Schließen-Schaltfläche mit CSS

X nur Schließen-Schaltfläche mit CSS

2013-09-04 12 views
14

Wie ein Kreuz machen (X) nur in css3, als Schließen-Schaltfläche zu benutzen?X nur Schließen-Schaltfläche mit CSS

Ich habe seit langer Zeit gesucht, ich kann nicht finden, wie .... Wenn ich Quellcode auf der Website mit es benutze, gibt es immer etwas seltsam, die den Code unbrauchbar machen machen.

Die X-Taste Ich möchte: http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

Wenn Sie ein Bild klicken, das ist das Kreuz auf der rechten Seite.

ich denke, das wäre toll, wenn jemand einen einfachen Universal-CSS-Code schreiben kann ein einfaches X Kreuz in css3

Thx

Quelle

2013-09-04 hedi

+0

ein Duplikat http Versuchen: // Stackoverflow.com/questions/10019797/pure-css-close-button – AurA

+1

können Sie Fontawesome verwenden .. –

+0

CSS ist wirklich * wirklich * das falsche Werkzeug für diesen Job. Fast alles andere wäre besser. Eine Schriftart mit der passenden Glyphe, ein Bild, SVG, Canvas, alles. Aber nicht CSS. – Spudley

Antwort

8

Hauptpunkt, den Sie für 

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

Remaings können Sie es sehr einfach selbst machen.
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>

Quelle

2013-09-04 10:28:53 Yup

+0

Hinzufügen von Inhalten: 'x' auf Stylesheet ist nicht das, was ich tun will, weil das X-Kreuz zu sehr von der verwendeten Schriftfamilie abhängt. Ich möchte es mit reinem CSS-Shapping schaffen. – hedi

+0

@ user2746369: Bitte überprüfen Sie die Bearbeitung. ist es, wonach du suchst? – Yup

+0

Vielen Dank! Es ist genau das, wonach ich gesucht habe! Dank Lot – hedi

11

Hier einige Abwechslung für Sie mit verschiedenen Größen und Animationen schweben .. 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; 
}

Quelle

2014-09-12 18:45:40 davidcondrey

21

Als reiner CSS Lösung für die enge oder Symbol ‚mal‘ Sie den ISO-Code mit der Inhalt Eigenschaft nutzen können. Ich benutze das oft für: After oder: vor Pseudo Selektoren.

Der Inhaltscode lautet \ 00d7.

Beispiel

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

können Sie dann Stil und positionieren Sie den Pseudo-Selektor in keiner Weise. Hoffe das hilft jemandem :).

Quelle

2014-12-03 01:30:18 andycrone

1

können Sie svg verwenden.

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

Quelle

2017-07-05 02:36:23 YangMingYuan

1

Diese 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">

Quelle

2017-11-09 07:52:01

Verwandte Themen

 Verwandte Themen