Как создать адаптивный фон шахматной доски в CSS? - PullRequest
Новая
       49

Как создать адаптивный фон шахматной доски в CSS?

0 голосов
/ 01 апреля 2019

Мне нужен фон в шахматном порядке, который должен выглядеть как фон в селекторе цвета:

Wanted result

Что я пробовал: 

.chess {
  background-image: 
    linear-gradient(90deg, #999 30px, white 30px), 
    linear-gradient(90deg, white 30px, #999 30px), 
    linear-gradient(90deg, #999 30px, white 30px), 
    linear-gradient(90deg, white 30px, #999 30px), 
    linear-gradient(90deg, #999 30px, white 30px), 
    linear-gradient(90deg, white 30px, #999 30px), 
    linear-gradient(90deg, #999 30px, white 30px);
  background-position: 0 0, 0 30px, 0 60px, 0 90px, 0 120px;
  background-repeat: repeat-x;
  background-size: 60px 30px;
  height: 150px;
  margin: 15px auto;
  width: 30%;
}


.fas {
  text-align: center;
  font-size: 10em
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div>
  <div class="btn btn-outline-secondary chess">
  <i class="fas fa-car"></i>
  </div>
<div>

Проблемы:

  • Мой результат не Resposive.(У меня фиксированные размеры в пикселях)
  • Мне понадобится много кода, если у меня будет больший фон или меньшие элементы.
  • Мне не удалось центрировать шаблон или использовать background-repeat: round

Если возможно, я не хочу, чтобы какие-либо обрезанные элементы на фоне шахматной доски.

Не так (обрезано справа и снизу):

enter image description here

Ответы [ 3 ]

3 голосов
/ 01 апреля 2019

Вот идея, которая полагается на конический градиент , но поддерживается только в Chrome: 

.chess {
  background:
    conic-gradient(#fff 0deg ,#fff 90deg,
                   grey 90deg,grey 180deg,
                   #fff 180deg,#fff 270deg,
                   grey 270deg,grey 360deg) 0 0/25% 25%;
  margin: 15px;
  padding:10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>

<div class="chess fas fa-7x fa-car"></div>
<div class="chess fas fa-5x fa-car"></div>
<div class="chess fas fa-10x fa-user"></div>
<div class="chess fas fa-3x fa-phone"></div>

Вы также можете рассмотреть round из background-repeat, если хотите иметь тот же размер и не обрезаться: 

.chess {
  background:
    conic-gradient(#fff 0deg ,#fff 90deg,
                   grey 90deg,grey 180deg,
                   #fff 180deg,#fff 270deg,
                   grey 270deg,grey 360deg) 0 0/40px 40px round;
  margin: 15px;
  padding:10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>

<div class="chess fas fa-7x fa-car"></div>
<div class="chess fas fa-5x fa-car"></div>
<div class="chess fas fa-10x fa-user"></div>
<div class="chess fas fa-3x fa-phone"></div>

Вот аналогичная идея с использованием SVG вместо градиента, где у вас будет лучшая поддержка: 

.chess {
  background:
    url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none"  viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="5" height="5" fill="grey" /><rect x="5" y="5" width="5" height="5" fill="grey" /><rect x="5" y="0" width="5" height="5" fill="white" /><rect x="0" y="5" width="5" height="5" fill="white" /></svg>') 0 0/25% 25%;
  margin: 15px;
  padding:10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>

<div class="chess fas fa-7x fa-car"></div>
<div class="chess fas fa-5x fa-car"></div>
<div class="chess fas fa-10x fa-user"></div>
<div class="chess fas fa-3x fa-phone"></div>

И с фиксированным размером: 

.chess {
  background:
    url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none"  viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="5" height="5" fill="grey" /><rect x="5" y="5" width="5" height="5" fill="grey" /><rect x="5" y="0" width="5" height="5" fill="white" /><rect x="0" y="5" width="5" height="5" fill="white" /></svg>') 0 0/40px 40px round;
  margin: 15px;
  padding:10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>

<div class="chess fas fa-7x fa-car"></div>
<div class="chess fas fa-5x fa-car"></div>
<div class="chess fas fa-10x fa-user"></div>
<div class="chess fas fa-3x fa-phone"></div>
0 голосов
/ 01 апреля 2019

Используйте это: 

.chess {
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 60px 60px;
  background-position: 0 0, 0 29px, 29px -29px, -29px 0px;
}
.btn {}

.fas {
  color: black;
  text-align: center;
  font-size: 10em;
}


.fas.f5em {
  font-size: 5em;
}

.fas.f35em {
  font-size: 35em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div>
  <div class="btn btn-outline-secondary chess">
  <i class="fas fa-car"></i>
  </div>
<div>

<div>
  <div class="btn btn-outline-secondary chess">
  <i class="fas fa-car f5em"></i>
  </div>
<div>

<div>
  <div class="btn btn-outline-secondary chess">
  <i class="fas fa-car f35em"></i>
  </div>
<div>



ИЛИ вы можете использовать изображение шаблона, например: 

https://mdn.mozillademos.org/files/5705/alpha.png
0 голосов
/ 01 апреля 2019

Не совсем уверен в том, что вы пытаетесь сделать, но я создал для вас следующее. Это заполнит клетчатый фон любой ширины экрана и не будет обрезаться на экранах меньшего размера. 

body {
    background-image:
      -moz-linear-gradient(45deg, #999 25%, transparent 25%), 
      -moz-linear-gradient(-45deg, #999 25%, transparent 25%),
      -moz-linear-gradient(45deg, transparent 75%, #000 75%),
      -moz-linear-gradient(-45deg, transparent 75%, #000 75%);
    background-image:
      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #999), color-stop(.25, transparent)), 
      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #999), color-stop(.25, transparent)),
      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #999)),
      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #999));
    -moz-background-size:100px 100px;
    background-size:100px 100px;
    -webkit-background-size:100px 101px; /* override value for shitty webkit */
    background-position:0 0, 50px 0, 50px -50px, 0px 50px;
}

div.fa-car {
  font-size:10rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>

<div class="chess fas fa-car"/>

JSFiddle

...