Alexandru Dinulescu's Thoughts

I am on twitter at alexdweb

Okay so this is very strange. I have a an absolute positioned image and on top of it is a PNG gradiant.

Based on the normal thought and previous post, if i set the absolute – positioned image z-index to -1 and make the layer with the png gradiant set a position: relative then it will happen what it was supposed to happen, the gradiant will cover the image. But what if we have this. see the 2 attached examples

The left image is having this CSS:

While the right image is having the same but with z-index: 1. If we remove z-index from the image @ all, then it wont show because of the underlying layer (remove the property). But if you look closely, the image is something on WHITE background so even with absolute positioning the only thing i can think off that makes it look like it “Multiplied” like in Photoshop is browsers ability to calculate png transparency and fill-options.

Of maybe i’m just silly and i am missing something very important but so far, and i cant find enough time to test this in a controlled environment, but so far this stuff works and i am quite happy with this situation

Later Edit: I’m silly, it was a number of factors, Gradiant transparency still works but only that. So Basically what you read in the last post… damn and i got excited about this oh boy.

Evening All

How many times it happend that you got a design to cut/slice from a designer only (or you yourself are a designer) only to find out that the background of the PSD is unequal on both sides, for example you have a curbed line in the middle, and on the left the repeating line is placed on top while on the right side it goes in the middle. Something like this:

Uneven repeating backgrounds ilustrated

Notice the marked areas, well i found a pretty awesome and easy to implement solution. You slice the marked images and you do the following. When you have your main page container, as it’s siblings you create 2 new divs, bgHelperLeft and bgHelperRight and you style them something like this

Since you used z-index: -1; then it means that it wont overlap any of your center images, absolute positioning means that it will stay there, and those widths means that they will meet BEHIND your center area so the user wont see the binning point, all creating a cursive flow from one side of the screen to the other side of the screen.

It works on all major browsers so this is a good trick to know and have in the book.

Questions in comments

Hello

After mucking around facebook for a while i finally decided to take the plunge and create a facebook page. The menus there look a bit complicated and less user friendly that i imagined however after messing around for a bit i think i got the gist of it.

The facebook page can be found @ here really basic but hopefully it will show up in the results there.

In other news I may begin to write on here small and simple CSS tutorials and about the importance of good and easily managed CSS and XHTML code when building a website that is more then a broshure but an entire application.

Best Regards, AlexD

Hello

Today I just finished working on my personal portfolio website found at http://alexdweb.com which replaced the old one there who was over 1 and half years old. Lots of things changed in that time, lots of new things learned, lots of new and better ways to write code so it was due for a change.

I am really excited about this website since it utilizes many CSS 3.0 properties and is built in a very very interesting way. I never believed you could do something like this with CSS, even CSS 2.1. Standard 3 layout based on this very own WordPress Theme with some twists. Lots of behavioral javascript and I learned a little PHP also. If you are looking for this wordpress theme, you can look @ this post.

All in all, as i said i am highly excited about the look @ feel of the new website and compared to the old one, I have to say it’s ten times better, but you should decided for yourself. Drop a visit @ http://alexdweb.com and let me know what you think by dropping a comment here.

I did test the website extensively however if you break anything let me know by an email or comment. Also as are most of my sites these days, I have phased out support for IE6 because the browser is older than my sister so I cant spend 20hours debugging for IE6 , so please use a modern browser such as Firefox 3.6 / Internet Explorer 7+ (recommended is 8), Google Chrome 5 and the like.

Back to more tutorials this coming week.

Regards