Transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s The “backward†or closing height transition will have a delay of 0.3s: CSS – Fixed position on Main Menu Setting the initial height to 0 will make sure that the menu does not cover anything initially. We set an initial border style which we will transition to a bigger border. ![]() The main menu element will have position fixed so that, no matter where we are in the page, the border is always around the viewport. Please note that we’ll be using transitions and animation on pseudo-elements which won’t work in some browsers (e.g. So today I want to show you how to create something like that and provide some more inspirational examples. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. ![]() ![]() The other day I saw a really nice concept of a menu on the UI8 site. They make the application feel like a seamless transition among elements and you aren’t just clicking, but you are exploring all that there is to offer. I am utilizing an amazing tutorial from Tympanus – COD Drops – that does an amazing job with interjecting simple and powerful UI elements into what is normally a boring web page. On 11.15.13, In BLOG, BLOGGING, CSS3, by Lechlak
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |