Latest CSS3 Recipes

Using OR in CSS selectors

I have an element which appears on many pages and I would like to style it differently based on the class of the high-level div which it is present in. For example, if I want to change the color of my logo depending on the "type" of page it is present...

Read the entire recipe Recipe added 53 minutes ago

SVG as a CSS background

I've been trying to get a simple SVG rectangle to work as a background in IE9 or FF4 and neither is working for me. Here's my code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div...

Read the entire recipe Recipe added 1 hour, 49 minutes ago

jQuery: Animate using CSS3 instead of JavaScript

I'm converting a jQuery-based web application for use on iPad and need to make use of the hardware-accelerated performance of CSS3 animations. I'm already using fadeIn, fadeOut and some positioning animation so ideally I'd like a plugin which...

Read the entire recipe Recipe added 2 hours, 51 minutes ago

Can you use CSS to mirror/flip text?

Is it possible to use CSS/CSS3 to mirror text?

Specifically, I have this scissors char “✂” (&#9986;) that I'd like to display pointing left and not right.

Read the entire recipe Recipe added 3 hours, 50 minutes ago

How to force browser to add padding, etc. to size?

You know the Box Model for CSS (margin-border-padding-content)

However, I want browser to calculate sizes of a box model including margin,border and padding.

Is there a way to force browser to interpret like this?

Thanks

Read the entire recipe Recipe added 4 hours, 52 minutes ago

IE9 width problem

http://testing.ipalaces.org/ looks different in IE9 where the 2nd LI in sub-navigation makes the top border. It seems the width it's at now works for every major browser but IE9. If I set it to exactly 3px less, it works good in IE9.

Is this a known...

Read the entire recipe Recipe added 5 hours, 51 minutes ago

opera inset box-shadow

Opera has had support for box-shadow since v10.5, but it doesn't work on an input element.

input[type=text] {
    background-color: #fff;
    border: 1px solid #a0a0a0;
    box-shadow: inset 1px 1px 1px #d2d2d2;
    -o-box-shadow: inset 1px 1px 1px...

Read the entire recipe Recipe added 6 hours, 46 minutes ago

Why does a background break a box-shadow inset effect?

Im trying to achieve an inner-shadow effect on a simple box, something like: alt text http://gotinsane.com/test.jpg

where the green box is the content inside another box.

My problem is that if i give the content box any kind of background, the outer...

Read the entire recipe Recipe added 7 hours, 48 minutes ago

Zoom in/out how do I keep the aspect ratio?

Working Example: http://jsfiddle.net/4jmY2/4/

If you Zoom in/out (ctrl +/-) you will see the elements move around, how can I keep the aspect ratio so the content will remain the same no matter what size?

HTML

<div class="check_box">        
   ...

Read the entire recipe Recipe added 8 hours, 46 minutes ago

transform scale after rotate

I have a problem. I am rotating an div 45 degrees. I then want to scale it on the new y axis http://jsfiddle.net/P37g5/2/ - not the y axis that is now at 45 degrees?

Read the entire recipe Recipe added 9 hours, 50 minutes ago

CSS triangle experiment

I can use the css triangle technique to add a point to one side of an object, and this works great with one item in isolation.

But I am looking to apply this to a list of items to show the direction of navigation (like so ...

Read the entire recipe Recipe added 10 hours, 47 minutes ago

Combining modernizr and selectvizr?

I'm trying to get cross browser support for my HTML5/CSS3 site with the Selectivizr (for selecting HTML5 elements and check HTML5 browser support) and Modernizr to use CSS3 selectors. Sadly, combining a css3 selector with a html5 element results in no...

Read the entire recipe Recipe added 11 hours, 47 minutes ago

PIE CSS: rgba backgrounds + box shadows

I noticed that with CSS like

body {
    background: #f00;
}
div {
    background: rgba(255,255,255,0.4);
    -pie-background: rgba(255,255,255,0.4);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
   ...

Read the entire recipe Recipe added 12 hours, 46 minutes ago

Any way to detect the procedure status of a CSS3 transition/transform/animation?

Let's say, if there is a CSS3 transition/transform/animation assigned to an DOM element, is there anyway that I can detect the status of the procedure?

The reason I wanna do this is because I'm looking for something like transition chaining, e.g.,...

Read the entire recipe Recipe added 13 hours, 51 minutes ago

How do I get PIE (CSS3 for IE) working?

I am lost at using PIE for IE ...

http://jsfiddle.net/XBzvL/

div {
  background: red;
  color: #fff;
  border-radius: 10px;
  behaviour: url("http://jiewmeng1.kodingen.com/playground/PIE.htc");   
}

why doesn't it work?

Read the entire recipe Recipe added 14 hours, 49 minutes ago

nth-child(even) always selecting dd, never dt (even and odd lines in dl)

I'm trying to give a table appearance to a definition list and want to have the even lines colored differently from the odd ones with the help of some css3 selectors.

#specs dt:nth-child(even), #specs dd:nth-child(even) {
    background:...

Read the entire recipe Recipe added 15 hours, 53 minutes ago

Keeping background image at bottom


I've been working with a solution for keeping images at the bottom page. The code I've currently got is:

.footer {
    background-image: url('images/footer.png');
    background-repeat: repeat-x;
    position: absolute;
    height: 950px;
   ...

Read the entire recipe Recipe added 16 hours, 48 minutes ago

Pulsating colors in javascript

I'd like to have some text pulsate between red and black. Figured I'd use jQuery UI's animate function to do so. Seems simple enough... something like:

function pulseRed() {
    $('.pulsing').animate({ color: "red" }, 1000, pulseBlack);
}
function...

Read the entire recipe Recipe added 17 hours, 53 minutes ago

Why does a button element's height not match that of a sibling input element with same height properties?

I have the following:

<div    style="border:solid 1px gray; height:22px; line-height:22px; display:inline-block;">Div</div>
<input  style="border:solid 1px gray; height:22px; line-height:22px; vertical-align:top;" type="text">
<button...

Read the entire recipe Recipe added 18 hours, 52 minutes ago

ie9 border radius

I have the following which works in Firefox, Chrome and Safari. But not in IE9. It's applying rounded corners to the top left and right of a td. What am I missing?

border-left: solid 1px #444f82;
border-right:solid 1px #444f82;
border-top:solid 1px...

Read the entire recipe Recipe added 19 hours, 47 minutes ago

why are the images broken

I have this site login is test/test all the images are broken....I cant understand why...i am viewing it in firebug and all the images are there....whats the deal...

Read the entire recipe Recipe added 20 hours, 51 minutes ago

CSS3 :not negation pseudo-class not fully supported by Firefox?

I'm trying to use the CSS3 :not pseudo class as defined in the specification. According to the spec:

The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an...

Read the entire recipe Recipe added 21 hours, 53 minutes ago

How would I fade an icon to a lower opacity using jQuery?

I have these set of icons,

<div class="nav">
<a href="/ask" title="Ask Question"><img id="icon"
src="http://static.tumblr.com/ctwb3zj/4KZlie2ck/08-chat.png"></a>
<a href="/random" title="Random"><img class="icon1" id="icon"   ...

Read the entire recipe Recipe added 22 hours, 46 minutes ago

Why does setting line-height for one of two inline-block sibling divs effect both divs?

I have the following:

<div>
    <div style="display:inline-block; ">div_1</div>
    <div style="display:inline-block; line-height:20px;">div_2</div>
</div>

Why does having a line-height property set for the second div also effects the first div? ...

Read the entire recipe Recipe added 23 hours, 46 minutes ago

header/footer/nav tags - what happens to these in IE7, IE8 and browsers than don't support HTML5?

I am eager to start using Html5 in particular the <header>/<footer>/<article>/<nav> tags.

What happens if the browser doesn't support these?

Also I need to style these so: For Example: The nav has borders and margins etc. You know standard CSS...

Read the entire recipe Recipe added 1 day ago