Страницы

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

воскресенье, 16 февраля 2020 г.

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

#css #html5 #css3 #анимация #svg


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

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


Ответы

Ответ 1



Здесь 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

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

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