{"id":13706,"date":"2011-08-20T11:14:55","date_gmt":"2011-08-20T18:14:55","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=13706"},"modified":"2011-08-20T11:14:55","modified_gmt":"2011-08-20T18:14:55","slug":"almanac","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/","title":{"rendered":"CSS Almanac"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-group.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":159836,"url":"https:\/\/css-tricks.com\/almanac\/almanac-oldest\/","url_meta":{"origin":13706,"position":0},"title":"Almanac Oldest","date":"January 7, 2014","format":false,"excerpt":"","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":307423,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-repeat\/","url_meta":{"origin":13706,"position":1},"title":"mask-repeat","date":"April 24, 2020","format":false,"excerpt":"In CSS, the mask-repeat property tells a mask if it should repeated or not and in which directions. It's a lot like background-repeat. The default is repeat. This mask does not repeat: CodePen Embed Fallback This mask repeats both ways: CodePen Embed Fallback This mask repeats along the x axis:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":177032,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-row-column\/","url_meta":{"origin":13706,"position":2},"title":"grid-row \/ grid-column","date":"July 30, 2014","format":false,"excerpt":"The grid-row and grid-column properties define which row or column an element will be displayed on. .element { grid-row: 1 \/ 2; grid-column: 3 \/ -1; } Here's an explicit 3 \u00d7 3 grid where these properties are used to place grid items onto it in specific places: CodePen Embed\u2026","rel":"","context":"In \"grid\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196160,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-origin\/","url_meta":{"origin":13706,"position":3},"title":"background-origin","date":"February 17, 2015","format":false,"excerpt":"The background-origin property defines where to paint the background: across the whole element, inside the border, or inside the padding. There are four values: border-box, padding-box, content-box and inherit. Here\u2019s a demo: CodePen Embed Fallback background-origin is similar to background-clip, except it resizes the background rather than clipping it. The\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":178799,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-span\/","url_meta":{"origin":13706,"position":4},"title":"column-span","date":"August 14, 2014","format":false,"excerpt":"In a multi-column layout, you can make elements expand across the columns with column-span. h2 { -webkit-column-span: all; column-span: all; } Assign column-span to an element inside of the multi-column layout to make it a spanning element. The multi-column layout will resume with the next non-spanning element. The value of\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":195116,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/b\/blank\/","url_meta":{"origin":13706,"position":5},"title":":blank","date":"February 4, 2015","format":false,"excerpt":"The :blank pseudo-class builds upon the :empty pseudo-class. Like :empty, :blank will select elements that contain nothing at all, or contain only an HTML comment. But, :blank will also select elements that include whitespace, which :empty will not. p:blank { display: none; } p:blank will select these paragraphs, just like\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13706"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=13706"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13706\/revisions"}],"predecessor-version":[{"id":13707,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13706\/revisions\/13707"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13706"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}