{ Snipperize } /CSS

Pure CSS Speech Bubble

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

CSS / bubble, speech, css3 / by ThePeppersStudio (1083 days, 0.61 hours ago)

Cross Browser font-face

cross browser @font-face.

CSS / font-face / by ThePeppersStudio (1111 days, 3.47 hours ago)

Gradients

Another practical and time-saving technique introduced in CSS3 is the ability to create custom gradients as backgrounds. Although Internet Explorer doesn’t support gradients of the CSS3 variety, it’s pretty easy to implement them for the IE family using proprietary syntax. For the IE filters, the GradientType can be set to “1″ (horizontal) or “0″ (vertical). The Drawbacks Some of the usual drawbacks apply to gradients created with the IE-only filter, along with some other problems. Your CSS won’t validate, although that’s also true for the WebKit and Mozilla values Different code is needed for IE8, adding to maintenance time The WebKit and Mozilla gradients allow for “stops” to be declared; this doesn’t seem to be possible with the IE gradient, limiting its flexibility IE’s filter doesn’t seem to have a way to declare “radial” gradients, which WebKit and Mozilla support For a gradient to be visible in IE, the element with the gradient must have layout

CSS / gradient, ie / by ThePeppersStudio (1122 days, 2.49 hours ago)

Box Shadow

The Drawbacks The settings for the IE shadow filter do not match those of the other proprietary properties, so in order to make it look the same, you have to fiddle with the values until you get it right, which can cause maintenance headaches The filter property doesn’t validate, but neither do the WebKit and Mozilla properties, so this is a drawback in all browsers

CSS / ie, box, shadow, webkit, mozilla / by ThePeppersStudio (1122 days, 2.53 hours ago)

Rounded Corners (border-radius)

The border-radius property (more commonly referred to as CSS3 rounded corners) is another popular CSS3 enhancement. This property has allowed developers to avoid the headache of bloated JavaScript or extra positioned elements to achieve the same effect. But once again, Microsoft doesn’t want to cooperate, so IE doesn’t have any support for this property. Fortunately, at least one person has come up with a very usable workaround that can be used in an IE-only stylesheet. Remiz Rahnas of HTML Remix has created an HTC file called CSS Curved Corner that can be downloaded off Google Code. The great thing about this piece of code is that it doesn’t require any extra maintenance if you adjust the amount of radius on your rounded corners. You just link to the file in your CSS, and the script will automatically parse your CSS to find the correct radius value from the standard border-radius property. The Drawbacks The HTC file is 142 lines (minifying or GZipping would help, but it’s still extra bloat) The behavior property will make your CSS invalid Your server needs to be able to load HTC files for this technique to work IE8 seems to have some trouble in some circumstances when the HTC file forces the curved element to have a negative z-index value

CSS / box, radius, corners, ie / by ThePeppersStudio (1122 days, 2.56 hours ago)

transparent layer in all ie versions

You really only need the second line, which works in all three versions of Internet Explorer. But if for some reason you needed the opacity setting to apply only to IE8, and not to IE6/7, then you can use the third line, which the older versions don’t recognize. The opacity value at the end of each IE line works basically the same way that the opacity property does, taking a number from 0 to 100 (the opacity property takes a two-digit number from 0 to 1, so “44″ for IE would be “0.44″ for the others). Also, as many have experienced when using opacity (even when using the standard method), the opacity settings will be inherited by all child elements, for which there is no easy workaround.

CSS / transparent, ie6, ie7, ie8 / by ThePeppersStudio (1122 days, 2.62 hours ago)

CSS style sheet for ipad and iphone

CSS style sheet for ipad and iphone

CSS / media, iphone, ipad / by ThePeppersStudio (1160 days, 2.36 hours ago)

CSS Sticky Footer

must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser HTML ========================================================================== <div id="wrap"> <div id="main" class="clearfix"> </div> </div> <div id="footer"> </div>

CSS / sticky, footer / by ThePeppersStudio (1213 days, 20.36 hours ago)

CSS Image Hover

CSS image hover with fade in-out effect.

CSS / image, hover, fade, transition / by ThePeppersStudio (1213 days, 20.43 hours ago)

Cross Browser Opacity

Includes ie8, ie5, ie6, ie7, netscape, safari, etc.

CSS / ie, safari, opacity, transparent / by ThePeppersStudio (1307 days, 0.19 hours ago)