Total Followers 132,503
Well, we surely have a lot of different ways to achieve similar effects and with CSS the hardest part is to make it look good in almost every browser.
You don’t need to reinvent the wheel every time, if you get one good snippet that does what you want (and you understand what is happening) you don’t need to reinvent it every time you need a simple round corner, right?
Thus, our point here is to collect some cool CSS effects that you should be using:
• Min / Max width (IE included)
• RGBA (IE included)
• Opacity (IE included)
• Image rotation / scaling (IE included)
• FullScreen Background (IE included)
• Background pattern or bullet without image file
• Text Shadow (IE included)
• Multiple borders (IE included)
• Box Shadows (IE included)
• Rounded corners
• Screen reader only accessible content
• Don’t use negative text-indent
• Clearfix (IE included)
• @font-face (IE included)
• Pull quotes without image
• CSS for iPhone4 (higher resolution)
• CSS landscape / portrait orientation for mobiles
So, Let’s rock!
Well, many of you are used to just replace the lack of min / max width / height for IE with fixed dimensions, right? But you don’t need to do it anymore. IE is not a strict standards browser and sometimes we can take advantage of this to code things that would be awful to see in standard CSS code.
You can, in this case, insert some IE expressions (basically, JavaScript code) to check current body width and adjust element’s width as follows:
#content {
width: expression(document.body.clientWidth < 762? "760px" : document.body.clientWidth > 1242? "1240px" : "auto");
min-width: 760px;
max-width: 1240px;
}
This time we will need some IE filters to get the job done. You’ll have the standard markup, IE6 correction and IE8 correction.
IE corrections is based on gradient filter, that actually we put just one color to the beginning and the end, and BAM! We have a pretty RGBA background.
The first two digits should be the opacity and the last one should be the color itself. Don’t know why, it just don’t get the opacity right… Maybe its just a bug inside a bug :)
.element {
background-color: transparent;
background-color: rgba(255, 255, 255,0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
}
Wow, filters again! But this time we have a different syntax for IE8 and earlier versions. And again be sure to put khtml, moz and standard declarations.
.selector {
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* internet explorer 8 */
filter: alpha(opacity=50); /* internet explorer 5~7 */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
Another pretty cool and virtually unused feature is image rotation / scaling. There is another filter that allows you to rotate images, but unfortunately it just allows you 90º increments.
Although you can also mirror images, that makes cool image editing possible to almost every real browser and IE. For real browsers we will use the transform property with each vendor prefix.
img {
transform:
rotate(180deg)
scale(-1, 1);
/* for firefox, safari, chrome, etc. */
-webkit-transform:
rotate(180deg)
scale(-1, 1);
-moz-transform:
rotate(180deg)
scale(-1, 1);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
/* opera */
-o-transform:
rotate(180deg)
scale(-1, 1);
}
Sometimes we just need a quick way to get full screen backgrounds. Well, hope you don’t use JavaScript just to do this, because you can do it with a few lines of CSS.
The magic here is to set a div that goes fullscreen and inside it you can put a landscape, portrait or full sized image.
.content {
position: relative;
width: 760px;
z-index: 10;
}
.background {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
z-index:2;
}
.portrait {
height: 100%;
}
.landscape {
width: 100%;
}
.full {
width: 100%;
height: 100%;
}
<div class="content"> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> </div> <div class="background"> <img class="full | portrait | landscape" src="imgURL" alt="" /> </div>
Pretty sad that IE doesn’t allows you to use base64 encoding instead of real files. The best part is to use it for mobiles, since it saves you some http requests and precious time.
I’ve used it for a custom list style image without images. I just generated the base64 from Patternfy and pasted it in my CSS, like this:
ul {
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAJCAYAAAAVb42gAAAAFklEQVQImWNgIAro56z9T4Ygbg5BAABTdwtkrDt7swAAAABJRU5ErkJggg==);
}
Again we will need some IE filters. But this time IE filters can destroy your font’s readability, so try not to use it too much and preferably, only when working with larger fonts.
p {
text-shadow: #000000 0 0 1px;
zoom:1;
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";
}
When you want more than one border, for real browsers you’ll need to use an outline or :before and :after elements. For IE you could use filters to gain some an extra border.
div {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)"; /* IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0); /* IE 7- */
}
div:before {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
border-top: 1px solid #212121; /* top border! */
content: '';
}
div:after {
position: absolute;
width: 100%;
height: 100%;
top: 1px;
border-bottom: 1px solid #212121; /* bottom border! */
content: '';
}
The same filter we’ve used to create a second border can be used to generate box shadows. Be aware that this filter can mess up an element’s width, so if you want to use it with any grid system, prepare for the headache.
.shadow {
-moz-box-shadow: 0 0 4px #000;
-webkit-box-shadow: 0 0 4px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
box-shadow: 0 0 4px #000;
}
The bad part about almost-standard properties is that each browser implements its syntax differently. So for round corners we have a pretty strange behavior, where standards browsers have different ways to say same thing:
.rounded {
-moz-border-radius: 10px; /* gecko */
-webkit-border-radius: 10px; /* webkit */
border-radius: 10px; /* CSS3 standard */
-khtml-border-radius: 10px; /* old konkeror */
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
Sometimes you want to improve the accessibility of your site, so you put some fancy links like “Jump to content” or “Jump to navigation”. So you just put “display: none” or “visibility: hidden” and hope it works, right? Well, it doesn’t. Some tests show that many screen readers just ignore the display:none or visibility: hidden part, so you don’t have any accessibility improvement.
What you can do instead is to use position absolute and hide this content above browsers visible area. But you have some risks on this technique, since it hides content, Google can consider it gray or black hat.
.hidden {
position: absolute;
top: -10000px;
left: -10000px;
}
Since we’re talking about hidden content, take one more note, never use negative text-indent again. This is a known technique so you have a lot of SEO downsides by using it, since many bots can recognize it nowadays.
Just use alt attribute, that is much safer than hide content.
<h1><img src="myLogo" alt="My company" /></h1>
Many of you know about .clearfix method for correcting heights when you use floats. Well, in many of these cases, that amount of code could be replaced by just two lines:
.clearfix {
zoom:1;
overflow:hidden;
}
If you’re still using cufon just because you don’t trust @font-face, think again.
Font Squirrel provides an amazing @font-face generator service, that allows you to put really good looking fonts in your site without worrying about all that JavaScript stuff.
The final code provided is something like this:
@font-face {
font-family: 'MandatoryRegular';
src: url('font/mandator-webfont.eot');
src: url('font/mandator-webfont.eot?#iefix') format('embedded-opentype'),
url('font/mandator-webfont.woff') format('woff'),
url('font/mandator-webfont.ttf') format('truetype'),
url('font/mandator-webfont.svg#MandatoryRegular') format('svg');
font-weight: normal;
font-style: normal;
}
We talked about this before, but it is possible to create curly quotes without any image. And it is not that hard. You just need a :before and blockquote:
blockquote:before {
display: block;
float: left;
margin: 10px 15px 0 0;
font-size: 100px; /* let's make it a big quote! */
content: open-quote; /* here we define our :before as a smart quote. It could be any content, even the HTML entity alternative to this opening quote, that is “ */
color: #bababa;
text-shadow: 0 1px 1px #909090;
}
As time goes by we get more and more powerful mobile devices. It is a good practice to give create a mobile version, with reduced images and overall files size, but we have also to give a better experience for the ones with newer devices.
Since iPhone4 has a higher resolution, if you don’t provide a better (and larger) version of you logo, for example, your users will get a blurry version of it. This is a problem that can be solved with a very few lines:
@media handheld, only screen and (max-width: 767px) {
.logo {
/* common low-res and low-size, of course */
background: url(logo.jpg) no-repeat;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.logo {
background: url(logo2x.jpg) no-repeat;
background-size: 212px 303px;
}
}
This is a nice starting point for correcting layout bugs in each version of each layout mode for many mobiles, provided by stuffAndNoise
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Get The Only Freelancer crash course you will ever need to read!
I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/
Monday, April 2nd, 2012 14:02
Awfully hard to take this site seriously when it’s serious broken in safari 5.1.5
Tuesday, April 3rd, 2012 07:11
That’s odd, I’m using Safari 5.1.5 and the site’s looking awesome on my end. :)
Thursday, February 23rd, 2012 04:01
Hey Pynk, thanks a lot :)
I always like it when we have good links pointing to us, keep them coming! :)
[]‘s
Sunday, February 19th, 2012 20:06
Hi Rochester,
What I really like about this article is the IE fixes. IE is known to be notoriously buggy and very rigid when it comes to supporting latest technologies such as HTML5 & CSS3. Only the latest versions such as IE8 & 9 may support these. But there are other versions such as IE7 ( I am not sure if someone is still using IE6 ), which is still being used and its a real pain trying to provide support to such obsolete browsers. A fix/hack such as the ones mentioned in this article, certainly helps other designers & developers in keeping things similar in IE as well.
So I really wanted to take this moment to thank you especially for the IE fixes that you have provided. So if you can include IE hacks and tips in your future articles as well, that would be really helpful to others and will be much appreciated. Thank you.
Thursday, February 23rd, 2012 03:59
Hi Robert,
IE6 is not a concern actually. But IE still have a good share, so you’ll need to keep an eye on it yet.
But now my best bet is just go doing cool stuff (like round corners and so on) and when there is alternatives for IE I use them, where there isn’t, well, I just let it be :)
[]‘s
Monday, January 2nd, 2012 19:22
Hey Harry Jaan,
Yeah, I’m glad you liked! :)
[]‘s
Tuesday, October 4th, 2011 19:32
I did not know you could use JavaScript inside of CSS, I actually use CSS to avoid JavaScript.
Wednesday, August 17th, 2011 11:24
Dont use overflow:hidden for clearfix. It never works for positioned elements..
Wednesday, August 17th, 2011 15:11
Hi sekar,
Don’t know how do you do it, but for me it always works.
Could you give me some context?
[]‘s
Tuesday, August 30th, 2011 06:49
Hi Rochester Oliveira,
In Same cases overflow: hidden works. But not usable for all situations.
See this link http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/
Tuesday, August 30th, 2011 18:26
Yeah, sometimes you can’t put overflow:hidden but it really works for positioned elements. It won’t works only if your child element goes outside parent.
But if your parent is smaller than child it doesn’t has same “logic” as we are using here (simple clearfix for floats), so you will need a different approach.
Thanks for pointing it out!
[]‘s
Saturday, August 13th, 2011 20:52
Hi Guys !
I need fixed width select box , css. I tried to fix the width in css. But it is not working in IE. Please help me.
This is the code i written in my css file.
Select{
width:200px;
}
Wednesday, August 17th, 2011 15:09
Try
select {
width: 200px; /* maybe with display: block */
}
[]‘s
Thursday, August 11th, 2011 23:02
Hi Rochester
For the IE RGBA filter you can use this to calculate IE Aplha Hex:
Math.floor(0.6 * 255).toString(16);
You can type it in firebug console and it will return the hex needed
Friday, August 12th, 2011 14:48
Hey Mark,
Sorry, but I don’t get it. Why did you put “0.6* [rgb]” ?
If you are saying to just use a solid “converted” color, that’s good, but won’t work if you have any image or if your element is in top of others also, I guess..
[]‘s
Monday, August 15th, 2011 12:59
Hi Rochester
I have used this for a site I developed.
To get the opacity hex used in the IE filter ( the 2 first chars after the # ) you can use the form:
Math.floor(your opacity * 255).toString(16); For example for 0.6 the form will return 99 which is the hex for IE opacity
filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=’#99000000′, EndColorStr=’#99000000′);
Tuesday, August 16th, 2011 15:12
Oh, now I see..
That’s a nice tip, thank you very much!
[]‘s
Wednesday, August 10th, 2011 17:14
I’m not used to using media queries but when I was testing on my blog redesign it didn’t work. So somebody knows why?
At first it was because my design is elastic, it used %(percentage) is there something to do with media queries?
Wednesday, August 10th, 2011 22:43
Hi Renato,
Maybe you’re just doing something wrong.. we have a nice tutorial about media queries here: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
But feel free to ask if you have any doubts!
PS: Seu blog é bem bacana!
[]‘s
Rochester
Tuesday, August 9th, 2011 13:01
Nice! Would be nice if you could make an example for all 17 css html effects. Than its even more clear what it does.
Good luck!
Bjorn
Tuesday, August 9th, 2011 17:33
Hi Bjorn, That’s a nice tip!
I’ll do that next time.
Thank you!
[]‘s
Saturday, August 6th, 2011 12:59
thanks a lot dude , awesome collection
Sunday, August 7th, 2011 04:36
Hey shaik,
I’m glad you liked it, and hope it helps!
[]‘s
Monday, August 1st, 2011 14:26
Agreed!
But unfortunately we will still have IE6/7 (worst one) for a couple of years.. It’s sad to know that even IE8/9 still not as good as we wanted :(
[]‘s
Friday, July 29th, 2011 09:50
Awesome collection dude.I liked specially for IE families fixes.Thanks for sharing the gr8 posts.
Monday, August 1st, 2011 14:23
Hey Dinesh,
IE fixes are always handy, you know :)
Thank you!
[]‘s
Tuesday, July 26th, 2011 15:24
Great list of tips thanks
I’ve already used a few of these, the CSS box shadow for IE is a good one (It’s surprising the number of people who’ve never heard of this!)
A few others are new to me, so I’ll be adding them to my CSS arsenal!
Tuesday, July 26th, 2011 21:03
Hi Daniel!
Oh, those box shadows are oldies, isn’t it?
And from all these snippets, which one do you like most?
Thank you!
[]‘s
Monday, July 25th, 2011 18:33
Great article! Will definitely use some of them. Thanks a lot.
Monday, July 25th, 2011 11:13
Really good list, I will be using some of these. Quite a few wouldn’t validate though would they? I suppose it’s a compromise, do we want validating websites, or sites that support i.e6.
I choose the former to be honest.
Monday, July 25th, 2011 14:43
Hi Galvin!
I think almost all ie fixes (filters and expressions) wouldn’t validate, but it is just keep them in a separate stylesheet and you’re done!
But all standard declarations validates, of course…
[]‘s
Sunday, July 24th, 2011 21:49
Great list. An all in one place :) This is one for the bookmarks… Thank you for putting it all together especially with the IE fixes!!
Monday, July 25th, 2011 14:40
Hi Jay Karsandas, I’m glad you liked it! Hope it helps you in tough times!
[]‘s
Sunday, July 24th, 2011 18:21
I don’t know where people get it from, but using text-indent isn’t black or gray hat, or “bad” seo, using Cufon text should be bad too then..
The reason is, that cufon using cufontext width 0 pixel, height 0 pixel – Would it be okay then to make
h1 { background: url('some_background.jpg'); display:block; width 200px; height 300px; }
span { width: 0px !important; height: 0px !important }
Heading
I’m just wondering, because then you can’t hide an element, or some part of text (Dropdown menu etc.)
Monday, July 25th, 2011 14:38
Hi Lucas,
As far as I know it is black hat (even Google team talks about it) since you hide content. Cufon wouldn’t be black hat just because it relies on javascript, so without it you see the plain text.
Actually I think it is the best way of doing it, use javascript just to hide content when you want to (dropdowns should hide via js also, isn’t it?).
[]‘s
Wednesday, July 27th, 2011 19:43
Can you please post link/article where you ready that negative text-indent is black hat SEO? Or even better where Google team talks about it? Because I was on several events and conferences about CSS and SEO techniques, some of them were hosted by Google and I never heard of it. Negative text-indent was always prefered and advised way how to replace text string with image while keeping clean layout, accesibility and readibility. Thanks
Thursday, July 28th, 2011 17:13
Hi Deri, actually there is several articles talking about it.
The point is text indent is a very known technique to hide content, so google can easily detect it..
Little help from google itself: http://www.google.com/support/webmasters/bin/answer.py?answer=66353
Google team talking about it:
http://www2.webmasterradio.fm/office-hours/2010/rich-snippets-to-google-search-results
http://www.youtube.com/watch?feature=player_embedded&v=fBLvn_WkDJ4
Some articles about it:
http://luigimontanez.com/2010/stop-using-text-indent-css-trick/
http://maileohye.com/html-text-indent-not-messing-up-your-rankings/
Hope it helps!
[]‘s
Friday, July 29th, 2011 11:41
Thanks for the tip i was just wondering there must be some kind of thing to avoid display:none thing.
Thanks again for the lovely tips. Most of them i had used already but your comment is the best from all the rest ;)
Regards
Khizer
Friday, July 29th, 2011 16:22
Thank you, Khizer!
Hope it’s clear why you shouldn’t use text-indent or display:none, unless you know exactly what are you doing :)
[]‘s
Saturday, July 23rd, 2011 18:49
Most useful this article for every designer and developer, thanks for posing. If you interest i will post this article to my blog.
Sunday, July 24th, 2011 04:44
Hey Rali, how are you?
It would be good if you put a link pointing to us! :)
[BTW, I tryed to follow you link but it seems to be broken..]
[]‘s
Saturday, July 23rd, 2011 18:00
Thanks a lot, no words how useful it is.
Sunday, July 24th, 2011 04:39
Hey Tanya,
That’s what I’m talking about! I use this things all the time :)
I’m glad you liked it!
[]‘s
Saturday, July 23rd, 2011 15:29
great list of css hacks! this is very useful in cross browser testing. thanks for sharing!
Sunday, July 24th, 2011 04:38
Hey guy, thank you! Hope it helps you in your work as it helps me! :)
[]‘s
Friday, October 28th, 2011 12:30
Hi Dave,
You just made my day! Thanks :)
[]‘s
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
![Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-webdesignvideocoursepart3.jpg "Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]")
![Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-basicwebdesignvideocoursepart2.jpg "Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]")
Dinesh Kumar Shaw
Friday, July 29th, 2011 09:50
Awesome collection dude.I liked specially for IE families fixes.Thanks for sharing the gr8 posts.
Rochester Oliveira
Monday, August 1st, 2011 14:23
Hey Dinesh,
IE fixes are always handy, you know :)
Thank you!
[]‘s
Daniel
Tuesday, July 26th, 2011 15:24
Great list of tips thanks
I’ve already used a few of these, the CSS box shadow for IE is a good one (It’s surprising the number of people who’ve never heard of this!)
A few others are new to me, so I’ll be adding them to my CSS arsenal!
Rochester Oliveira
Tuesday, July 26th, 2011 21:03
Hi Daniel!
Oh, those box shadows are oldies, isn’t it?
And from all these snippets, which one do you like most?
Thank you!
[]‘s
shaik
Saturday, August 6th, 2011 12:59
thanks a lot dude , awesome collection
Rochester Oliveira
Sunday, August 7th, 2011 04:36
Hey shaik,
I’m glad you liked it, and hope it helps!
[]‘s
Rochester Oliveira
Monday, August 1st, 2011 14:26
Agreed!
But unfortunately we will still have IE6/7 (worst one) for a couple of years.. It’s sad to know that even IE8/9 still not as good as we wanted :(
[]‘s
Naylon
Monday, July 25th, 2011 18:33
Great article! Will definitely use some of them. Thanks a lot.
Rochester Oliveira
Monday, July 25th, 2011 18:37
Really hope it helps you!
[]‘s
rcrg
Saturday, July 23rd, 2011 15:29
great list of css hacks! this is very useful in cross browser testing. thanks for sharing!
Rochester Oliveira
Sunday, July 24th, 2011 04:38
Hey guy, thank you! Hope it helps you in your work as it helps me! :)
[]‘s
Rali Sravya
Saturday, July 23rd, 2011 18:49
Most useful this article for every designer and developer, thanks for posing. If you interest i will post this article to my blog.
Rochester Oliveira
Sunday, July 24th, 2011 04:44
Hey Rali, how are you?
It would be good if you put a link pointing to us! :)
[BTW, I tryed to follow you link but it seems to be broken..]
[]‘s
Tanya
Saturday, July 23rd, 2011 18:00
Thanks a lot, no words how useful it is.
Rochester Oliveira
Sunday, July 24th, 2011 04:39
Hey Tanya,
That’s what I’m talking about! I use this things all the time :)
I’m glad you liked it!
[]‘s
Lucas Rolff
Sunday, July 24th, 2011 18:21
I don’t know where people get it from, but using text-indent isn’t black or gray hat, or “bad” seo, using Cufon text should be bad too then..
The reason is, that cufon using cufontext width 0 pixel, height 0 pixel – Would it be okay then to make
h1 { background: url('some_background.jpg'); display:block; width 200px; height 300px; }
span { width: 0px !important; height: 0px !important }
Heading
I’m just wondering, because then you can’t hide an element, or some part of text (Dropdown menu etc.)
Rochester Oliveira
Monday, July 25th, 2011 14:38
Hi Lucas,
As far as I know it is black hat (even Google team talks about it) since you hide content. Cufon wouldn’t be black hat just because it relies on javascript, so without it you see the plain text.
Actually I think it is the best way of doing it, use javascript just to hide content when you want to (dropdowns should hide via js also, isn’t it?).
[]‘s
Khizer
Friday, July 29th, 2011 11:41
Thanks for the tip i was just wondering there must be some kind of thing to avoid display:none thing.
Thanks again for the lovely tips. Most of them i had used already but your comment is the best from all the rest ;)
Regards
Khizer
Rochester Oliveira
Friday, July 29th, 2011 16:22
Thank you, Khizer!
Hope it’s clear why you shouldn’t use text-indent or display:none, unless you know exactly what are you doing :)
[]‘s
Deri
Wednesday, July 27th, 2011 19:43
Can you please post link/article where you ready that negative text-indent is black hat SEO? Or even better where Google team talks about it? Because I was on several events and conferences about CSS and SEO techniques, some of them were hosted by Google and I never heard of it. Negative text-indent was always prefered and advised way how to replace text string with image while keeping clean layout, accesibility and readibility. Thanks
Rochester Oliveira
Thursday, July 28th, 2011 17:13
Hi Deri, actually there is several articles talking about it.
The point is text indent is a very known technique to hide content, so google can easily detect it..
Little help from google itself: http://www.google.com/support/webmasters/bin/answer.py?answer=66353
Google team talking about it:
http://www2.webmasterradio.fm/office-hours/2010/rich-snippets-to-google-search-results
http://www.youtube.com/watch?feature=player_embedded&v=fBLvn_WkDJ4
Some articles about it:
http://luigimontanez.com/2010/stop-using-text-indent-css-trick/
http://maileohye.com/html-text-indent-not-messing-up-your-rankings/
Hope it helps!
[]‘s
Jay Karsandas
Sunday, July 24th, 2011 21:49
Great list. An all in one place :) This is one for the bookmarks… Thank you for putting it all together especially with the IE fixes!!
Rochester Oliveira
Monday, July 25th, 2011 14:40
Hi Jay Karsandas, I’m glad you liked it! Hope it helps you in tough times!
[]‘s
Gavin
Monday, July 25th, 2011 11:13
Really good list, I will be using some of these. Quite a few wouldn’t validate though would they? I suppose it’s a compromise, do we want validating websites, or sites that support i.e6.
I choose the former to be honest.
Rochester Oliveira
Monday, July 25th, 2011 14:43
Hi Galvin!
I think almost all ie fixes (filters and expressions) wouldn’t validate, but it is just keep them in a separate stylesheet and you’re done!
But all standard declarations validates, of course…
[]‘s
Bjorn van der Neut
Tuesday, August 9th, 2011 13:01
Nice! Would be nice if you could make an example for all 17 css html effects. Than its even more clear what it does.
Good luck!
Bjorn
Rochester Oliveira
Tuesday, August 9th, 2011 17:33
Hi Bjorn, That’s a nice tip!
I’ll do that next time.
Thank you!
[]‘s
Rochester Oliveira
Monday, January 2nd, 2012 19:22
Hey Harry Jaan,
Yeah, I’m glad you liked! :)
[]‘s
Rochester Oliveira
Tuesday, October 25th, 2011 13:28
Hi trần công nghiệp
Thanks! :)
[]‘s
Francis
Tuesday, October 4th, 2011 19:32
I did not know you could use JavaScript inside of CSS, I actually use CSS to avoid JavaScript.
Rochester Oliveira
Tuesday, October 4th, 2011 22:10
??
What are you talking about?
[]‘s
Rochester Oliveira
Monday, January 23rd, 2012 03:05
Thanks! :)
Robert
Sunday, February 19th, 2012 20:06
Hi Rochester,
What I really like about this article is the IE fixes. IE is known to be notoriously buggy and very rigid when it comes to supporting latest technologies such as HTML5 & CSS3. Only the latest versions such as IE8 & 9 may support these. But there are other versions such as IE7 ( I am not sure if someone is still using IE6 ), which is still being used and its a real pain trying to provide support to such obsolete browsers. A fix/hack such as the ones mentioned in this article, certainly helps other designers & developers in keeping things similar in IE as well.
So I really wanted to take this moment to thank you especially for the IE fixes that you have provided. So if you can include IE hacks and tips in your future articles as well, that would be really helpful to others and will be much appreciated. Thank you.
Rochester Oliveira
Thursday, February 23rd, 2012 03:59
Hi Robert,
IE6 is not a concern actually. But IE still have a good share, so you’ll need to keep an eye on it yet.
But now my best bet is just go doing cool stuff (like round corners and so on) and when there is alternatives for IE I use them, where there isn’t, well, I just let it be :)
[]‘s
Dave
Monday, April 2nd, 2012 14:02
Awfully hard to take this site seriously when it’s serious broken in safari 5.1.5
Rean John Uehara
Tuesday, April 3rd, 2012 07:11
That’s odd, I’m using Safari 5.1.5 and the site’s looking awesome on my end. :)
Rochester Oliveira
Thursday, February 23rd, 2012 04:03
Wow, thanks :)
[]‘s
Rochester Oliveira
Thursday, February 23rd, 2012 04:01
Hey Pynk, thanks a lot :)
I always like it when we have good links pointing to us, keep them coming! :)
[]‘s
Mark
Thursday, August 11th, 2011 23:02
Hi Rochester
For the IE RGBA filter you can use this to calculate IE Aplha Hex:
Math.floor(0.6 * 255).toString(16);
You can type it in firebug console and it will return the hex needed
Rochester Oliveira
Friday, August 12th, 2011 14:48
Hey Mark,
Sorry, but I don’t get it. Why did you put “0.6* [rgb]” ?
If you are saying to just use a solid “converted” color, that’s good, but won’t work if you have any image or if your element is in top of others also, I guess..
[]‘s
Mark
Monday, August 15th, 2011 12:59
Hi Rochester
I have used this for a site I developed.
To get the opacity hex used in the IE filter ( the 2 first chars after the # ) you can use the form:
Math.floor(your opacity * 255).toString(16); For example for 0.6 the form will return 99 which is the hex for IE opacity
filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=’#99000000′, EndColorStr=’#99000000′);
Rochester Oliveira
Tuesday, August 16th, 2011 15:12
Oh, now I see..
That’s a nice tip, thank you very much!
[]‘s
Renato Alves
Wednesday, August 10th, 2011 17:14
I’m not used to using media queries but when I was testing on my blog redesign it didn’t work. So somebody knows why?
At first it was because my design is elastic, it used %(percentage) is there something to do with media queries?
Rochester Oliveira
Wednesday, August 10th, 2011 22:43
Hi Renato,
Maybe you’re just doing something wrong.. we have a nice tutorial about media queries here: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
But feel free to ask if you have any doubts!
PS: Seu blog é bem bacana!
[]‘s
Rochester
sahity
Saturday, August 13th, 2011 20:52
Hi Guys !
I need fixed width select box , css. I tried to fix the width in css. But it is not working in IE. Please help me.
This is the code i written in my css file.
Select{
width:200px;
}
Rochester Oliveira
Wednesday, August 17th, 2011 15:09
Try
select {
width: 200px; /* maybe with display: block */
}
[]‘s
sekar
Wednesday, August 17th, 2011 11:24
Dont use overflow:hidden for clearfix. It never works for positioned elements..
Rochester Oliveira
Wednesday, August 17th, 2011 15:11
Hi sekar,
Don’t know how do you do it, but for me it always works.
Could you give me some context?
[]‘s
sekar
Tuesday, August 30th, 2011 06:49
Hi Rochester Oliveira,
In Same cases overflow: hidden works. But not usable for all situations.
See this link http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/
Rochester Oliveira
Tuesday, August 30th, 2011 18:26
Yeah, sometimes you can’t put overflow:hidden but it really works for positioned elements. It won’t works only if your child element goes outside parent.
But if your parent is smaller than child it doesn’t has same “logic” as we are using here (simple clearfix for floats), so you will need a different approach.
Thanks for pointing it out!
[]‘s
Rochester Oliveira
Friday, October 28th, 2011 12:30
Hi Dave,
You just made my day! Thanks :)
[]‘s