Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions.
Web developers always have to update their knowledges and learn new technologies if they want to stay tuned with today’s coding. Today, I’m going to show you 7 recent web development techniques that you should definitely learn, or improve if you already know them.
With CSS animation now supported in both Firefox and Webkit browsers, there is no better time to give it a try. Regardless of its technical form, whether traditional, computer-generated 3-D, Flash or CSS, animation always follows the same basic principles. In this article, we will take our first steps with CSS animation and consider the main guidelines for creating animation with CSS.
Let’s have some fun with CSS selectors, properties, and values. All the rule sets shown here contain valid CSS that represent things in real life.
A few sensitive subjects represented here, but they’re not meant to cause offence. Just some CSS silliness. Enjoy.
Read MoreA short time ago Louis Lazaris wrote an article that broke down the syntax for coding CSS3 linear gradients from scratch. Once you get the hang of them, linear gradients are pretty simple to code. Radial gradients, on the other hand, are a little more complex.
So let’s finish off what he started in that earlier post and go through the syntax for radial gradients.
Read MoreWhen Trent Walton was asked to build a new 404 page for netmagazine.com, his first thought was to create a CSS animation of some sort. He wanted the design to blend seamlessly with the visual style already established for the site, so he started by designing a page with 404 set in Clarendon, which can be found in the navigation and headlines. His next step was to knock out the text with a newsstand style layout of some recent .net magazine covers.
CSS3 is taking web development and web design to a higher level. In this article, Jean-Baptiste Jung has compiled examples of amazing CSS3 techniques that will probably become very popular when CSS3 will be fully supported by most browsers.
By now you’ve probably heard at least something about animation in CSS3 using keyframe-based syntax. The CSS3 animations module in the specification has been around for a couple of years now, and it has the potential to become a big part of Web design.
Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn't work any more. Web design needs to be adaptive. The layout needs to be automatically adjusted to fit all display resolution and devices. This tutorial will show you how to create a cross-browser adaptive design with HTML5 & CSS3 media queries.
CSS Pivot allows you to apply your own CSS to a site and then share the results (you get a unique URL which opens up that site in a top-bar/iframe dealy). Pretty clever stuff. If you saw a tweak of someone elses that you really liked and wanted to make it persist, you could use this Chrome extension.
Read More