CodeGlitch
CodeGlitch
  • Видео 19
  • Просмотров 255 052

Видео

Como crear un SLIDER AUTOMATICO PERFECTO con HTML & CSS3 totalmente RESPONSIVE
Просмотров 9 тыс.Год назад
Aprende a crear este slider automatico tan solo usando HTML y CSS3 totalmente responsive con maquetación moderna.
Crea un PERFECTO EFECTO PARALLAX con HTML & CSS super facil! En solo 4 MINUTOS desde 0
Просмотров 1,9 тыс.Год назад
Con HTML & CSS crearemos un EFECTO PARALLAX para que pueda usarlo dentro de tus propios proyectos y le des un estilo más llamativo.
SLIDER CON BOTONES desde cero con CSS3 y HTML5 TOTALMENTE RESPONSIVE en tan SOLO 7 minutos!
Просмотров 9 тыс.Год назад
A los 50 likes dejare el proyecto para que lo descarguen. Crea este Slider con botones utilizando HTML y CSS3 utilizando recursos modernos de CSS que harán mas optimo y responsive el slider. 00:00 Intro 00:05 Recursos para crear el Slider 00:32 HTML del Slider 01:59 CSS del Slider 06:45 Resultado - Recursos: - scroll-snap-type: developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type - flex: d...
Como hacer un SLIDER de TEXTO con HTML y CSS3 desde 0
Просмотров 4,6 тыс.2 года назад
#slider #html #css #development Te enseñare de una manera super facil, como crear un slider de texto usando unicamente HTML5 y CSS3
Como ANIMAR EL FONDO de tu PÁGINA WEB con DEGRADADOS con CSS3 desde 0 en MENOS de 3 minutos
Просмотров 2,4 тыс.2 года назад
Aprende como animar el fondo de tu página web utilizando degradados con HTML y CSS en menos de 3 minutos.
Como CREAR una VENTANA MODAL ó POP UP con HTML CSS y JAVASCRITP completamente DESDE 0!
Просмотров 7 тыс.2 года назад
Te voy a enseñar a crear desde 0 una ventana modal la cual te ayudara a utilizar este recurso en cualquier proyecto que tu quieras. ▼¡SÍGUEME EN MIS REDES!▼ ✔TWITTER: YoshCorona ✔INSTAGRAM: yoch.sc
COMO HACER un SLIDER AUTÓMATICO con HTML & CSS en SOLO 4 MINUTOS | De 0 al 100% | NIVEL SUPER EASY!
Просмотров 25 тыс.2 года назад
Este slider automático es uno de las mas sencillos ya que solo necesitaremos de dos etiquetas en HTML y algo de estilos. ▼¡SÍGUEME EN MIS REDES!▼ ✔TWITTER: YoshCorona ✔INSTAGRAM: yoch.sc
SLIDER INFINITO AUTOMATICO únicamente con HTML & CSS desde cero en MENOS DE 7 MINUTOS
Просмотров 39 тыс.2 года назад
Te enseñare a crear un slider automático infinito utilizando únicamente HTML & CSS con tan solo algunas líneas de código. Si tienes alguna duda deja tus comentarios abajo. Recursos Código : *Se sube enlace cuando llegue a 20 likes* ▼¡SÍGUEME EN MIS REDES!▼ ✔TWITTER: YoshCorona ✔INSTAGRAM: yoch.sc
DARK MODE facilmente con un TOGGLE BUTTON desde 0 | HMTL CSS JS
Просмотров 13 тыс.2 года назад
DARK MODE facilmente con un TOGGLE BUTTON desde 0 | HMTL CSS JS
Imágenes 100% RESPONSIVE con CSS & HTML con SOLO 5 LÍNEAS DE CÓDIGO *Sin Media Queries
Просмотров 31 тыс.2 года назад
Imágenes 100% RESPONSIVE con CSS & HTML con SOLO 5 LÍNEAS DE CÓDIGO *Sin Media Queries
Como crear un CARD COMPONENT para tu sitio web con HTML & CSS desde 0
Просмотров 4,9 тыс.2 года назад
Como crear un CARD COMPONENT para tu sitio web con HTML & CSS desde 0
COMO hacer un SLIDER AUTOMATICO PERFECTO con HTML y CSS en MENOS DE 9 MINUTOS *desde cero*
Просмотров 103 тыс.3 года назад
COMO hacer un SLIDER AUTOMATICO PERFECTO con HTML y CSS en MENOS DE 9 MINUTOS *desde cero*

Комментарии

  • @pedroriveralopez8566
    @pedroriveralopez8566 15 дней назад

    Amigo utilicé el keyframe tal cual pusiste en Sass pero no se mueven mis imagenes

    • @javidesarrolloweb
      @javidesarrolloweb 8 дней назад

      fijate si pusiste scroll en el keyframes

    • @pedroriveralopez8566
      @pedroriveralopez8566 7 дней назад

      ​@@javidesarrolloweb Lo puse no sé que pasó, solucioné copiando y pegando pero hice todo igual

  • @mimicvpid
    @mimicvpid 18 дней назад

    Todo genial pero quiero que a la vez las imágenes sean automáticas y se muevan solitas con esos puntitos abajo incluido 😭

  • @duridev
    @duridev 20 дней назад

    Muchas gracias!!

  • @NewLife-z7l
    @NewLife-z7l Месяц назад

    tu slider no funciona y no respondes a lo que te preguntamos en el min 5:06

  • @oscarseguraramos
    @oscarseguraramos Месяц назад

    Gracias grande, te pasaste.

  • @jcrr682
    @jcrr682 Месяц назад

    Hola, quería saber cómo puedo hacer que el slider vaya de forma vertical? Lo quería poner en los bordes de mí página

  • @hugocangi6214
    @hugocangi6214 Месяц назад

    Buen dia CodeGlitch recien termine el programa te agradezco saludos pase buen dia

  • @juanmanuelbermudezquiroga6775
    @juanmanuelbermudezquiroga6775 2 месяца назад

    sos el MEJORRRRRRRR, me funciono un montonnn

  • @mag1076
    @mag1076 2 месяца назад

    gracias RECIEN ESTOY APRENDIENDO Y QUERIA AGREGAR UN SLIDER VI COMO 4 VIDEOS NINGUNO ME FUNCIONO Y ENSERIO GRACIAS LO LOBRE TE GANASTE UN SUSCRIPTOR

  • @Marktheone-e5g
    @Marktheone-e5g 2 месяца назад

    TE GANASTE UN SUSCRIPTOR GRACIAS POR DEJARNOS EL CÓDIGO 😄😄 🎉🎉🎉

  • @katymedina6799
    @katymedina6799 2 месяца назад

    solo me muestra en el slider una imagen ya lo volvi hacer y hace lo mismo

  • @acecarti
    @acecarti 2 месяца назад

    Hola, ¿es posible hacer un carrusel, automático y manual con únicamente html y css? ya que mi sitio no me permite utilizar scripts y no puedo usar javascript :( , buen video por cierto :D

  • @skerlino
    @skerlino 2 месяца назад

    Ayuda, aparecen las 4 imágenes al mismo tiempo, no se centran y desaparecen todas al mismo tiempo en la animación

  • @W_achinango
    @W_achinango 3 месяца назад

    <3

  • @anagitana9867
    @anagitana9867 3 месяца назад

    Muchas Gracias me sirvió demasiado.

  • @VocesDelAyer777
    @VocesDelAyer777 3 месяца назад

    bro en el minuto 5:08 se ve que hay líneas que no explicaste, te iba a dar like :/

  • @lucianoazalot4138
    @lucianoazalot4138 3 месяца назад

    Excelente video

  • @yosedcamilosanchez4963
    @yosedcamilosanchez4963 3 месяца назад

    Ufff maquina no te imaginas cuanto tiempo llevaba tratando de hacer eso, eres un duro!

  • @zak_edits1532
    @zak_edits1532 3 месяца назад

    las imagenws deben ser del mismo tamaño ?

  • @GabrielitoSoy
    @GabrielitoSoy 3 месяца назад

    Se puede poner un enlace en cada imagen?. lo bajé y lo personalicé, pero me interesa el punto de agregar un enlace. Gracias.

  • @jarlinysnunez7227
    @jarlinysnunez7227 3 месяца назад

    Me salvaste, excelente explicación y rápido, otros videos duran hasta 30 minutos, este me encantó❤

  • @luisbyalex
    @luisbyalex 4 месяца назад

    ¿porque dejaste de subir videos bro?

    • @codeglitch1884
      @codeglitch1884 4 месяца назад

      Soy bien flojo para grabar jajaja

  • @7play3rs40
    @7play3rs40 4 месяца назад

    no funciona bro, no corre la animación, que podrá ser?

    • @codeglitch1884
      @codeglitch1884 4 месяца назад

      No lo sabria sin ver el código bro :(

  • @razukmamo7635
    @razukmamo7635 4 месяца назад

    thx me ayudaste a darle un detalle mas a mi proyecto

  • @codeglitch1884
    @codeglitch1884 4 месяца назад

    PD: Tokio es una ciudad jajaja 🥹

  • @delossantosvivancoabril8830
    @delossantosvivancoabril8830 4 месяца назад

    muchísimas gracias, eres muy amable y fue fácil entender

  • @NataliaBelenRivas
    @NataliaBelenRivas 4 месяца назад

    Hola!! En el minuto 5:06 hay un cort y no se ve el resto del codigo. Por favor, podrias pasar el codigo completo?

  • @jhoanmanuelcarvajal9822
    @jhoanmanuelcarvajal9822 4 месяца назад

    gracias

  • @DanielAlejandroHA
    @DanielAlejandroHA 4 месяца назад

    Como podría hacer que también funcione en responsive? O que se vea el efecto en celulares?

  • @JebusXDYT
    @JebusXDYT 4 месяца назад

    Oigan saben por qué las imagenes salen pegadas y no una por una?

    • @codeglitch1884
      @codeglitch1884 4 месяца назад

      Por el tipo de animación, puedes intentar por steps y así te puede aparecer diferente

  • @publimagenperu
    @publimagenperu 4 месяца назад

    GRACIAS MUY BUENO

  • @monttero
    @monttero 5 месяцев назад

    Hola, te falto algo del codigo, en el 5:06 pasas de la linea 28 a la linea 38.

  • @mariarojas7856
    @mariarojas7856 5 месяцев назад

    Te falto mostrar parte del código. No me funciona.

  • @arielfuentes3775
    @arielfuentes3775 5 месяцев назад

    se puede en vertical?

    • @codeglitch1884
      @codeglitch1884 5 месяцев назад

      Si seguro que si, jamás eh intentando uno, pero si debe ser posible

  • @arielfuentes3775
    @arielfuentes3775 5 месяцев назад

    se puede hacer en vertical?

    • @codeglitch1884
      @codeglitch1884 5 месяцев назад

      Tengo uno en vertical

    • @arielfuentes3775
      @arielfuentes3775 5 месяцев назад

      @@codeglitch1884 puedes pasarme el video para analizar el código y entender como lo haces?

  • @dambedev
    @dambedev 5 месяцев назад

    Genial! Gracias por compartir

  • @ivethcortez7348
    @ivethcortez7348 5 месяцев назад

    Hola, necesito ayuda :c no me sale, estoy tratando de hacer funcionar la animación, yo tengo sólo 3 imágenes Te muestro lo que llevo de código: .slider-frame { align-content: center; width: 800px; height: auto; overflow: hidden; margin: 50px auto 0; } .slider-frame ul{ display: flex; padding: 0; width: 300%; animation: slide 9s infinite alternate ease-in-out; } .slider-frame li { list-style: none; width: 100% } .slider-frame img{ width: 100% } @keyframes slide { 0% {margin-right: 0%} 25% {margin-right: 0%} 30% {margin-right: -100%} 55% {margin-right: -100%} 60% {margin-right: -200%} 85% {margin-right: -200%} }

    • @codeglitch1884
      @codeglitch1884 5 месяцев назад

      Estás dejando tiempo libre tienes que dividir esos 9s entre las tres imágenes, la primera del 0 al 32, la segunda 33 al 66- tercera del 67 al 100 y así ya usas el 100% de tiempo

  • @PerezLinette
    @PerezLinette 5 месяцев назад

    Hola, como puedo hacer para que las imagenes se sigan moviendo en la misma direccion de manera indefinida? es que no me gusta cuando termina y todo se devuelve de manera rapida. Gracias

    • @codeglitch1884
      @codeglitch1884 5 месяцев назад

      Puedes cambiar el tipo de animación, quizá ponerle alternate en vez de infinite y eso te dará un resultado diferente

  • @asaelsanchez8223
    @asaelsanchez8223 5 месяцев назад

    Muchas gracias despues de varios videos con la misma tematica fuiste el que me dio el resultado que esperada. Exito!

  • @ferdejesus8130
    @ferdejesus8130 5 месяцев назад

    hermano en el minuto 5:06 hay un corte y despues aparecen unas barras de codigo que no explicaste antes del corte esta en la linea 27 y despues pasa a la 38, porfa si puedes pasar esas lineas te lo agradezco

  • @Matias_Palacio_V
    @Matias_Palacio_V 6 месяцев назад

    Como hago lo de @keyframe con 5 imagenes? No he podido con el calculo de los porcentajes del inicio de cada linea: ¿?% {margin-left: 0%;}

    • @codeglitch1884
      @codeglitch1884 5 месяцев назад

      Divide tus 5 imágenes entre el 100% del tiempo es decir cada 2 segundos pasaría una imagen

  • @magnomadadigital
    @magnomadadigital 6 месяцев назад

    Que buena explicación amigo, FELICITACIONES.

  • @angeluscristal7554
    @angeluscristal7554 6 месяцев назад

    Hola esta genial, suscrita! Este efecto se podria insertar en google sites? Como podria hacerlo? Gracias

    • @codeglitch1884
      @codeglitch1884 5 месяцев назад

      Si tienes un CMD puedes hacerlo desde el editor, y ahí insertarlo!

  • @incognitop6962
    @incognitop6962 6 месяцев назад

    Me ayudaste a comprender mejor el min-width y el max-width para el responive desing en general, te lo agradezco :)

    • @codeglitch1884
      @codeglitch1884 5 месяцев назад

      Es muy fácil usar bro, sigue dándole🤜🏻🤛🏻

  • @Luchobbe
    @Luchobbe 6 месяцев назад

    Espectacular! Gracias

  • @josejaum
    @josejaum 6 месяцев назад

    Excelente tutorial, me sirvió mucho!! Ya andaba pensando como hacerlo con Javascript o librerías cuando existe esta manera mas sencilla y optima, gracias :)

    • @codeglitch1884
      @codeglitch1884 5 месяцев назад

      Un placer bro! 🤜🏻🤛🏻

  • @martineichel2323
    @martineichel2323 6 месяцев назад

    Muchas gracias maestro!!

  • @GustavoPOW4
    @GustavoPOW4 6 месяцев назад

    La verdad que explicas muy bien amigo. Mil gracias.

  • @the_kyo.567vsIori.
    @the_kyo.567vsIori. 6 месяцев назад

    5:52

  • @ZeroBlaz
    @ZeroBlaz 6 месяцев назад

    Bro he visto tu canal y eres excelente explicando! Deberías dar algún curso de paga, yo sin dudas lo pagaría!

    • @codeglitch1884
      @codeglitch1884 5 месяцев назад

      Muchas gracias bro’ lo voy a considerar 🫶🏻