Jump to content

Pesquise na Comunidade

Mostrando resultados para tags 'css'.

  • Pesquisar por Tags

    Digite as tags separadas por vírgulas.
  • Pesquisa por Autor(a)

Tipo de Conteúdo


Fóruns

  • Antes de tudo...
    • O nosso fórum é para vocês devs e software houses!
  • Geral
    • Desenvolvimento de Software
    • Reviews de Solução
    • Troca de Conhecimentos Gerais
    • Classificados
  • Negócios
    • Admistrativo/Financeiro
    • Tecnologia
    • Tudo sobre Marketing
    • Gestão
    • Gestão de Pessoas
    • LGPD
    • Customer Success: Foco no cliente
  • Comunidade DFe
    • Café com o Contador
    • Notas Técnicas - Café Expresso
    • Tudo sobre DFe
    • Cálculo de impostos (ICMS, IPI, PIS/COFINS, IRPJ)
    • Comércio Exterior
  • Linguagens de Programação
    • Dúvidas de Desenvolvimento
    • C#
    • C++
    • Delphi
    • HTML & CSS
    • Java
    • JavaScript
    • PHP
    • Python
    • SQL
    • Outras Linguagens
  • Startups
    • Mentoria
    • Apresente sua Startup
    • Dúvidas
  • Produtos
    • PlugBank
    • Suíte de Componentes
    • PlugDash
    • PlugNotas
    • TecnoSign
    • Manager SaaS
    • TecnoPay
  • Off Topic
    • Blog da Casa do Desenvolvedor
    • Blog da TecnoSpeed
    • Orgulho de ser Nerd/Geek
  • Cursos
    • TecnoSpeed Academy
    • Curso Básico para Devs
  • Eventos
    • TecnoUpdate
    • Eventos de Tecnologia 2022
    • Webinars/Lives
  • Monitor SEFAZ
    • NF-e
    • NFC-e
  • Rejeições
  • Regras Tributárias
  • Trampos em TI | Home Office's Vagas
  • Clube dos AGR's's Discussões
  • Clube dos AGR's's Fale com o Marketing
  • Clube dos AGR's's Dicas do CS
  • Clube dos AGR's's Capacitação em Vendas
  • Clube dos AGR's's Materiais CHS
  • Clube dos AGR's's Materiais Autêntica
  • Clube dos AGR's's Conteúdos TecnoSpeed Certificados
  • Parceiros - Canal de Vendas's Segmentos
  • Parceiros - Canal de Vendas's Dúvidas
  • Mentalidade Ágil's Tópicos
  • Computação Feitep's Geral
  • TIC Performance 2021 - SEBRAE's Trilha dos Workshops 2021
  • TIC Performance 2021 - SEBRAE's Materiais de apoio
  • TIC Performance 2021 - SEBRAE's Aula Gestão Financeira para Software Houses
  • TIC Performance 2021 - SEBRAE's Dúvidas
  • TecnoUpdate 2021's Novidades
  • TecnoUpdate 2021's Conteúdos
  • TecnoUpdate 2021's Dúvidas
  • Desafio Casa do Dev - NodeJS (2021)'s Comece aqui
  • Desafio Casa do Dev - NodeJS (2021)'s Dúvidas
  • Desafio Casa do Dev - NodeJS (2021)'s Cursos - Gratuitos
  • Desafio Casa do Dev - NodeJS (2021)'s O Desafio
  • PROTHEUS TOTVS's Release 33
  • Univale - Ivaiporã's Notícias

Blogs

  • Gestão Empresarial
  • Gestão de Pessoas
  • Empregabilidade

Product Groups

Não há resultados para exibir.


Encontre resultados em...

Encontre resultados que contenham...


Data de Criação

  • Início

    Fim


Última Atualização

  • Início

    Fim


Filter by number of...

Ingressou

  • Início

    Fim


Grupo


Ciente das Políticas de Privacidade


Declaração de Ciência e Autenticidade e de Veracidade


Ciente dos Termos de Serviços e das Regras do Hub


Sobre


Você é estudante?


Qual sua área?


Outro? Por favor, especifique.


Como você conheceu o nosso fórum?


Outro? Por favor, especifique.


Qual seu nível de senioridade?

Encontrado 6 resultados

  1. estou responsavel por fazer banners animados no site em que faço estágio mais não estou sabendo como fazer download em vídeo desses banners eles são feitos em html, css e javascrip
  2. richard silva

    ME AJUDE!

    você pode me dizer o porque esta dando erro o Select?
  3. html Salvar CPF Nome Data de Nascimento Idade É maior de Idade Vaga javascript class Pessoas { salvar(){ let pessoas = this.FuncaoPrincipal(); if(this.ValidaCampos(pessoas)) { this.adicionar(pessoas) } this.ListaTabela(); } FuncaoPrincipal() { // função pra criar o json let pessoas = {} pessoas.id = this.id; pessoas.CPF = document.getElementById('CPF').value; pessoas.nome = document.getElementById('nome').value; pessoas.Sobrenome = document.getElementById('Sobrenome').value; pessoas.DataDeNascimento = document.getElementById('data').value; pessoas.Idade = document.getElementById('idade').value; pessoas.ÉMaiorDeIdade = document.getElementById('exampleRadios1').value; pessoas.EMaiorDeIdade = document.getElementById('exampleRadios2').value; pessoas.Vaga = document.getElementById('vaga').value; return pessoas; } constructor(){ this.id = 1; this.arrayPessoas = []; } adicionar(pessoas) { //função que pega o array de pessoas this.arrayPessoas.push(pessoas); this.id++; } ValidaCampos(pessoas){ // função que da uma olhada se os campos estão corretos ai da um alerta let msg = ''; if(pessoas.nome == '') { msg += '- Informe seu nome \n'; } if(pessoas.CPF == '') { msg += '- Informe seu CPF \n'; } if(pessoas.Sobrenome == '') { msg += '- Informe seu Sobrenome \n'; } if(pessoas.DataDeNascimento == '') { msg += '- Informe sua Data de Nascimento \n'; } if(pessoas.Idade == '') { msg += '- Informe sua Idade \n'; } if(pessoas.ÉMaiorDeIdade == '') { msg += '- Informe se você é maior de Idade ou não \n'; } if(pessoas.EMaiorDeIdade == '') { msg += '- Informe se você é maior de Idade ou não \n'; } if(pessoas.Vaga == '') { msg += '- Informe sua Vaga desejada \n'; } if(msg != '') { alert(msg); return false } return true; } ListaTabela() { let tbody = document.getElementById('tbody'); tbody.innerText = ''; for (let i = 0; i aplicação.rar
  4. html CPF * Tudo certo! Vaga Estágio em TiHelp DeskDesenvolvedor Front-EndDesenvolvedor Back-EndDesenvolvedor Full Stack Salvar javascript class Pessoas { salvar(){ let pessoas = this.FuncaoPrincipal(); if(this.ValidaCampos(pessoas)) { this.adicionar(pessoas) } this.ListaTabela(); } FuncaoPrincipal() { // função pra criar o json let pessoas = {} pessoas.id = this.id; pessoas.CPF = document.getElementById('CPF').value; pessoas.nome = document.getElementById('nome').value; pessoas.Sobrenome = document.getElementById('Sobrenome').value; pessoas.DataDeNascimento = document.getElementById('data').value; pessoas.Idade = document.getElementById('idade').value; pessoas.ÉMaiorDeIdade = document.getElementById('exampleRadios1').value; pessoas.EMaiorDeIdade = document.getElementById('exampleRadios2').value; pessoas.Vaga = document.getElementById('vaga').value; return pessoas; } constructor(){ this.id = 1; this.arrayPessoas = []; } adicionar(pessoas) { //função que pega o array de pessoas this.arrayPessoas.push(pessoas); this.id++; } ValidaCampos(pessoas){ // função que da uma olhada se os campos estão corretos ai da um alerta let msg = ''; if(pessoas.nome == '') { msg += '- Informe seu nome \n'; } if(pessoas.CPF == '') { msg += '- Informe seu CPF \n'; } if(pessoas.Sobrenome == '') { msg += '- Informe seu Sobrenome \n'; } if(pessoas.DataDeNascimento == '') { msg += '- Informe sua Data de Nascimento \n'; } if(pessoas.Idade == '') { msg += '- Informe sua Idade \n'; } if(pessoas.ÉMaiorDeIdade == '') { msg += '- Informe se você é maior de Idade ou não \n'; } if(pessoas.EMaiorDeIdade == '') { msg += '- Informe se você é maior de Idade ou não \n'; } if(pessoas.Vaga == '') { msg += '- Informe sua Vaga desejada \n'; } if(msg != '') { alert(msg); return false } return true; } ListaTabela() { let tbody = document.getElementById('tbody'); tbody.innerText = ''; for (let i = 0; i aplicação.rar
  5. o problema é o seguinte, eu estava treinando meu primeiro projeto quando eu me deparo com um erro no código onde eu tento utilizar este: .redes-sociais ul li{ text-indent: -99999px; width: 20%; } ul{ list-style: none; float: right; } ul li{ display: inline; } .redes-sociais{ width: 20%; } e os ícones das redes sociais não alinham como desejado obs, o resultado deveria ser esses ícones do linkedin alinhas com a logo e um pouco espaçado entre eles
  6. Frameworks CSS Durante o desenvolvimento de aplicações web, independente do framework ou biblioteca utilizado, a estilização é, para muitos, uma das etapas mais trabalhosas e complicadas de se fazer, devido ao famoso CSS, que é amado por alguns e odiado por outros. Gostando ou não de escrever CSS, a verdade é que é necessário investir um tempo considerável do desenvolvimento a fim de obter o resultado desejado para o visual da aplicação. Com esse problema em mente, diversos desenvolvedores e designers construíram diversas ferramentas e frameworks para auxiliar nesse processo como, por exemplo, o Bootstrap, que é (provavelmente) o mais conhecido e utilizado de todos. A maioria desses frameworks funcionam por meio das classes HTML e realizam a estilização do elemento em questão de acordo com a classe inserida. A maior desvantagem desse tipo de framework é que grande parte deles são, na realidade, uma coleção de componentes prontos que mudam a estilização completa de um elemento com apenas uma classe e, muitas vezes, não possuem simples maneiras de customizá-lo diretamente, o que faz com que os desenvolvedores ainda tenham que escrever um código CSS adicional caso queiram mudar parte do design de um componente e torná-lo diferente do padrão. Há quem goste dessa abordagem, contudo, eu gostaria de mostrar uma outra abordagem de frameworks CSS, denominada “utility-first”, que, na prática utilizam classes para estilizar propriedades específicas de um elemento e não mudam o estilo dele por inteiro de uma única vez. Essa abordagem é ótima para quem não quer perder a liberdade de estilizar cada aspecto de um elemento individualmente, e também não deseja ter uma interface semelhante a várias outras, como acontece na maioria das interfaces que usam Bootstrap, por exemplo. E dentre os frameworks que utilizam essa abordagem, gostaria de destacar um deles em específico: o Tailwind CSS. Tailwind CSS O Tailwind CSS é um framework CSS utility-first e mobile-first que vem se destacando por ser simples, leve, responsivo, amplamente configurável e extremamente fácil de usar até para quem não domina CSS. Atualmente ele está disponível para diversos frameworks e bibliotecas como: React, Vue.js, Next.js, Nuxt.js, Vite, Laravel, Gatsby, e até para projetos com JavaScript puro, e seu processo de instalação é bem simples. Uma vez instalado, basta escrever as classes correspondentes às propriedades CSS desejadas no “class” (ou “className”, no React) do elemento em questão, seguindo as classes da documentação oficial, e o estilo será aplicado a ele instantaneamente. Outra vantagem é que o Tailwind CSS realiza o “purge” de classes, ou seja, classes não utilizadas não são incluídas no build da aplicação, reduzindo o tamanho dos arquivos finais e melhorando a performance. É possível testar o Tailwind CSS por meio do link: https://play.tailwindcss.com/ A seguir seguem alguns exemplos práticos da utilização do Tailwind CSS em comparação com CSS puro. 1 - Flexbox: HTML e CSS puro <div class="element"> ... </div> .element { display: flex; flex-direction: column; align-items: center; justify-content: center; } Utilizando Tailwind CSS <div class="flex flex-col items-center justify-center"> ... </div> 2 - Grid, quebra de linha e text-overflow: HTML e CSS puro <div class="container"> <div class="first"> ... </div> <div class="second"> ... </div> </div> .container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .first { grid-column: span 3 / span 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .second { grid-column: span 1 / span 1; } Utilizando Tailwind CSS <div class="grid grid-cols-4"> <div class="col-span-3 truncate"> ... </div> <div class="col-span-1"> ... </div> </div> 3 - Responsividade, cores, padding e border-radius: HTML e CSS puro <div class="element"> ... </div> .element { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 1rem; background-color: #2563eb; color: #4b5563; border-radius: 0.5rem; @media (min-width: 768px) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } } Utilizando Tailwind CSS <div class=" w-full flex flex-col items-center justify-center gap-8 p-4 bg-blue-600 text-gray-600 rounded-lg md:grid md:grid-cols-4 " > ... </div> Conclusão: Por fim, espero que tenha sido possível perceber as diversas vantagens na utilização do Tailwind CSS em seu projeto front-end e que, embora não seja perfeito, ele pode proporcionar um grande aumento na produtividade de desenvolvedores front-end, reduzindo o tempo gasto em estilização, especialmente para aqueles que são muito fãs de escrever CSS. Existem também diversas outras ferramentas para melhorar a forma de lidar com estilização, como Styled Components, Sass, dentre outros. Qual o seu favorito? O que achou do Tailwind CSS? Gostaria de unir o Tailwind CSS com uma biblioteca de componentes como o Bootstrap? Dê uma olhada no Tailwind UI.

Sobre o Fórum

Este é um fórum para todos que fazem parte
do ecossistema de uma Software House!

Bem-vindo(a) ao fórum da Casa do Desenvolvedor, uma comunidade completa, onde desenvolvedores, software houses, profissionais de marketing, experiência e vendas, fornecedores de soluções, aficionados por inovação e tecnologia podem tirar dúvidas, compartilhar novidades e conhecimento, trocar experiências e até postar uns memes que só nós da tecnologia entendemos 😅

Crie agora sua conta e vamos juntos fortalecer
o desenvolvimento de software no Brasil! 🇧🇷

×
×
  • Create New...