Страницы

Поиск по вопросам

пятница, 26 апреля 2019 г.

Масштабируемая сетка из шестигранников

Я загрузил из Интернета несколько изображений на мой сайт . Можно ли придать всем этим образам шестигранную форму в responsive grid?


...
Я нашел несколько способов сделать это, но мне необходимо заполнить src изображения в коде CSS. Это не подходит мне, потому что сайт загружает случайные изображения из интернета с jQuery, поэтому я не могу их использовать как фоновые изображения.
Я собираюсь поддерживать WebKit браузеры, Firefox, IE8 было бы хорошо, но не нужно - и мобильные браузеры
Моя попытка здесь: jsfiddle
перевод вопроса: Responsive grid of hexagons


Ответ

Здесь demo и репозиторий для responsive grid of hexagons. Код здесь не поддерживается. Он был перемещен в GitHub и сильно улучшены комментарии, вопрос отчетности и взносы должны быть сделаны туда.

Этот метод использует:
тег неупорядоченный список: каждый шестиугольник содержится в теге

  • и теге Использование transform rotateи skew, чтобы сделать шестигранные формы overflow:hidden; дочерние элементы nth-child() заполняют шестигранник в качестве pattern
    И еще, чтобы создать шестигранную сетку с тегом .
    Характеристики шестигранной сетки :
    Сетка будет реагировать, как это полагается, на изменение процентов ширины. Шестиугольники поддерживают своё соотношение сторон в соответствии с приемом padding-bottom technique и изображения изменяют размер, чтобы соответствовать форме шестиугольника. hover эффект поверх шестиугольников: текст скользит с прозрачным наложением над изображением. Каждый шестиугольник сохраняет свои границы: эффект hover (или событие click ) для каждого шестиугольника срабатывает только внутри реальной фигуры.
    Полный код
    Следующий фрагмент кода не является последней версией сетки. GitHub repo сохраняется и до настоящего времени. Вопросы и вклады могут быть сделаны там.
    * { margin: 0; padding: 0; } body { font-family: 'Open Sans', arial, sans-serif; background: rgb(123, 158, 158); } #hexGrid { overflow: hidden; width: 90%; margin: 0 auto; padding:0.707% 0; } #hexGrid:after { content: ""; display: block; clear: both; } .hex { position: relative; list-style-type: none; float: left; overflow: hidden; visibility: hidden; -webkit-transform: rotate(-60deg) skewY(30deg); -ms-transform: rotate(-60deg) skewY(30deg); transform: rotate(-60deg) skewY(30deg); } .hex * { position: absolute; visibility: visible; } .hexIn { display:block; width: 100%; height: 100%; text-align: center; color: #fff; overflow: hidden; -webkit-transform: skewY(-30deg) rotate(60deg); -ms-transform: skewY(-30deg) rotate(60deg); transform: skewY(-30deg) rotate(60deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* HEX CONTENT */ .hex img { left: -100%; right: -100%; width: auto; height: 100%; margin: 0 auto; } .hex h1, .hex p { width: 90%; padding: 0 5%; background-color: #008080; background-color: rgba(0, 128, 128, 0.8); font-family: 'Raleway', sans-serif; -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; } .hex h1 { bottom: 110%; font-style: italic; font-weight: normal; font-size: 1.5em; padding-top: 100%; padding-bottom: 100%; } .hex h1:after { content: ''; display: block; position: absolute; bottom: -1px; left: 45%; width: 10%; text-align: center; z-index: 1; border-bottom: 2px solid #fff; } .hex p { padding-top: 50%; top: 110%; padding-bottom: 50%; } /* HOVER EFFECT */ .hexIn:hover h1 { bottom: 50%; padding-bottom: 10%; } .hexIn:hover p { top: 50%; padding-top: 10%; } /* SPACING AND SIZING */ @media (min-width:1201px) { .hex { width: 19.2%; /* = (100-4) / 5 */ padding-bottom: 22.170%; /* = width / sin(60deg) */ } .hex:nth-child(9n+6), .hex:nth-child(9n+7), .hex:nth-child(9n+8), .hex:nth-child(9n+9) { margin-top: -4.676%; margin-bottom: -4.676%; -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); transform: translateX(50%) rotate(-60deg) skewY(30deg); } .hex:nth-child(9n+6):last-child, .hex:nth-child(9n+7):last-child, .hex:nth-child(9n+8):last-child, .hex:nth-child(9n+9):last-child { margin-bottom: 0; } .hex:nth-child(9n+6) { margin-left: 0.5%; clear: left; } .hex:nth-child(9n+10) { clear: left; } .hex:nth-child(9n+2), .hex:nth-child(9n+ 7) { margin-left: 1%; margin-right: 1%; } .hex:nth-child(9n+3), .hex:nth-child(9n+4), .hex:nth-child(9n+8) { margin-right: 1%; } } @media (max-width: 1200px) and (min-width:901px) { .hex { width: 24.25%; /* = (100-3) / 4 */ padding-bottom: 28.001%; /* = width / sin(60deg) */ } .hex:nth-child(7n+5), .hex:nth-child(7n+6), .hex:nth-child(7n+7) { margin-top: -6.134%; margin-bottom: -6.134%; -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); transform: translateX(50%) rotate(-60deg) skewY(30deg); } .hex:nth-child(7n+5):last-child, .hex:nth-child(7n+6):last-child, .hex:nth-child(7n+7):last-child { margin-bottom: 0; } .hex:nth-child(7n+2), .hex:nth-child(7n+6) { margin-left: 1%; margin-right: 1%; } .hex:nth-child(7n+3) { margin-right: 1%; } .hex:nth-child(7n+8) { clear: left; } .hex:nth-child(7n+5) { clear: left; margin-left: 0.5%; } } @media (max-width: 900px) and (min-width:601px) { .hex { width: 32.666%; /* = (100-2) / 3 */ padding-bottom: 37.720%; /* = width / sin(60) */ } .hex:nth-child(5n+4), .hex:nth-child(5n+5) { margin-top: -8.564%; margin-bottom: -8.564%; -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); transform: translateX(50%) rotate(-60deg) skewY(30deg); } .hex:nth-child(5n+4):last-child, .hex:nth-child(5n+5):last-child { margin-bottom: 0; } .hex:nth-child(5n+4) { margin-right: 1%; margin-left: 0.5%; } .hex:nth-child(5n+2) { margin-left: 1%; margin-right: 1%; } .hex:nth-child(5n+6) { clear: left; } } @media (max-width: 600px) { .hex { width: 49.5%; /* = (100-1) / 2 */ padding-bottom: 57.158%; /* = width / sin(60) */ } .hex:nth-child(3n+3) { margin-top: -13.423%; margin-bottom: -13.423%; -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); transform: translateX(50%) rotate(-60deg) skewY(30deg); } .hex:nth-child(3n+3):last-child { margin-bottom: 0; } .hex:nth-child(3n+3) { margin-left: 0.5%; } .hex:nth-child(3n+2) { margin-left: 1%; } .hex:nth-child(3n+4) { clear: left; } }
    Изменение количества шестиугольников в ряду
    Сетка адаптирует количество шестиугольников в ряду в зависимости от ширины окна просмотра. С пятью шестиугольниками на экранах шире, чем 1200px, и до 2-х на экранах уже, чем 600px.
    Если вам не нужны media queries, но просто хотите изменить количество шестиугольников в строке, то вы можете сохранить CSS из соответствующего media queries и затем удалить ненужные из них.
    Для получения дополнительных настроек см. sizing and spacing of hexagons.
    Demos
    Для получения списка всех демок, посмотрите эту коллекцию на codepen: Responsive grids of hexagons с разным числом шестиугольников в каждом ряду, а также опции центрирования и многое другое ...
    Вот оригинал codepen demo с .pusher элементом, чтобы сделать неправильную сетку из шестиугольников. .pusher элемент используется для создания "дыр" в сетке с пустыми шестиугольниками.
    Перевод ответа: @web-tiki

    • Автор: на
    Ярлыки: , , , , ,

    Комментариев нет:

    Отправить комментарий

    Подписаться на: Комментарии к сообщению (Atom)