{"id":321,"date":"2023-03-07T23:51:55","date_gmt":"2023-03-07T20:51:55","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=321"},"modified":"2023-03-28T23:52:08","modified_gmt":"2023-03-28T20:52:08","slug":"headers","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/effect\/321\/","title":{"rendered":"Set of effects for headers"},"content":{"rendered":"<figure class=\"wp-block-video\"><video height=\"951\" style=\"aspect-ratio: 1803 \/ 951;\" width=\"1803\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-07_21-44-29.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;header&gt;\n  &lt;h1&gt;\n                Navigation Animations\n            &lt;\/h1&gt;\n  &lt;span&gt;\n                Inspirational page for navigation animations\n            &lt;\/span&gt;\n&lt;\/header&gt;\n&lt;div class=&quot;container red topBotomBordersOut&quot;&gt;\n  &lt;a&gt;HOME&lt;\/a&gt;\n  &lt;a&gt;ARTICLES&lt;\/a&gt;\n  &lt;a&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a&gt;ABOUT&lt;\/a&gt;\n  &lt;a&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;container purple topBotomBordersIn&quot;&gt;\n  &lt;a&gt;HOME&lt;\/a&gt;\n  &lt;a&gt;ARTICLES&lt;\/a&gt;\n  &lt;a&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a&gt;ABOUT&lt;\/a&gt;\n  &lt;a&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;container indigo topLeftBorders&quot;&gt;\n  &lt;a&gt;HOME&lt;\/a&gt;\n  &lt;a&gt;ARTICLES&lt;\/a&gt;\n  &lt;a&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a&gt;ABOUT&lt;\/a&gt;\n  &lt;a&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;container blue circleBehind&quot;&gt;\n  &lt;a&gt;HOME&lt;\/a&gt;\n  &lt;a&gt;ARTICLES&lt;\/a&gt;\n  &lt;a&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a&gt;ABOUT&lt;\/a&gt;\n  &lt;a&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;container cyan brackets&quot;&gt;\n  &lt;a&gt;HOME&lt;\/a&gt;\n  &lt;a&gt;ARTICLES&lt;\/a&gt;\n  &lt;a&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a&gt;ABOUT&lt;\/a&gt;\n  &lt;a&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;container teal borderYtoX&quot;&gt;\n  &lt;a&gt;HOME&lt;\/a&gt;\n  &lt;a&gt;ARTICLES&lt;\/a&gt;\n  &lt;a&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a&gt;ABOUT&lt;\/a&gt;\n  &lt;a&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;container green borderXwidth&quot;&gt;\n  &lt;a&gt;HOME&lt;\/a&gt;\n  &lt;a&gt;ARTICLES&lt;\/a&gt;\n  &lt;a&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a&gt;ABOUT&lt;\/a&gt;\n  &lt;a&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;container lightGreen pullDown&quot;&gt;\n  &lt;a&gt;HOME&lt;\/a&gt;\n  &lt;a&gt;ARTICLES&lt;\/a&gt;\n  &lt;a&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a&gt;ABOUT&lt;\/a&gt;\n  &lt;a&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;container lime pullUp&quot;&gt;\n  &lt;a&gt;HOME&lt;\/a&gt;\n  &lt;a&gt;ARTICLES&lt;\/a&gt;\n  &lt;a&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a&gt;ABOUT&lt;\/a&gt;\n  &lt;a&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;container yellow pullRight&quot;&gt;\n  &lt;a&gt;HOME&lt;\/a&gt;\n  &lt;a&gt;ARTICLES&lt;\/a&gt;\n  &lt;a&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a&gt;ABOUT&lt;\/a&gt;\n  &lt;a&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;container amber pullLeft&quot;&gt;\n  &lt;a&gt;HOME&lt;\/a&gt;\n  &lt;a&gt;ARTICLES&lt;\/a&gt;\n  &lt;a&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a&gt;ABOUT&lt;\/a&gt;\n  &lt;a&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;container orange pullUpDown&quot;&gt;\n  &lt;a&gt;HOME&lt;\/a&gt;\n  &lt;a&gt;ARTICLES&lt;\/a&gt;\n  &lt;a&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a&gt;ABOUT&lt;\/a&gt;\n  &lt;a&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;container deepOrange pullRightLeft&quot;&gt;\n  &lt;a&gt;HOME&lt;\/a&gt;\n  &lt;a&gt;ARTICLES&lt;\/a&gt;\n  &lt;a&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a&gt;ABOUT&lt;\/a&gt;\n  &lt;a&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;container brown highlightTextOut&quot;&gt;\n  &lt;a alt=&quot;HOME&quot;&gt;HOME&lt;\/a&gt;\n  &lt;a alt=&quot;ARTICLES&quot;&gt;ARTICLES&lt;\/a&gt;\n  &lt;a alt=&quot;PORTFOLIO&quot;&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a alt=&quot;ABOUT&quot;&gt;ABOUT&lt;\/a&gt;\n  &lt;a alt=&quot;CONTACT&quot;&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;container gray highlightTextIn&quot;&gt;\n  &lt;a alt=&quot;HOME&quot;&gt;HOME&lt;\/a&gt;\n  &lt;a alt=&quot;ARTICLES&quot;&gt;ARTICLES&lt;\/a&gt;\n  &lt;a alt=&quot;PORTFOLIO&quot;&gt;PORTFOLIO&lt;\/a&gt;\n  &lt;a alt=&quot;ABOUT&quot;&gt;ABOUT&lt;\/a&gt;\n  &lt;a alt=&quot;CONTACT&quot;&gt;CONTACT&lt;\/a&gt;\n&lt;\/div&gt;\n\n\/\/\u0410\u0432\u0442\u043e\u0440: StyleShit (C) All rights Reserved. @EvyatarDa. evyatar.tk - github.com<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">@import 'https:\/\/fonts.googleapis.com\/css?family=Raleway';\n\nhtml, body\n{\n    margin: 0px;\n}\n\nheader, footer\n{\n    font-family: Raleway;\n    margin: 0 auto;\n  padding: 5em 3em;\n  text-align: center;\n    background: #555;\n}\n\nheader h1\n{\n    color: #AAA;\n    font-size: 40px;\n    font-weight: lighter;\n    margin-bottom: 5px;\n}\n\nheader span\n{\n    color: #222;\n}\n\nfooter span\n{\n  color: #AAA;\n}\n\ndiv.container\n{\n    font-family: Raleway;\n    margin: 0 auto;\n  padding: 10em 3em;\n  text-align: center;\n}\n\ndiv.container a\n{\n    color: #FFF;\n    text-decoration: none;\n    font: 20px Raleway;\n    margin: 0px 10px;\n    padding: 10px 10px;\n    position: relative;\n    z-index: 0;\n    cursor: pointer;\n}\n\n.red\n{\n    background: #f44336;\n}\n\n.purple\n{\n    background: #673ab7;\n}\n\n.indigo\n{\n    background: #3f51b5;\n}\n\n.blue\n{\n    background: #2196f3;\n}\n\n.cyan\n{\n    background: #00bcd4;\n}\n\n.teal\n{\n    background: #009688;\n}\n\n.green\n{\n    background: #4caf50;\n}\n\n.lightGreen\n{\n    background: #8bc34a;\n}\n\n.lime\n{\n    background: #c0ca33;\n}\n\n.yellow\n{\n    background: #fdd835;\n}\n\n.amber\n{\n    background: #ffc107;\n}\n\n.orange\n{\n    background: #ff9800\n}\n\n.deepOrange\n{\n    background: #ff5722;\n}\n\n.brown\n{\n    background: #795548;\n}\n\n.gray\n{\n    background: #9e9e9e;\n}\n\n\/* Top and Bottom borders go out *\/\ndiv.topBotomBordersOut a:before, div.topBotomBordersOut a:after\n{\n    position: absolute;\n    left: 0px;\n    width: 100%;\n    height: 2px;\n    background: #FFF;\n    content: &quot;&quot;;\n    opacity: 0;\n    transition: all 0.3s;\n}\n\ndiv.topBotomBordersOut a:before\n{\n    top: 0px;\n    transform: translateY(10px);\n}\n\ndiv.topBotomBordersOut a:after\n{\n    bottom: 0px;\n    transform: translateY(-10px);\n}\n\ndiv.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after\n{\n    opacity: 1;\n    transform: translateY(0px);\n}\n\n\/* Top and Bottom borders come in *\/\ndiv.topBotomBordersIn a:before, div.topBotomBordersIn a:after\n{\n    position: absolute;\n    left: 0px;\n    width: 100%;\n    height: 2px;\n    background: #FFF;\n    content: &quot;&quot;;\n    opacity: 0;\n    transition: all 0.3s;\n}\n\ndiv.topBotomBordersIn a:before\n{\n    top: 0px;\n    transform: translateY(-10px);\n}\n\ndiv.topBotomBordersIn a:after\n{\n    bottom: 0px;\n    transform: translateY(10px);\n}\n\ndiv.topBotomBordersIn a:hover:before, div.topBotomBordersIn a:hover:after\n{\n    opacity: 1;\n    transform: translateY(0px);\n}\n\n\/* Top border go down and Left border appears *\/\ndiv.topLeftBorders a:before\n{\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    width: 2px;\n    height: 0px;\n    background: #FFF;\n    content: &quot;&quot;;\n    opacity: 1;\n    transition: all 0.3s;\n}\n\ndiv.topLeftBorders a:after\n{\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    width: 100%;\n    height: 2px;\n    background: #FFF;\n    content: &quot;&quot;;\n    opacity: 1;\n    transition: all 0.3s;\n}\n\ndiv.topLeftBorders a:hover:before\n{\n    height: 100%;\n}\n\ndiv.topLeftBorders a:hover:after\n{\n    opacity: 0;\n    top: 100%;\n}\n\n\/* Circle behind *\/\ndiv.circleBehind a:before, div.circleBehind a:after\n{\n    position: absolute;\n    top: 22px;\n    left: 50%;\n    width: 50px;\n    height: 50px;\n    border: 4px solid #0277bd;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n    border-radius: 50%;\n    background: transparent;\n    content: &quot;&quot;;\n    opacity: 0;\n    transition: all 0.3s;\n    z-index: -1;\n}\n\ndiv.circleBehind a:after\n{\n    border-width: 2px;\n    transition: all 0.4s;\n}\n\ndiv.circleBehind a:hover:before\n{\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%) scale(1);\n}\n\ndiv.circleBehind a:hover:after\n{\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%) scale(1.3);\n}\n\n\/* Brackets go out *\/\ndiv.brackets a:before, div.brackets a:after\n{\n    position: absolute;\n    opacity: 0;\n    font-size: 35px;\n    top: 0px;\n    transition: all 0.3s;\n}\n\ndiv.brackets a:before\n{\n    content: '(';\n    left: 0px;\n    transform: translateX(10px);\n}\n\ndiv.brackets a:after\n{\n    content: ')';\n    right: 0px;\n    transform: translateX(-10px);\n}\n\ndiv.brackets a:hover:before, div.brackets a:hover:after\n{\n    opacity: 1;\n    transform: translateX(0px);\n}\n\n\n\/* Border from Y to X  *\/\ndiv.borderYtoX a:before, div.borderYtoX a:after\n{\n    position: absolute;\n    opacity: 0.5;\n    height: 100%;\n    width: 2px;\n    content: '';\n    background: #FFF;\n    transition: all 0.3s;\n}\n\ndiv.borderYtoX a:before\n{\n    left: 0px;\n    top: 0px;\n}\n\ndiv.borderYtoX a:after\n{\n    right: 0px;\n    bottom: 0px;\n}\n\ndiv.borderYtoX a:hover:before, div.borderYtoX a:hover:after\n{\n    opacity: 1;\n    height: 2px;\n    width: 100%;\n}\n\n\/* Border X get width  *\/\ndiv.borderXwidth a:before, div.borderXwidth a:after\n{\n    position: absolute;\n    opacity: 0;\n    width: 0%;\n    height: 2px;\n    content: '';\n    background: #FFF;\n    transition: all 0.3s;\n}\n\ndiv.borderXwidth a:before\n{\n    left: 0px;\n    top: 0px;\n}\n\ndiv.borderXwidth a:after\n{\n    right: 0px;\n    bottom: 0px;\n}\n\ndiv.borderXwidth a:hover:before, div.borderXwidth a:hover:after\n{\n    opacity: 1;\n    width: 100%;\n}\n\n\/* Pull down  *\/\ndiv.pullDown a:before\n{\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    left: 0px;\n    top: 0px;\n    content: '';\n    background: #FFF;\n    opacity: 0.3;\n    transition: all 0.3s;\n}\n\ndiv.pullDown a:hover:before\n{\n    height: 100%;\n}\n\n\/* Pull up  *\/\ndiv.pullUp a:before\n{\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    left: 0px;\n    bottom: 0px;\n    content: '';\n    background: #FFF;\n    opacity: 0.3;\n    transition: all 0.3s;\n}\n\ndiv.pullUp a:hover:before\n{\n    height: 100%;\n}\n\n\/* Pull right  *\/\ndiv.pullRight a:before\n{\n    position: absolute;\n    width: 2px;\n    height: 100%;\n    left: 0px;\n    top: 0px;\n    content: '';\n    background: #FFF;\n    opacity: 0.3;\n    transition: all 0.3s;\n}\n\ndiv.pullRight a:hover:before\n{\n    width: 100%;\n}\n\n\/* Pull left  *\/\ndiv.pullLeft a:before\n{\n    position: absolute;\n    width: 2px;\n    height: 100%;\n    right: 0px;\n    top: 0px;\n    content: '';\n    background: #FFF;\n    opacity: 0.3;\n    transition: all 0.3s;\n}\n\ndiv.pullLeft a:hover:before\n{\n    width: 100%;\n}\n\n\/* Pull up and down  *\/\ndiv.pullUpDown a:before, div.pullUpDown a:after\n{\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    left: 0px;\n    content: '';\n    background: #FFF;\n    opacity: 0.3;\n    transition: all 0.3s;\n}\n\ndiv.pullUpDown a:before\n{\n    top: 0px;\n} \n\ndiv.pullUpDown a:after\n{\n    bottom: 0px;\n}\n\ndiv.pullUpDown a:hover:before, div.pullUpDown a:hover:after\n{\n    height: 100%;\n}\n\n\/* Pull right and left  *\/\ndiv.pullRightLeft a:before, div.pullRightLeft a:after\n{\n    position: absolute;\n    width: 2px;\n    height: 100%;\n    top: 0px;\n    content: '';\n    background: #FFF;\n    opacity: 0.3;\n    transition: all 0.3s;\n}\n\ndiv.pullRightLeft a:before\n{\n    left: 0px;\n} \n\ndiv.pullRightLeft a:after\n{\n    right: 0px;\n}\n\ndiv.pullRightLeft a:hover:before, div.pullRightLeft a:hover:after\n{\n    width: 100%;\n}\n\n\/* Highlight text out  *\/\ndiv.highlightTextOut a\n{\n    color: rgba(255, 255, 255, 0.3); \n}\n\ndiv.highlightTextOut a:before, div.highlightTextIn a:before\n{\n    position: absolute;\n    color: #FFF;\n    top: 0px;\n    left: 0px;\n    padding: 10px;\n    overflow: hidden;\n    content: attr(alt);\n    transition: all 0.3s;\n    transform: scale(0.8);\n    opacity: 0;\n} \n\ndiv.highlightTextOut a:hover:before, div.highlightTextIn a:hover:before\n{\n    transform: scale(1);\n    opacity: 1;\n}\n\n\/* Highlight text in  *\/\ndiv.highlightTextIn a\n{\n    color: rgba(0, 0, 0, 0.4); \n}\n\ndiv.highlightTextIn a:before\n{\n    transform: scale(1.2);\n} <\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":323,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[16],"class_list":["post-321","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-effect","tag-htmlcss"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=321"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/321\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/323"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}