Trucos CSS (26) - Gráficos de progreso circulares
HTML-код
- Опубликовано: 28 сен 2024
- Trucos CSS en Github github.com/esc....
Visítanos en nuestra página web ed.team
Síguenos en Facebook : / edteamlat
Síguenos en Twitter: / edteamlat
Únete a la comunidad Escuela Digital en Facebook:
ed.team/comunidad
Eres un crack! Con ganas de probarlo en mis proyectos. Gracias Álvaro!
Ahora mismo me doy cuente que muuuuy poco de css
Que buen vídeo, pero tengo una pregunta, si por ejemplo esos porcentajes los obtengo desde javascript , ¿Hay alguna forma de pasárselos a css?
Alguna respuesta?
Lo averiguaste?🤔
Excelente video MAESTRAZO!
Finally a masterpiece CSS tutorial, subscribed ""
Hola, están muy buenos. LA parte del Index la puedes compartir?
esto se puede haces condatos provenientes de una base de datos, es decir con php , mysql, JS, y html? es mi duda, de ante mano gracias.
a partir del &: ya no me sirve nada ¿qué debo hacer?
Me pasa lo mismo
debes sacar el before afuera, asi: .circular-progress::before{ ......} lo mismo para el after saludos
Y como podriamos hacer que funcione en tiempo real
demasiado bueno tus videos, aunque deberias poner el codigo para descargarlo ya que no me da el resultado
Si de verdad quieres aprender debes hacer que funcionen
La practica hace al maestro
thank you man
Me parece genial esa barra... como se puede hacer para que el numero, por ejemplo: HTML5 86% ... valla aumentando progresivamente? ósea 1% 2% ..... 86%....
Raul Anampa ya deberías de hacerlo con Javascript
compartes en codpen ?
+Andres Jimenez +Efrain Ramirez subió a Github puedes conseguirlo ahí, o de lo contrario hacer el ejercicio tu mismo, vamos no es muy complicado no te quita mucho tiempo.
Si tranquilo luego me di cuenta, salu
y el codigo? XD
He buscado como hacer esto en tiempo real y no lo encuentro. Asi esta muy bonito y todo pero es fijo, como podríamos hacerlo al retornar algun objeto de una api por ejemplo o de base de datos. Se ve bonito pero no se si funcional
Parabéns pelos vídeos!! Consigo compreender bem apesar de estar em espanhol e obrigado por compartilhar seu conhecimento. Me ajudou!
Lo que le sigue de bueno este video, me ha agrado demasiado.
Como puedo hacer para que el skill y el percent los modifique desde javascript, ya que estos me los dara el backend (ajax y php).
PD: La parte de la funcion solo se puede en sass verdad. En mi caso solo usamos css.
En este video Alvaro se ve jodidamente cansado, y solo puedo sentir respeto por el; tener la disciplina de no faltar con estos videos, que en su momento fueron clave.
Muchísimas gracias, lo implementé en un proyecto muy importante!!, saludos desde Aguascalientes México!!
buenas, soy nuevo en tus videos. Es posible que en vscode para los before y after se use :: y no : ?
Yo lo hice en CSS nativo este es el código
HTML:
Layout
CSS:
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #000000;
min-height: 100vh;
color: #FFFFFF;
}
h1 {
text-align: center;
font-family: verdana;
margin-bottom: 3rem;
}
.html {
--uno: #FF7700;
--dos: #772200;
--percentage: 95;
color: var(--uno);
}
.css {
--uno: #0081EE;
--dos: #004077;
--percentage: 90;
color: var(--uno);
}
.js {
--uno: #FFCE00;
--dos: #995600;
--percentage: 75;
color: var(--uno);
}
.progressBar {
--deg: calc(var(--percentage)/100*180deg);
--result: linear-gradient(var(--deg), var(--uno) 50%, var(--dos) 50%);
height: 15rem;
width: 15rem;
background: var(--result);
margin: auto;
border-radius: 50%;
position: relative;
font-family: verdana;
font-weight: bold;
}
.progressBar::before {
box-sizing: border-box;
height: inherit;
width: inherit;
background: linear-gradient(#000000 50%, transparent 50%) content-box;
padding: 1.75rem;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
text-align: center;
line-height : 10.5rem;
font-size: 1.5rem;
}
.progressBar::after {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 15.3rem;
width: 15.3rem;
background: linear-gradient(transparent 50%, #000000 50%);
border-radius: 50%;
padding-top: 1.5rem;
position: absolute;
top: -.15rem;
right: -.15rem;
}
.html::before {
content: "HTML";
}
.css::before {
content: "CSS";
}
.js::before {
content: "JavaScript";
}
.html::after {
content: "95%";
}
.css::after {
content: "90%";
}
.js::after {
content: "75%";
}
Buenas, no logro ver la relacion entre el HTML y el CSS.... Podrias revisarlo? Grax!
Solo dame el madito código.jpg
Esta algo loco esto... voy a ir por partes para comprenderlo bien...
¿Porque el sass me marca error las variables? :,v
Hola Alvaro, mismo resultado multiplicar el percent * 1.8
Eres un monstruo!!! jjj genial
Hay forma de que se haga dinámica?
Hola que tal buenas, alguien que me pueda ayudar con la siguiente duda:
muchas gracias y por cierto que buen video, me esta ayudando ahorita para una pagina que estoy diseñando
El problema que tengo es que quiero agregar una celda mas para el ingreso de información, mi problema es que no encuentro la manera y quería ver si me podrían apoyar
Boa noite, por favor, consigo o arquivo css e html desse video? No github não encontro ....
me parece interesante pero El Github ya no funciona puedes arreglarlo por favor
Hola soy de Venezuela gracias por el vídeo solo una duda sera que se puede operar desde mysql y php es decir que este bajo el dominio de una etiqueta
Muy buenos los videos Alvaro, una pregunta estoy usando webstorm pero no puedo poner un lorem en jade como en sublime, hay que que configurar algo para que aparezca presionando tab como en sublime.
Mejor hereda el color o imagen de fondo:
Background: inherit;
Me falta algun parametro que alinea la imagen de fondo heredada a la imagen de fondo del padre
alvaro....muuuy buen tutorial, bien explicado, una pregunta, ¿también se puede hacer lo mismo utilizando Jquery-UI? para ahorrar tiempo.
Al momento de agregar. no me detecta los cambios y no aparece la gráfica.
creo que el giro de la barra de progreso se puede solucionar girando los grados del degradado solamente
Se me vino una idea, entraré a maraton de madrugada para practicar este video. Esta bueno.
Hola una pregunta diseñar un pagina para un barra para controlar liquidos en lugar de la progress bar
porfinnnnn alguien que explicaa!!!!
Es la primera vez que veo tus videos y estoy muy pero muy perdido pence que era css pero no sabia que se podian poner funciones y veo tu extencion de archivos y veo que dice .jade y .scss y .css ¿me podrías indicar el nombre de tu video donde empiezas las introduccion de esas extenciones y archivos?
ruclips.net/video/xu0lVyrA8Y0/видео.html
ruclips.net/video/XcLiwuTMSwo/видео.html
Gracias por responder
Fantástico... tendré que verlo un par de veces pero queda genial....
Wow... esta es la primera vez que veo tus videos y quedé impresionado (y mira que pocas cosas me impresionan). Excelente aportación, muchas gracias. ¡Eres un capo!
Saludos...
Genial Alvaro! muy bueno el vídeo.
Al final fue mejor meterlo en un mixin, aunque en el proceso de optimizado yo usé @Extend para no tener que complicarme tanto xD
Buenos días, saludos cordiales... Quisiera preguntar si esa vista en vivo es directo desde tú editor de código y cuál sería. Actualmente uso Adobe Bracket que también posee la misma vista en vivo y actualiza sin usar tanto el comando para refrescar. ¡Gracias, saludos!
Utiliza un IDE llamado Web Storm
buen vídeo, buenas explicaciones, me gustan los cursos que das y me gustaría que en los trucos css agregues haciendo slider-show, jumbotron seria genial
excelente video me sirvio mucho gracias
envia el codigo original, porfa
que buen video
👍
Me saco el sombrero 😅
Exelente!
Muy buen tutorial, me preguntaba si en lugar de usar sass uso php, puedo lograr lo mismo, no? gracias!
Guille Solimo lo dudo, PHP es un lenguaje de programación y Sass es un lenguaje de maquetación, que incluye algunas variables como en programación, pero luego estás se convierten en css.
Rajado el tutorial... gracias ♥
Por eso me gustan sus videos, enseñan muchas cosas :) buen video
jejejejej una pregunta como haces para las caritas que salen en tu video de compilacion
es una aplicacion para compilar los archivos!
prepros.io/
para ya no usar node!
Woww!! Increible buen video :)
Genial pero no me funciona el linear-gradient a que se puede deber ???? Gracias
tal ves la version del navegador
M-a-r-a-v-i-l-l-o-s-o.
tengo una duda porque en el html colocas solo .circular-progress y no como una clase, a mi no me sale el circulo
Álvaro utiliza un framework para acortar código html, luego se compila como divs, tú debes hacer los divs normalmente.
El esta utlizando Jade y scss para poder compilar el ejercicio es un framework que acorta y hace mas eficiente el proyecto
Una pregunta por que no usas llaves? y como se llama el otro lenguaje que usar de parte del css?
Tus videos me estan sirviendo demaciado Muchas gracias!!
SASS es como un framework de CSS (tecnicamente es un preprocesador) que usa llaves y existe SCSS (Sassy CSS, indented syntax) que es un SASS que no usa llaves.
Oh muchas gracias, ya no estoy programando pero gracias jeje
Cuando no usas las llaves, eso es jade (ahora PUG me parece), que igual es un preprocesador y no las necesita.
Exacto. Me enfoque contestando la 2da parte de la pregunta de ariel, la parte del CSS (SASS) que olvide mencionar que el HTML que esta usando sin tags, es JADE, y JADE no usa llaves.