Que rayos son los Pseudoelementos en CSS

Подписаться 511 тыс.

Просмотров 61 тыс.

50% 1

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

Наука

Опубликовано:

19 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 143

@FalconMasters 4 года назад

Si te gusto el video dale manita arriba! 👍

@cordovaaxel 4 года назад

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

@fullpeliculafhdhdsd9242 4 года назад

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

@mckutinha7603 4 года назад

Haz un Discord donde nos ayudemos unos a otros y nos respondamos dudas, eres un master 🙌

@rootclever2883 4 года назад

no me gusto, ya le di manita abajo vro.

@DringoTV 4 года назад

encontre tu canal por que lo recomendaste en un curso de udemy de php muy bueno la verdad

@viperaca 4 года назад

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

@RhedKief 3 года назад

me pasó igual

@angeljoelmarcoscastilla4391 4 года назад

En este canal se aprende mucho, gracias por compartir tu conocimiento.

@emanuelmejia4525 4 года назад

Buen video, estaría bueno un video sobre cómo usar las imagenes svg :D

@luis96xd 4 года назад

Si sería, muy bueno!

@cleidysbrooks 4 года назад

Felicitaciones Carlos Arturo. Excelente Gracias por compartir tus conocimientos.

@fabianrossini4315 Год назад

Gracias, crack, sos un Halcón de la programación, y sencillo como una paloma! Saludos desde Argentina

@axelmendez9075 4 года назад

Llevaba tiempo buscando como colocar ese elemento del triángulo. Gracias por resolverlo, sin duda, contigo se aprende demasiado.

@grewosoft 4 года назад

Desconocía la manera de posicionarlo con esa función de css. Espero el siguiente video y más de este tipo de tips.

@fullpeliculafhdhdsd9242 4 года назад

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.

@anell0784 4 года назад

Excelente!! gracias por la explicación

@totallymad100 4 года назад

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

@danielramos1504 2 года назад

Buen video, Que fácil verlo así explicado!!

@sebatecning5207 4 года назад

Excelente vídeo, muy profesional, y claro, sería muy útil y de gran ayuda que hagas un vídeo con las pseudoclases

@malvaloca 2 года назад

Muy buen video loco, me despejaste unas cuantas dudas yo que recién estoy empezando con esto del desarrollo web. Gracias, seguí así!

@brandonalexis8263 3 года назад

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👍💪

@angelgabrielgarciarangel133 2 года назад

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.

@jimmymontenegro8517 2 года назад

Me quedo clarísimo, gracias.

@tj__2316 4 года назад

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

@jessicabermeo5843 4 года назад

Es verdad, lo explica genial!!

@programacion_para_todos 2 года назад

como siempre genial video!

@julian_pp 3 года назад

Muy buena la explicación, muchas gracias 😉

@luzmaria9244 2 года назад

muchas gracias, muy claro, muy util

@martinleo4818 4 года назад

Excelente, y muy bien explicado

@danielmutn 4 года назад

Exelente. Sigue así con videos cortos pero con muy buen contenido.

@MsSoldadoRaso 2 года назад

corto con 16min? jaja

@grey3615 4 года назад

Muy interesante y como siempre bien explicado c:

@yecksin 3 года назад

Ufff ahora si entendí !!!, muchas gracias !!!

@JottaArtZOficial 4 года назад

Muy bien explicado, me resolviste algunas dudas sobre eso :)

@jemc300x 4 года назад

Excelente contenido FalconMasters..!!! 😀👍

@rfclandesto3741 3 года назад

Explicación más genial bro, saludos desde Colombia.

@elgatodiego 4 года назад

Excente ... muy bueno. Me gustaria tambien el video de pseudo clases. GRACIAS

@moisanchez 3 года назад

Crack! súper bien explicado

@_myenglishbro Год назад

Excelente clase!

@eder_ 4 года назад

Muy util! Muchas gracias!

@garyremache938 Год назад

Gracias por el video, al fin pude comprender mejor como usar after y before :#

@pvallejos 4 года назад

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.

@damianm2436 2 года назад

Muy bueno, gracias👍

@soiiagus11 4 года назад

Gracias falcon, GRACIAS

@rubenarielperezgonzalez 4 года назад

Me encantó este tema 👏

@fergolive 2 года назад

Muy bueno. gracias

@luis96xd 4 года назад

Que buen video, muy bien explicado 😄😄

@Destinymusic506 4 года назад

Excelente video.

@sierracebrian 4 года назад

gracias por compartir tu know how

@fundacionroldan9922 Год назад

Maravilloso video, como siempre Carlos

@FalconMasters Год назад

Muchas gracias!

@since7327 3 года назад

Muchas gracias

@AlejandroLopez-tb4un 4 года назад

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.

@scrow23 4 года назад

Hola Carlos, primero que nada me gustaría felicitarte por la labor que realizas al enseñar diferentes temas acerca de desarrollo web en RU-vid 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.

@Camux8 3 года назад

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)

@dulcedeinvierno1 Год назад

CANALAZO! UN GENIO!

@resario89 2 года назад

Gracias !

@ezequielcm1273 3 года назад

bien explicado crack

@cristianm.t6957 3 года назад

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

@DonatelloTurtle 4 года назад

Sos una maravilla

@bluefutbol1515 4 года назад

puedes hacer uno explicando las transformaciones :D seria genial

@aplumaytinta 3 года назад

Muy buen video

@tonystete3988 2 года назад

Gracias bro :)

@DuzZeus 4 года назад

Super facil de comprender, el que si necesito repasar es el de pseudo clases,¿Vas a hacer un video hacerca de ello?

@wildermosqueratulcan8027 4 года назад

Falconmasters quiero ver tu curso en undemy y ahí explica todo estos temas muchas gracias

@Luis-MFG 3 года назад

Quiero aprender HTML y CSS desde 0 hasta nivel avanzado. Tienes algún curso completo de eso? Eres un crack explicando. Muy buenos videos.

@newentu Год назад

excelente

@santiago2950 3 года назад

El mejor puto canal de youtube.

@kevinleonelespinozapoma4976 3 года назад

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

@axelneave2292 4 года назад

gracias bro :,D

@codegenial1471 4 года назад

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.

@MauroGonzalez1307 2 года назад

Me paso lo mismo jeje

@cristiansuarez4407 4 года назад

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

@zafena1199 4 года назад

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

@anthonysilvasalazar 2 года назад

El perfil es del folleto Exige!!!!

@zafena1199 2 года назад

@@anthonysilvasalazar correcto (es que me parezco a el )

@anthonysilvasalazar 2 года назад

😂😂😂. Muchos Saludos. 👍👍

@mirco_martin 4 года назад

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.

@luisenriqueortizcastillo2941 4 года назад

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

@MarioTorreblanca1 4 года назад

Muy buena explicación :D

@FalconMasters 4 года назад

Gracias!

@danielmaldonado5954 3 года назад

Muy buen video, gracias. Es responsive ?

@shepharddeveloper5823 2 года назад

Es hermoso :3 creo que nunca vi lo de calc(50% - 20px);

@missanddiie 4 года назад

Genial Muchas Gracias

@missanddiie 4 года назад

Si Carlos, haz el vídeo de los Pseudo::elementos, por favor. Gracias.

@mundoCodeKuve 4 года назад

Nunca dejo de aprender con tus videos

@FalconMasters 4 года назад

Es un gusto escuchar eso

@mundoCodeKuve 4 года назад

@@FalconMasters ✨

@hakubishamon5614 4 года назад

Hola Carlos como estas ? espero que bn, una duda por que no usas firefox develop, o es solo por este video

@user87546 Год назад

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

@matias25pinto 4 года назад

Excelente, gracias a este tutorial se me ocurrio que puedo usar seudoElementos para crear subrayados animados

@cristiansuarez4407 4 года назад

Y también sería algo chevere que trabajarás más seguido en visual ya que creo que es bueno

@jorgeoyolamoreno 2 года назад

idolo

@sierracebrian 4 года назад

Tendras algo de como configurar intellisense en VS Code para jquery? no encuentro un addon completo, tampoco para vbs

@wilmercuevas6491 3 года назад

que hariamos sin ti crack? gracias!

@ygi6106 4 года назад

Uff, re util

@victorm.ottatig.4706 4 года назад

Gracias por el tutorial, por favor publica el de Pseudoclases

@FalconMasters 4 года назад

Lo voy a tener en cuenta para prepararlo para la siguiente semana.

@pierrojas7688 4 года назад

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 !

@armandotsx 4 года назад

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!

@ignacioromerotorres4041 4 года назад

Visual Studio Code, es el más recomendado para codear ya que admite una gran variedad de lenguajes e informa cualquier incidencia.

@matiashau5985 4 года назад

Muy bien, capo. Harías un curso de jQuery ?

@sergiofilothvaliente9366 4 года назад

Por favor haz un video del plugin Swiper

@fedema7 4 года назад

Video de los Pseudoelementos o moriré !!

@francismartinez2325 4 года назад

Me encanta tu voz, gracias por compartir tus conocimientos, acabo de empezar una carrera de programacion y estoy muy asustada..

@FalconMasters 4 года назад

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.

@missanddiie 4 года назад

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.

@jessicabermeo5843 4 года назад

No eres la unica, jsjsjsj tambien me encanta su voz.

@ManuelVazquez 4 года назад

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?

@zainspierrot7075 2 года назад

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

@luisp0160 2 года назад

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.

@distopiko 2 года назад

Para eso están los desarrolladores UX & UI

@felipecruz3336 4 года назад

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