Use Clip Path to Vary Your Designs on the Web

Поделиться
HTML-код
  • Опубликовано: 28 сен 2024

Комментарии • 39

  • @samoangamer
    @samoangamer 6 лет назад +19

    I just wanted to say I sincerely appreciate your enthusiasm and love for web development. Thank you for sharing your knowledge!

  • @RogerThat902
    @RogerThat902 6 лет назад +7

    Literally just added this to my website and it really does make it look a little more interesting. Thanks!

  • @RickGladwin
    @RickGladwin 4 года назад

    I think Jen’s videos don’t have more likes simply because people leave her channel on autoplay. I know that’s true for me. This content is fantastic. But I’m only going through the extra step of pausing and liking on every fourth video or so. Anyway, awesome channel, awesome presentation.

  • @HashimWarren
    @HashimWarren 6 лет назад +1

    Thanks for explaining the why and showing an example

  • @GDHT
    @GDHT 6 лет назад

    I had no idea you could do this! Thanks for the video!

  • @rfossella
    @rfossella 3 года назад

    Another excellent video. Your presentation for explaining things is very cool. Thank you

  • @Banjer
    @Banjer 6 лет назад

    That is what I was looking for these days!! Thank you so much

  • @cergeant485
    @cergeant485 6 лет назад +10

    P.S By the way lady and gentlemen, I've found this site:" bennettfeely.com/clippy/ "to ease out our work.

  • @BurgerAndDrink
    @BurgerAndDrink 6 лет назад

    Thanks for this-- will use in projects right away!

  • @pamelahicks
    @pamelahicks 6 лет назад +4

    Clip-path: polygon() doesn’t work in Firefox, Edge, or IE and I discovered it was just easier to use svg in my particular situation.

    • @LayoutLand
      @LayoutLand  6 лет назад +1

      `clip-path: polygon()` was recently added to Firefox. Yes, using SVG is a good way to get more coverage.

  • @seemsas
    @seemsas 6 лет назад

    Thinking outside the box. Great effect. Thank you

  • @toftescott4036
    @toftescott4036 2 года назад

    We should protest you coming back to RUclips. Simmon where are you!!!

  • @orgildinho
    @orgildinho 4 года назад

    Great tips. Is there a way to bend the grid structure, like a face of cylinder ?

  • @ralexand56
    @ralexand56 6 лет назад

    Great video. Wish you have covered what browser you can use it in.

  • @RealToughCandy
    @RealToughCandy 6 лет назад +2

    I would love to see your CSS rendition of the great Jutta Hipp's Blue Note (1530) album cover.

  • @keserumiho
    @keserumiho 6 лет назад +1

    Nice trick. How did you randomize the clip path on your example?

    • @GabrielleIskandar
      @GabrielleIskandar 6 лет назад

      It's based on nth rules: www.widehive.com/artists You could be specific and specify nth-child(12) or you could choose a recurring rule like nth-child(3n+1)

  • @edwassermann8368
    @edwassermann8368 Год назад

    LOVE it!

  • @brian102024
    @brian102024 6 лет назад

    Nice examples

  • @giantqtipz8117
    @giantqtipz8117 6 лет назад

    wow Im not creative at all, but I feel like it after watching this video LOL. More tools to play around with, thank you!

  • @whatsthestoryborrey5665
    @whatsthestoryborrey5665 6 лет назад

    would be cool if there was a border-clip-path
    stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style

  • @stergiosk6064
    @stergiosk6064 6 лет назад

    I like clip paths I love Charlie Parker

  • @timwilburn8883
    @timwilburn8883 6 лет назад +1

    Such a shame that good design techniques seem to take a back seat when it comes to browser support. Our job would be so much easier, but more importantly, good design would be so much more prominent if CSS properties like this were prioritized by browsers. I know some do, but getting support on a wider, and much more rapid scale would really improve the situation!

    • @LayoutLand
      @LayoutLand  6 лет назад +3

      Well, that's part of what I do, lobby browser makers to implement these CSS properties. You can also help by voting at Microsoft's User Voice. And writing articles and such about why you want them. But also, just use them, even when they aren't in every browser: ruclips.net/p/PLbSquHt1VCf1kpv9WRGMCA9_Nn4vCLZ9Y Many browser makers use data about how many sites use a new property to help them decide what to focus on next. (I know I know...)

    • @timwilburn8883
      @timwilburn8883 6 лет назад

      That's so great we can actually influence those decisions! Even if they are....always watching : )

  • @Cognitoman
    @Cognitoman 6 лет назад

    Just use rotate

  • @danielsokil9529
    @danielsokil9529 6 лет назад

    Imagine if humans were perfect. So robotic and boring, like a box.

  • @joshlopez85
    @joshlopez85 6 лет назад +1

    Hey Jen! I am loving your videos. Just curious on how you would make this css have a random variation so you can set it once in css and each img would have a random number but not too large of a number to cut out something. Any suggestions? :)

  • @raphaelolipitz4597
    @raphaelolipitz4597 4 года назад

    So how do I get an random number for different pictures?

  • @dariogeorge8680
    @dariogeorge8680 6 лет назад +1

    Thank you for all your videos

  • @sanjaybhatikar
    @sanjaybhatikar 4 года назад

    Brilliant video!

  • @John-wx3zn
    @John-wx3zn 2 года назад

    I really like the way you talk. I noticed that the way you put clippath that that is very cool. Thank you for teaching this material.

  • @cergeant485
    @cergeant485 6 лет назад

    Great tip Jen, thank you! At last, I can get rid of those boring square forms.

  • @zaboogoosfraba6699
    @zaboogoosfraba6699 6 лет назад

    I tune in today hoping to see something new. Ever thought about putting a course together on udemy

  • @chrischandler3041
    @chrischandler3041 6 лет назад

    Nice touch to the design! I will use it.