Formas Personalizadas y Animadas con Clip Path CSS

En este tutorial aprenderás como usar la propiedad clip path de CSS para crear formas personalizadas. Ademas crearemos un menú de navegación animado.
🚀 Blog de Diseño Web:
www.falconmaste...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
---
📄 Código del Proyecto: github.com/fal...
📄 Herramienta de Clip Path: bennettfeely.c...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters

[@FalconMasters]

Espero que les guste este tutorial y se les ocurran ideas geniales para trabajar con Clip Path! Como siempre, si te gusto el video dale manita arriba! 👍

[@CarlosMartinez-th7km]

Te sigo desde el 2014, tus vídeos me ayudaron mucho al inicio de mi carrera laboral, gracias por tus aportes realmente gracias!

[@6lackGeniusBeats]

Les presento a Carlos Alturo, merecedor de todo mi respeto y admiracion,gracias a ti conosco la programacion no solo en el ambito del desarrollo web sino en general ,empece con htnl basico y ahora solo espero terminar la escuela para estudiar ingieneria en sistemas de verdad e regresado al canal para darle las gracias por todo , el mundo deveria tener mas personas como tu,no te conosco en persona pero se que un dia nos veremos y nos conoceremos ,att: junior pierre ,vivo en republica dominica y tengo 16 años

[@FalconMasters]

Muchas gracias por ver mis videos Junior, que gusto que estés iniciando en este mundo del desarrollo web y que mis videos te sean de mucha ayuda!

[@6lackGeniusBeats]

@@FalconMasters me ciento tan feliz de que usted me respondiera el comentar , lo admirooooooo

[@6lackGeniusBeats]

@@drewsand8017 broth el centir aprecio por una persona no es ser marico brother solo no se como darles la geacias ok,antes solia salir a la calle a perder el tiempo haciendo cosas que en verdad no eran buenas pero me refugie en esto broth ahora tengo una manera de aprobechar mi tiempo y todo enpeso con un video de este senor ya entiendes porque tanto aprecio

[@gabit200]

Me re sirvió. Lo voy a implementar para la versión mobile de mi portfolio. Muchas Gracias.

[@ezequielcuello8666]

realmente útil, me sirvió para animar la aparición de elementos jaja

[@RankXer]

¡¡Muy bueno Carlos!!, la verdad es que aunque has realizado una animación en menú, ese código trabajandolo un poco se le le puede sacar partido: enlaces que al hacer click aparezaca en la página algún elemento o gif animado u otro elemento. Como siempre gracias por compartir tus conocimientos, un abrazo

[@hugobueno1191]

Excelente como siempre!! gracias

[@Aliss_nice]

Tus videos siempre son un: 01000001 01101110 01110000 01101010 ya que las demas personas que saben programacion explican muy: 01000110 01100101 01100100. Gracias uwu

[@rincondeautos4418]

saludos desde tucuman argentina

[@TecnoTubeTutorials]

muy valiosa esta informacion gracias

[@proodbykenny]

es genial , estoy ancioso de hacer el ejemplo

[@alejandrorios6999]

Gracias bro, explicas muy bien

[@josericardomendozacastaned1076]

Increible practica Gracias

[@blaskozicki1079]

Super bien explicado! Gracias!

[@luisarmijos9937]

Gracias por este tutorial. La verdad me sirvió mucho. Saludos.

[@FalconMasters]

Estupendo! me alegra mucho escuchar eso!

[@juangabriel2559]

Muy bueno 👍🏻

[@alexdevjr]

Hola Carlos Arturo, excelente me encantó esto! Sin embargo me gustaría saber si es posible en un futuro un curso premium o completo de Javascript, con ejemplos, proyectos y frameworks sería genial, tal vez en Udemy. Vale la pena, además eres un excelente maestro y por eso es tan fácil aprender programación contigo. Saludos @FalconMasters 👍

[@FalconMasters]

Hola Alex, si tengo planeado hacer cursos mas avanzados de javascript

[@jesusescalante5585]

Muy buen video Falcon gracias

[@JoseJimenez-ju9ss]

Hola falconMaster puedes hacer un vídeo de como poner un editor de contenido para un sitio web es desir:un botón en especial que le admita al administrador del sitio subir nuevo contenido sin tener necesidad de ir al código nc si se puede hace o no pero si es posible puede hacer un vídeo sobre eso.

[@enriques26]

Un efecto genial, actualmente estoy aprendiendo a usar Javascript, quería preguntarte si hay alguna manera de usar el mismo código, en mi caso lo quiero usar para varios contenedores con el efecto clip-path, no se si aplicar un sting. Por favor comentame al respecto. Excelente canal.

[@andresgonzalez7367]

¡Muy buen vídeo, sin duda lo probare!

[@MasterWilliamVasquez]

heroe gracias por compartir

[@antigua_ina9589]

Vamos a ver, seguro lo logro explicas bien.

[@MrZato20]

Hola Carlos... pregunta...tienes algún vídeo o serie de vídeos dónde expliques en una página web como implementar roles de usuario y matriz crud usando PDO?

[@cuc321]

Cabe mencionar que internet explorer no soporta la propiedad “clip-path” y el navegador edge no soporta la propiedad sobre elementos html, sólo los soporta sobre elementos svg, lo cual, la hace una propiedad que se debe de tener cuidado al usar, ya que lamentablemente, muchos usuarios usan esos navegadores, especialmente el segmento adulto. Creo que la propiedad es más útil cuando se usa con otra forma, un círculo se puede hacer fácilmente con otras propiedades css.

[@axelroman3780]

Necesito un tutorial fuerte de keyframes, quiero aprender bien bien a hacer animaciones

[@motorperpetuo]

Bueeeena 👌👌

[@abrahamjaimes7643]

#FalconMasters hay alguna manera para modificarlos puntos en forma de curvas ?

[@DianaDesireJimenezReturnsman]

hola falcon me gusto mucho este video mi pregunta es una vez que ya lo aplicaste para el menu se le puede agregar un clip path dentro del clip path? por ejemplo si a cada opción del menu se puede agregar se tendría que hacer lo mismo pero para que desplegara cada opción que se puso dentro del menu??

[@FalconMasters]

Hola Diana, es una idea genial! Si que puedes hacerlo, a cada elemento li le puedes poner su clip path y hacer lo mismo. Aunque quizás tendrías que ponerle un poco de delay a la animación para que se ejecute 1 o 2 segundos tarde para que primero pase la primera animación. Pero si que se puede y es muy buena idea.

[@rincondeautos4418]

buen video bro

[@johananthonyggwp2676]

Toma mi like

[@iessuschumpitaz6414]

como haria para que no se esconda y se muestre mi contenido una vez que suelto el click

[@armandogamboamatamoros7304]

Buen video me sirvió bastante pero tengo una pregunta¿A alguien más se les borraron sus box-shadow después de agregar el clip-path?

[@jesarfernandorodriguezleon346]

Como puedo ponerle un borde negro a un clip-path personalizado :((?

[@MX7681]

👍

[@juanguillermoloaizaandrade6729]

Es genial

[@hablandoconjesuss]

BIEN MUY BIEN }

[@HeySoyGabo]

Sabrás alguna manera de hacer bordes redondeados?

[@FalconMasters]

Si, con border-radius

[@Henry_Nunez]

Excelente pero el código fuente en la pantalla casi no se ve mientras estas explicando.

[@FalconMasters]

¿Lo estas viendo desde un celular? ¿O en que tipo de dispositivo?

[@Henry_Nunez]

@@FalconMasters Desde el pc

[@sergiocotero6622]

Hola.

[@antigua_ina9589]

A ese menú se le puede hacer submenu?

[@FalconMasters]

Claro, puedes aplicarle un sub menu dentro.

[@antigua_ina9589]

Gracias.

[@hablandoconjesuss]

falcon como hago para colocar una actualizacion por ejemplo del dolar en mi pagina? asi como esta pagina:www.bancodevenezuela.com/

[@proodbykenny]

no carga el archivo zip

[@FalconMasters]

Disculpa, intenta de nuevo.

[@proodbykenny]

@@FalconMasters ya lo descargue gracias

[@NovatoWTF]

Gracias por hacer odiar a WIx bRO