Artigos Recentes

  • MEGA MENU DROPDOWN

    Como criar um Mega Menu Dropdown com apenas CSS

    Olá pessoal, tudo bom?
    Neste tutorial irei ensinar como desenvolver um Mega Menu dropdown com apenas CSS3, sem a necessidade de script.
    Espero que gostem.
    Vamos lá!

    Você já leu nossos artigos anteriores?

    MEGA MENUS

    Mega Menus são normalmente utilizados em sites de e-commerce, mas eles se tornam mais populares porque eles são uma ótima maneira de visualizar/organizar o conteúdo.
    Podemos subdividir um submenu em diversos menus para facilitar a usabilidade do site.

    mega-menu-2

    HTML

    Em HTML nós vamos criar um menu normal <nav>, com uma lista não ordenada <li> e vamos adicionar os links.

    Veja Também: ANIMAÇÃO COM CSS3 – TRANSITION

     

     

    RESETANDO PROPRIEDADES CSS

    Agora precisamos resetar algumas configurações padrão de css:

     

     

    Agora adicionamos algumas propriedades para deixar os itens de nav inline:

     

     

    ESTILIZANDO O NAV

    Vamos começar com os estilos comuns, como o padding, height, position, etc. Em seguida, vamos definir os estilos de tipografia, como font-size, color, text-shadow, etc. Também vamos definir um background-color e um border-left e border-right. Para suavizar as transições (animações), vamos adicionar um transition do CSS3.

     

     

    Agora vamos adicionar o estilo para quando passarmos o mouse sobre os links (:hover):

     

     

    ESTILIZANDO O FORMULÁRIO DE BUSCA

    Vamos começar estilizando a tag <form> adicionando width, height e algumas outras propriedades:

     

     

    Agora vamos estilizar o elemento <input type="text">. Vamos formatar seu estilo padrão e seu estilo ao clicarmos sobre ele (:focus).

    ESTÁ GOSTANDO DESTE ARTIGO?

    Então não deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a crescer ainda mais.

     

     

     

    Agora vamos estiliar o botão de pesquisa <button type="submit">.
    Os estilos que iremos aplicar são semelhantes ao campo de texto, só vamos definir uma largura fixa e altura e adicionar cantos arredondados usando a propriedade border-radius. Temos também que definir transições para as duas entradas, a fim de ter algumas animações suaves e agradáveis.
    Também vamos estilizar o ícone do botão.

     

     

    EXEMPLO ATÉ AGORA

    mega menu dropdown 2

    MEGA NAVS DROPDOWNS

    Esta é uma das partes mais importantes. Vamos começar por definir um position: absolute, width: 100%, display: block e os valores top e left. Então, vamos esconder o nav usando as propriedades de opacity, de visibility e overflow. Depois disso, vamos adicionar o background-color, border-radius e algumas transições. A razão pela qual nós estaremos usando essas três propriedades para ocultar os navs suspensos e não o display: none; é porque se usarmos display: none; as transições não vão funcionar.

     

     

    Para mostrar o nav, nós vamos mudar a opacity para 1, a propriedade visibility para visible e overflow para visible:

     

     

    CONTEUDO DO MEGA MENU

    Agora nosso mega nav suporta qualquer tipo de linguagem (html, php, js, etc).
    Para adicionarmos os subnavs ao mega menu, precisamos informá-los dentro de uma <div> como uma nova lista não ordenada <ul><li>:

     

     

    Então, vamos adicionar alguns estilos básicos para este conteúdo. Vamos definir a largura de cada coluna a 20%, o pading de 2,5% e float à esquerda. Para terminar, vamos adicionar alguns estilos de tipografia para o título e os links.

     

     

    RESULTADO FINAL

    Exemplo: http://jsfiddle.net/gcdesigner/MbEt6/4/embedded/result/

    mega menu dropdown 3

    FINALIZANDO

    É isso ai galera.
    Espero que tenham gostado.
    Não deixem de comentar, ok?

    Muito obrigado e até a próxima.

    Leia mais
  • HTML BÁSICO – PARTE 5 – FORMULÁRIO

    HTML Básico – Parte 5 – Formulário

    Introdução a Formulário em HTML

    Olá pessoal, bom dia!
    Hoje iremos falar sobre formulários em HTML, a necessidade, variações de elementos e definições da estrutura.
    Espero que gostem!

    Conheça os outros artigos

    FORMULÁRIO

    Os formulários são utilizados para entrada de dados e são uma das formas de maior interação entre o usuário e o web site.
    Caso o usuário queira entrar em contato pelo próprio site, por exemplo, nós temos o formulário de contato para que ele digite suas dúvidas e nos envie para que possamos responder e interagir com ele.
    Muito importantes no meio web.

    CONSTRUÇÃO

    O formulário é definido pela tag <form>. Essa tag indica o começo de um formulário e tudo que estiver dentro dela será compreendido como elementos de formulário.

     

     

    LABEL

    <label> é o título, rótulo do campo. Com ele sinalizamos ao usuário o que gostaríamos que ele informasse no campo.

    Sua sintaxe é muito simples:

     

     

     

     

    INPUT

    Como eu disse anteriormente, o formulário é utilizado para inserção de dados, portanto precisamos de campos (inputs) para que o usuário possa digitar tais informações.

    Os campos mais utilizados são os famosos (inputs) que são definidos pela tag <input>. Com eles podemos construir campos de texto, campos para seleção e até mesmo botões de ação.

    Para definirmos qual o tipo do campo que queremos, precisamos informar o atributo (type). Com esse atributo do input nós dizemos ao HTML qual o tipo de campo vai ser construído.

    Os tipos de <input> mais utilizados são:

    Tipos de input

    TipoFinalidadeExemplo
    text Inserção de texto
    checkbox Caixa de seleção. Muito utilizado para que o usuário possa selecionar mais de uma opção    
    radio Campo radial de opção. Muito utilizado para restringir o usuário a somente uma seleção de opção.    
    password Campo para inserção de senhas. Idêntico ao “text”, mas os dados informados são apresentados são omitidos por uma série de asterísticos (*).
    email Campo para inserção de email.
    submit Cria um botão que é utilizado para enviar as informações do formulário. Necessita do atributo “value” para definir o nome do botão.
    button Cria um simples botão. Necessita do atributo “value” para definir o nome do botão.
    reset Cria um botão, que ao ser clicado, elimina todos os dados informados nos campos do formulário. Necessita do atributo “value” para definir o nome do botão.
    file Cria campo para seleção de arquivos.

    Além dos (inputs) nós temos outros elementos de formulário para seleção e inserção de texto.

    ESTÁ GOSTANDO DESTE ARTIGO?

    Então não deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a crescer ainda mais.

     

    TEXTAREA

    O textarea é utilizado para a inserção de uma grande quantidade de texto.
    Muito utilizado para inserção de comentários e especificações de produto.

    Obs: observe que este elemento necessidade da tag inicial e do fechamento, diferente da tag input, que somente necessita da tag de abertura.

     

    Este elemento possui alguns atributos importantes: ‘rows=””‘ e ‘cols=””‘.

    rows: Defini a quantidade de linhas que o textarea terá como default;
    cols: Defini a quantidade de colunas que o textarea terá como default;

    Se aplicarmos ao textarea os atributos acima com os valores “cols=’100′ e rows=’5′”, nós teremos o seguinte resultado.

     

    SELECT

    O select é um menu suspenso que permite a seleção de um ou mais itens.
    Muito utilizado para seleção de localidade, quantidade e etc.

    Este elemento possui alguns atributos importantes: multiple e size.

    multiple: Defini que o campo será de seleção múltipla;
    size: Defini quantos itens serão apresentados inicialmente. Por default o campo já vem com 4 itens a amostra;

    Aplicando os atributos acima, temos:

    CONSTRUINDO O FORMULÁRIO

    Agora que vocês já aprenderam sobre alguns elemento de formulário em HTML, vamos construir nosso primeiro formulário.





     Aceita receber nossas novidades

    FINALIZANDO

    Esse tutorial foi uma introdução sobre formulários em HTML. Existem outras tags e formas de se construir formulários.

    Na próxima aula irei apresentar mais informações. Esse tema é bastante delicado e precisamos estudar mais aprofundadamente.

    Qualquer dúvida estou a disposição para responder.

    Se gostram do tutorial, não deixem de comentar. ok?!

    Muito obrigado e até a próxima

    Leia mais
  • HTML BÁSICO – PARTE 4 – TABELAS

    Tabelas em HTML

    Olá pessoal, tudo joia?
    Hoje iremos falar sobre Tabelas.
    Esse tutorial foi separado da aula passada, pois merecia uma atenção especial.
    Tabelas é um assunto delicado.

    Conheça os outros artigos

    TABELAS

    Primeiramente, tabelas são utilizadas SOMENTE para dados tabulares.

    Porque somente?

    Antigamente a tabela era utilizada para desenvolver layout de sites.
    Imagine que em uma página você tenha: cabeçalho, menu, conteúdo, rodapé.
    Agora imagine isso dentro de uma tabela.
    Se pensarmos em um layout como linhas e colunas, podemos definir que é possível e super normal utilizarmos uma tabelas para desenvolver nossos layouts, mas NÃO. Hoje temos tecnologias que superaram o uso da tabela em layouts. Hoje o “CSS” faz o papel de dar estilo aos nossos layouts, dividindo em colunas e linhas todo o nosso conteúdo sem a necessidade de utilizarmos tabela, o que facilitou a vida do web designer em níveis absurdos.
    Antigamente era muito complicado fazer um layout de site bonito, moderno, com alinhamento perfeito, pois as tabelas complicam os espaçamentos entre os elementos.
    VIVA O CSS.

    A bastante tempo, a W3C – World Wide Web Consortium (consórcio responsável pelos padrões para a Web) julga as utilização de tabelas como auxiliares de layout.

    Portanto, a utilização de tabelas é somente para tabular dados!

    CONSTRUÇÃO DA TABELA

    As tabelas são definidas pela tag <table>.

    Dentro de uma tabela nós temos linhas e colunas, correto?

    Linhas: são definidas pela tag <tr>.
    Colunas: são definidas pela tag <td>.

    Portanto, para construirmos uma simples tabela:

    CAPTION <CAPTION>

    Atualmente com a necessidade de tornar o site acessível a todo tipo de usuário, seja cego, mudo, surdo, com problemas de coordenação motora e etc, a utilização da Tag <caption> tornou-se fundamental.
    Essa tag é interpretada pelos leitores de tela, e se torna um título para a tabela.
    Você pode, com a ajuda do CSS, esconder esse elemento para que ele não seja visualizado pelo usuário, e somente identificado pelos leitores.

    ESTÁ GOSTANDO DESTE ARTIGO?

    Então não deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a crescer ainda mais.

     

    CABEÇALHO DA TABELA <THEAD>

    Geralmente as tabelas possuem um “Cabeçalho”, onde é informado o título que representa cada coluna, por exemplo:

    Tenho uma lista de funcionários e quero apresentá-los em uma tabela, portanto, eu tenho uma coluna com o título “Matrícula”, outra coluna com o título “Nome” e outra com o título “Telefone”.
    Na coluna “Matrícula” eu irei informar as matrículas dos funcionários;
    Na coluna “Nome” eu irei informar o nome dos funcionários;
    E na coluna “Telefone” o telefone dos funcionários.

    Em HTML nós temos a Tag <thead> que representa o cabeçalho da tabela.

    Perceba que dentro do cabeçalho <thead> nós também temos a tag <tr>, mas o <td> é trocado pela tag <th>.

    CORPO DA TABELA <TBODY>

    Além do cabeçalho, uma tabela também precisa de um corpo, correto?
    Assim como acontece com nosso documento HTML, a tabela tem um <body> que na verdade é a tag <tbody>.

    RODAPÉ DA TABELA <TFOOT>

    As tabelas também possuem um rodapé, sinalizado pela Tag <tfoot>.
    Muito utilizado para representar resultado de cálculos dentro de uma tabela.

    ATRIBUTOS DE TABELA

    Existem alguns atributos que podemos acrescentar em nossas tabelas, tanto na própria tag <table> quando nas demais tags dentro da tabela.

    AtributoOnde aplicarDescrição
    border <table> informar a largura da borda da tabela. Atualmente pouco utilizado, pois estilizamos esse atributo no CSS.
    summary <table> informações necessárias que são interpretadas pelos leitores de tela para deficientes visuais. O summary é lido pelo leitor de tela e o usuário que possui deficiência visual consegue identificar a finalidade da tabela.
    colspan <td> informar quantas colunas serão mescladas.
    rowspan <tr> informar quantas linhas serão mescladas.

    FINALIZANDO

    Existem mais Tags que podemos utilizar junto com as tabelas, mas serão assuntos de tutoriais futuros. Por enquanto, aprenda a construção básica.
    Se você for capaz de construir suas tabelas conforme esse tuturial, estará com 80% do conhecimento sobre tabelas em HTML.
    Parece algo complicado no início, mas depois de fazer algumas delas, você estará familiarizado e vai se tornar simples.

    Espero que vocês tenham gostado deste tutorial.
    Caso tenham alguma dúvida não deixem de perguntar e se gostaram, comente e ajudem a TWD a continuar trazendo novidades.

    Muito obrigado e até a próxima.

    Leia mais
  • HTML BÁSICO – PARTE 3 – LISTA E LINKS

    Lista e Links em HTML

    Olá pessoal, tudo joia?
    Hoje iremos falar sobre Listas e Links.
    É muito importante que vocês prestem bastante atenção neste tutorial.

    Conheça os outros artigos

    LISTAS

    As listas em HTML são utilizadas para dar destaque, linha por linha, passo por passo, sobre algum determinado assunto.
    Pense em uma lista de mercado, onde se destacam itens que devem ser lembrados.

    O HTML suporta 3 tipos de listas:

    • listas ordenadas;
    • não ordenadas;
    • e de definições.

    LISTAS NÃO ORDENADAS

    As listas não ordenadas são utilizadas para listar itens que não possuem ordem lógica.
    Por padrão recebem ao lado esquerdo de cada item um bullet (tipicamente pequenos círculos) que podem ser alterados conforme sua necessidade.
    São construídas pelas tags  e .

    LISTAS ORDENADAS

    Muito parecida com as listas não ordenadas, as listas ordenadas, como o nome já diz, são listas que apresentam ordenação, possuem uma sequência lógica.
    Por padrão cada item é numerado.
    São construídas pelas tags  e .

    LISTAS DE DEFINIÇÕES

    Não é lista de itens, mas de definições.
    Imagine que você escreveu a mesma lista de itens de mercado, mas ao invéz de apenas listar os itens, você descreveu detalhes de cada item.
    São construídas pelas tags ,  e .

    : Define o início de uma lista de definição.
    : Define o nome do item que receberá alguma definição.
    : Definição do item.

    Leia mais
  • HTML BÁSICO – PARTE 2 – TAGS INICIAIS

    Conhecendo novas tags do html

    Olá pessoal, boa tarde!
    Hoje iremos falar sobre algumas tags importantes do html.
    Espero que gostem!

    Conheça os outros artigos

    ATRIBUTOS

    Antes de falar sobre outras tags, devemos conhecer o que é ATRIBUTO.

    Atributos são propriedades adicionais que as tags possuem. Algumas tags possuem atributos específicos e alguns atributos são globais, podendo ser aplicados a qualquer tag.

    Atributos são escritos dentro da tag, seguidos por um sinal de igual e depois entre aspas são declaradas as informações do atributo.

     

     

    TÍTULOS H1, H2 … H6

    Em HTML, quando queremos indicar um título, devemos declará-lo com as tags <h1>, <h2>, <h3> até o <h6>, sendo o mais importante o <h1> e o <h6> de menor importância.

     

     

    Os mecanismos de busca (Google, Yahoo e Bind) utilizam essas tags como meio de identificação do seu Site, portanto, devemos levar em consideração a ordem e relevância.

    Geralmente utilizamos a tag <h1> para representar o título(logo) do site, pois será o primeiro elemento no qual os mecanismos de busca irão interpretar.
    O <h2> colocamos para a descrição do site. O <h3> torna-se o título dos artigos do site e assim por diante.

    Os navegadores especiais para acessibilidade também interpretam o conteúdo dessas tags de maneira a diferenciar seu conteúdo e facilitar a navegação do usuário pelo documento.

    TEXTO

    Conforme aprendemos na aula passada, a tag <p> é utilizada para apresentar texto em uma página.
    Quando queremos representar um texto longo, com diversos parágrafos, cada parágrafo deve ser iniciado com um novo <p>.

     

     

    ÊNFASE NO TEXTO

    Quando queremos dar ênfase em alguma palavra ou em algum texto, utilizamos as tags <strong> para deixar o texto em negrito e a tag <em> para deixar o texto em itálico. Existe também a tag <small>, que diminui o texto.

     

     

    CITAÇÃO

    Tem o propósito de fornecer informações sobre algo dito por alguém. Existem 2 tags, o <blockquote> e o <q>.

    <blockquote>: fornece a delimitação de um parágrafo citado que pode conter várias linhas. Esta tag destaca o parágrafo, deslocando-o um pouco para a direita (dependendo da direção do texto). O uso de blockquote como forma de indentar o texto foi definido como inadequado pela W3C em favorecimento ao uso de folhas de estilo.

    Blockquote ainda possui um atributo chamado cite. Cite serve para determinar a página fonte da citação, ou seja, de qual página da internet veio tal citação.

    ESTÁ GOSTANDO DESTE ARTIGO?

    Então não deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a crescer ainda mais.

     

     

     

    <q>: A tag Q tem a mesma finalidade que blockquote, mas a diferença é que ela apenas delimita uma pequena porção dentro do texto. Então, se blockquote serve para identificar um parágrafo inteiro que tenha sido citado, q serve apenas para identificar uma pequena frase.

    Existem uma curiosidade na tag <q> quanto aos browsers. O browser Internet Explorer, simplesmente, não modifica a formatação do texto. Já o Mozilla Firefox irá substituir as tags <q> por aspas (“).

     

     

    COMENTÁRIO

    Os comentários são utilizados para deixar o código compreensível ao programador. Eles não aparecem na tela, somente nó código fonte.
    Aula passada eu passei uma forma de comentar o código HTML. <!– –>
    Existe outra forma que eu utilizo muito e que poupa tempo.
    Essa forma é utilizada para comentar várias linhas de código que você não queira que seja visualizado pelo usuário.
    Você pode utilizar a própria abertura da tag para começar um comentário e finalizar utilizando o fechamento da mesma.
    Ex: <!–p>teste</p–>

     

     

    IMAGENS

    As imagens são declaradas pela tag <img> e pelos atributos src e alt. O atributo “src” indica o local da imagem e o “alt”, um texto alternativo para a imagem caso não possa ser visualizada ou carregada.

     

     

    Com a chegada do HTML5, foram introduzidas 2 novas tags para imagem <figure> e >figcaption>. O <figure> é inserida antes da tag <img>, define a imagem com a tag <img> e o <figcaption> permite adicionar uma legenda para a imagem.

     

     

    PRATICANDO

    Agora que vocês já conheceram novas tags, vamos praticar?

    • Crie uma nova pasta em sua área de trabalho com o nome do seu site
    • Importe uma imagem qualquer para dentro desta pasta
    • Crie o documento index.html com ó código abaixo e salve dentro da pasta
    • Após finalizado o documento, abra-o em algum navegador.

     

     

    Opa! Nesse código apareceram coisas novas. Serão parte do tema da próxima aula!.

    FINALIZANDO

    Bom galera, espero que vocês tenham aprendido e que tenham gostado dessa aula.
    Próxima aula iremos tratar de tags para criar: lista, links e tabela.

    Em caso de dúvidas não deixem de perguntar e caso tenham gostado da aula deixem seus comentários para ajudar a TWD a continuar com o trabalho de transmitir conhecimento.

    Muito obrigado e até a próxima.

    Leia mais