Speed up your HTML/CSS with Zen Coding

Here is a video of a new tool available for writing less HTML and getting MORE out of it! The system works by allowing you to enter abbreviations of tags with attributes, even child nodes, and expand them into actual HTML. Looks pretty nifty, definitely going to give this a try.



 You can read more about it and get the download in the Smashing Magazine article.

Read More

[CSS] - "Highlight" Images on hover

Haven't posted many CSS tutorials yet so here goes.

Sometimes it is handy to give your images a highlight-able feel. This is easily accomplished with a little CSS:

Code:

1 2 3 4 5 6 7 8 9 10 11 12

<style> img { opacity:0.6; filter:alpha(opacity=60); } img:hover { opacity:1.0; filter:alpha(opacity=100); } </style>

Live Demo: (hover over them!)

Read More

[FIX] Failed to load resource: the server responded with a status of 403 (Forbidden)

Scenario: 

You're trying to grab some images in your html / php code that calls a css style sheet. Then youre running into this error in your browser console:

Failed to load resource: the server responded with a status of 403 (Forbidden)

I found that the problem was using the incorrect slashes for the image directory.

The Wrong Way:

"images\main\ico.png"

The Right Way

"images/main/ico.png"

Hope this helps. Didn't find any solutions online for the problem, but used some common sense to figure it out.

Read More