 Okey, ya, jadi seperti Chris beritahu, saya akan bercakap tentang Ships Css dan kenapa anda sepatutnya dipercaya tentang Ships Css. Sebelumnya, web nampak seperti ini. Ini adalah website Disneyland dari, saya rasa saya tidak tahu, 90s. Dan anda dapat melihat, jika anda mengingatkan warna garis, anda hanya akan berkata, okey, warna warna yang seperti, ada kerbs di sekitar, kemudian kita ada perkara seperti Playboy, website Playboy yang lama, dan warna warna yang seperti, okey, cerkels. Like, cerkels di dalam 90s, ada website Space Jam. Ini masih hidup bila-bila, jadi jika anda Google, anda masih dapat menemukan. Mereka tidak pernah mengambil. Ya, tapi semasa kita mendapat, ini adalah semasa orang membuat layak-layak mereka menggunakan metode tabel. Selepas itu, anda tahu, kita mempunyai float. Sekarang, tersebut seperti ini. Ini adalah website ESPN yang paling lepas, mempunyai re-design seperti pada tahun terakhir. Jika anda bermain video, ini adalah GameSpot, IGN, obviously, user-gamer websites. Jadi, jika anda nampak, ada sebuah pattern di sini. Jadi, terdapat banyak variasi atau re-design. Jadi, kemudian, ada beberapa artikel yang telah dikeluarkan di sekeliling web desain dan sebagainya. Saya rasa titiknya berjalan-jalan. Desain web terbentuk. Anda tahu. Sebenarnya, anda mungkin telah menerima itu. Dan, saya tidak bersyukur bersyukur dengan orang-orang. Tetapi, ia juga susah untuk bersyukur. Maksud saya, hanya ada beberapa cara untuk menghidupi re-design. Maksud saya, jauh-jauh, jauh-jauh, jauh-jauh, jauh-jauh. Tetapi, saya bekerja di sebuah agensi penyakit. Jadi, kita tidak hanya melakukan digital. Ada banyak desainan yang membuat desain print. Di desain print, mereka mempunyai banyak fleksibiliti dalam desain mereka kerana mereka tidak memastikan penyakit terbentuk. Kerana mereka membuat penyakit, poster dan sebagainya. Kadang-kadang, mereka mempunyai untuk desain web juga. Kita boleh bercakap... Itu boleh menjadi sebuah topik sendiri. Tetapi, mereka sebenarnya sangat membuat orang-orang. Dan, mereka mempunyai banyak principle desain print yang mereka cuba membawa ke desain web mereka. Masalahnya adalah, banyak mereka tidak menggunakan desain web. Mereka tidak terkenal dengan keadaan yang kita melakukannya. Jadi, desain layak terbentuk adalah sebahagian dari desain print. Dan beberapa desain saya akan memberikan desain yang sebenarnya sangat bagus. Tetapi, banyak kali saya beritahu mereka, minta maaf, saya tidak boleh lakukannya. Jadi, bagaimanapun, ada beberapa layout magazine. Anda dapat melihat koneksan kuban. Maksudnya, bagaimanapun, mereka membuat desain kuban. Dan mereka membuat kata-kata menghubungi kuban. Itu adalah bagaimanapun. Seperti itu, mereka hanya membuat... Itu adalah sebab sebab mengapa mereka membuatnya. Itu untuk menghubungi kawasan anda dan menghubungi kawasan anda. Kemudian, Anda akan membaca kata-kata. Ini hanya bagaimanapun. Terutamanya, jika Anda melihat kawasan kawasan, banyak kawasan hidup, dan mereka selalu ingin membuat kata-kata menghubungi kawasan. Dan apabila kawasan saya memberikan desain yang mengikut kata-kata desain ini, saya minta maaf. Saya tidak dapat membuat kata-kata menghubungi kawasan di seluruh kawasan. Ini adalah kata-kata untuk anda. Tetapi, dengan kawasan CSS, kata-kata dapat menghubungi kawasan di seluruh kawasan. Ini adalah kata-kata untuk kawasan CSS. Sebelum kita mulakan dengan jauh-jauh-jauh, saya menghubungi kawasan kawasan kawasan saya dan pembangunan. Saya berhasil membuat kerja di agency. Itu adalah kata-kata saya yang dihubungi kawasan saya. Anda boleh tanya saya nanti. Kadang-kadang saya juga menghubungi kawasan kata-kata. Saya akan bercakap tentang kata-kata kawasan CSS. Kenapa kata-kata? Sebelum itu, saya akan menghubungi kata-kata, tentang kata-kata yang terpatut meminjar kata-kata untuk kawasan CSS. Kata-kata untuk meminjar kata-kata untuk kata-kata... meminjar kata-kata. Kemudian, kata-kata kita akan menggolong kata-kata kata-kata, You have to float the element which you want the text to wrap around. So the spec defines it as CSS shapes outside. It defines the float area for inline content to wrap around the shape instead of the float's bounding box. So this phrase bounding box to get to know that a bit more, we need to talk about the box model. So this should be familiar if you use the dev tools. If you use chrome dev tools and you scroll down, there's this very nice diagram. I actually chose the same color so it looks familiar. That it will show you how the box model works on your elements. So basically it starts with the content, then padding, then border, then margin. So this is the box model. I'm not going to go into a lot of detail about the box model. But the point is when you use CSS shapes, the box model does not change. What do I mean? It means that the shape is still clipped to the margin box. So imagine the box, your CSS shape will only reduce the float area. You cannot expand from the original bounding box. And also for now a limitation is that wrapping only occurs on one side. So basically if you float your element left, your text will wrap on the right and vice versa. So if you float to the right, your text will wrap on the left. Without hacking it, you cannot make it flow around. For now, for now. Hopefully in the future levels, we'll be able to do that. So first off, there are four basic shape functions. So this is actually very similar to the clip path property as well. So we have the circle function ellipse, inset and polygon. So circle ellipse very close to each other. Circle function basically you can make your text wrap around in a circle. And the syntax is shape outside circle. And as long as you float it, it works. So the basic syntax is circle. And then inside it takes two arguments which is the shape radius and the position. So by default is the center of the circle. So go back up. But you can change the origin point to anywhere as well. So that's pretty straightforward. We also have the ellipse function which ellipse is basically just a squashed circle anyway. So it takes two arguments. So the shape radius takes so you can define along the x and the y axis so that's how you define the ellipse. So it's very, very similar to the circle. Then we also have an inset function which allows you to wrap around borders. So normally if we don't have this you will not wrap around the border area, the round corners. So how the syntax works is that it follows when we define margin so it's like top right bottom left. And the shorthand also follows that so there are various permutations you can use for the shorthand or you can define everything. And then there's the border radius. So the inset is applied from the edge of the element inward so meaning the more is from outside in. Later I'll show you a diagram you'll make more sense later. Lastly we have the polygon function. So the polygon function is you can see it actually follows the exact syntax as clip path to define the shapes. So what you have is this is how it works. You have polygon and then the field rule is an optional value but the point is you need to create your polygon using clip path. So for mine my triangle is very easy because it's very straight forward but with the polygon function you can actually create a lot of complex shapes and to actually plot this point because each coordinate pair defines a point. So that's why you can actually define as many points as you want but it's quite painful to do it by hand. So there's this tool called it's a Chrome extension called CSS shapes editor that you can sort you will add a shapes tab to your dev tools and you can actually use that tool to sort of plot your points. It's a Chrome extension so you can actually go and download and try it out. For polygon function at least 3 points required because anything less than 3 points polygon is a line. So lastly then you can use the Beyonce example you use an image with alpha properties. So if you notice the syntax there's shape outside which you point it to your alpha image and then there's this property called shape image threshold. Basically this is like the opacity of your image and you can use this to control how much you you want the shape to wrap so it also depends on how you process your image before you're ready for it and then shape margin basically is the margin between your define shape and your text so you can actually increase or decrease it and as usual you need a float for it to work. So as you can see the shape margin is the orange part so the purple part is essentially my PNG because I set my shape threshold to 0.5 so it's from 0 which is transparent and 1 which is opaque so your text will just flow outside the shape margin so you can actually increase the shape margin if need be. So okay basically the support for CSS shape is not spectacular it's only supported on webkit browser like Chrome and Safari it's under consideration in age already Firefox doesn't have it yet but there's a very good polyfill that was developed by the Adobe Web Platform Team I think it supports all the way back to IE8 if I'm not wrong so actually it's safe it's safe to use if your designer gives you like fantastically wrap text or you don't have to tell them no anymore you can say yes yes I can do that I can even do that on IE8 excellent so to find out more the spec is actually very readable it's written in readable human English so you can try to read the spec there's also a very good articles by Razvan Taliban he's the guy who actually wrote the CSS shapes Chrome extension so he's part of the Adobe Web Platform Team also and there's this really really nice demo he did it for Alice in Wonderland where the he sort of makes it's like a storytelling site that makes use of CSS shapes to it really looks like a kid's story book and the layout is really built using CSS shapes and there's also two very good articles by Sarah Suedan that goes in depth into how CSS shapes work and how you can use CSS shapes to create like non rectangular layouts so like I mentioned before there's a CSS shapes module level 2 which will define a shape inside property so right now the shape the text can only flow outside the shape you technically can't make your text like flow inside a circuit inside any shape yet so the CSS shapes module level 2 it's going to give a shape inside property that allows us to put content inside a shape and there's also a CSS exclusions property basically what it does is it's similar to CSS shapes right now where the content will flow outside but you don't have to float it around an actual element so you can sort of like define an empty circle in the middle of your text and the text will just flow around it that's why it's called exclusions and also not here yet but hopefully coming soon so yeah that's it right on time any questions everybody nobody's asking questions excellent I was going to ask about browser support but then you said polyfill yep the polyfill works so if I was wondering if you're allowed to mention javascript to the CSS event but we'll let it pass okay you can give me a word you can give me a warning later it's fine I will get back to you on that for now I know that I've tested it and it works but I will get back to you on that is it very big to polyfill? I'm not really I'm frightened of polyfills because if polyfill for this, polyfill for that it kind of adds up CSS shapes are so brilliant if we can actually the biggest thing we can do is actually tell designers that you can do shapes now because anytime you hand something to a designer they're just going to sit there and say oh no but yeah and when a designer turns up and you find it's really hard to code and plain waging sorry sorry guys are the shapes polyfill is 32GB in a file from what I see on your home yeah that's nasty but that's why we want it in a spec yeah yeah and with evergreen browsers the red things are going you'll be surprised I think a lot of people don't know this about H but H is actually very very good in terms of they are looking at a lot of these specs and they are trying to implement it because now H is going to be an evergreen browser and they are actually one of the browsers that implementing the newer specs like quite they are quite actively looking into implementing these new specs but that's why now you hear people say safari is the new IE okay it's not IE anymore people it's safari just saying yeah I disagree with that okay my counter to that is you don't remember how bad IE was hahaha I use Netscape navigator okay long ago Netscape 4 yeah when I wasn't when I wasn't my full height I use Netscape navigator okay I'm just going to hand off to Zell now okay oh okay okay