![]() ![]() Next step is to create the fancy polka-dotted background. Transparent blue colour may seem like a contradiction, but the colour values in the R, G, and B of that RGBA have an impact on the gradient at it approaches transparent. In this case the gradient starts at the bottom with the red colour, and ends with a fade to a transparent blue colour at around 60%. I’m using a webkit version of the background gradient rather than creating all the prefixes:īackground: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #c71f1f), color-stop(30%, #c71f1f), color-stop(40%, #a24b92), color-stop(50%, #3791ea), color-stop(60%, rgba(33, 47, 127, 0))) I picked out several key points in the gradient across the top of the seven, and created some colour stops for the first of the two 7s. Since there are two gradients, it’ll mean making use of both the 7s we added to the HTML. The second is a red, purple, blue gradient from the foot of the seven. The first is a red to blue going across the top bar of the seven. If you look closely at the photo above, you can make out two gradients in the number seven. With the two 7s placed on top of each other, and the icon in place, it should look a bit like this: The text spans are positioned absolutely, so that both 7s will sit directly on top of each other, and both are set to 512 pixels in size. This is a free Google font that should be somewhat similar, for those systems that might not have the font available. The font is “Helvetica Neue UltraLight”, and I’ve added a fallback of “Roboto”. To create this 7, we need to make use of CSS’s background gradient property, and then apply the gradient to the text.Ĭhris Coyier’s wonderful CSS-Tricks website has a great -webkit-background-clip snippet which will do nicely for the purposes of this demo.įirst through, we need to set up some HTML to which we will apply the CSS:įont-family: "HelveticaNeue-UltraLight", "Helvetica Neue UltraLight", Roboto, Arial, Sans-serif Making the 7Īside from the extreme thinness of the font (Helvetica Neue UltraLight), it’s most striking feature is the colour gradients. ![]() Hiding the white background in the container element will make it look more like the banner above. I thought that looked pretty cool so have added it to the layout. When watching the keynote I noticed the 7 logo used inside a nice icon-shaped white box. You can see the demo online, and download the source on Github. Until support for text-clipping in improves, it might not work so well in other browsers. Since this demo makes use of the -webkit-background-clip and -webkit-text-fill-color, it’ll work well on Chrome and Safari. Turns out it’s indeed possible to create this banner using nothing but HTML and CSS, making use of CSS’s background gradients and 3D transforms. It seemed like something that would make a great CSS project, so I had a go. It’s a great combination of rich colours in the elegant, light typeface and an interesting, textured backdrop. In the run-up to the announcement at WWDC, they revealed an interesting banner that featured the number 7 against a dotted backdrop. WWDC and iOS 7Īpple have just revealed their latest iteration of the mobile operating system, iOS 7. ![]() Making use of the amazing background gradients in CSS to create a rich, full-screen banner that loads in less than half a second and is only around 2KB in size. ![]()
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |