All about Web and Desktop Application
Upload .psd designs, download .html file and images. It’s that simple to create CSS compliant webpages.
Some web designers may not have fully knowledge to master CSS, and many of us are good enough with little bit of brushing and designing in PhotoShop. Now, I found a great website, PSD to CSS Online, which provide free service to convert PhotoShop creations into CSS pages online.
Popularity: 100%
As a web designer, we know that we can apply different stylesheets for different media. The following is the most common method used.
<link href="styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="styles/print.css" rel="stylesheet" type="text/css" media="print" />
The above code requests two separate stylesheets, one for global media styles (screen, print, handheld, tv…) and one for print only. There is nothing wrong with the above, but if load time is an issue you could save yourself a server request by combining your CSS files:
Popularity: 75%
If you are trying to do pixel-perfect cross-browser CSS layout, then you have probably ran into problems with IE . I am going to highlight the top 7 CSS hacks that we often use to have pixel perfect design.
1) Box Model Hack
The box model hack is used to fix a rendering problem in pre-IE 6 browsers, where the border and padding are included in the width of an element, as opposed to added on
padding: 4em; border: 1em solid red; width: 30em; width/**/:/**/ 25em;
Popularity: 36%
Here is a simple way to create rounded corners without images needed. It is supported by IE, Firefox, Opera and etc. This idea is to draw lines of certain length in rblocktop and rblockbottom divs. Margin’s value controls line length (width).
Popularity: 23%
Hands up all those who have ever needed to have some kind of style sheet switcher on their site. Yep, that’s what I thought, at least a couple of you! Seriously though, with the current move toward more fully accessible websites, the need for various stylesheets to be attached to your pages has become more of a neccessity than ever before. Indeed we use the following solution ourselves and you can see it in action by clicking on the ‘Zoom’ (then ‘Zoom Out’) button at the top of the page.
What is this?
Essentially what you have is an array of predefined stylesheets that are called and set to and from a cookie (this cookie stores a numerical value representing the stylesheet number that is selected). Make sure you advise visitors you use cookies in your terms and conditions. If the visitor has chosen to view the site in a style other than the one defined as default, then when they return to the site at a later date, it should be presented to them in the style that they were previously viewing in. Of course this is fine as long as your visitor has Javascript enabled in their browser so that the cookie can be set and retrieved, but what if they don’t? Well the script will still work by making use of PHP SESSION variables to store the same data. This does mean that the style sheet selected will not be stored on the clients machine for future use, but hey, we can’t have it all right?
Popularity: 37%
Plenty of new and interesting revisions to the original Fahrner Image Replacement technique sprouted up in late 2003. This was an attempt to consolidate them. Please note that this page is no longer being maintained.
Requirements: the replacement must solve the screen reader problem, and it must address the “images off, css on” problem. It is also hoped that a solution will be found that reduces the need for empty <span> elements. The successful technique must work in browsers back to 5.x, but as of the time of writing none of these appear to fail so browser support matrices will be spared.
The two most promising techniques, Phark and Gilder/Levin are available on a reduced page for screenreader testing.
(more…)
Popularity: 23%
When you develop a website you know that you will always have to keep a balance between design and productivity. You need good working pages, easy layout, easy navigation, impressive design etc.
I’m not going to talk about every aspect today but I will share with you some of the tools I like to use when it comes to CSS, bandwith and a faster loading. More exactly, how to compress a CSS code without making the code to look so ugly and unreadable. If your design is based on a lightweight css code than I guess you shouldn’t worry about this but if you like to impress your visitors with visual elements, you can’t get it done without a big css file.
There are many CSS compression tools to find on the Internet at this moment like CSSTidy which takes your input (it must be a valid CSS code otherwise the result might fail to impress) and removes blank lines, comments etc. It has many options to work with.
Ok … so what is the point. The point is one that I’ve experienced a lot lately. I often decided to “parse and optimize” my CSS code using this tools but I changed my mind short after. Why? Because I do like to update my CSS’s, to add things, delete things and so on and, after using a tool like CSSTidy, my code was so hard to follow. I had only 1 line and I couldn’t find anything without using the CTRL + F magic trick. You lose time, development time.
Popularity: 23%
Fonts are an integral and essential part of the web page experience for your users. Commonly, designers use pixels as the measurement for determining the size of a font on-screen. Dreamweaver provides a selection of measurement options, but it is ems that is a popular choice due to its flexibility. The ems unit is essentially resizable, for browsers that support this, and their size is relative to a user’s font size preference. For example, if the size of font in the body tag is determined as 100%, all further text is relative to this point. This can be reduced or increased, i.e. 90%, to suit a page design as required. Styling text so that is 0.5ems means that it will always be half the size of the base text. On the opposite scale, 2.0 ems text will always be twice the size of the base text.
Popularity: 22%
Pseudo-class are an interesting group of selectors in CSS that apply to elements when they’re in a certain state or condition, such as with a link, when the mouse is over it. This makes for some interesting and lightweight visual effects.
| Pseudo-class (CSS2.1) | Description | Applies to |
|---|---|---|
| :link | Applies to links that have not been visited. | links |
| :visited | Applies to links that have been visited. | links |
| :hover | Applies to an element which the mouse is currently over. | all |
| :active | Applies to an element currently being activated by the user (ie: the mouse is held down over). | all |
| :focus | Applies to an element while it has the user focus. | all |
| :first-child | Matches an element that is the first child of some other element. | all |
| :first-letter | Applies to the first letter of a paragraph. | block level elements |
| :first-line | Applies to the first formatted line of a paragraph. | block level elements |
| :lang | Applies to an element when it’s in the designated language. | all |
The first four pseudo classes are typically used on links, even though 3rd and 4th apply to elements in general. This is because in IE (as of IE6), “:hover” and “:active” don’t work on elements other than links.
Popularity: 20%
Subscribe in a reader
Or, subscribe via email: