So you got a new iPad and realized your images do not look as good as they do on your computer, right? Don’t worry, there is a very simple way to achieve good looking images on this device:
If you want to create a 500 x 500 px on a Retina display, create an image at 1000 x 1000 and then use CSS to control the image size down to 500 x 500:
HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.
Are you tired of dealing with different screen sizes for your web pages? Well, this information is for you.
I will show you some CSS tricks to help you reorganize a webpage depending on your browser window width.
We will start with a simple HTML 5 skeleton that includes a contents and a navigation section:
<!DOCTYPE html> <html lang="en"> <head> <style> /* we will add our style here on the next step */ </style> </head> <body> <div role="main"> <h1>This is the contents</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Here it is. Start with a conventional item list like the following:
<ul class="hmenu"> <li><a href="">Option 1</a></li> <li><a href="">Option 2</a></li> <li><a href="">Option 3</a></li> <li><a href="">Option 4</a></li> <li><a href="">Option 5</a></li> </ul> Don’t forget to add the class parameter to the ul tag – that will help us do the magic. The previous list is rendered in a regular browser like the following: Now, add the following CSS to your file:
.hmenu { margin: 0; padding: 0; list-style-type: none; list-style-image: none; } .
Attribute selectors allow you to select CSS elements based on their attributes or values.
For example, if you want to select an image named “great.gif” you can do it by using the following rule:
img[src="great.gif"] { border: 3px solid #000; } There are four types of selectors.
By attribute. The following example will select all the images that contain the given attribute:
img[title] { border: 3px solid #000; } img[width] { border: 3px solid #000; } img[alt] { border: 3px solid #000; } By value.
