{"id":4373,"date":"2016-08-15T00:00:00","date_gmt":"2016-08-15T03:00:00","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=4373"},"modified":"2019-03-24T15:17:18","modified_gmt":"2019-03-24T18:17:18","slug":"aprenda-a-criar-pagina-estilo-onepage-com-html5-e-css3","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/aprenda-a-criar-pagina-estilo-onepage-com-html5-e-css3\/","title":{"rendered":"Aprenda a criar p\u00e1gina estilo OnePage com HTML5 e CSS3"},"content":{"rendered":"<p>Uma estrat\u00e9gia interessante para quem tem pouco conte\u00fado, como em sites institucionais, \u00e9 ado\u00e7\u00e3o da p\u00e1gina no formato &#8220;OnePage&#8221; ou &#8220;Landing page&#8221;. <strong>Criar site OnePage<\/strong> traz bastante otimiza\u00e7\u00e3o em seus projetos.<\/p>\n<p>Uma p\u00e1gina no formato \u201cOnePage\u201d consiste em que todo conte\u00fado que deveria estar alocado em outras p\u00e1ginas de um site estariam na mesma p\u00e1gina, separadas s\u00f3 por se\u00e7\u00f5es.<\/p>\n<p>Existem muitas\u00a0formas de navega\u00e7\u00e3o como utilizar\u00a0javascript para fazer anima\u00e7\u00f5es\u00a0e\u00a0transi\u00e7\u00e3o dessas p\u00e1ginas.<\/p>\n<p>Veja um <a href=\"https:\/\/www.mxcursos.com\/blog\/exemplos\/onepage\" target=\"_blank\" rel=\"noopener noreferrer\">exemplo simples<\/a> do modelo de site OnePage que criaremos neste tutorial.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4452\" title=\"Criar site Onepage\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/08\/onepage_mockup.jpg\" alt=\"Criar site Onepage\" width=\"620\" height=\"310\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/08\/onepage_mockup.jpg 500w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/08\/onepage_mockup-24x12.jpg 24w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/>Mas podemos criar este mesmo efeito utilizando CSS3, criando anima\u00e7\u00e3o com a propriedade\u00a0<em>transition<\/em><strong>\u00a0<\/strong>e tamb\u00e9m usando a pseudo classe <em>:target<\/em><strong>.<\/strong><\/p>\n<p>A pseudo classe <em>:target\u00a0<\/em>consegue identificar link \u00e2ncora da URL. Dessa forma, podemos aplicar o estilo aos elementos.<\/p>\n<h2>Estrutura da p\u00e1gina Onepage<\/h2>\n<p>A estrutura dos arquivos e pastas seria esta:<\/p>\n<ul class=\"list-tutorial\">\n<li>css\/\n<ul>\n<li>style.css<\/li>\n<\/ul>\n<\/li>\n<li>images\/\n<ul>\n<li>background.jpg<\/li>\n<\/ul>\n<\/li>\n<li>index.html<\/li>\n<\/ul>\n<p>Vamos criar nossa estrutura HTML, no arquivo <em>index.html<\/em>.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;!doctype html&gt;\r\n&lt;html lang=\"pt-br\"&gt;\r\n&lt;head&gt;\r\n\t&lt;meta charset=\"UTF-8\"&gt;\r\n\t&lt;title&gt;OnePage HTML5 e CSS3&lt;\/title&gt;\r\n\t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/necolas.github.io\/normalize.css\/4.1.1\/normalize.css\"&gt;\r\n\t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t&lt;section id=\"home\" class=\"content\"&gt;\r\n\t\t&lt;article class=\"box\"&gt;\r\n\t\t\t&lt;h2&gt;Home&lt;\/h2&gt;\r\n\t\t\t  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa,\r\n\t\t\t  vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar.\r\n\t\t\t  Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a\r\n\t\t\t  imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae,\r\n\t\t\t  viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus.\r\n\t\t\t&lt;\/p&gt;\r\n\t\t&lt;\/article&gt;\r\n\t&lt;\/section&gt;\r\n\t&lt;section id=\"company\" class=\"content\"&gt;\r\n\t\t&lt;article class=\"box\"&gt;\r\n\t\t\t&lt;h2&gt;Empresa&lt;\/h2&gt;\t \r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa,\r\n\t\t\t  vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar.\r\n\t\t\t  Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a\r\n\t\t\t  imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae,\r\n\t\t\t  viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus.\r\n\t\t\t&lt;\/p&gt;\r\n\t\t&lt;\/article&gt;\r\n\t&lt;\/section&gt;\r\n\t&lt;section id=\"service\" class=\"content\"&gt;\r\n\t\t&lt;article class=\"box\"&gt;\r\n\t\t\t&lt;h2&gt;Servi\u00e7os&lt;\/h2&gt;\t \r\n\t\t\t &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa,\r\n\t\t\t  vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar.\r\n\t\t\t  Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a\r\n\t\t\t  imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae,\r\n\t\t\t  viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus.\r\n\t\t\t&lt;\/p&gt;\r\n\t\t&lt;\/article&gt;\r\n\t&lt;\/section&gt;\r\n\t&lt;section id=\"contact\" class=\"content\"&gt;\r\n\t\t&lt;article class=\"box\"&gt;\r\n\t\t\t&lt;h2&gt;Contato&lt;\/h2&gt;\t \r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa,\r\n\t\t\t  vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar.\r\n\t\t\t  Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a\r\n\t\t\t  imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae,\r\n\t\t\t  viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus.\r\n\t\t\t&lt;\/p&gt;\r\n\t\t&lt;\/article&gt;\r\n\t&lt;\/section&gt; \r\n\t&lt;header&gt;\r\n\t\t&lt;h1&gt;One Page CSS3&lt;\/h1&gt;\r\n\t\t&lt;nav&gt;\r\n\t\t\t&lt;ul&gt;\r\n\t\t\t\t&lt;li id=\"link-home\"&gt;&lt;a href=\"#home\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t\t\t&lt;li id=\"link-company\"&gt;&lt;a href=\"#company\"&gt;Empresa&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t\t\t&lt;li id=\"link-service\"&gt;&lt;a href=\"#service\"&gt;Servi\u00e7os&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t\t\t&lt;li id=\"link-contact\"&gt;&lt;a href=\"#contact\"&gt;Contato&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t\t&lt;\/ul&gt;\r\n\t\t&lt;\/nav&gt;\r\n\t&lt;\/header&gt;\t\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Explicando o c\u00f3digo acima:<\/p>\n<ul class=\"list-tutorial\">\n<li>Na linha 6 e 7,\u00a0\u00e9 adicionado o <a href=\"https:\/\/necolas.github.io\/normalize.css\/\" target=\"_blank\" rel=\"noopener noreferrer\">normalize.css<\/a>\u00a0para padronizar\u00a0os estilos das tags e o arquivo <em>style.css<\/em>, onde iremos estilizar a nossa p\u00e1gina;<\/li>\n<li>Na linha de 10 a 20, 21 a 31, 32 a 42. 43 a 53 cont\u00e9m a mesma estrutura, onde cada section representaria uma p\u00e1gina, um id representado essa p\u00e1gina e dentro dela uma\u00a0article, para definir o espa\u00e7o que ficar\u00e1 o conte\u00fado;<\/li>\n<li>Na linha 54 a 64, definimos\u00a0o header. Ele est\u00e1 no final da p\u00e1gina, pois\u00a0queremos deixar o item marcado quando for clicar no link.\u00a0E para isso usaremos o seletor <em>~ (Elemento1 ~ Elemento2)<\/em>, que ir\u00e1 selecionar o <em>Elemento2 precedido pelo Elemento1<\/em><strong>.\u00a0<\/strong>Um outro item importante na defini\u00e7\u00e3o dos links de navega\u00e7\u00e3o \u00e9 que passamos a refer\u00eancia da se\u00e7\u00e3o com ID que queremos mostrar. No link da home, no href, temos\u00a0<em>#home\u00a0<\/em>e assim sucessivamente. Definimos um id para cada <em>li<\/em>\u00a0para deixar marcado o link correspondente \u00e0\u00a0se\u00e7\u00e3o.<\/li>\n<\/ul>\n<p>Agora vamos criar o arquivo <em>style.css.<\/em><\/p>\n<pre class=\"lang:css decode:true \">body{\r\n    background: url(..\/images\/background.jpg) no-repeat fixed center top;\r\n}\r\nheader{\r\n    width:20%;\r\n    background:#fff;\r\n    position: absolute;\r\n    left:0;\r\n    top:5%;\r\n    z-index: 5;\r\n}\r\nheader h1{\r\n    text-align: center;\r\n}\r\nnav ul{\r\n    list-style:none;\r\n    margin:5px 0;\r\n    padding:0;\r\n}\r\nnav a{\r\n    display:block;\r\n    border:1px solid #e5e5e5;\r\n    border-left:0;\r\n    border-right:0;\r\n    margin:3px 0;\r\n    color:#333;\r\n    padding:5px 0;\r\n    text-decoration: none;\r\n} \r\n.box{\r\n    position:absolute;\r\n    top:5%;\r\n    right:10px;\r\n    width:70%;\r\n    height:70%;\r\n    background:#fff;\r\n}\r\n.box h2{\r\n    font-size:20px;\r\n    padding:10px;\r\n}\r\n.box p{\r\n    font-size:12px;\r\n    padding:10px;\r\n}\r\n.content{\r\n    min-width: 100%;\r\n    height: 98%;\r\n    position: absolute;\r\n    margin-left:-101%;\r\n    -webkit-transition: margin-left .8s ease-in-out;\r\n    -moz-transition: margin-left .8s ease-in-out;\r\n    -o-transition: margin-left .8s ease-in-out;\r\n    transition: margin-left .8s ease-in-out;\r\n}\r\n.content:target{\r\n    margin-left:0;\r\n}\r\n#home{\r\n    margin-left:0;\r\n}\r\n#home:target ~ header #link-home a,\r\n#company:target ~ header #link-company a,\r\n#service:target ~ header #link-service a,\r\n#contact:target ~ header #link-contact a{\r\n    background: #333;\r\n    color: #fff;\r\n}<\/pre>\n<p>Explica\u00e7\u00e3o do c\u00f3digo acima:<\/p>\n<ul class=\"list-tutorial\">\n<li>Na linha 1 a 3, definimos um background na tag body;<\/li>\n<li>Na linha 4 a 11, definimos o estilo da tag header;\n<ul>\n<li>Uma largura de 20%;<\/li>\n<li>Cor de fundo branco;<\/li>\n<li>Posi\u00e7\u00e3o absoluta;<\/li>\n<li>Encostado \u00e0\u00a0esquerda;<\/li>\n<li>5% afastado do topo;<\/li>\n<li>z-index 5, para sobrepor aos outros elementos;<\/li>\n<\/ul>\n<\/li>\n<li>Na linha 12 a 14, centralizamos o t\u00edtulo;<\/li>\n<li>Na linha 15 a 19, configuramos a lista dentro da tag nav;\n<ul>\n<li>Removemos os bullets;<\/li>\n<li>Definimos que a margem do topo e da base ser\u00e3o de 5px;<\/li>\n<li>Zeramos o padding;<\/li>\n<\/ul>\n<\/li>\n<li>Na linha 20 a 29, configura\u00e7\u00f5es do Link na lista;\n<ul>\n<li>Mudamos o display para block para ocultar 100%;<\/li>\n<li>Uma borda de 1px do estilo s\u00f3lido;<\/li>\n<li>Removemos a borda da esquerda e da direita;<\/li>\n<li>Demos uma margin de 3px do topo e da base;<\/li>\n<li>Demos\u00a0um padding de 5px do topo e da base;<\/li>\n<li>Removemos o underline;<\/li>\n<\/ul>\n<\/li>\n<li>Na linha 30 a 37, definimos o box que ficar\u00e1 o conte\u00fado;\n<ul>\n<li>Afastamos de 5% do topo;<\/li>\n<li>Afastamos de 10px da direita;<\/li>\n<li>Definimos a largura 70%;<\/li>\n<li>Definimos a altura de 70%;<\/li>\n<li>Definimos um background;<\/li>\n<\/ul>\n<\/li>\n<li>Na linha 38 a 41, configuramos o t\u00edtulo h2, o tamanho e o padding;<\/li>\n<li>Na linha 42 a 45, configuramos os par\u00e1grafos, o tamanho e o padding;<\/li>\n<li>Na linha 46 a 55,\u00a0definimos a classe .content, onde\u00a0configuramos\u00a0a anima\u00e7\u00e3o do conte\u00fado;\n<ul>\n<li>Definimos a\u00a0largura minima de 100%;<\/li>\n<li>Definimos a Altura de 98%;<\/li>\n<li>Posi\u00e7\u00e3o ser\u00e1 absoluta;<\/li>\n<li>Definimos que margem \u00e0\u00a0esquerda\u00a0ser\u00e1 &#8211; 101%;<\/li>\n<li>Definimos transition (propriedade, tempo, e tipo de transi\u00e7\u00e3o)<\/li>\n<\/ul>\n<\/li>\n<li>Na linha 56 a 58,\u00a0definimos a pseudo classe :target, onde\u00a0\u00e9 coloca a margem a esquerda para 0 (zero)\u00a0para criar o efeito voltando a posi\u00e7\u00e3o normal;<\/li>\n<li>Na linha 59 a 61,\u00a0definimos id#home fique na sua posi\u00e7\u00e3o normal.\u00a0Assim, ao acessar o site, ela ir\u00e1 aparecer por padr\u00e3o;<\/li>\n<li>Na linha 62 a\u00a068,\u00a0definimos o elemento que ficar\u00e1 marcado ao clicar em um link. Nesse caso, ser\u00e1 o link\u00a0precedido (~) por item j\u00e1 selecionado\u00a0usando a pseudo classe :target.<\/li>\n<\/ul>\n<p>Voc\u00ea pode ver o efeito funcionando no link abaixo:<\/p>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/exemplos\/onepage\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.mxcursos.com\/blog\/exemplos\/onepage<\/a><\/p>\n<p>Para baixar o c\u00f3digo, acesse o link abaixo:<\/p>\n<p><a href=\"https:\/\/github.com\/davidchc\/tutorial-criando-onepage-html5-css3\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/davidchc\/tutorial-criando-onepage-html5-css3<\/a><\/p>\n<p>Ah e se voc\u00ea quiser se aperfei\u00e7oar em desenvolvimento de sites, aprender a criar sites responsivos, aprender Bootstrap, CSS3, HTML5, Javascript, jQuery entre outros, n\u00e3o deixe de conhecer nossos <a href=\"https:\/\/www.mxcursos.com\/front-end?tracking=blog&amp;utm_source=blog&amp;utm_medium=post_link&amp;utm_content=marketing\" target=\"_blank\" rel=\"noopener noreferrer\">cursos online de Desenvolvimento Front-End<\/a>.<\/p>\n<p>Espero que tenham gostado.<\/p>\n<p>Um abra\u00e7o e at\u00e9 a pr\u00f3xima.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uma estrat\u00e9gia interessante para quem tem pouco conte\u00fado, como em sites institucionais, \u00e9 ado\u00e7\u00e3o da p\u00e1gina no formato &#8220;OnePage&#8221; ou &#8220;Landing page&#8221;. Criar site OnePage traz bastante otimiza\u00e7\u00e3o em seus projetos. Uma p\u00e1gina no formato \u201cOnePage\u201d consiste em que todo conte\u00fado que deveria estar alocado em outras p\u00e1ginas de um site estariam na mesma p\u00e1gina, [&hellip;]<\/p>\n","protected":false},"author":67,"featured_media":18739,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[1181,1200,1268],"class_list":["post-4373","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-css3","tag-html5","tag-onepage"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/4373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=4373"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/4373\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/18739"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=4373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=4373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=4373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}