Dibujando con CSS
ฝัง
- เผยแพร่เมื่อ 19 ก.ย. 2024
- Entra al curso de HTML5 y CSS3: platzi.com/cur...
En este tutorial, vas a aprender a dibujar formas con CSS con un ejercicio muy fácil de aprender y replicar. Este tutorial es parte de un curso completo de HTML5 y CSS3 en Platzi.
----------------------------------------------------------------------
Todo esto y más, en platzi.com
¡Suscríbete a nosotros!
Twitter: / platzi
Facebook: bit.ly/platzifb
Aquí, en TH-cam: bit.ly/mejoryt
![PURPEECH - นี่ฉันเองคนที่... (It's me) [Official MV]](http://i.ytimg.com/vi/NuhHd0hOOg8/mqdefault.jpg)
Yo pense que era de el CSS osea Counter Strike Source JAJAJA perdonen
+Star Member jajaja
XD relax..
era pues
JAJAJAJAJA
bueno, bienvenido al diseño web
CSS con Mia Califa en PLATZI BRAZZERRS
😂😂
Jajajajajajajajajaja😂😂😂😂😂.
ajajajjaja
Aguas tanto nopor hace daño
mejor inserto una imagen :v
En realidad esto es muy util por los motivos que ella dice al final. claro es mas tedioso pero util. con algo de practica se pueden usar esos PseudoElementos puedes hacer lograr efectos muy utiles con ellos
No tiene sentido si se usa font icons, o mejor aún, un svg.
Cierto, pero puede ser muy util si alguna vez no encuentras el font icon que necesitas
usar svg
Alan S. Es para aprender, nunca sabes cuándo lo vas a utilixar. No sea tan negativo amigo
SVG en HTML5 y listo. 6 nodos y ya estuvo
+Eliuk Blau pero igual si esto lo combinas con PHP se pueden hacer cosas muy locas!
JAJAJAJAJAJAJA,a lo mejor sí xd
Eso mismo pensaba
No son profesores improvisados. De hecho NO SON profesores. SON PROFESIONALES del área. Los mejores que Platzi nos puede traer según la negociación que se logre. Los que esperan a PROFESORES vayan a la Universidad o a alguna institución académica. Platzi es un inmenso aporte a la web para Latam y quienes lo critican solo exponen su ignorancia sobre la colaboración para mejorar el ecosistema web. Acaso tú que criticas la forma de enseñar, lo harías mejor? Hazte un canal y compite. No es fácil enseñar, pero quien lo haga, sea como sea, es un gran valor. Quienes solo critican, cámbiense de tribu.
No porque luego me mandan a sus abogados :v
Toda la razón Ricardofox12 . En ese caso, me retracto de mi defensa para este caso en específico.
Challenged Acepted!
css-tricks.com/examples/ShapesOfCSS/
No se tu pero a mi esto me huele a puro copy'n paste :P
auguste Que van a conseguir estos bobos, si mandan un alert en la consola y ya creen que pueden inventar algoritmos para IE, son puro fracasado que viene a sacar sus frustraciones aquí
Gracias Marulango por este vídeo. Me gustó tu estilo profesional y creo que es un excelente vídeo. Las críticas son rudas, pero recuerda que los que las hacen no pueden competir contigo. Sino que lo demuestren. Por favor, no dejes de producir nuevos tutoriales. Estoy seguro que tendrás muchísimos éxitos. Saludos.
depués de estar prácticando 2 hs lo pude entender, simplemente si no lo entienden como es que funciona de raíz tienen que jugar con los valores, ir cambiando y viendo sus modificaciones en tiempo real para q ustedes mismos se den cuenta lo que estan cambiando, asi es como yo lo hice. Mucha Gracias Marcela LANGOOO
After no es un selector sino un pseudo elemento Saludos
Lo que es no estudiar y creer que con un poco de idealismo millennial puedes fundar tu escuela
VitaFred TV ¿Qué?
@@arokglez fansboby detect !!! Jajajajajaja
Según w3school, lo es.
www.w3schools.com/cssref/sel_after.asp
@@YstmioGaona0505 claro, el element::before o element::after es el selector, si te fijas en la referencia de abajo de los pseudo elementos aparecen ::before y ::after que son los pseudo elementos.
Buen día Platzi Team.
Gracias por la referencia a esta técnica CSS. Sin embargo, tengo una duda sobre el HTML: ¿La etiqueta es válida? Estuve revisando en algunas Web sobre HTML5 y no hacen referencia.
Gracias por la atención y respuesta.
+Juan Carlos Morales S Buena pregunta, estamos iguales.
+Juan Carlos Morales, busque y tampoco encontre nada, supongo que como podemos crear etiquetas personalizadas en html5 le funciono aunque yo supongo que ella lo usa mas de ejemplo que con un fin practico real.
+Juan Carlos Morales S Hola buenas noches, quizás te topaste con un web components. Un clásico ejemplo de esto seria la de google map
+Maria Vargas, hola. Súper. Con esa referencia sé por dónde ir a buscar. Qué bueno que leiste mi comentario y compartiste respuesta. Saludos.
+Juan Carlos Morales S Dnd, si te interesa el tema de los web components investiga sobre Polymer (www.polymer-project.org/1.0/) la librería de google para facilitar el trabajo de la creacion de web components
Explicas muy bien y tu voz tiene una entonacion suave y agradable ,lo cual es importante cuando un tutorial es largo.
espectacular es hermoso ver como das forma a un lienzo en blanco solo con css gracias por el video
En lo que espero que todos estén de acuerdo es que la chica está lindísima.
+Carlos Vazquez en los cursis que eh visto solo eran hombres , cuando a la chica en la miniatura crei que solo era para llamar la atencion.
La propiedad "solid" no te da una línea recta, te da una línea continua, saludos.
+AmazingVideos platsi y sus profesores improvisados
+AmazingVideos Wakkos dando un curso de PHP (WordPress) ya dejó todo claro acerca de sus profesores. Algunos buenos, otros no tanto.
+AmazingVideos que tecnicismo, me haces acordar entre curva y recta, cuando la primera puede ser la segunda pero no al revés.
+AmazingVideos ?? una línea recta, una línea firme, una línea sólida, una línea continua ...
es el estilo del borde no se cual es tu problema?
no son lo mismo, busca sus definiciones, saludos.
Con tigo aprendo lo que sea
Viene a programar y me termine enamorando
Ya me entraron ganas de llevar el curso....♥♥♥
chevere muy buen tutorial explicado, me gusto el tutorial y la persona que lo explica felicitaciones no hay mas vídeos como este para poder aprender mas, ojo que sea gratis
mis respetos a esta 👧-mujer. de verdad muy buena e inspiradora. la amo!
Este tipos de videos deben ser completamente progresivamente visuales. Por lo que un live server viendo pasao a pasao los efectos del codigo se aplican. asi uno puede ver para que tantos border esto border aquello. Solo una critica constructiva. El video esta bueno !!
Excelente video, que chica tan inteligente
fantástico Maestra, gracias por la ayuda
Definitivamente uno puede llegar a aprender mucho de cualquier personona, me dio por ver el vídeo con humildad y sin darmelas de que se CSS. Y resulta que aprendí algo nuevo y muy útil después de todo:
No conocía el "display: inline-block;"
una consulta importante: exite un programa para moldes que se llama audace.com sirve para dibujar molfe o figuras geometricas de prendas se podra hacer un programa que haga lo mismo que esta empresa que programa es mejor para programar dibujos planos
Xfin alguien explicó bien. Muchas gracias.
Alguien me puede explicar como es que las esquinas del diamante quedaron así? Con ese ángulo
Es gracias a los bordes es como si hicieras un cuadrado con puros bordes y de los 4 pones el de top left rigth en lugar de color le pones transparent y listo
@@portaspert Que??
Es porque le dices que tenga por ej :25px de largo la parte superior 30 de alto y 50 de largo en la parte de abajo, entonces ahi se genera el ángulo, depende del largo de arriba en comparacion con el de abajo (algo así)
@@baro-u aun no lo entiendo
Es porque tenes cortes a 45°grados que son los lados transparentes de la caja cuadradra, pero al hacer los bordes invisibles más anchos hachen que el angulondenlos cortes sea más agudos, espero te sirva, igual esta mal el width, tendria que ser de 100px .
Copy/paste cualquiera lo puede hacer, si le da un aire le queda la vista torcida... se dice "maestra" debería ser mental con un ejercicio tan simple.
por mas que vi no comprendo como es que se forma esa dorma
artemanual simplemente se esta trabajando con bordes, lo que le da la forma de diamante es la transparencia que le da a cada uno de los lados
Cierto, no explica nada. Simplemente lo hace y solo se ve el resultado final. Para verlo bien hay que hacerlo paso a paso y cambiar parámetros para ver lo que estás creando. Jugar con el código.
Yo ni se dibujar.. Y vi este video solo por ver a esa belleza 😂💓😻😵
El comentario mas estupido y sin sentido de la historia de youtube.
Creo que me enamoré
X2
X3
X4
S I M P S
Te animarias hacer los bordes transparentes en otro color para poder entenderlo? gracias.
hola oye estaria mejor que hicieras tu video con el editor Brakets... se ve en tiempo real como se va diseñando. Bueno es una recomendacion de alguien que ya lo ha probado
excelenteeee!!!.....y para colmo me salio...gracias por compartir
Me encanto este metodo seria muy bueno para trabajar con animaciones perso alizadas, gracias por el aporte.
Explicas muy bien, me voy a subscribir a tu canal. Gracias
Es muy bonito de la verdad. Y es lo mejor.
Este tipo de chicas son hermosas❤️.. súper entendido 👩💻.
Amo a esta profesora *_*
Increible video gracias por compartir
Muy bien el video y bien explicado
Giobanny Santamaria en qué parte explican?
Si no fuera porque aun hay DEMASIAAADOS browsers viejos por ahí, lo haría todo así y con SVG, pero la realidad es otra y el público geek no es el mio... pero en términos de performance es una maravilla.
+Miguel Angel Vargas Cruz
Una lástima, aunque ese público geek ciertamente es el único mercado que se puede llamar de web. Que he visto usar IE para cualquier cosa menos para renderear tecnología estándar.
Aunque me surge una duda, ¿qué no esto es SVG?
O SVG se dibuja mediante javascript.
+rafael lopez ovando SVG no es ni JS ni CSS, pero se pueden combinar. SVG es mas parecido a HTML
Entonces se hace mediante XML...
¿Es así?
Y por cierto, no me cacho las diferencias entrer SVG y CSS ¿no pueden ser lo mismo?
Que me he visto unas animaciones profundas con puro código CSS, como apenas llevo un tiempo aprendiendo, no sabría identificar si mezclaron CSS con SVG.
El formato SVG (Scalable Vector Graphics) es un tipo de imagen vectorial hecho con XML, se puede escalar sin perder la calidad, el problema es que algunos browsers pueden renderizar diferente y hay que llamarla a través de por otro lado, hacerlo en CSS también es un vector, pero programar algo que vaya cambiando de tamaño es un martirio... ambos si están bien optimizados son muy ligeros, pero la compatibilidad en ambos casos, es su mayor desventaja, a menos de que en CSS hicieras pixel por pixel, lo cual sería muy laborioso, a grandes razgos son las pros y contras.
Yo uso una combinación de estrategias para abatir el tiempo de carga y los request, pero evito las técnicas incompatibles como el SVG y algunos métodos poco compatibles de CSS:
www.grupoalianzaempresarial.com
Incluso en IE 6 no te llevas una experiencia mala en mis páginas y no peleo tanto con el código, lo que echa todo a perder en el performance es la publicidad de Google, pero la quitaré pronto.
¿Qué hace exactamente el selector :after?
Excelente video ¡Muchas gracias! :D
selector after??? yo pensaba que era un seudoelemento ay platzi platzi solo los nuevos les prenden velas a sus cursos.
Según w3school, lo es.
www.w3schools.com/cssref/sel_after.asp
Se las tiran de genios sin aportar nada de valor, solo echar caca es lo que saben hacer. Gente toxica
no seria mas fácil crear el vector en cualquier programa de diseño y después general el código con alguna aplicación? xP
Muy buena explicación sobre el uso de CCS para dibujar formas... esto otro va para los que comentan realmente todo código y algoritmo actual podría considerarse copia de uno anterior todos aprendemos de alguien y adquirimos sus estilos e incluso sus manías al programar, no es nada raro ver códigos similares o parecidos ya que si vamos al caso en Internet que pagina podría considerarse un diseño original?
Que excelente forma de expresarse y que claridad en la explicación....
muy hermosa la profe, pero es mas facil hacerlo en una sola linea con la propiedad clip-path
Te amo
Esas cordenadas para los borders para formar la parte de arriba no funcionaron, tuve que poner otras diferentes para que se forme la parte de arriba-
Yo me enamoré de su voz y de su manera de explicar.
Muy bien explicado, felicitaciones.
¡Super! entendido y claro :)
Me quedé en shok: Por mi madre, me caso contigo para dibujar a nuestros hijos a puro código que dices.
Muchas Gracias!!!!
Genial ✌🏻🙂
muchas gracias profe morango
Tuve suerte de entrar a ver esto antes de registrarme y pagar. Dios es bueno
estoy aprendiendo css :D esto me sirvio para repasar thnks
MUY BUEN EXPLICACIÓN !!!
la amo!
Explica mejor que tooooodos los profesores que me impartieron clase.
poco didáctico
a que te refieres?
@@moxo392 a tu culo joder
@@moxo392 No enseñó nada
@@Fely521 creo que el objetivo no era ese, porque no es enseñar, sino mostrar lo que aprenderán en el curso :S para eso está el curso.
con esa profe tan divina vuelvo a aprender html y css ajajja
Con esta profesora si aprendo :p
Estoy completamente enamorado de la profe ah
Aquí pueden encontrar el codigo de esta explicación codepen.io/jhonatan6794/pen/PWWOja
Gracias, cambie los colores de los bordes y pude entender como fue que se había hecho la figura.
Si quieren ver mas codificaciones! Suscribirse a mi canal!
Solo vi un video de GoPro.
Cual explicación?
Quién más pensó que era una alumna más y no la profe? Pero es lo de menos muy bien preparada y conservada jeje.
Muy crack
Para eso estan los iconos
Ya estoy en platzi, te voy a enamorar con mi start up...
Good teacher, prety girl and inteligent.
No se entiende muy bien porqué si le pusiste altura 0 finalmente termina tomando una altura igual. No queda claro porqué razón se logra dibujar el diamante con todas esas propiedades.
solo vi una *C* y entre pero luego me entere que era css y sali 😂
soy solo yo o esa chica me recuerda ha alguien..... XD
Excelente vídeo. Me enamore
Muy interesante.
WooW xD ni lo habia pensado pero buena explicacion
No entendí mucho. Me imagino que faltó graficar cada comando que se ingresaba para que adquiera sentido. Me preocupa que las clases de Platzi sean así de rápidas y no se logre entender la idea. O quizás debo entrar a los cursos con cierto conocimiento previo, lo cual no tendría mucho sentido ya que si aprendo por mi cuenta, para qué pagaría un curso en línea?
Creo que aveces solo explicas para ti :"v
Me encantó, seca Camila Cabello.
que bn
, me gusto deseo mas videos de css3
FalconMasters, o EDTeam, esos de los mejores
¡Gracias!
llegue tarde, ya no esta en platzi :,V
She makes me want to learn to code.
y el video de los media query's donde quedó? #platziBorraVideos
Asi si aprendo
No me imagino como serán los otros profesores .
WAAAAOOOOO QUE CALIDADDDDD!!!!
XD XD xd xd
Esta bien, sólo que hubieras enseñado con la vista previa en vivo
Alguien que me diga si es que estoy escribiendo mal yo o si x alguna razón no se puede hacer, pero yo use la propiedad border y metí todo lo que ella metió pero no funcionó, no se si es que estoy poniendo mal el orden en el que deberían ir o si estoy escribiendo mal, o si no se puede usar border directamente para escribir todas esas propiedades
Que linda voz tiene
Buenísimo
Genial, muchísimas gracias.
Aclaré ciertas dudas que tenía.
Saludos! 👐
que rayos pensé que sabia de memoria puro css , me di cuenta de que estaba viendo al otro lado todo el código uu
Hermosa!
Nice. !!
Y el link del curso 🤔🤔
Buen video, ya habia visto el ejemplo en la web pero explicado por otro frontend es interesante! debe ser muy bueno el curso! gracias..
hola gusta tu canal enseña mucho y por eso me suscribi estoy pendiente a todas tus notificaciones me gustaria pedir tu ayuda haber si me podrías acesorar tengo una venta modal q se abre al clikear en un boton e queria aplicar el efecto blur de css o desenfoque cuando activo la modal pero este efecto se propaga a todo el contenido de la modal y no a lo que esta debajo
Me encanta como lo explica, además su imagen hace el video visualmente agradable. =3