Komponent do zaznaczania obrazka

Odpowiedz Nowy wątek
2020-07-07 22:05

Rejestracja: 1 rok temu

Ostatnio: 1 tydzień temu

0

Witam serdecznie,
Poszukuję takiego komponentu https://ibb.co/1MYsynH - do zaznaczania obrazka.

Spotkał się ktoś może z czymś takim?

Pozostało 580 znaków

2020-07-07 22:28

Rejestracja: 6 lat temu

Ostatnio: 8 godzin temu

1

Eee, zwykły CSS? Plus JS, żeby oznaczyć jako kliknięty. Parę linijek roboty.

edytowany 2x, ostatnio: serek, 2020-07-07 22:29

Pozostało 580 znaków

2020-07-07 23:11

Rejestracja: 2 lata temu

Ostatnio: 4 godziny temu

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
.obrazek {
  display:inline-block;
  position: relative;
  width:200px;
  height:200px;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:calc(100% - 20px) calc(100% - 20px);
}

.zaznaczony {
  border:3px solid #FFAA00;
  border-radius:5px;
}

.zaznaczony::after {
  position:absolute;
  box-sizing:border-box;
  padding:5px;
  top:20px;
  left:20px;
  width:30px;
  height:30px;
  border-radius:30px;
  content:"\2713";
  text-align:center;
  font-weight:bold;
  color:white;
  background-color:#FFAA00;
}
</style>

</head>
<body>
  <div style="background-image:url('obrazek1.jpg');" class="obrazek"></div>
  <div style="background-image:url('obrazek2.jpg');" class="obrazek zaznaczony"></div>
  <div style="background-image:url('obrazek3.jpg');" class="obrazek"></div>  
</body>
</html>

Pozostało 580 znaków

Odpowiedz

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0