Pesquisar na Comunidade

Iai galerinha tudo blz? Hehe vamos aprender um pouco de CSS bom não vai ser muita coisa, mais e só o que eu tenho aqui sobre CSS pórem pode ajudar. Certo vamos lá como padrão PDF em 2 línguas, Português e Inglês serão 8 PDF somando 38MB [hide][Hidden Content]]

Favor fechar, já não tem mais utilidade.

Olá pessoal tudo bem, bem eu estou começando na área de PHP agora e estou tentando criar um formulário de contanto, porem sempre me deparo com o mesmo erro mas não consigo resolver eu criei o formulário, utilizei css para estilizar e agora estou configurando com php, mas meu formulário não vai de jeito nenhum, já revisei o código varias vezes e mesmo assim ele ainda diz que esta tendo um erro. estou deixando uma copia do formulário para vocês poder baixar e verificar, não sei oque esta dando de errado pfv me ajudem.. FORMULÁRIO EM HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Contato</title> <link rel="Stylesheet" type="text/css" href="css/contato.css"> </head> <body> <form name="formteste" action="receber.php" method="POST"> <h1>Contato</h1> <p class="nome"> <input type="text" name="nome" placeholder="Insira o seu nome" required="required"> </p> <p class="email" > <input type="email" name="email" placeholder="Insira um E-mail Valido" required="required"> </p> <p class="assunto"> <input type="text" name="assunto" placeholder="Insira o assunto" required="required"> </p> <p class="mensagem"> <textarea name="mensagem" placeholder="Insira uma mensagem" required="required"></textarea> </p> <p class="enviar"> <input type="submit" name="enviar" value="Enviar"> </p> </form> </body> </html> ESTILIZAÇÃO EM CSS body{ margin: 0; padding: 0; } form{ font-size: 16px; background: #CCC; max-width: 500px; margin: 0 auto; padding: 0 10px 10px 10px; } h1{ text-align: center; color: #333; } input, textarea{ width: 470px; padding: 10px; } .enviar input { background: #069; height: 40px; width: 150px; font-weight: bold; border-radius: 5px; border: 1px solid; color: #CCC; cursor: pointer; } .enviar input :hover{ background: #078; } textarea{ resize: none; width: 470px; height: 120px; line-height: 20px; } CONFIGURAÇÃO EM PHP <?php if(isset($_POST['email']) && !empty($_POST['email'])){ $nome = addslashes($_POST(['nome']); $email = addslashes($_POST(['email']); $assunto = addslashes($_POST(['assunto']); $mensagem = addslashes($_POST(['mensagem']); $to = "voucolocarmeuemailaqui"; $subject = "Atendimento - Consuta"; $body = "Nome: ".$nome. "\r\n". "Email: ".$email."\r\n". "Assunto: ".$assunto."\r\n". "Mensagem: ".$mensagem; $header = "From:voucolocarmeuemailaqui"."\r\n". "Reply-To:".$email."\r\n". "X=Mailer:PHP/".phpversion(); if(mail($to,$subject,$body,$header)){ echo("E-mail enviado com sucesso!"); }else{ echo("O Email não pode ser enviado"); } } ?> POR FAVOR ME AJUDEM FORMULARIO.rar

Primeiramente esse sistema não fui eu que construí, somente melhorei a estilização integrada dele, fica ao seu critério caso veja necessidade criar um css para o mesmo. Todos os créditos de programação ao marcos otílio. Link tutorial de configuração da guildmark pelo mesmo: Clique para ver Pastas dependentes do código (seu diretório)..guilds/imag_guilds Esse arquivo inclui as divs estilizadas conforme o tema que o mesmo criou [Aqui vai o código]: <style type="text/css"> <!-- body,td,th { color: #ffffff; font-family: Arial; } body { background-image: url(); } --> </style> <?php error_reporting(0); /* Logica Guild Marck: b030(00000+$guildid).bmp b030(00000+$guildid).bmp */ $guildid = $_POST['guildid']; $img = "./guilds/imag_guilds/b0".(3000000+$guildid).".bmp"; if (isset($_FILES['arquivo']['name'])) { $uploaddir = '.\\guilds/imag_guilds\\'; $arquivo = $uploaddir."b0".(3000000+$guildid).".bmp"; $dimensao = getimagesize($_FILES['arquivo']['tmp_name']); if($_FILES['arquivo']["type"] == "image/bmp") { if(($dimensao[0] <= 16) && ($dimensao[1] <= 12)) { if($_FILES['arquivo']["size"] <= 2000) { if (move_uploaded_file($_FILES['arquivo']['tmp_name'], $arquivo)) { copy($arquivo,$uploaddir."b0".(2000000+$guildid).".bmp"); copy($arquivo,$uploaddir."b0".(1000000+$guildid).".bmp"); echo "O arquivo foi enviado com sucesso.<br>"; $img = "imags_guilds/b0".(3000000+$guildid).".bmp"; } else { echo "[Error]: O arquivo não foi enviado.<br>"; } } else { echo "[Error]: Imagem muito pesada.<br>"; } } else { echo "[Error]: Imagem muito grande.<br>"; } } else { echo "[Error]: Formato de imagem invalida.<br>"; } } ?> <br> <form method="post" enctype="multipart/form-data"> <div style="width: 100%;"><font color="#CEB798"><b>A Imagem deve ser 16x12 formato BMP 24bits </b><br /></font></div> <div style="margin-top: 2.2%; position: relative; width: 100%;"> <div class="guildid"> <input name="guildid" style="padding: 12px; color:#CEB798; float: left; width: 100%; border: none; border-bottom: 1px solid black;" placeholder="Guild ID, digite /guildid" type="text" /> </div> <!-- CONTROLES --> <style> .bt-controls{ background-color: #CEB798; border : 1px solid #CEB798; color: white; } .bt-controls:hover{ background-color: #CEB798; border : 1px solid black; color: green; } </style> <div class="controls" style=""> <input class="bt-controls" style="border:none; margin-top: 2%; width: auto; float: left;" name="arquivo" type="file" /> <input class="bt-controls" style="margin-top: 2%; float: right; width: auto;" type="submit" value="Confirmar" /> </div> <!-- FIM CONTROLES --> </div> </form> <style type="text/css"> <!-- body,td,th { color: #ffffff; font-family: Arial; } body { background-image: url(); } --> </style> <?php error_reporting(0); /* Logica Guild Mark: b030(00000+$guildid).bmp b030(00000+$guildid).bmp */ $guildid = $_POST['guildid']; $img = "./guilds/imag_guilds/b0".(3000000+$guildid).".bmp"; if (isset($_FILES['arquivo']['name'])) { $uploaddir = '.\\guilds/imag_guilds\\'; $arquivo = $uploaddir."b0".(3000000+$guildid).".bmp"; $dimensao = getimagesize($_FILES['arquivo']['tmp_name']); if($_FILES['arquivo']["type"] == "image/bmp") { if(($dimensao[0] <= 16) && ($dimensao[1] <= 12)) { if($_FILES['arquivo']["size"] <= 2000) { if (move_uploaded_file($_FILES['arquivo']['tmp_name'], $arquivo)) { copy($arquivo,$uploaddir."b0".(2000000+$guildid).".bmp"); copy($arquivo,$uploaddir."b0".(1000000+$guildid).".bmp"); echo "O arquivo foi enviado com sucesso.<br>"; $img = "imags_guilds/b0".(3000000+$guildid).".bmp"; } else { echo "[Error]: O arquivo não foi enviado.<br>"; } } else { echo "[Error]: Imagem muito pesada.<br>"; } } else { echo "[Error]: Imagem muito grande.<br>"; } } else { echo "[Error]: Formato de imagem invalida.<br>"; } } ?> [Demonstração] [Desmonstração] Resultado **Eu não faria o PHP assim, entretanto não mexi nisso, funciona porém...

Bom vou explicar um pouco sobre o que é um Grid System e como usar o grid do materialize css O que é o Materialize? Materialize css é um framework css similar ao Bootstrap, surgiu através de um projeto desenvolvido pela Google, sua diferença com os outros frameworks do genero é que ele se baseia no Material Design para propor suas ferramentas o que o torna muito interessante e traz um aspecto limpo à página. O que é o Grid System? O sistema de grid é um controle de posicionamento de elementos da page que auxilia desenvolvedor web na criação de pages responsivas e como já dito no controle mais preciso dos elementos, essa ferramenta também está presente no bootstrap css, mas neste post vou estar direcionando minha explicação apenas para o materialize. Como usar o Grid System? [spoiler=Exemplo da inserção do código:] [Hidden Content] Bom basicamente o grid trabalha com um sistema de 12 colunas em 1 linha como no exemplo a seguir: este é um exemplo composto por 12 colunas em uma linha ou melhor dizendo 12 cols em 1 row definidas por meio do grid system [spoiler=O código pra essa composição é: ][Hidden Content] No exemplo acima criamos uma div com a classe "row" ela representa nossa linha e dentro da div "row" temos 12 divs representadas pela classe "col s1" cada col representa uma posição de coluna, a classe "s1" vai ser explicada mais adiante, temos a liberdade para escolher como vamos trabalhar com cada col, por exemplo podemos escolher trabalhar com apenas 2 colunas que ocupam 6 posições exemplo: [spoiler=O código que representa essa composição é:][Hidden Content] Mas podemos fazer coisas muito mais poderosas do que somente posicionar elementos pra um tipo de resolução, temos a oportunidade de trabalhar de maneira mais fácil com os conceitos responsivos utilizando as Screen Sizes A classe "s1" ou "s6" utilizada nada mais é do que um prefixo estipulado pelo framework para auxiliar no trabalho responsivo, cada prefixo tem sua utilidade por exemplo o ".m" vai trabalhar em específico com dispositivos de média resolução como kindles, tablets e por ai vai..., o ".s" vai trabalhar sobre dispositivos menores como celulares, galaxy, iphone etc... Finalizando Podemos impulsionar a qualidade da nossa produção utilizando sabiamente a ferramenta de grid, esse é meu primeiro post aqui na webcheats desde já peço desculpas por qualquer erro na produção dessa explicação, para aqueles que desejam se aprofundar ainda mais nessa ferramenta ou conhecer melhor o materialize, até mesmo aqueles que não entenderam bem minha explicação segue o link da documentação oficial nos créditos. [spoiler=Créditos][Hidden Content]

Bom, eu fiz esse vídeo só para testar meus conhecimentos em CSS ;-; Então espero que gostem Se gostou da um like :3

Em um momento mais avançado dos nossos projetos, poderemos enfrentar problemas com coisas que não tínhamos previsto; por exemplo, o espaçamento entre caracteres utilizado em determinado navegador pode fazer com que um texto que, pela nossa de�nição deveria aparecer em 4 linhas, apareça com 5, quebrando todo o nosso layout. Para evitar esse tipo de interferência, alguns desenvolvedores e empresas criaram alguns estilos que chamamos de CSS Reset. Eric Meyer Css Reset [spoiler=Eric Meyer Reset Css] /* [Hidden Content] v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } Yui3 Css Reset [spoiler=Yui3 Css Reset] /* YUI 3.18.1 (build f7e7bcb) Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. [Hidden Content] */ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

É um prazer! Meu Interesse aqui é de adquirir conhecimento tanto na área de programação front-end (onde tenho mais afinidade) e nas outras modalidades e em jogos (truques,macete e dicas de como ajudar a todos)!

Bem eu estava criando um pircing table para meu site, resultado é que gostei tanto que resolvi postar. <div class="pricing-table-title">[/b][/left] [b] [left] iniciante </div> <div class="pircing-table"> <div class="pricing-table-sub"> <i>promoção valida por tempo limitado</i> </div> <div class="price">R$</div><strong class="font-plano">75,00</strong><b>/Ano</b> <ul class="ul-index"> <li class="li-index">css</li> <li class="li-index">html</li> <li class="li-index">php</li> <li class="li-index">bootstrap</li> <li class="li-index">Java Script</li> <li class="li-index-no">Suporte 24h</li> </ul> <button type="submit" class="index-button" style="cursor: pointer;">Comprar Agora</button> <div class="pricing-table-sub"> * Valor para renovações, equivalente à mensalidade no primeiro ano mais adicioanal. Próxima renovação.<br> R$ 110,56/Ano. <br><br> *Nenhuma renovações é feita automaticamente. </div> </div> <style type="text/css">[/b][/left] [b] [left] * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { color: black; font-family: 'Open Sans',Arial,sans-serif; font-size: 13pt; } ul.ul-index { list-style-type: none; } a { color: #e95846; text-decoration: none; } li.li-index{ text-transform: uppercase; font-size: 9pt; margin: 15px 0 15px; font-weight: 700; text-shadow: 0 1px 1px rgba(0,0,0,0.4); user-select: none; } li.li-index-no{ text-transform: uppercase; font-size: 9pt; margin: 15px 0 15px; font-weight: 700; text-shadow: 0 1px 1px rgba(0,0,0,0.4); user-select: none; } li.li-index:before{ content: "✓"; color: #3fab91; display: inline-block; position: relative; right: 5px; font-size: 16px; } li.li-index-no:before{ content: "x"; color: red; display: inline-block; position: relative; right: 5px; font-size: 16px; } .pricing-table-title{ text-align: center; background-color: #eee; box-shadow: 0 0 1px rgba(0,0,0,0.4);/* define uma sombra em volta da minha caixa */ min-width: 200px;/* minimo da largura */ max-width: 350px;/* maximo da largura */ margin: 40px auto 0;/* centraliza minha caixa principal */ padding: 25px;/* expande minha caixa principal para 25 pixel's */ user-select: none; text-transform: uppercase; font-weight: 600; color: #02afaf; } .pricing-table-title:hover{ box-shadow: 0 0 5px #02afaf; } .pircing-table{ background-color: #eee; box-shadow: 0 0 .5px black; margin: 3px auto 0; padding: 25px; min-width: 200px; max-width: 350px; text-align: center; } .pircing-table:hover{ box-shadow: 0 0 4px rgba(0,0,0,16); } .pricing-table-sub{ text-transform: uppercase; font-size: 9px; opacity: .9; margin: 5px 0 5px; } .price{ position: absolute; padding: 37px 1px; display: flex; font-size: 20pt; line-height: 1; } .font-plano{ font-size: 72px; line-height: 100%; } .index-button{ margin: 10px; padding: 1.2em 4em; background: #02b3e4; min-width: 207px; border: none; border-radius: 4px; box-shadow: 12px 15px 20px rgba(0, 0, 0, 0.1); color: #fff; cursor: pointer; display: inline-block; font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 600; -webkit-font-smoothing: antialiased; letter-spacing: 0.165em; max-width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; text-transform: uppercase; transition: 0.2s box-shadow ease-in-out, 0.2s background-color ease-in-out, 0.2s border-color ease-in-out; white-space: nowrap; } .index-button:hover{ background: #148bb1; box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.1); } </style> Resultado

Olá pessoal esse é o meu primeira postagem aqui como membro Eu fiz uns projetinhos com source! E um deles tem vídeo com time lapse Oque contém? Contém um .html e .css para ser estaudo por fins não lucrativos Obs: Player do Netflix funciona para quem quer por a ideia em pratica para site de streamers de vídeo Download do pack: [HIDE-THANKS][Hidden Content]] Vídeo do time lapse do card ui twitter: [Hidden Content] Print do Player do Netflix: Função do player: Play/Pause Ajuda Próximo ep Voltar ao catalago Mutar/Desmutar Créditos: kaway404 Da um like para fortalecer :3

Eu tava aqui de boa, ai eu pensei pq não criar uma publicação na WC, ai eu fiz um arquivo em php de deixar like, sem nenhuma função, só a transição de quando você clica em curtir! Eu upei ele no github, quem curtiu deixa um like [Hidden Content]

Eu tava fazendo ele, cheguei até a parte do aplicativo do Music da Apple Tem a parte de ligar, colocar senha, abrir apps e tal Depois vou fazer sistema de alterar foto, baixar apps e ouvir musica e fazer pesquisa no google chrome kk [Hidden Content] Se gostou da um like e comenta :)

Layout Fluído ou Responsivo Muitas pessoas confundem os layout fluídos com os responsivos, pensam que tudo que é responsivo apenas estica e diminui, mas não é bem assim. Layouts fluídos são bem diferentes de responsivos, pois o Fluído (como o nome diz) flui com o tamanho da tela do usuário, enquanto o Responsivo responde ao tamanho. Layout Responsivos Os layouts responsivos são aqueles que precisam ter uma atenção maior da área de UX, quando é analisada toda a usabilidade do site, contemplando todos os dispositivos e se possível partindo do princípio “mobile first”, onde toda a arquitetura começa sendo pensada a partir do menor dispositivo utilizável seguindo em ordem crescente e adequando as informações. O layout não segue a mesma estrutura em todos os dispositivos, muitos trocam as informações de lugar para melhor visualização, as vezes escondem e mostram a partir de um click, mudam os tamanhos das fontes, ícones e qualquer outro elemento. Para esse tipo de desenvolvimento são utilizadas as media queries css e algumas libs como bootstrap, groundwork e o LazyLoad. A seguir você confere 3 estados diferentes para layout e sua respectiva reação com a página. Monitores com resolução de 1024px de largura ou superior e Internet Explorer 8 e inferior. Foi declarado uma largura absoluta de 960 px para o corpo do site. Largura igual ou inferir a 900px. Aqui declaramos que existem apenas larguras relativas de 100%. Largura igual ou inferir a 400px. Ocultamos a sidebar do lado esquerdo (apenas para ilustrar o exemplo). Neste exemplo podemos ver claramente como o efeito cascata do CSS funciona corretamente com o Media Queries, desta forma o CSS que fizemos como padrão é mantido normalmente por todo o documento, sendo alterado apenas quando declaramos alguma modificação com o Media Queries. Note também que o css declarado para a largura de janela de 900px é mantido para o de 400px. Layouts Fluídos Os layouts fluídos são aqueles que acompanham o tamanho da tela, apenas aumentando e diminuindo, não trocando estrutura e não pensando muito na usabilidade, vamos pensar em acessar um site em uma tv de 50″ e acessar o mesmo site em um celular onde esse site é visto da mesma forma pelos 2 dispositivos, é claro que ficará horrível em um dos casos se não nos dois, para construir esse tipo de layout não se pensa muito em “px” e sim em “%”, para que o elemento se estique de acordo com o pai tendo assim a sua “fluidez”. Aqui tem um exemplo simples de como ele funciona: 960.gs. Para ilustra melhor o que estamos dizendo, a imagem a seguir exemplifica um layout construído em “%”. Veja que caso o usuário tenha a tela muito grande o texto ficará praticamente em apenas uma linha e quando diminuímos a tela o texto fica totalmente espremido na sidebar. Layouts Fluídos Híbridos Temos também os layouts fluídos híbridos onde seguem o mesmo padrão dos fluídos, porém com uma limitação de largura, nesse caso utilizamos o “max-width” e “min-width” assim conseguimos ter certo controle do layout. Para demonstrar como funciona o Fluído Híbrido, é aplicado um max-width de 960px e min-width de 600px no exemplo anterior. Para conferir na prática a diferença entre cada layout, na lista abaixo abaixo você pode acessar um exemplo de página para cada tipo layout. Apenas altere o zoom da página para testemunhar o efeito de cada layout em diferentes resoluções de tela. Página Responsiva; Página com layout Fluído; Página com layout Fluído Híbrido. Fonte: [Hidden Content]

Não estou conseguindo sobrer um logo sobre um meno q criei do site, e não estou conseguindo adicionar um video em cima de uma imagem no site. Alguém poderia me dar essa força? Segue as img: [Hidden Content] eu queria por esse video em cima dessa imagem de fundo. sobre o logo : [Hidden Content] eu queria q fosse assim : [Hidden Content] o meu css até o momento : @import url([Hidden Content],700,300|Lato:400,300,700); @import url('[Hidden Content],400i,700,700i'); h1 { text-shadow: 2px 2px #ff0000; } h2 { text-shadow: 2px 2px #ffce0b; } body { margin:0; padding: 0; background: #eeeeee; } a:link { text-decoration: none; } .wrap { margin: auto; width: 960px; } .header { width: 100%; background:#383838; } .header .menutop { display: inline-block; margin:0; padding-bottom: 20px; padding-top: 20px; } .header .menu { overflow:hidden; background: #202020; } .header .menu ul { margin:0; padding:0; list-style: none; } .header .menu ul li { float: right; display: inline-block; margin:0 23px 0 0; } .header .menu ul li a { display: block; padding: 32px 0; font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 700; color:#eeeeee; } .header .menu ul li a:hover { text-decoration: underline; color: #b0fafd; } .slide{ margin:0; } .slide .fundo1 { margin:0; width: 1583px; height: 500px; display: block; background: url(../images/fundo1.png); } .footer { overflow: hidden; margin: 0px 0 0 0; font-family: Arial; font-size: 13px; color: #ababab; text-align: center; background: #484846; padding-bottom: 5px; padding-top: 5px; } .row { margin: 0 -30px 0 0; height: 500px; font-family: Arial; font-size: 20px; } .row h1{ color: #53a062; font-family: Forte; font-size: 48px; } .row h2{ color: #c2945b; font-family: 'Cuprum', sans-serif; font-weight: 700; font-size: 48px; } .raw { margin: 0 -30px 0 0; height: 500px; font-family: Arial; font-size: 20px; } .raw { margin:0; width: 1583px; height: 500px; display: block; background: url(../images/fundo2.png); } .raw h1{ color: #b7d0ff; text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit; font-family: 'Cuprum', sans-serif; font-weight: 700; font-size: 38px; text-align: center; }

Bom eu comecei esse projeto hoje, prometo trazer ele pronto até o fim do ano! Com sistemas de login/cadastro/change profile/watch/Continuar assistindo/fila Projeto no github : [Hidden Content] Imagem do ilustrando o layout: A cada alteração vou colocando logs aqui e no github! Obrigado pessoal

Olá tudo bem? espero que sim, pessoal estou a procura de pessoas capacitadas em Delphi, Python, css e html. por tanto se alguém conhecer ou for capacitado em algumas ou todas essas áreas por favor, entre em contato pois tenho uma proposta que pode ou não agradar muito, obrigado.

Olá pessoal, segue abaixo um link com video-aula e materiais prontos para a criação de um site completo. [Hidden Content]

Introdução O Módulo das CSS3 denominado “Selectors Level 3” atingiu, em 29 de setembro de 2011, o status de Recomendação do W3C. Essa Recomendação descreve os seletores já existentes nas CSS1 e CSS2 e cria novos seletores para as CSS3. Seletores são “padrões” ou “modelos” que casam com os elementos de uma árvore do documento e portanto podem ser usados para selecionar os nós de um documento XML. Seletores foram otimizados para serem usados com as linguagens de marcação HTML e XML. CSS (Cascading Style Sheets) é uma linguagem para descrever a renderização de documentos HTML e XML em uma tela, em papel, em sintetizadores de voz, etc. As CSS usam seletores para atrelar propriedades de estilização aos elementos de um documento. Criei versões HTML, PNG e SVG desta tabela otimizadas para impressão. Que tal imprimir a tabela e tê-la na sua mesa de trabalho para uma referência e consulta rápida? — versão HTML para impressão desta tabela (link abre em nova janela) — versão PNG para impressão desta tabela (link abre em nova janela) — versão SVG com personalização de cores para impressão desta tabela (link abre em nova janela). Vamos estudar a seguir cada um dos seletores constantes da tabela. Incorporamos nesta página, para cada um dos seletores estudados, com uso de IFRAME para o JSFiddle, exemplos que demonstram o efeito de estilização. Você poderá complementar seus estudos clicando o link existente no canto superior direito do IFRAME e editando os códigos dos exemplos de modo interativo. Seletor universal ♦ Casa com qualquer elementoOs conteúdos de cada um dos elementos da marcação, ao serem renderizados em um navegador, são estilizados com regras CSS mínimas (por exemplo: cor e tipo de fonte, margens, paddings, etc.) que fazem parte de uma folha de estilos nativa do navegador e que na ordem de cascata tem a prioridade mais baixa, ou seja, qualquer declaração de estilo do autor ou usuário sobrescreve a folha de estilos nativa. Não existe uma padronização para essa folha de estilos e cada navegador implementa sua própria folha de estilos nativa. Como consequência ocorrem inconsistências de renderização, em relação a estilização básica, entre navegadores. Destas inconsistências a que produz maiores transtornos é a não padronização dos valores para as propriedades margin e padding. A principal utilização do seletor universal é “zerar” essas propriedades para todos os elementos da marcação. Como consequência o autor terá que definir explicitamente para cada elemento, na sua folha de estilos, aqueles valores. * { margin: 0; padding: 0; } O seletor universal quando declarado de forma contextual pode produzir resultados interessantes. Observe os exemplos a seguir: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor tipo ♦ Casa com elementos de um determinado tipoSintaxe: E Usado para estilizar os elementos da marcação que são de um mesmo tipo; por exemplo: elemento do tipo p(parágrafo), do tipo div, do tipo ol, do tipo strong, e assim por diante. Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletores de atributo ♦ Casam com elementos cujo atributo satisfaçam determinadas condições presença de um atributo ♦ Casa com elementos que contenham um determinado atributoSintaxe: E["foo"] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) valor de um atributo ♦ Casa com elementos com determinado valor de atributoSintaxe: E[foo=bar] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) valor de um atributo pertence a uma lista de valores separados por espaço ♦ Casa com elementos cujo valor de atributo pertença a uma lista de valores separados por espaçoSintaxe: E[foo~=bar] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) valor de um atributo começa com string ♦ Casa com elementos cujo valor de atributo começa com uma determinada stringSintaxe: E[foo^=bar] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) valor de um atributo termina com string ♦ Casa com elementos cujo valor de atributo termina com uma determinada stringSintaxe: E[foo$=bar] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletores do tipo pseudo-classe elemento raiz ♦ Casa com o elemento raiz do documentoSintaxe: :root Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Nesse exemplo a cor dos elementos é herdada do elemento raiz. enésimo filho ♦ Casa com o elemento que é o enésimo filho do seu elemento paiSintaxe: E:nth-child(n) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) enésimo filho de trás para frente ♦ Casa com o elemento que é o enésimo filho do seu elemento pai, contado de trás para frente na marcaçãoSintaxe: E:nth-last-child(n) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) enésimo irmão do seu tipo ♦ Casa com o elemento que é o enésimo irmão (filhos do mesmo elemento pai) do seu tipoSintaxe: E:nth-of-type(n) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) enésimo irmão do seu tipo de trás para frente ♦ Casa com o elemento que é o enésimo irmão (filhos do mesmo elemento pai) do seu tipo, contado de trás para frente na marcaçãoSintaxe: E:nth-last-of-type(n) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) primeiro filho ♦ Casa com o elemento que é o primeiro filho do seu elemento paiSintaxe: E:first-child Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) último filho ♦ Casa com o elemento que é o último filho do seu elemento paiSintaxe: E:last-child Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) primeiro do mesmo tipo ♦ Casa com o elemento que é o primeiro irmão (filhos do mesmo elemento pai) do mesmo tipoSintaxe: E:first-of-type Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) último do mesmo tipo ♦ Casa com o elemento que é o último irmão (filhos do mesmo elemento pai) do mesmo tipoSintaxe: E:last-of-type Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) único filho ♦ Casa com o elemento que é o único filho do seu elemento paiSintaxe: E:eek:nly-child Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) único irmão ♦ Casa com o elemento que é o único irmão (filhos do mesmo elemento pai) do mesmo tipoSintaxe: E:eek:nly-of-type Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) elemento vazio ♦ Casa com o elemento que não tem filhos (inclusive filhos do tipo nós de texto)Sintaxe: E:empty Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) link ♦ Casa com o elemento que é um link não visitadoSintaxe: a:link Exemplo: <a href="[Hidden Content] do Maujor<</a> a:link { color: red; text-decoration: none; } link visitado ♦ Casa com o elemento que é um link que já foi visitadoSintaxe: a:visited Exemplo: <a href="[Hidden Content] do Maujor<</a> a:visited { color: orange; text-decoration: underline; } ativo ♦ Casa com o elemento que por ação do usuário foi tornado ativoSintaxe: a:active Exemplo: <a href="[Hidden Content] do Maujor<</a> :active { outline: 1px solid pink; } sobre ♦ Casa com o elemento que, por ação do usuário, teve um dispositivo apontador colocado sobre eleSintaxe: a:hover Exemplo: <a href="[Hidden Content] do Maujor<</a> a:hover { color: green; background: black; } foco ♦ Casa com o elemento que por ação do usuário a ele foi dado o focoSintaxe: E:focus Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Não existe uma padronização relacionando os elementos HTML que podem receber foco. Mas, em geral são eles: Elemento a Elemento area com atributo href Elemento input Elemento select Elemento textarea Elemento button (não desabilitado) Elemento iframe Elemento a Qualquer elemento com o atributo tabindex alvo ♦ Casa com o elemento que é o alvo do fragmento identificador de um linkSintaxe: E:target Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) idioma ♦ Casa com o elemento que foi marcado em determinado idiomaSintaxe: E:lang Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) habilitado ou desabilitado ♦ Casa com o elemento da interface de usuário que seja habilitado ou desabilitadoSintaxe: E:enabled e E:disabled Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) marcado ♦ Casa com o elemento da interface de usuário que tenha sido marcadoSintaxe: E:checked Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) primeira linha ♦ Casa com a primeira linha do texto formatado de um elementoSintaxe: E:first-line — até as CSS2.1 E::first-line — modificada peals CSS3 As CSS3 modificaram a sintaxe para esse seletor. Os navegadores antigos não suportam a nova sintaxe e o modernos suportam as duas sintaxes. Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Notas: 1 – Esse seletor aplica-se somente a elementos nível de bloco 2 – Somente às propriedades listadas a seguir podem ser estilizadas por esse seletor propriedades para fontes propriedades para cores propriedades para background word-spacing letter-spacing text-decoration vertical-align text-transform text-shadow line-height clear primeira letra ♦ Casa com a primeira letra do texto formatado de um elementoSintaxe: E:first-letter — até as CSS2.1 E::first-letter — modificada pelas CSS3 As CSS3 modificaram a sintaxe para esse seletor. Os navegadores antigos não suportam a nova sintaxe e o modernos suportam as duas sintaxes. Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Notas: 1 – Esse seletor aplica-se somente a elementos nível de bloco 2 – Somente às propriedades listadas a seguir podem ser estilizadas por esse seletor propriedades para fontes propriedades para cores propriedades para background propriedades para margens propriedades para padding propriedades para bordas text-decoration vertical-align (para elementos não flutuados) text-transform text-shadow line-height float clear conteúdo antes ♦ Casa com o conteúdo gerado antes de um elementoSintaxe: E::before Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) conteúdo depois ♦ Casa com o conteúdo gerado depois de um elementoSintaxe: E:after Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) negação ♦ Casa com o elemento que não casa com determinado seletor simples seletorSintaxe: E:not(seletor) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor classe ♦ Casa com o elemento que tem determinado valor para o atributo classeSintaxe: E.foo Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor ID ♦ Casa com o elemento que tem determinado valor para o atributo idSintaxe: E#foo Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor descendente ♦ Casa com o elemento que descende de determinado elementoSintaxe: E F Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor filho ♦ Casa com o elemento filho de determinado elementoSintaxe: E>F Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor que imediatamente sucede ♦ Casa com o elemento irmão que imediatamente segue-se a determinado elementoSintaxe: E+F Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor que sucede ♦ Casa com o elemento irmão que segue-se a determinado elementoSintaxe: E~F Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) O IE outra vez! :( Os seletores CSS3 são suportados pelos navegadores modernos. Para servir os seletores das CSS3 aos navegadores Internet Explorer 6 até 8 use uma pequena biblioteca JavaScript (4K) chamada Selectivizr. Basta adicionar o seguinte código na seção head do documento: <script type="text/javascript" src="[JS library]"></script> <!--[if (gte IE 6)&(lte IE 8)]> [Hidden Content] <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> <![endif]--> [spoiler=Fonte:] [Hidden Content]

Vou divulgar um layout em css do Whats App que eu fiz. Espero que gostem :3 Print: Download: [Hidden Content] App css.rar Obs: O css tá dentro do index.html Demo : [Hidden Content] Github : [Hidden Content] Curti a postagem, não cai o dedo

Facebook profile css Não está completado Print : Download: [Hidden Content] Curti ai :3

Olá pessoal , vou ensinar a como fazer uma div centralizar e ter um tanto de div por linha! Você cria uma <section> Dentro dessa section você poe as div e a img e um p E agora vamos pro css [/center] <section> <div> <img src="[Hidden Content]; <p>Não é possível esperar a criatividade chegar. Por isso, este infográfico vai te ajudar a conceber ideias com mais naturalidade.</p> </div> <div> <img src="[Hidden Content]; </div> <div> <img src="[Hidden Content]; <p>Não é possível esperar a criatividade chegar. Por isso, este infográfico vai te ajudar a conceber ideias com mais naturalidade.</p> </div> <div> <img src="[Hidden Content]; </div> <div> <img src="[Hidden Content]; </div> <div> <img src="[Hidden Content]; <p>Não é possível esperar a criatividade chegar. Por isso, este infográfico vai te ajudar a conceber ideias com mais naturalidade.</p> </div> <div> <img src="[Hidden Content]; <p>Não é possível esperar a criatividade chegar. Por isso, este infográfico vai te ajudar a conceber ideias com mais naturalidade.</p> </div> <div> <img src="[Hidden Content]; </div> <div> <img src="[Hidden Content]; <p>Não é possível esperar a criatividade chegar. Por isso, este infográfico vai te ajudar a conceber ideias com mais naturalidade.</p> </div> <div> <img src="[Hidden Content]; </div> <div> <img src="[Hidden Content]; </div> <div> <img src="[Hidden Content]; <p>Não é possível esperar a criatividade chegar. Por isso, este infográfico vai te ajudar a conceber ideias com mais naturalidade.</p> </div> </section> [center] <style>[/center] body { background: #F6F9FC; margin: 20px; } section { max-width: 600px; margin: 0 auto; column-count: 3; } @media (max-width: 400px) { section { column-count: 2; } } div img { display: block; max-width: 100%; } div { background: white; margin-bottom: 20px; border-radius: 4px; box-shadow: 0 2px 6px rgba(50,50,90,.1); break-inside: avoid-column; overflow: hidden; } div p { padding: 10px; font-family: sans-serif; color: #6B7C93; font-size: .875em; line-height: 1.4em; } [center]</style> Exemplo: comumn-count = quantidade de div por linha margin:0 auto = centralizar no meio O tuturial não é totalmente meu! Mas é apenas para o entendimento da nova propriedade de CSS Agradeça por favor :3

Bom é bem fácil! Primeiramente você tem que criar uma div mãe e uma div filho que vai ficar centralizada,por exemplo: <div class="mae"> <div class="filho"> </div> </div> Agora vamos para o style <style> .mae{ display: flex; align-items: center; justify-content: center; } .filho{ width: 50%; height:50%; position:relative; background:red; } </style> Agora vou explicar oq aconteceu: A div mãe vai alinhar tudo que tem dentro dela, que é o caso da div filho! é bem simples e prático.

[Hidden Content] Valeu pessoal

Preciso de ajuda com esse infortúnio aqui, alguém sabe como funciona esse tipo de otimização ?

Olá, Eu tenho uma página de login e área restrita em HTML e PHP. Estou tentando colocar uma imagem com CSS no topo-centro da tela mas não estou conseguindo. A imagem está ficando na esquerda da tela e nem se meche conforme eu atualizo o CSS. Alguém sabe o porquê? Estou usando CSS inline. Código: <html> <head> <style> logo_position { position: absolute; left: 30px; top: 30px; } </style> </head> <body> <?php session_start(); // Inicia sessão echo "<img id='logo_position' src='images/Logo.png'><br><br><br>"; echo "Bem vindo(a)! <strong>".$_SESSION['nome']." ".$_SESSION['sobrenome']."</strong> <br>"; echo "<br><a href=\"logout.php\"> Sair </a>"; ?> </body> </html> Estou tentando resolver isto. Se alguém souber qual o problema eu agradeço. Obrigado.