Latest CSS3 Recipes

box-shadow applied to parent div cuts off child div in IE

I have 2 divs. Parent and a child. I have box-shadow applied to the parent div. The child element is draggable. I noticed in IE, if I try to drag the child element outside the parent, it gets clipped and cut off. If you remove the shadow class then it...

Read the entire recipe Recipe added 11 minutes ago

CSS3 Transition not working

I couldn't get transitions to work on this page, anybody has any idea why?

div.sicon a {
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari...

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

Box-shadow shows around block not around text when applying it to h2

HTML:

<div class="div1">
    <h2>Set RSVP & Check in</h2>
    <p>
        Set RSVP to remind all events you plan to go.
    </p>
</div>

CSS:

.div1 {
    float: left;
    margin: 0 20px 0 0;
    padding: 0;
    width: 300px;
    height:...

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

MVC app filter attribute in CSS 3 is causing app not to compile

I have an MVC app. I was trying to get some gradients working for IE 8 so I added:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E65C00', endColorstr='#FFB280');

This was working fine for a while. Now my app won't compile and...

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

How to position a hover div based on the position of the element

Please see the following jsfiddle: http://jsfiddle.net/bhellman1/Na3hd/11/

Right now when you move over the box, the hoverbox appears in the same place for all items.

What I would like to do is position the hover box based on which #box.corner you...

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

@font-face behavior inconsistencies inside of @media query rules (IE9)

The current behavior in Chrome, Firefox and Safari when it comes to media queries and resources is to not load the resource until you need it; e.g. a mobile device with a 480px resolution will not load images inside of max-device-width: 1000px rule....

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

CSS3 transition for :after pseudoelement

Check out this fiddle: http://jsfiddle.net/sajYc/

The transition for the :after pseudo element works in firefox, but fails in webkit based browsers. Any idea if this is coming up in a future release? Any non-jquery overkill workarounds for it?...

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

How to draw a trapezium/trapezoid with css3?

When you go to the page http://m.google.com using Mobile Safari, you will see the beautiful bar on the top of the page.

I wanna draw some trapeziums (US: trapezoids) like that, but I don't know how. Should I use css3 3d transform? If you have a...

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

jQuery Mobile CSS3 Page Transitions without jQuery Mobile Library

I have a mobile app created using HTML/JS(jQuery)/CSS and I'm looking to include page transitions that mimic those found in jQuery Mobile (in specific the flip transition) without the need to include the whole jQuery Mobile Framework.

These...

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

Formatting Gridview display in ASPX page

enter image description hereScenario : I have an ASPX page with Gridview. Every row has one column heading and it's value. At the end of record there is a generic line.

My issue is with formatting and CSS.

I would like the output to be as below (I have tried to format but upon...

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

JQuery mobile page transition without jQuery mobile

I am looking for a way to produce the jQuery mobile horizontal page transition effect on a mobile site without using the full JQuery lib. Does anyone know of a solution using a much smaller stripped down specific JS script? We are trying to keep file...

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

how do I make this sort of uniformly torn paper border with CSS?

as you can see in the image, it isn't just a dashed border.. but it's like.. a double dashed border where each dash is offset by the other.

enter image description here

How do I make this with CSS?

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

How can I do a text gradient with a drop shadow on a gradient background?

Here's what I need to pull off in CSS (it's terribly ugly, but it shows my problem well as an example):

Gradient example

We've got a gradient over text with a drop shadow on a background that has a slight gradient.

I've tried every method I could find.

This...

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

Left padding on container when content of the article goes past the fold

I have a container which has my header, nav, sidebar and article inside. When the contents of the article go past the fold, there is either padding or margin being added to the left of the container. It's clear when you change between pages where the...

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

Limitations while using @font-face

I am using a custom font using @font-face. Everything is working but some specific Turkish characters are not displaying properly.

Check out this page and enter the Turkish page You will notice some Turkish characters are not displaying...

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

Photoshop export gradient ( .grd files )

I'm trying to write a tool for converting photoshop gradients to css gradients using sass/compass. From what I've read the .grd is a proprietary format for which documentation is not available. Would the built in scripting be able to get at this info?...

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

CSS3 for Visual Studio 2010

I have installed Service Pack 1 for Visual Studio 2010. I get the HTML 5 option in the Target Schema for Validation, but when I open a .css file to change the CSS Version for Validation, I don't have an option for CSS 3. I'm new to ASP.Net and have no...

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

Considerations for CSS3 Transition Performance

As part of a project that needs to support mobile devices, I have been working on mimicking the iPhone toggle control using CSS3. I have the look and feel of the element pretty much there, and am using CSS3 transitions to animate its state...

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

Border-radius doesn't work on images?

.el img{
  float: left;
  margin-right: 5px; 
  border-radius: 10px;
}

Am I missing something? Or this property really doesn't work with images?

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

css3 media queries: iPad overwrite iphone4 (retina) rules

Seems that iPad rules overwrite iPhone4 related rules. How can I solve this problem?

/* iPad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    #theDiv { width: 400px; }
}
@media only...

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

CSS3 multiple transitions reversed animation

I have a div I'm trying to animate with CSS.

div {
  width:100px;
  height:50px;
  -moz-transition:
        width: 1s,
        height: 1s 1s;
}

div:hover {
  width:400px;
  height:400px;
}

It works as I want when I hover; the width is first...

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

CSS3 shadows in IE harden rounded div corners

When I use only rounded corners on my div, it looks about how I expect in IE9.

border-radius: 7px;

However, when I add the following line to make a drop shadow, I get an unexpected effect:

filter:...

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

Grow from center

I have been trying to get the bottom circles to grow in Firefox (need to add in other prefixes, still in dev)

They are behaving properly, but my goal is to get them to grow from the center. Any ideas on how i can use CSS to do that? Would it be a...

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

How to show drop shadows on LIs in a 960 grid based layout?

I am trying to create a page showing a list of products in a grid (960.gs) format. To match the COMP, I need to show a drop shadow on a LI when the user hovers above it.

Showing the drop shadow on a hover is simple, but showing it the way as it is in...

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

How to include border-radius.htc in MVC architecture to make border-radius work in IE

I am using cakephp and want to do css border-radius for rounded corners in certain sections. It is working well for all other browser except IE. I am now referring the link http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser for...

Read the entire recipe Recipe added 1 day ago