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

  • @JeffersonAlvesDadosCriativos
    @JeffersonAlvesDadosCriativos6 ай бұрын

    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

  • @matheusfernando8603
    @matheusfernando8603Ай бұрын

    Simplesmente o melhor do youtube em designer de gráfico. Parabéns!!!

  • @alexfernandesdatabi
    @alexfernandesdatabi6 ай бұрын

    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 🙂🙏

  • @leopedragon
    @leopedragon5 ай бұрын

    Muito bom. Parabéns pelo conteúdo.

  • @profBorges10
    @profBorges105 ай бұрын

    Fantástico sua aula como sempre.

  • @analiseideal
    @analiseideal6 ай бұрын

    Você é diferenciado Jefferson. Obrigado 🫂

  • @Madsonandrady
    @Madsonandrady6 ай бұрын

    Muito bom Jefferson! Parabéns, vou aderir o seu curso, muito bom!

  • @fabriciocruz5273
    @fabriciocruz52736 ай бұрын

    Profissional incrível. Em nenhuma imersão eles ensinam isso. Parabéns. Topzeira amigo

  • @danilosoares6375
    @danilosoares63756 ай бұрын

    Teu conteúdo é muito top, sou teu fã!!! em breve vou comprar o seu curso. Adoro essas animações.

  • @Tiago_Cruzx
    @Tiago_CruzxАй бұрын

    Muito bom!!! Parabéns!

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    Ай бұрын

    Muitíssimo obrigado pelo feedback Tiago

  • @davidmartinezdasilva
    @davidmartinezdasilva2 ай бұрын

    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!

  • @sharlesroberto2990
    @sharlesroberto29905 ай бұрын

    Aula perfeita, seus vídeos são incríveis em breve farei seu curso.. parabéns pela aula sempre acompanhando

  • @alimdul1672
    @alimdul16724 ай бұрын

    Está aula deveria ter 10 milhões de likes

  • @edinasouza1598
    @edinasouza15986 ай бұрын

    Como sempre maravilhoso seu vídeo!

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    6 ай бұрын

    Obrigado Edina pelo feedback e apoio de sempre.

  • @edinasouza1598
    @edinasouza15986 ай бұрын

    Adoro suas aulas! Parabéns.

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    6 ай бұрын

    Valeu Edina, obrigado pela participação constante no canal.

  • @elcioeff
    @elcioeff5 ай бұрын

    Há tempos que sou seu fã! Show!

  • @JeffersonAlvesDadosCriativos

    @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.

  • @alexandrebueno6958
    @alexandrebueno69586 ай бұрын

    Top de mais!!

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    6 ай бұрын

    Obrigado pelo feedback positivo e participação Alexandre

  • @leucianesantos9341
    @leucianesantos93416 ай бұрын

    Jefferson, vc é monstro demais. top top

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    6 ай бұрын

    Leuciane, muito obrigado pelo feedback, fico feliz que tenha gostado da aula.

  • @emersonleite3107
    @emersonleite31076 ай бұрын

    Trabalho incrível Jefferson. Obrigado por compartilhar.

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    6 ай бұрын

    Valeu Emerson. É sempre um prazer compartilhar conhecimento com a comunidade.

  • @giovannatozzatti1606
    @giovannatozzatti16066 ай бұрын

    Já estou utilizando!!!!! Obrigada, Jefferson!!!!

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    6 ай бұрын

    Que Top Gio, fico feliz de ter contribuído.

  • @angelohenriquefonseca1811
    @angelohenriquefonseca1811Ай бұрын

    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

    @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.

  • @anthonygiancarlozunigavalq5164
    @anthonygiancarlozunigavalq51646 ай бұрын

    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 ??

  • @user-mq2vz5yh6g
    @user-mq2vz5yh6g6 ай бұрын

    Fantástico

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    6 ай бұрын

    Valeu Ale pelo feedback e apoio de sempre man.

  • @fabianadocinho2317
    @fabianadocinho23176 ай бұрын

    Amei esse velocímetro da direita muito Top. Você postou um vídeo dele?

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    6 ай бұрын

    Olá Fabi, muito obrigado pelo feedback. Este é um dos visuais customizados que ensino no meu treinamento.

  • @profBorges10
    @profBorges105 ай бұрын

    Esse velocímetro e show, vc ensina como fazer no seu curso?

  • @rodrigodesousa7160
    @rodrigodesousa71606 ай бұрын

    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

    @JeffersonAlvesDadosCriativos

    6 ай бұрын

    Parabéns Rodrigo por ter conseguido. Ja anotei a sua dica para gravar um vídeo sobre

  • @rodrigodesousa7160

    @rodrigodesousa7160

    6 ай бұрын

    @@JeffersonAlvesDadosCriativos este visual não funciona no link de publicação

  • @JeffersonAlvesDadosCriativos

    @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

    @rodrigodesousa7160

    6 ай бұрын

    @@JeffersonAlvesDadosCriativos show deu certo 👏 Obrigado

  • @alexsobreira291
    @alexsobreira2912 ай бұрын

    Cara a aula foi muito boa, sensacional! Se não for muito incômodo, poderia me dizer qual é o visual desse velocímetro?

  • @JeffersonAlvesDadosCriativos

    @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.

  • @BrunoBastos10
    @BrunoBastos105 ай бұрын

    Boa noite Jefferson, você disponibiliza a sua base de dados, para que as pessoas pratiquem ?

  • @LauraOliveiraFreitas
    @LauraOliveiraFreitas4 ай бұрын

    Comecei a te seguir. Seus conteúdos são muito bons. Favor explica como faz o gauge tipo velocímetro!

  • @JeffersonAlvesDadosCriativos

    @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

    @LauraOliveiraFreitas

    4 ай бұрын

    Justo, se puder trazer algo próximo, apenas a ideia , sem o nível de detalhes já seria fantastico!

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    4 ай бұрын

    @@LauraOliveiraFreitas com certeza vou providenciar algo a respeito

  • @favalone
    @favalone6 ай бұрын

    foda

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    6 ай бұрын

    Muito obrigado pelo feedback @Favalone

  • @analiseideal
    @analiseideal6 ай бұрын

    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.

  • @SoundMusicAmerica
    @SoundMusicAmerica3 ай бұрын

    Opa Jefferson, excelente conteúdo, meus parabéns!! Você disponibilizou o arquivo da medida em algum lugar?

  • @JeffersonAlvesDadosCriativos

    @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.

  • @oricchannel2811
    @oricchannel28114 ай бұрын

    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

    @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;

  • @hobbitlima7396
    @hobbitlima73965 ай бұрын

    Tem algum vídeo no sue canal ensinando fazer gráfico de velocímetro?

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    5 ай бұрын

    Hobbit não tem, é um conteúdo exclusivo somente para os alunos do meu treinamento.

  • @alcimar07
    @alcimar076 ай бұрын

    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

  • @edsonfilhoadm
    @edsonfilhoadm6 ай бұрын

    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

    @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.

  • @profBorges10
    @profBorges105 ай бұрын

    No meu caso na empresa e travado hospedar imagens em sites, tenho OneDrive e SharePoint apenas, qual sua sugestão? Obrigado

  • @saymonsantos8008
    @saymonsantos80085 ай бұрын

    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?

  • @philipedesouzasantos1201
    @philipedesouzasantos12016 ай бұрын

    Salve mestre o/

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    6 ай бұрын

    Salve Philipe, opa foi rápido hein Mano.

  • @philipedesouzasantos1201

    @philipedesouzasantos1201

    6 ай бұрын

    ​@@JeffersonAlvesDadosCriativos Eu tô sempre por aqui! Só não tenho o hábito de comentar 🤭

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    6 ай бұрын

    @@philipedesouzasantos1201 😂😂😂😂,

  • @user-wg6go4zb1f
    @user-wg6go4zb1f4 ай бұрын

    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

  • @datanerd6935
    @datanerd69356 ай бұрын

    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

    @JeffersonAlvesDadosCriativos

    6 ай бұрын

    Hello Data Nerd, I've just added English subtitles to this video.

  • @Rodrigo84RR
    @Rodrigo84RR6 ай бұрын

    Tem vídeo de como vc fez esse calendário aí?

  • @JeffersonAlvesDadosCriativos

    @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

  • @joca3250
    @joca32504 ай бұрын

    Alguem conseguiu. Aqui nao deu certo.

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    4 ай бұрын

    Fala man, blza ? Varias pessoas conseguiram. Verifica direitinho qual o erro que esta sendo apresentado, assim fica mais fácil ajudar.

  • @vitorcasciano9420
    @vitorcasciano94202 ай бұрын

    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?

  • @vitorwerneck3691
    @vitorwerneck36916 ай бұрын

    Muito bom, parabéns!

  • @JeffersonAlvesDadosCriativos

    @JeffersonAlvesDadosCriativos

    6 ай бұрын

    Obrigado Vitor pelo feedback.