Thinking Outside the Box with CSS Shapes
Video Title: Thinking Outside the Box with CSS Shapes
It’s likely that if you’ve been doing any sort of front-end development for any period of time that you’ve worked with someone else’s designs it’s also likely that the person whose designs you’ve worked with is not fully aware of the limitations of the rectangular nature of the web world and in these
Cases you may have been handed a design something like this and then been expected to convert it into HTML and CSS and when cases like these arise you’d go back and forth with the designer to come up with something more suitable for the web something like this where the
Content is contained within boxes which doesn’t really look quite as nice well with shapes you may not have to do that any longer we could simply leverage what we know about shapes to convert this into HTML and CSS so how do we do it well we start by adding some basic
HTML in an attempt to keep you from falling asleep by hand typing all this HTML I’ll start with this code we can see that this is the entire document for our page we have the element for our first shape which will be the left side of the Y
Which will control how content flows on the left-hand side of the Y next we have an element here for the Bears head and then we have another element here on the right hand side for the right hand side of the Y which will control how the content flows on that side
And just like the HTML to speed up the process I’ve added some basic CSS to get things like typography spacing and basic layout set up so if we look at this page in our browser we can see that we are already in the ballpark and if we weren’t using shapes we would probably
Just add a little margin and stuff and then maybe stop here but we are using shapes so let’s do it first let’s examine our images a little closer remember that in order to use an image for our shape we will need to have some transparent pixels there so now our
Images are good to go so how do we set up our content to flow around the edge of the image right we used the shape outside property with the URL to our image something like this okay so now how does this look nice it flows around the edges of our images
Pretty nicely we probably want to add a little space so let’s give it a shape margin and there we go that looks pretty nice now we actually could have done this another way instead of using the URL to our image we could have used the polygon function
And actually drawn the shape that we need let’s look at how we would do this instead something to note here before we get too far along the majority of time when using the polygon function you’ll want to use some other tool to visually create the shape these shapes are oftentimes much more
Complicated than you’d ever want to try to hand create and we’ll get into some of the tools that will help with this in the next module so for the purpose of this example I’ve already used an external tool to create the polygon shape that I want so I’ll just paste it
In here so here we can see a whole bunch of X and y coordinate pairs and how does this look in the browser pretty good I mean again it looks like we need to add a little bit of shape margin so let’s go ahead and do that
They’re much better now this looks very similar to the image version so by now you may be asking yourself why would you want to use the polygon over the image well you won’t always want or need to but there are at least two guiding factors to help you decide one if you
Have any sort of image where you want to keep the full image and just have text wrap around a specific part and overlay on top of the rest something like this for example this is a prime candidate for polygon since it does not require any sort of transparency and number two
The URL function is not animatable like polygon meaning if we want to perform any sort of animation or transition on our shape we will have to use one of the shape functions that’s right shapes created with shape functions are animatable CSS properties now before we go any further let’s get a couple of
Things out of the way notice how I said shapes created with shape functions can be animated well that’s because shapes created using images cannot be animated or transitioned to another image or shape for example let’s take this image and try to apply a transition to this other
Image on hover our code looks something like this as you can see here we start by defining our shape with the first image then on hover we transition to the next image and when we look at how this works in our browser we see that the hover image shape is used but the
Transition is not applied so you’ll need to be mindful of this when animating shapes also if animating a polygon you will need to make sure that the polygon shape that you’re animating to has the exact same number of points as the polygon that you’re animating from for example
If we take this star which has ten points total and then remove one on hover and then try to transition between these shapes well like the image we see that the new shape is triggered on hover but the transition is ignored so in order to actually be able to animate shapes we
Have to keep it as simple as possible for example here I have an ellipse that defines a perfect circle I’m actually using an ellipse in this case because I want to stretch it out on hover and I want to transition the stretch over one second
So I add my transition then I add my new radii for X&Y it kept the X radius the same and I stretch the Y radius out so as we can see it will now transition between its original shape and its new shape on hover now let’s take a look at a more
Complicated example let’s say we have a star it uses the polygon function and has a total of ten points so we can transition this on hover to something like a decagon which also has 10 points so here we add our hover State with the new shape then we add our transition
And when we look at it in the browser we can see that the star will perfectly transition between the two shapes and the flow of content will be transitioned around the new shape and if we really want to transition to a different shape with a visually different number of points we can do
That too we just have to sort of fake it for example what if we wanted to transition this star into a diamond shape well we know our star has ten points and if we think about a diamond it only has four points so how can we
Make this work well we just have to transition these ten points in a manner in which they will create a diamond so here’s some code that will make it happen and when we look at that in the browser we can see that the star with the ten points will transition into a
Diamond that appears to only have four points but in reality it has ten and how about our original example with the bear transitioning into the Bobcat on hover well we now know that we can do this with polygons and here’s how it looks
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
wow – its gooooood
What was the external tool for the polygon shapes?
Really nice video, thank you! I was looking forward to watching more of your tutorials only to learn that this was one of the last ones, FIVE years ago? I hope all is well and thanks for this.
Make more videos 📹
How do I just stick a shape in the middle of the text and have it reflow across the space where the shape is. I can only think of resurrecting CSS columns somehow.
hi gyz fellow me iam trying to be like him
wow
Sad the website with the gigantic Y is just a picture, would have loved it if it was literally just html/css content and thus would be responsive
Awesome work, good job! looking for all that next videos
Is it responsive @briantreese ?
Great video. It’s a shame that haven’t done more.
Excelent tutorial!
Brasil
Very good…
Subscribed, waiting other videos !
You can actually animate shapes however you please with SVG files.
great work
ohh god, it is very nice. subscribed
could i have your code? i'm a beginner so i need your code.
Awesome video damn, good job!
Please share your code on JSfiddle.
Shape tool doesn't working for me
great video!. would love to see more of this style of explaining different css tricks.
What tool are you using for making polygons?
useless only info
Wow, amazing video!!!
Any solution for Firefox??
But it is not been impememted in present browser right?
You are doing an amazing work!!
Keep working mate!
I don't know why there are so less subscribers here??
we need more keep going don't worry u can do something different in here . i'm sure if you are real creater of this video
man thank u i like your mind lol