How to create images with animated borders in Power Bi with HTML and CSS
In our video today, you'll learn how to create a measure with HTML and CSS code to add a conditionally formatted animated border to any image on your Power BI dashboard.
I'll show you step by step in a detailed and easy-to-understand way so that you can apply this incredible technique to your own projects. Stay tuned and start creating even more incredible dashboards with this personalized measure!
I'm sure you'll love the content. So don't waste any time and check it out now! 👍
-----------------------------------------------------------------------
Link to the Dashboards course in Power Bi : dadoscriativos.com/dashscriat...
-----------------------------------------------------------------------
Recommended Videos:
►Learn the advanced technique to create dynamic and impactful data labels
• [POWER BI] Aprenda a t...
How to insert VARIATION ARROW in a NATIVE Power Bi chart
• Como inserir SETA DE V...
► New Card with GAUGE - Like you've never seen before
• Como criar um INDICADO...
► Learn how to break lines in data labels with DAX
• Aprenda a quebrar linh...
► Explore the power of DAX: Convert native Matrix visuals into an Interactive Calendar!
• Explore o poder do DAX...
Change the way you create cards in Power BI forever
• [Power Bi] Mude para s...
► How to create a PROFESSIONAL Layout for your Dashboard in Power BI with figma
• Como criar um Layout P...
--------------------------------------------------------------------------
Social Media
► Instagram: / dadoscriativos_
► Linkedin: / jeffersonallvesneves
► Facebook: / jefferson-alves-dados-...
-----------------------------------------------------------------------
Download the files
Telegram group: t.me/dadoscriativos
-----------------------------------------------------------------------
#powerbi #dadoscriativos #datavisualization #dataviz #storytelling #design #microsoftpowerbi #pbi #dashboard #dashboards #dashboarddesign #dashboarddesign #dataanalytics #analytics #businessinteligence #bi #dax #powerquery #microsoft #figma #html #css #svg #kpi #performance #ux #ui #uidesign #figma #deneb
Пікірлер: 76
Neste tutorial você aprenderá a criar uma medida com código HTML e CSS para adicionar uma borda animada e formatada condicionalmente em qualquer imagem no seu dashboard do Power BI. Vou mostrar passo a passo de forma detalhada e fácil de entender para que você possa aplicar essa técnica incrível nos seus próprios projetos. Fique ligado e comece a criar dashboards ainda mais incríveis com essa medida personalizada! Tenho certeza de que vocês vão adorar o conteúdo. Então, não percam tempo e confiram agora mesmo! 👍 Um abraço a todos! ----------------------------------------------------------------------- Link do Curso Dashboards no Power Bi : dadoscriativos.com/dashscriativos/ ----------------------------------------------------------------------- Vídeos Recomendados: ►Aprenda a técnica avançada para criar rótulos de dados dinâmicos e impactantes kzread.info/dash/bejne/o4GntM-wpaa6gdo.html ► Como inserir SETA DE VARIAÇÃO em gráfico NATIVO do Power Bi kzread.info/dash/bejne/f6mltZiJp5jYqJc.html ► Novo Card com GAUGE - Como você NUNCA VIU kzread.info/dash/bejne/a2SOrayaYZbHYM4.html ► Aprenda a quebrar linhas nos rótulos de dados com DAX kzread.info/dash/bejne/fWpmz8ihgpvOdpM.html ► Explore o poder do DAX: Converta visual nativo de Matriz em um Calendário Interativo! kzread.info/dash/bejne/fZWg2ciFZrHfoKw.html ► Mude para sempre a forma de criar cartões no Power BI kzread.info/dash/bejne/maiB0pWqgtngl84.html ► Como criar um Layout PROFISSIONAL para o seu Dashboard no Power BI com figma kzread.info/dash/bejne/Zq2H1Nxpgca-f5c.html -------------------------------------------------------------------------- Jefferson Alves - Dados Criativos ► Inscreva-se no canal: kzread.info ► Ative as notificações (clica no sininho)! ► Curta o vídeo! ----------------------------------------------------------------------- Redes Sociais ► Instagram: instagram.com/dadoscriativos_/ ► Linkedin: www.linkedin.com/in/jeffersonallvesneves/ ► Facebook: facebook.com/Jefferson-Alves-Dados-Criativos-105869708409651 ----------------------------------------------------------------------- Baixe os Arquivos ► Grupo Telegram: t.me/dadoscriativos ----------------------------------------------------------------------- #powerbi #dadoscriativos #datavisualization #dataviz #storytelling #design #microsoftpowerbi #pbi #dashboard #dashboards #dashboarddesign #dashboarddesign #dataanalytics #analytics #businessinteligence #bi #dax #powerquery #microsoft #figma #html #css #svg #kpi #performance #ux #ui #uidesign #figma #deneb
Simplesmente o melhor do youtube em designer de gráfico. Parabéns!!!
Fala Jefferson, se o conteúdo grátis já tem um valor fora do normal, imagina seu curso. Em breve serei seu aluno, obrigado por compartilhar. Deus abençoe e sucesso 🙂🙏
Muito bom. Parabéns pelo conteúdo.
Fantástico sua aula como sempre.
Você é diferenciado Jefferson. Obrigado 🫂
Muito bom Jefferson! Parabéns, vou aderir o seu curso, muito bom!
Profissional incrível. Em nenhuma imersão eles ensinam isso. Parabéns. Topzeira amigo
Teu conteúdo é muito top, sou teu fã!!! em breve vou comprar o seu curso. Adoro essas animações.
Muito bom!!! Parabéns!
@JeffersonAlvesDadosCriativos
Ай бұрын
Muitíssimo obrigado pelo feedback Tiago
Jefferson, você é sensacional. Estou desenvolvendo um dashboard para a empresa que trabalho, e teremos uma visão por representante de vendas, e eu achei essa solução sua maravilhosamente sensacional. Valeu, ganhou um inscrito!
Aula perfeita, seus vídeos são incríveis em breve farei seu curso.. parabéns pela aula sempre acompanhando
Está aula deveria ter 10 milhões de likes
Como sempre maravilhoso seu vídeo!
@JeffersonAlvesDadosCriativos
6 ай бұрын
Obrigado Edina pelo feedback e apoio de sempre.
Adoro suas aulas! Parabéns.
@JeffersonAlvesDadosCriativos
6 ай бұрын
Valeu Edina, obrigado pela participação constante no canal.
Há tempos que sou seu fã! Show!
@JeffersonAlvesDadosCriativos
5 ай бұрын
Obrigado Elcio, é sempre muito gratificante receber este tipo de comentário, isso mostra que tem sido útil o conteúdo que venho compartilhando com vocês.
Top de mais!!
@JeffersonAlvesDadosCriativos
6 ай бұрын
Obrigado pelo feedback positivo e participação Alexandre
Jefferson, vc é monstro demais. top top
@JeffersonAlvesDadosCriativos
6 ай бұрын
Leuciane, muito obrigado pelo feedback, fico feliz que tenha gostado da aula.
Trabalho incrível Jefferson. Obrigado por compartilhar.
@JeffersonAlvesDadosCriativos
6 ай бұрын
Valeu Emerson. É sempre um prazer compartilhar conhecimento com a comunidade.
Já estou utilizando!!!!! Obrigada, Jefferson!!!!
@JeffersonAlvesDadosCriativos
6 ай бұрын
Que Top Gio, fico feliz de ter contribuído.
Maravilha, meu amigo! Excelentes tutoriais, ainda mais pra mim, que estou ingressando no PBI. E o Velocímetro ali, vai ter tutorial tb? Rsrsrsrs... Obrigado!
@JeffersonAlvesDadosCriativos
Ай бұрын
Opa Ângelo, muito obrigado pelo feedback e por acompanhar o canal. O velocímetro como é algo bem mais avançado no momento tenho aula somente no meu treinamento explicando o passo a passo, porém, vou buscar gravar uma aula para o canal.
Estimado Jefferson, veo todos tus tutoriales y aprendido muchas cosas, una pregunta donde puedo conseguir el Odometro que muestras en varios tutoriales. Me podrias enseñas ??
Fantástico
@JeffersonAlvesDadosCriativos
6 ай бұрын
Valeu Ale pelo feedback e apoio de sempre man.
Amei esse velocímetro da direita muito Top. Você postou um vídeo dele?
@JeffersonAlvesDadosCriativos
6 ай бұрын
Olá Fabi, muito obrigado pelo feedback. Este é um dos visuais customizados que ensino no meu treinamento.
Esse velocímetro e show, vc ensina como fazer no seu curso?
Consegui reproduzir o efeito 🎉 Sensacional essa aula, pena que é apenas pra uma seleção, se puder dar uma dica pra utilizar em várias fotos selecionadas, agradeço 👏👏👏
@JeffersonAlvesDadosCriativos
6 ай бұрын
Parabéns Rodrigo por ter conseguido. Ja anotei a sua dica para gravar um vídeo sobre
@rodrigodesousa7160
6 ай бұрын
@@JeffersonAlvesDadosCriativos este visual não funciona no link de publicação
@JeffersonAlvesDadosCriativos
6 ай бұрын
@@rodrigodesousa7160 funciona sim. Se para vc nao estiver funcionando, vc precisa ir nas configurações de admin, e autorizar a exibição de visuais nao certificados.
@rodrigodesousa7160
6 ай бұрын
@@JeffersonAlvesDadosCriativos show deu certo 👏 Obrigado
Cara a aula foi muito boa, sensacional! Se não for muito incômodo, poderia me dizer qual é o visual desse velocímetro?
@JeffersonAlvesDadosCriativos
2 ай бұрын
Fala Alex, muito obrigado pelo feedback meu amigo, fico feliz que tenha gostado. Esse Velocímetro infelizmente não tem na loja da Microsoft, é um visual customizado que ensino a criá-lo do zero no meu treinamento.
Boa noite Jefferson, você disponibiliza a sua base de dados, para que as pessoas pratiquem ?
Comecei a te seguir. Seus conteúdos são muito bons. Favor explica como faz o gauge tipo velocímetro!
@JeffersonAlvesDadosCriativos
4 ай бұрын
Laura obrigado pela inscrição e acompanhar o canal. No momento o Velocímetro é um conteúdo exclusivo somente para os alunos do meu treinamento. Mas vou pensar em algo para trazer para o Canal.
@LauraOliveiraFreitas
4 ай бұрын
Justo, se puder trazer algo próximo, apenas a ideia , sem o nível de detalhes já seria fantastico!
@JeffersonAlvesDadosCriativos
4 ай бұрын
@@LauraOliveiraFreitas com certeza vou providenciar algo a respeito
foda
@JeffersonAlvesDadosCriativos
6 ай бұрын
Muito obrigado pelo feedback @Favalone
Tenho uma dica de conteúdo. Um gráfico em HTML ou outra forma expondo porcetagem e quantidade de ocorrências (ferimentos) por parte do corpo humano.
Opa Jefferson, excelente conteúdo, meus parabéns!! Você disponibilizou o arquivo da medida em algum lugar?
@JeffersonAlvesDadosCriativos
3 ай бұрын
Fala Fernando tudo bem ? Obrigado pelo feedback, fico feliz que tenha gostado meu amigo. Disponibilizei o pbix com a medida somente para os alunos do treinamento. Para quem não é aluno, foi o motivo de eu fazer passo a passo explicando cada linha do código, para que possam acompanhar e replicar.
Jefferson, aprendi muito com o vídeo. Parabéns pela didática e conteúdo. Apenas fiquei com uma dúvida: é possível controlar a animação de modo que a mesma dure, por exemplo, 5 voltas ao invés de deixá-la contínua? Desde já, muito grato pela atenção.
@JeffersonAlvesDadosCriativos
4 ай бұрын
Fico feliz que o conteúdo tenha lhe ajudado. Muito obrigado pelo comentário. Excelente pergunta meu amigo, é possível sim. Na propriedade animation você retira o "INFINITE" e acrescenta a quantidade de loop que você deseja com o "TERATION-COUNT", como abaixo: animation: girar 1.5s linear; animation-iteration-count: 3;
Tem algum vídeo no sue canal ensinando fazer gráfico de velocímetro?
@JeffersonAlvesDadosCriativos
5 ай бұрын
Hobbit não tem, é um conteúdo exclusivo somente para os alunos do meu treinamento.
Fala Jeferson! Existe alguma maneira, no BI, de replicar a função Index do excel? Que buscar informações com referência em linhas e colunas
Esse calendário do lado direto foi feito com gráfico de matriz e formatado em HTML pra ficar bem organizado sim? Abraços, suas aulas são top demais.
@JeffersonAlvesDadosCriativos
6 ай бұрын
Obrigado pelo feedback Edson, fico feliz que tenha gostado do conteúdo. Foi utilizado o Visual de Matriz Nativo para criação do calendário.
No meu caso na empresa e travado hospedar imagens em sites, tenho OneDrive e SharePoint apenas, qual sua sugestão? Obrigado
Professor, excelente aula!! Tenho uma dúvida pertinente em relação ao PowerBI que procurei até em outros locais gringos mas não encontro nada relacionado a isso e é um problema de análise "simples": Os comparativos de datas são sempre realizados em períodos iguais, mas por exemplo, tenho um faturamento fechado de 4 anos: 2014, 2015, 2016 e 2017. Cada ano tem um faturamento associado, como realizo a análise de faturamento entre os anos de forma distintos e não somente em relação ao ano anterior, por exemplo: - Comparar 2015 e 2014 é "simples" (um ano anterior), mas eu quero comparar 2014 com 2016 ou 2017, ou comparar 2015 com 2017 é assim por diante, fazer comparativo abertos entre os anos, se o dado começou em 2014 como cresceu em relação a 2015, ou como 2014 cresceu em relação a 2017. Pode tirar dúvida?
Salve mestre o/
@JeffersonAlvesDadosCriativos
6 ай бұрын
Salve Philipe, opa foi rápido hein Mano.
@philipedesouzasantos1201
6 ай бұрын
@@JeffersonAlvesDadosCriativos Eu tô sempre por aqui! Só não tenho o hábito de comentar 🤭
@JeffersonAlvesDadosCriativos
6 ай бұрын
@@philipedesouzasantos1201 😂😂😂😂,
quero criar uma sistema bonus de ranking para prestadores , ou seja cada pedido fechado soma 10 pontos , assim todos vão concorre conforme seu seguimento de mercado , assim todos pode ver suas colocações regional e nacional , estas pontuação zera todo ano. tem como vc fazer
Hey Jeff, I want to subscribe to Dados Criativos but I don't speak Portuguese. Is there subtitles in English? And thank you for this video!
@JeffersonAlvesDadosCriativos
6 ай бұрын
Hello Data Nerd, I've just added English subtitles to this video.
Tem vídeo de como vc fez esse calendário aí?
@JeffersonAlvesDadosCriativos
6 ай бұрын
Esse calendário somente no meu treinamento. Mas no canal, tem aula ensinando a fazer um calendário similar a este, segue o link kzread.info/dash/bejne/fZWg2ciFZrHfoKw.html
Alguem conseguiu. Aqui nao deu certo.
@JeffersonAlvesDadosCriativos
4 ай бұрын
Fala man, blza ? Varias pessoas conseguiram. Verifica direitinho qual o erro que esta sendo apresentado, assim fica mais fácil ajudar.
Fala Jefferson! tudo bem? Primeiro, agradecer e parabenizar pelo conteúdo! Você é fera demais! Se puder ajudar, tb não consegui concluir a borda animada, aqui não está girando. " .card{ position: relative; width: 100vw; height: 100vw; background: #102626; display: flex; justify-content: center; align-items: center } .loader { position: absolute; width: 95%; height: 95%; background: #000; border-radius: 50% animation: girar 1.5s infinite linear } .borda_progresso { position: absolute; width: 50%; height: 100%; background: linear-gradient( #00fff9, transparent ); border-top-left-radius: 100vw; border-bottom-left-radius: 100vw; } .fundo_img { position: absolute; inset: 5vw; background: #102626; border-radius: 50% } .foto { position: absolute; width: 80%; height: 80%; border-radius: 50%; object-fit: cover; } @keyframes girar { from { transform: roate(0) } to { transform: roate(360deg) } } É preciso habilitar algo no power bi?
Muito bom, parabéns!
@JeffersonAlvesDadosCriativos
6 ай бұрын
Obrigado Vitor pelo feedback.