Vraag X sluit knop alleen met css


Hoe maak je een kruisje (X) alleen in CSS3, om te gebruiken als een knop Sluiten?

Ik ben al lang op zoek, ik kan niet vinden hoe .... Als ik naar de broncode kijk op de website die het gebruikt, is er altijd iets raars dat de code onbruikbaar maakt.

De X-knop die ik wil: http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

Wanneer u op een afbeelding klikt, is dit het kruis aan de rechterkant.

Ik denk dat dit geweldig zou zijn als iemand een eenvoudige universele CSS-code kan plaatsen om een ​​eenvoudige X-kruising in CSS3 te maken

Dankje


18
2017-09-04 10:18


oorsprong


antwoorden:


het belangrijkste punt waar je naar op zoek bent is

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

remaings kun je het heel gemakkelijk zelf maken.
BEWERK:

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


11
2017-09-04 10:28



Als een pure CSS oplossing voor het sluiten of 'tijden' symbool kunt u de ISO-code gebruiken met de inhoud eigendom. Ik gebruik dit vaak voor: na of: voor pseudo-selectors.

De inhoudscode is \ 00d7.

Voorbeeld

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

Vervolgens kunt u de pseudo-selector op elke gewenste manier stijlen en positioneren. Ik hoop dat dit iemand helpt :).


27
2017-12-03 01:30



Hier is wat variatie voor jou met verschillende formaten en zweefanimaties .. 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;
}

12
2017-09-12 18:45



U kunt svg gebruiken.

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


2
2017-07-05 02:36



Probeer dit 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">


2
2017-11-09 07:52