html - 六角形グリッドタンブラーCSSコード

Question

こんにちは、どこでも検索しましたが、タンブラーで六角形のグリッドを作成する方法が見つかりません! 画像を六角形として表示することはできましたが、ハチの巣のようにレイアウトする方法がわかりません...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>{Title}{block:SearchPage} | {SearchQuery}{/block:SearchPage}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<meta name="image:Background" content="" />
<meta name="image:Custom header" content="" />
<meta name="color:Background" content="#F9F9F9" />
<meta name="color:Accent" content="#FF6600" />
<meta name="color:Text" content="#666666" />
<meta name="if:Infinite scroll" content="1" />
<meta name="if:4 columns" content="0" />
<meta name="if:Hide description" content="0" />
<meta name="text:Background properties" content="fixed center" />

<style type="text/css">
body {
    margin: 0;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    background: {color:Background} url({image:Background}) {text:Background properties};
    color: {color:Text};
}
a {
    color: inherit;
    text-decoration: none;
}
p a,li a,.credit a,.h2 a { 
    border-bottom: 1px dotted {color:Text};
}
a img {
    border: 0;
}
blockquote { 
    margin: 0;
    padding: 0 0 0 0px;
    border-left: 1px {color:Text} dotted;
}
.wrap {
    margin: 20px auto;
    width: {block:If4Columns}50{/block:If4Columns}{block:IfNot4Columns}900{/block:IfNot4Columns}px;
}
.header {
    width: 100%;
    text-align: left;
    padding: 25px{block:PermalinkPage} 0{/block:PermalinkPage};
}
.header img {
    max-width: 100%;
}
.header h1 {
    text-transform: uppercase;
    font-size: 30px;
    margin: 0;
    letter-spacing: 5px;
    font-weight: normal;
    color: {color:Accent};
}
.header p {
    margin: 5px 0 0 0;
    font-size: 12px;
    font-size: 12px;
    line-height: 175%;
    padding: 0;
}
.links {
    text-align: right;
}
.links a {
    background: #FFF;
    border-bottom: none;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
    margin: 0 5px;
    line-height: 35px;
    padding: 5px 15px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: {color:Accent};
}
.posts {

    margin: 2px 2px 2px 2px;
}
.post {
    position: inherit;
    float: right;
    height: 250px; 
    width: {block:IndexPage}220px{/block:IndexPage}{block:PermalinkPage}50%{/block:PermalinkPage};

}
.hexagon {
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
    cursor: pointer;
    }
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.hexagon-in2 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 100%;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }

.hexagon2 {
    width: 200px;
    height: 400px;
    margin: -60px -20px 0 -20px;
    }

}
.post .permalink {
    width: 150px;
    background: -moz-linear-gradient(left,  rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.75) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.75)), color-stop(50%,rgba(0,0,0,0.85)), color-stop(100%,rgba(0,0,0,0.75)));
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
    background: -o-linear-gradient(left,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
    background: -ms-linear-gradient(left,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
    background: linear-gradient(left,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#bf000000',GradientType=1 );
    color: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -10px;
    padding: 5px 0;
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
    height: 12px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.25);
    opacity: 1;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    transition: all .25s ease;
}
.post:hover .permalink {
    opacity: 1;
}
.post .player {
    width: 50px;
    background: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
    height: 50px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
}
.post .player_overflow {
    width: 20px;
    height: 5px;
    margin: 11px;
    overflow: hidden;
}
.post h2 {
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 150%;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    color: {color:Accent};
}
.post p,.post li {
    font-size: 12px;
    line-height: 175%;
    margin: 5px 0;
    padding: 0;
}
.post ul {
    margin: 5px 25px;
    padding: 0;
    list-style: none;
}
.post img {
    max-width: 100%;
    height: auto;
}
.post .quote {
    padding: 10px 15px;
    background: #FFF;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 1px 6px 5px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
    font-size: 13px;
    letter-spacing: normal;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-weight: normal;
    text-transform: none;
    line-height: 160%;
    color: {color:Accent};
}
.post .quote .arrow {
    position: absolute;
    top: 100%;
    left: 10px;
    background: url(http://static.tumblr.com/jw8fmba/NDglv0xrl/arrow.png);
    width: 35px;
    height: 15px;
}
img.main {
    width: 100%;
}
.media {
    width: 500px;
    margin: 0 auto;
}
.post ol.notes {
    padding: 0;
    margin: 10px 0 !important;
    list-style-type: none;
    position: relative;
}
.post ol.notes a {
    border: 0 !important;
}
.post ol.notes li.note {
    margin: 2px !important;
    float: left;
    width: 16px;
    height: 16px;
}
.post ol.notes li.more_notes_link_container {
    width: 100% !important;
    text-align: center;
    margin: 2px 0 !important;
}
.post ol.notes li.note img.avatar {
    width: 16px;
    height: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}
span.action {
    min-width: 500px;
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 12px;
    opacity: 0;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    transition: all .1s ease;
    z-index: 999;
    color: {color:Accent};
}
.post ol.notes li.note:hover span.action {
    opacity: 1;
}
.post ol.notes li.note .answer_content {
    font-weight: normal;
}
.post ol.notes li.note blockquote {
    display: none;
}
#infscr-loading {
    text-align: center;
    z-index: 100;
    position: fixed;
    left: 45%;
    bottom: 50px;
    z-index: 999;
}
.credit { display: none !important }
{CustomCSS}
</style>

<!--  Untitled Themes customize assistant  -->
</head>
<body id="32912">

<div class="wrap">
    <table class="header">
        <tr>
            <td width="50%">
                <span class="title">
                    {block:IfCustomHeaderImage}<a href="/"><img src="{image:Custom header}" /></a>{/block:IfCustomHeaderImage}
                    {block:IfNotCustomHeaderImage}<h1><a href="/">{Title}</a></h1>{/block:IfNotCustomHeaderImage}
                </span>
                {block:IfNotHideDescription}{block:Description}<p>{Description}</p>{/block:Description}{/block:IfNotHideDescription}
            </td>
            <td class="links">
                <a href="/archive">{lang:Archive}</a>
                {block:AskEnabled}<a href="/ask">{AskLabel}</a>{/block:AskEnabled}
                {block:SubmissionsEnabled}<a href="/submit">{SubmitLabel}</a>{/block:SubmissionsEnabled}
                {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
                {block:Pagination}
                <span id="pagination">
                {block:PreviousPage}<a id="previous" href="{PreviousPage}">{lang:Previous page}</a>{/block:PreviousPage}
                {block:NextPage}<a id="next" href="{NextPage}">{lang:Next page}</a>{/block:NextPage}
                </span>
                {/block:Pagination}
                {block:PreviousPost}<a href="{PreviousPost}">{lang:Previous post}</a>{/block:PreviousPost}
                {block:NextPost}<a href="{NextPost}">{lang:Next post}</a>{/block:NextPost}
            </td>
        </tr>
    </table>
    <div class="posts">
    {block:Posts}
        <!-- {PostType} -->    
        <div class="post" id="{PostID}">
        {block:Audio}
            {block:IndexPage}
            {block:AlbumArt}
            <a href="{Permalink}"><div class="photo" style="background: url({AlbumArtURL}) center"></div></a>
            <div class="player">
                <div class="player_overflow">
                    {AudioPlayerWhite}
                </div>      
            </div>
            {/block:AlbumArt}
            <span{block:AlbumArt} style="display: none"{/block:AlbumArt}>
                <div class="quote">
                    {AudioPlayerWhite}
                    <div class="arrow"></div>
                </div>
                {block:TrackName}<h2>{TrackName}</h2>{block:TrackName}
                {block:Artist}<h2>{Artist}</h2>{block:Artist}
                {block:Caption}{Caption}{/block:Caption}
            </span>
            {/block:IndexPage}
            {block:PermalinkPage}
                {block:AlbumArt}<img class="main" src="{AlbumArtURL}" />{block:AlbumArt}
                <div style="margin: 10px 0">{AudioPlayerBlack}</div>
                {block:TrackName}<h2>{TrackName}</h2>{block:TrackName}
                {block:Artist}<h2>{Artist}</h2>{block:Artist}
                {block:Album}<h2>{Album}</h2>{block:Album}
                {block:Caption}{Caption}{/block:Caption}
            {/block:PermalinkPage}
        {/block:Audio}
        {block:Photo}
            {block:IndexPage}
            {LinkOpenTag}
<div class="hexagon hexagon2"><div class="hexagon-in1"><div class="hexagon-in2" style="background: url({PhotoURL-400}) center"></div></div></div>
            {LinkCloseTag}
            {/block:IndexPage}
            {block:PermalinkPage}
                {LinkOpenTag}
                    <img class="main" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
                {LinkCloseTag}
                {block:Caption}{Caption}{/block:Caption}
            {/block:PermalinkPage}
        {/block:Photo}
        {block:Link}
            <h2><a href="{URL}" {Target}>{Name}</a></h2>
            {block:Description}{Description}{/block:Description}
        {/block:Link}
        {block:Text}
            {block:Title}<h2>{Title}</h2>{/block:Title}
            {Body}
        {/block:Text}
        {block:Quote}
            <div class="quote">
                "{Quote}"
                <div class="arrow"></div>
            </div>
            {block:Source}<p>- {Source}</p>{/block:Source}
        {/block:Quote}
        {block:Chat}
            {block:Title}<h2>{Title}</h2>{/block:Title}
            <ul>
                {block:Lines}<li>{block:Label}<strong>{Label}</strong> {/block:Label}{Line}</li>{/block:Lines}
            </ul>
        {/block:Chat}
        {block:Answer}
            <div class="quote">
                {Question}
                <div class="arrow"></div>
            </div>
            <p style="margin-left: 20px"><img style="margin: 0 3px -3px 0" src="{AskerPortraitURL-16}" /> {Asker}</p>
            {Answer}
        {/block:Answer}
        {block:Photoset}
        {block:IndexPage}
            {Photoset-250}
        {/block:IndexPage}
        {block:PermalinkPage}
            <div class="media">
                {Photoset-500}
                {block:Caption}{Caption}{/block:Caption}
            </div>
        {/block:PermalinkPage}
        {/block:Photoset}
        {block:Video}
        {block:IndexPage}
            {Video-250}
        {/block:IndexPage}
        {block:PermalinkPage}
            <div class="media">
                {Video-500}
                {block:Caption}{Caption}{/block:Caption}
            </div>
        {/block:PermalinkPage}
        {/block:Video}

        {PostNotes}
    </div>

    {/block:Posts}
</div>

{block:IndexPage}
<script type="text/javascript">
$(function(){var $container = $('.posts').css({ opacity: 0 });$container.imagesLoaded(function(){$container.animate({ opacity: 1 });$container.masonry({itemSelector:'.post',columnWidth: 300});});{block:IfInfiniteScroll}
$container.infinitescroll({navSelector:'#pagination',nextSelector:'#pagination a#next',itemSelector: '.post',loading: {img:'http://static.tumblr.com/jw8fmba/D6Pluysct/loading.gif',donetext:''}},function( newElements ) { var $newElems = $( newElements ).css({ opacity: 0 });$newElems.imagesLoaded(function(){$newElems.animate({ opacity: 1 });$container.masonry( 'appended', $newElems, true );});});{/block:IfInfiniteScroll}});
</script>
{/block:IndexPage}

</body>
</html>

そしてここにウェブサイトwww.hexabee.tumblr.comがあります

score 0 · Accepted Answer

CSS を使用して行をオフセットし、重なるように配置できます。

HTML:

<div>
    <img src="hex.png"/>
    <img src="hex.png"/>
    <img src="hex.png"/>
</div>
<div class="alt">
    <img src="hex.png"/>
    <img src="hex.png"/>
    <img src="hex.png"/>
    <img src="hex.png"/>
</div>
<div>
    <img src="hex.png"/>
    <img src="hex.png"/>
    <img src="hex.png"/>
</div>

CSS:

div{
    /*negative bottom margin to move following rows up*/          
}
div.alt{
    position:relative;
    /*use a negative left value to offset the alternate rows*/
}

ライブデモ: Hexagon Layout

これは最も洗練されたソリューションではありませんが、必要な場所に移動できるはずです。

html - 六角形グリッドタンブラーCSSコード

1 に答える 1

Related

Reference