Article about what is bad about SmashingMagazine.com

December 3rd, 2009

Here is a link to an article that the guy over at Drawar wrote about the state of the design community with some punches thrown at smashingmagazine.com.

I like this piece of writing. I think he has a bit of a chip on his shoulder, or at least it comes off that way to me, but his points are valid. It mainly deals with how one site, smashingmagazine.com has spawned a ton of copycat sites, to the point where you stop caring about any of them.

One of his “things” is the list type articles that they do. There is no real discussion on design as a whole. The community has pretty much become “Where are the 50 images of sites? You must suck if your article doesn’t show at least 30 things”. I would agree. In fact if you look at smash’s site now, you can find tons of list articles like 50 free buttons or 50 wordpress themes. Those would be fine, if like this author says, the people writing those articles wrote why each of those 30 things are there…why they are great, or why they suck.

Personally I like articles that show a problem in web design, and then tell you how to fix the damn thing. Which is what I try to do here even though all I seem to get is a lot of freakin’ spam. Its also hard to find the time to write something that you hope people will find some use of. I try though.

Anyway, if you are reading this, check out the article….its a good read.

Tags: Posted in General | No Comments »

Rotate text or images using CSS

October 29th, 2009

Here is a bit of css with sample html to show you how to rotate text or an image using css. Works in FF 3.5, Chrome, Safari (most likely just 4, but have not tested in others), IE6-8 (read it supports 5.5). I got this from http://snook.ca.

CSS:

#book {
display: block;
float: left;
}
.title {
display: block;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.
BasicImage(rotation="3");
position: absolute;
}
</style>

HTML:

<div id="book">
<span class="title">War of the Flowers</span>
</div>

Each browser needs its own little prefix for this (the filter is for IE).

Although I can’t think of a reason off the top of my head why I would use this, its still a neat little trick.

Tags: Posted in CSS, Web Development | No Comments »

Adobe’s Browserlab…

October 8th, 2009

Been a while since I posted. But I found something that I thought was interesting and COULD be useful to some web designers/developers. Adobe came out with a product called Browser lab. Basically it is a screen shot service. You type in a url, and it takes screen shots of that site using different browsers in different operating systems.

It has some cool features…2 up view to compare to browser screens side by side, 1 up, and Onion Skin view. The last is kind of cool. It overlays two views on top of each other and you can adjust the transparency to see the differences between two browsers.

You have to have an account with adobe to use it, and for right now it is free to the public. They will eventually start charging a monthly fee to use it, probably in the $10-$20 range, like their editor (Incontext Editor).

On the one hand I like the Browserlab for what it is, BUT…you will still have to open the site up that you are building in the actual browsers to use developer or firebug to fix errors.

Tags: Posted in Web Development | No Comments »

IE6 PNG’s revisited.

September 9th, 2009

Ok, so I had to do a transparent box on top of a photo, and it had to work in IE6. I already talked about how to do PNG’s in IE6 using Fireworks and CSS, without any javascript or hacks. Well, it didn’t work with a 60% white box over a background image.

I have a div with a background image, and a div on top of that with the 60% white transparent box. Here is an example of what I needed to do:

transparent box example image

Here is what you have to do to get that to work in IE6:

1) Save the file as a PNG-24 in Photoshop
2) Open it in Fireworks
3) Change the PNG-32 to PNG-8
4) Change No Transparency to Alpha Transparency
5) Click Rebuild
6) Export

Here is the CSS:

background-image: ulr(../images/imageName.png);
_background-image: url(../images/imageName.png);
_filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader 
(src='../images/imageName.png',
sizingMethod='scale');

Remember that the _ means that it is only using that attribute for IE6.

Tags: Posted in CSS | No Comments »

IE6 Min-height problem

August 25th, 2009

Here is one for the newbies to web design. Min-height does not work in IE6, but here is a to get it to work.

selector {
min-height: 500px;
height: auto !important;
height: 500px;
_overflow: visible;
}

IE6 doesn’t understand the min-height or the !important, but it does see the height: 500px, and the overflow: visible extends the container so that everything displays. Simple as that.

Tags: ,
Posted in CSS | No Comments »

  1. Pages:
  3. 1
  4. ...
  5. 17
  6. 18
  7. 19
  8. 20
  9. 21
  10. 22
  11. 23
  12. 24