For today, we will create full-screen stacked navigation with beautiful resizing width effect on hover. Our goal is to create navigation which will take approximately 25% of the page’s width and 100% of its height. If you read previous tutorial on “Full-screen page with centered navigation”, you know what am I talking about. Navigation will contain four items or links which will be stacked on each other like files in your cabinet or drawer. When you hover over the individual link, it will smoothly resize itself into full width of the page. That is all to explain the final vision …
Have you ever tried to think how something works? Going back from complete product backwards into the bare principles? If yes you probably used reverse engineering. The definition of reverse engineering is: “It is a process of extracting knowledge or design information from anything man-made.” When you are practicing reverse engineering, you are trying to create, re-create or copy something already existing.
Were you ever thinking about learning some new language? I’m not talking about language in terms of spoken language, but about computer languages. In such a variety of existing languages it is hard to decide which one to choose. This decision is even harder because learning anything, and language for sure, require investing big amount of your time. Some people are so desperate that they ask others via internet forums for their advices or recommendations.
Some websites use this very nice feature of being stretched to full-screen no matter if they contain any content. It often comes side-by-side with full-screen photo on the background, some times also using a blur effect. However, our goal for today will be creating this full-screen page with photo on background and centered navigation. This can be great landing page for your own pages. Let’s get to work.
Welcome into the second part of our Complete guide to CSS selectors. In first part we explored the basic ones and ended up with attribute selectors. Today we will continue with pseudo-classes and pseudo-elements. Those of you who are not that grounded in selectors should look at Pt1 first. However, if you are ready, we can continue in our guide.
You might see them or heard about them and some of you visited the in the past. We are talking about mobile websites. It looks almost like a waste time talking about these kind of websites when RWD trend is growing and in such a pace, but I think that this is actually the best time possible. It is in periods like this when two competitors are fighting for the right to not only live, but to shape the future. The future of the web.