{"id":11817,"date":"2017-03-17T07:08:16","date_gmt":"2017-03-16T21:08:16","guid":{"rendered":"https:\/\/codemyui.com\/?p=11817"},"modified":"2018-05-16T16:59:04","modified_gmt":"2018-05-16T06:59:04","slug":"double-slanted-header","status":"publish","type":"post","link":"https:\/\/codemyui.com\/double-slanted-header\/","title":{"rendered":"Double Slanted Header"},"content":{"rendered":"<p>We have seen a couple of <a href=\"https:\/\/codemyui.com\/tag\/header\/\">different headers<\/a> designed by Chris, this is a double slanted header created in <a href=\"https:\/\/codemyui.com\/tag\/pure-css\/\">pure CSS<\/a>. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/5559b03e546428c734791251bcec9bf8\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Double Slanted Header Snippet<\/h2>\n<p class='codepen'  data-height='748' data-theme-id='0' data-slug-hash='mRYZaM' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Double Slanted Header by Chris (@BadMoodTaylor) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>We have seen a couple of different headers designed by Chris, this is a double slanted header created in pure CSS.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/double-slanted-header\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":11829,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[5357,30305495],"class_list":["post-11817","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-header","tag-pure-css","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/double-slanted-header.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":11837,"url":"https:\/\/codemyui.com\/single-slanted-header-angled-div\/","url_meta":{"origin":11817,"position":0},"title":"Single Slanted Header &#8211; Angled Div","author":"Hima Vincent","date":"February 25, 2017","format":false,"excerpt":"If you are looking to add some uniqueness to you site having an angled header might be a good place to start. It's easily achieved using only CSS as seen in this snippet designed by Chris. It's not limited to headers, you can use the same effect for any sections\u2026","rel":"","context":"In \"header\"","block_context":{"text":"header","link":"https:\/\/codemyui.com\/tag\/header\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/single-slanted-header.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/single-slanted-header.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/single-slanted-header.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/single-slanted-header.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":11802,"url":"https:\/\/codemyui.com\/snippet-inverted-triangle-header\/","url_meta":{"origin":11817,"position":1},"title":"Snippet for Inverted Triangle Header","author":"Hima Vincent","date":"March 3, 2017","format":false,"excerpt":"This is a pure CSS snippet designed by Chris. You can use to add an inverted triangle header to your site. If you are having trouble with the pen, try the archived copy on GitHub Inverted Triangle Section Snippet","rel":"","context":"In \"header\"","block_context":{"text":"header","link":"https:\/\/codemyui.com\/tag\/header\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/polygon-header.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/polygon-header.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/polygon-header.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/polygon-header.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":3708,"url":"https:\/\/codemyui.com\/disappearing-header-scrolling-parallax\/","url_meta":{"origin":11817,"position":2},"title":"Disappearing Header on Scrolling Parallax","author":"Hima Vincent","date":"October 31, 2016","format":false,"excerpt":"This snippet is great for displaying the title on blog posts. You have a title on the hero image that will be tucked under the image using a parallax effect when you start scrolling down. Designed by Dudley Storey. If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"article\"","block_context":{"text":"article","link":"https:\/\/codemyui.com\/tag\/article\/"},"img":{"alt_text":"Disappearing Header on Scrolling Parallax","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/disappearing-header-on-scrolling-parallax.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/disappearing-header-on-scrolling-parallax.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/disappearing-header-on-scrolling-parallax.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/disappearing-header-on-scrolling-parallax.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26782,"url":"https:\/\/codemyui.com\/css-only-mobile-friendly-table-layout\/","url_meta":{"origin":11817,"position":3},"title":"CSS only Mobile Friendly Table Layout","author":"Saijo George","date":"August 21, 2018","format":false,"excerpt":"This responsive CSS only table design was designed by Flor Antara. We have a table with a header and on smaller devices like mobile phones the header is switched to a vertical layout and the content is scrollable horizontally. If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"mobile optimised\"","block_context":{"text":"mobile optimised","link":"https:\/\/codemyui.com\/tag\/mobile-optimised\/"},"img":{"alt_text":"CSS only Mobile Friendly Table Layout","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/CSS-only-Mobile-Friendly-Table-Layout.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/CSS-only-Mobile-Friendly-Table-Layout.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/CSS-only-Mobile-Friendly-Table-Layout.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/CSS-only-Mobile-Friendly-Table-Layout.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29120,"url":"https:\/\/codemyui.com\/colourful-css-only-underline-effects\/","url_meta":{"origin":11817,"position":4},"title":"Colourful CSS Only Underline Effects","author":"Saijo George","date":"January 6, 2020","format":false,"excerpt":"A bunch of pure CSS underline effects that can be used for links on your webpages, these were designed by Jordan Marshall. The effects include: a rainbow, slanted rainbow, shrinking underline, growing underline, double underline, triple underline, dotted underline, weave underline, various shades, etc If you are having trouble with\u2026","rel":"","context":"In \"link\"","block_context":{"text":"link","link":"https:\/\/codemyui.com\/tag\/link\/"},"img":{"alt_text":"Colourful CSS Only Underline Effects","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Colourful-CSS-Only-Underline-Effects.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Colourful-CSS-Only-Underline-Effects.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Colourful-CSS-Only-Underline-Effects.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Colourful-CSS-Only-Underline-Effects.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":291,"url":"https:\/\/codemyui.com\/sticky-header-navigation-menu\/","url_meta":{"origin":11817,"position":5},"title":"Sticky Header Navigation Menu","author":"Hima Vincent","date":"May 21, 2016","format":false,"excerpt":"Sticky header navigation menu for your web projects. When you scroll down with this header menu it sticks itself to the top of the browser. Designed by Michael. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"navigation menu\"","block_context":{"text":"navigation menu","link":"https:\/\/codemyui.com\/tag\/navigation-menu\/"},"img":{"alt_text":"Sticky Header Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/sticky-header-navigation-menu.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/sticky-header-navigation-menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/sticky-header-navigation-menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/sticky-header-navigation-menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/11817","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=11817"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/11817\/revisions"}],"predecessor-version":[{"id":25894,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/11817\/revisions\/25894"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/11829"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=11817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=11817"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=11817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}