One thing I never understood while going to design school is why I had to learn Flash. At that point in time, it wasn’t like Flash was a new fad with a ripe future. It already had its day in the sun and was being pushed further out of the spotlight by developments in CSS3 and HTML5. Most of my teachers hated it too, but I still had to take multiple classes. And where did that get me? Not too…
CSS3 offers the ability to add gradients without having to cut out an image. However, since using gradients is technically a background image, you cannot simply change the colors of your gradient on hover and expect a smooth transition. There are a few options to get around this problem.
A common solution for images in responsive design is to add a max-width of 100% to all images. This allows for the images to scale relative to the container that it is in. This method is easy to implement, but what happens if you don’t want the image to scale, and you would rather have it crop depending on the size of its container?
Having a responsive website that looks good in all screen sizes could be challenging. That is why I want to share a quick CSS technique that could be used to automatically center elements without the use of a media query. In this example, we will be automatically centering list items.
Let’s face it, mobile web design is no longer a trend. It has become an important factor that is changing the way we look at the future of the web. Millions around the world are using their mobile devices to access the web, so this offers the perfect opportunity to tailor web design and improve the user experience.