Que rayos son los Pseudoelementos en CSS
ฝัง
- เผยแพร่เมื่อ 16 ก.ค. 2024
- En este video voy a hablar sobre que son los Pseudoelementos en CSS, para que sirven y voy a dar unos ejemplos de ::after y::before
🚀 Blog de Diseño Web:
www.falconmasters.com
⭐ Curso de Diseño Web desde Cero:
www.desarrolloweb.io/cursos/d...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrolloweb.io/cursos/p...
⭐ Curso de React y Firebase desde Cero:
www.desarrolloweb.io/cursos/r...
⭐ Curso de Bootstrap:
www.desarrolloweb.io/cursos/b...
⭐ Curso de Woocommerce:
www.desarrolloweb.io/cursos/t...
---
📄 Código del Proyecto: github.com/falconmasters/pseu...
Ilustración SVG: Launch day de undraw.co/illustrations
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters - วิทยาศาสตร์และเทคโนโลยี
![แฉ [2/4] 12 ก.ค. 67 เจ้าของไวรัลดังในโซเชียล 'ลิลลี่ เหงียน' ฝันอยากเข้าวงการ โดนหลอกสารพัด | GMM25](http://i.ytimg.com/vi/7zntQK2U8-8/mqdefault.jpg)
Si te gusto el video dale manita arriba! 👍
Oye bro, hace no mucho termine Javascript (por cierto muy bueno) (de ti) y justo ahora no tengo mucha idea de que hacer después, estaba pensando en intentar crear un bot de discord, ¿crees que es buena idea? (Si tienes una sugerencia házmela saber por favor) pdta. Cuídate bro
@@cordovaaxel es muy buena idea broth para poner a práctica lo que sabes, siempre y cuando este repasando esta todo perfecto. Porque claro si hace poco que lo terminate tiene que ponerlo a práctica para poder manipularlo. Bien y no te tranque. En ejercicio.
Haz un Discord donde nos ayudemos unos a otros y nos respondamos dudas, eres un master 🙌
no me gusto, ya le di manita abajo vro.
encontre tu canal por que lo recomendaste en un curso de udemy de php muy bueno la verdad
Estoy aprendiendo CSS viendo videos en YT y me había dado de topes con ciertos cálculos que necesitaba hacer para lograr una distribución perfecta de mis elementos pero viendo este video y por casualidad aprendí que es posible realizar funciones como la que realizaste en la linea 63 del min. 13:23
me pasó igual
Amigo no puedo entender como algo tan complejo como la programacion la expliques tan bien me encantan tus videos siento que deberias tener mas reconocimiento porque tu canal es muy bueno tanto educativo como divertido
Es verdad, lo explica genial!!
En este canal se aprende mucho, gracias por compartir tu conocimiento.
Buen video, estaría bueno un video sobre cómo usar las imagenes svg :D
Si sería, muy bueno!
Felicitaciones Carlos Arturo. Excelente Gracias por compartir tus conocimientos.
Excelente!! gracias por la explicación
Exelente. Sigue así con videos cortos pero con muy buen contenido.
corto con 16min? jaja
Llevaba tiempo buscando como colocar ese elemento del triángulo. Gracias por resolverlo, sin duda, contigo se aprende demasiado.
Desconocía la manera de posicionarlo con esa función de css. Espero el siguiente video y más de este tipo de tips.
Maravilloso video, como siempre Carlos
Muchas gracias!
como siempre genial video!
Muy buena explicación, como siempre seguir así se aprende mucho contigo. Te da a entender de una vez. Sólo hay que poner atención.
Estuvo muy bien explicado, aprendí primero a llamarle a hover y otros pseudoelementos que no sabía cómo se llamaban, y porfin pude entender que es after y before y su uso Excelente, Gracias👍💪
Excelente video bro, llevaba rato usando los pseudoelementos before y after y para ser sincero no los entendia del todo, pero con tu explicacion me quedo bastante claro
Buen video, Que fácil verlo así explicado!!
Excelente vídeo, muy profesional, y claro, sería muy útil y de gran ayuda que hagas un vídeo con las pseudoclases
Excelente, y muy bien explicado
Muy buen video loco, me despejaste unas cuantas dudas yo que recién estoy empezando con esto del desarrollo web. Gracias, seguí así!
Excelente contenido FalconMasters..!!! 😀👍
Muy interesante y como siempre bien explicado c:
muchas gracias, muy claro, muy util
Muchas gracias. Me queda más claro el uso de estos pseudo-elementos que maneja el lenguaje. También me pareció un ejemplo muy práctico.
Gracias, crack, sos un Halcón de la programación, y sencillo como una paloma! Saludos desde Argentina
Me quedo clarísimo, gracias.
Excelente clase!
Muy buena la explicación, muchas gracias 😉
Explicación más genial bro, saludos desde Colombia.
Muy util! Muchas gracias!
Crack! súper bien explicado
Ufff ahora si entendí !!!, muchas gracias !!!
Que buen video, muy bien explicado 😄😄
CANALAZO! UN GENIO!
Muy bueno. gracias
Me encantó este tema 👏
Muy bueno, gracias👍
Muy bien explicado, me resolviste algunas dudas sobre eso :)
Excente ... muy bueno. Me gustaria tambien el video de pseudo clases. GRACIAS
gracias por compartir tu know how
Gracias falcon, GRACIAS
Excelente video.
Muchas gracias
Gracias !
Gracias por el video, al fin pude comprender mejor como usar after y before :#
Hola Carlos, primero que nada me gustaría felicitarte por la labor que realizas al enseñar diferentes temas acerca de desarrollo web en TH-cam y udemy, cómo segundo punto quisiera dejarte una observación, tengo algunos de tus cursos en udemy los cuales estaría padre que actualizaras con nuevos proyectos, por ejemplo el de php es bueno pero a mí parecer siento que falta una sección que hable sobre MVC, he visto que algunos de tus alumnos tienen dudas sobre cómo implementar este patrón en sus proyectos incluyendome.
Saludos y nuevamente gracias por enseñar diseño y desarrollo web.
bien explicado crack
Saludos, excelente explicación. También podría crear el triangulo haciendo un cuadrado del mismo color del fondo y rotándolo con la función: transform: rotate(45deg); y luego centrándolo. (es teoría, ahora voy a probar)
Sos una maravilla
Buen día: Carlos Arturo. Gracias por los tutoriales, quisiera saber si tenes pensado subir alguno acerca de emails responsive que se vean correctamente en Outlook. Saludos.
Muy buen video
Gracias bro :)
Si, muchas gracias Bro...muy útil, ahora ya entendí perfectamente las funciones de position: relative vs absolut, pese a que el tema fue del psudoelemento.
Me paso lo mismo jeje
excelente
El mejor puto canal de youtube.
puedes hacer uno explicando las transformaciones :D seria genial
Muy buena explicación :D
Gracias!
Hola. Increible video. Estoy aprendiendo css y se me hace muy interesante. Me gustaria que hablaras de como hacer animaciones que afecten a 2 o mas elementos. Por ejemplo que cuando afecte 1 elemento con hover este desencadene una animacion en mi primer elemento y el segundo sin necesidad de clases para poder hacer que ambos hagan cosas distintas pero iniciadas por el 1 mismo elmento. Perdon si no me supe explicar
Nunca dejo de aprender con tus videos
Es un gusto escuchar eso
@@FalconMasters ✨
Hola Carlos. Excelente video como siempre. Hace poco descubrí la propiedad 'snap' para hacer scroll ajustado a la pantalla, pero no me queda muy claro. Sería genial que explicaras ese tema.
Genial Muchas Gracias
Si Carlos, haz el vídeo de los Pseudo::elementos, por favor. Gracias.
Falconmasters quiero ver tu curso en undemy y ahí explica todo estos temas muchas gracias
Quiero aprender HTML y CSS desde 0 hasta nivel avanzado. Tienes algún curso completo de eso? Eres un crack explicando. Muy buenos videos.
gracias bro :,D
Me ayudó muchísimo gracias eres un crack, cómo haríamos para poner sombras con el diálogo incluyendo a la flecha un box-shadow
muy interesante la de selection, andaba buscando cómo se podía cambiar el color de fondo del texto seleccionado y me lo aclaraste, muchas gracias Carlos Arturo, saludos desde España
El perfil es del folleto Exige!!!!
@@anthonysilvasalazar correcto (es que me parezco a el )
😂😂😂. Muchos Saludos. 👍👍
Muy buen video. Solo tengo una duda, en el caso de las pseudoclases de los inputs, en especial :active; como puedo saber el motivo por el cual no me aplica los estilos cuando concateno dicha pseudoclase con un selector adyacente. Ejemplo: input:valid + .label { //estilos.....} esto no me lo aplica. Pero si quito el selector adyacente si que me aplica los estilos especificados pero solo al input
Muy buen video, gracias. Es responsive ?
Super facil de comprender, el que si necesito repasar es el de pseudo clases,¿Vas a hacer un video hacerca de ello?
Gracias por el tutorial, por favor publica el de Pseudoclases
Lo voy a tener en cuenta para prepararlo para la siguiente semana.
Hola falcon muchas gracias tus videos me han servido mucho, aunque quisiera saber algo por ejemplo todos los datos que se llenan en un formulario que se guarden en alguna hoja de excel o se envíen por correo
Esa es la gran duda que tengo
Es hermoso :3 creo que nunca vi lo de calc(50% - 20px);
Excelente, gracias a este tutorial se me ocurrio que puedo usar seudoElementos para crear subrayados animados
Por favor haz un video del plugin Swiper
Hola Carlos como estas ? espero que bn,
una duda por que no usas firefox develop, o es solo por este video
Brother! deberias hacer un video sobre la libreria wow.js y animate! es genial no requiere de jquery, y es muy util para el diseño moderno tu lo explicarias de forma excelente.
que hariamos sin ti crack? gracias!
Uff, re util
idolo
Y también sería algo chevere que trabajarás más seguido en visual ya que creo que es bueno
Video de los Pseudoelementos o moriré !!
Tendras algo de como configurar intellisense en VS Code para jquery? no encuentro un addon completo, tampoco para vbs
Te escribi en facebook una duda, agradezco la respuesta
Hola Carlos mucho gusto! , disculpa como puedo hacer 100 saltos de linea ? hay una formula creo con el asterisco * , pero no la encuentro por nungun lado :( , de antemano muchas gracias !
Muy buena explicación! No sería mejor usar un div y darle esa forma en lugar de ::after? No termino de entender la razón de existencia de estos pseudo-elementos
te mereces un puesto de profesor en la mejor universidad de tu país
wtf yo pensé que sabia usar css y acabo de descubrir que se pueden crear variables jajajajaja, buen video descubrí muchas cosas.
Muy bien, capo.
Harías un curso de jQuery ?
Me encanta tu voz, gracias por compartir tus conocimientos, acabo de empezar una carrera de programacion y estoy muy asustada..
Gracias! No tengas miedo, al inicio va haber muchas cosas que no entiendas, pero empieza paso por paso y siempre investigando. Estoy seguro de que te ira muy bien.
No tengas miedo, tengo 5 años de experiencia en esto y mas o menos el 60% de mis conocimientos ha sido gracias a Carlos. Siguelo !!, es un gran mentor.
No eres la unica, jsjsjsj tambien me encanta su voz.
Hola, tengo una duda, es que en mi hoja no me reconoce "height:" y "width:", me marca error por los dos puntos (:), y no sé cómo solucionarlo :c
Me gusta mucho los colores del visual studio que tema estas usando?
Ayu Mirage
Hola Carlos (Falcon) quiero hacer 3 cursos de udemy tuyos pero quisiera saber si me puedes dar un descuento o algo asi, Te lo ruego por esta cuarentena esta dificil la situacion sin trabajo, espero una respuesta
Qué equipo usas para codear? Ando en búsqueda de uno nuevo pero me siento un poco perdido. Si ya hiciste un video mostrando lo que pregunto, lo siento, apenas voy descubriendo tu canal. Gracias de antemano!
Visual Studio Code, es el más recomendado para codear ya que admite una gran variedad de lenguajes e informa cualquier incidencia.
Me gustaria aprender seudo clases
no se porque no puedo abrriel el elemento html en mi editor
Pseudo elementos... en tu curso de CSS? Es el de Front-end? Porque yo no vi esos de :before y :afuera, solo las pseudo clases como las que mencionas (hover).
Podrías decirme cual curso es?
Hola falcon, qué editar de texto usas?
VSCODE
Falconmaster estaría muy bueno un Discord donde respondan dudas y no ayudemos unos a otrod
Excelente vídeo bro, justo tenia esa duda sobre after y before, pero tengo una duda existencial xd, me gusta el desarrollo web tanto front como back pero ahora viendo un poco mas a fondo lo del front me pregunto si es necesario ser diseñador gráfico, me da la impresión de que es un si o si pero no estoy seguro, agradeceria una respuesta
En la mayoría de trabajos te dan los diseños hechos y hasta los colores que tendrá la página en cada elemento, tú cómo desarrollador front solo harás la función de pasar ese diseño que te pasan a código y plasmarlo en la pantalla.
Para eso están los desarrolladores UX & UI
A mi no me anda😭selecciono el elemento de html y cuando pongo ::
No me salta nada
4:58 que diferencia hay entre img y svg?
El SVG es código por lo que carga mucho mas rápido y le quita peso a la pagina web.