БлогNot. Сетка из "включаемых" и "выключаемых" ячеек средствами только HTML и CSS

Сетка из "включаемых" и "выключаемых" ячеек средствами только HTML и CSS

Наверное, достаточно простой шаблон показан ниже. Сам шаблон табличный, "кликабельность" построена на стилизованных элементах input type="checkbox" и label.

Таблицу-поле, конечно, можно генерировать и в двойном цикле яваскриптом, а также легко "прикручивать" сюда дополнительный игровой или иной функционал.

Ниже показан пример в работе (по пустым ячейкам таблицы можно щёлкать, включённый JavaScript не нужен) и код HTML/CSS (без внешнего обрамления HTML), предполагается, что он будет сохранён в кодировке Юникода UTF-8. Сами фигуры также представляют собой символы Юникода, поэтому включённая в браузере графика тоже не нужна :)

Вроде бы, не должно особо зависеть от других стилей страницы, по крайней мере, в админке тоже выглядит без искажений. В IE11 и очень старом Android-браузере у меня сработало.

<style>
 .mybordered { /* обрамление */
  margin: auto;
  border: 1px dotted #f00;
  border-collapse: collapse;
 }
 .myscaled { /* абсолютный масштаб */
  width: 10em;
  height: 10em;
  text-align: center;
 }
 .myscaled100ps { /* масштаб в процентах */
  width: 100%;
  height: 100%;
 }
 .mytransparent { /* прозрачный */
  display: none;  
  opacity: 0;
 }
 .myspan { /*оформление внутреннего контента */
  font-size: 8em;
  display: block;
  opacity: 0;
 }
 input[type="checkbox"]:checked + .myspan { /* выбранный кликом */
  opacity: 1; 
  color: blue;
 }
</style>

<table class="mybordered">
 <tr class="mybordered">
  <td class="mybordered myscaled" id="cell_1_1">
   <label class="myscaled100ps">
    <input type="checkbox" class="mytransparent">
     <span class="myspan">&#9812;</span>
   </label>
  </td>
  <td class="mybordered myscaled" id="cell_1_2">
   <label class="myscaled100ps">
    <input type="checkbox" class="mytransparent">
     <span class="myspan">&#9813;</span>
   </label>
  </td>
  <td class="mybordered myscaled" id="cell_1_3">
   <label class="myscaled100ps">
    <input type="checkbox" class="mytransparent">
     <span class="myspan">&#9814;</span>
   </label>
  </td>
 </tr>
 <tr class="mybordered">
  <td class="mybordered myscaled" id="cell_2_1">
   <label class="myscaled100ps">
    <input type="checkbox" class="mytransparent">
     <span class="myspan">&#9815;</span>
   </label>
  </td>
  <td class="mybordered myscaled" id="cell_2_2">
   <label class="myscaled100ps">
    <input type="checkbox" class="mytransparent">
     <span class="myspan">&#9816;</span>
   </label>
  </td>
  <td class="mybordered myscaled" id="cell_2_3">
   <label class="myscaled100ps">
    <input type="checkbox" class="mytransparent">
     <span class="myspan">&#9817;</span>
   </label>
  </td>
 </tr>
</table>

19.06.2020, 12:55 [1303 просмотра]


теги: html css вебдезигн

К этой статье пока нет комментариев, Ваш будет первым