mark

In this example below you will see how to do a mark with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Bazalt, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Bazalt ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>mark</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrap">
	<img src="http://html5book.ru/wp-content/uploads/2015/10/flowers-by-barbara-florchik-2.jpg" alt="">
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Bazalt/mark-GjgGzy */
body {
	background: LightBlue;
	padding: 25px;
}

.wrap {
	/* Прозрачный кружок на белом фоне - ячейка фона */
	background: radial-gradient(transparent 50%, white 50%);
	/* размер ячейки фона */
	background-size: 20px 20px;
	/* сдвиг центра ячейки */
	background-position: 10px 10px;
	/* background-repeat: repeat; - по-умолчанию */
	/* отталкивает границы фона от картинки */
	padding: 10px;
	width: 300px;
	height: 220px;
	margin: 0 auto;
}

img {
	width: 100%;
}

Comments