Latest CSS3 Recipes

How to create a completely device-compatible website

Basically I want to create web pages for multiple devices (desktop, iphone, ipad, and other smart phones that have browsers on them). I'm just beginning to learn css3 and learning css3 media queries is very confusing.

I read a few tutorials and the...

Read the entire recipe Recipe added 2 minutes ago

Modify event attributes during propagation


Basically, I am wondering if it is possible to change the attributes of an event that subsequent handlers will pick up.

Example fiddle: (need debug console open)

I am trying to modify the clientX attribute of the...

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

diagonal lines as background for css - how to switch angle

How do I change the direction so that instead of the lines going in "\" direction, they can go in "/" direction? I found this css online and I love it, just need to switch directions.

Warning: I trimmed the css down quite...

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

CSS Transparency on background affects content

I have a div with CSS properties like so:

div.header {

The problem is the content that is inside this div also has the same transparency. How...

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

background needs to have gradient

I am totally a noob to css and I have a need to add gradient to the background image on the top of the page. here is what I tried but obviously its not working as background overwriting the value. How can I fix it

I have a background image and I need...

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

Strange black blocks appearing in Chrome

For some reason, black boxes are displaying in random spaces in Chrome (latest build).

Some of these boxes are appearing outside of the main container, whereas some are appearing inline, covering content blocks. They appear randomly, usually after...

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

Chrome and Safari ignores my -webkit-transition-

I've been trying to get a CSS3 transition effect to work in Chrome and Safari without no luck. As you can see in the code example below I'm using the :target pseudo class selector to trigger a keyframe-animation which, in this case, moves the div from...

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

Glow Effect to <a> tag when selected

I am currently in the process of adding a navigation bar to a test site. I have seen some navigation bar indicate the current selected page by adding a bar underneath or glow to the <a> tag. I am right now puzzled in the right way to achieve such css...

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

Validating a website in a subdomain??

I have a website hosted under a subdomain for testing purposes and have tried to validate the html and css using w3 validator and jigsaw. Depending on the URL I use - (9 frameset type errors 4.01 Strict, CSS3 pass) OR ...

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

CSS Linear Gradient X to Y then Y back to X

I've created a linear gradient with following CSS code for a linear gradient:

background-color: #2c2c2c;
background-image: -moz-linear-gradient(top, #444444, #222222);
background-image: -ms-linear-gradient(top, #444444, #222222);

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

How to transform DIV-Container with CSS3

I try to transform my div container like the following picture.

css perspec

Left is a normal div container painted black. On the right is the container i want to have.

Do you know how to solve this in css3 ? i read something about the "Polygon" attribute in...

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

Z-index Not able get it proper

I was trying to keep a logo above a slider but i was unable to set the z-index properly

I have tried Z-index increasing order but not able to get it right

the link is

their is a image back of the Head-slider i...

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

Word-break only when necessary

I need to achieve the following task through CSS:
I have a div with a fix width.
In this div I need to display first name, second name and eventually others name in the following way.

example 1


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

Body width can be can be overwritten?

Is possible to override the body width, for example I have this ex.:

<table id="table1">
<table id="table2">



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

stop Input textbox with border overlapping containing div

My input textbox overlaps it's containing div at the end . Is there a way i can stop this from happening with out doing an exact pixel width, i want to keep it fluid for use in media queries.


thanks d

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

Make inline-block's align vertically too?

Sorry if others have asked this question already but I haven't been able to find any good answers yet or I'm phrasing my questions wrong.

Anyway, now I have something like this:

Which does what it should, but I dont like...

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

CSS3 multiple box-shadow transition in Firefox not working

This transition works in Safari & Chrome (= Webkit browsers), but not in Firefox (= Mozilla). Why?

a.lorem {
    width: 100px;
    padding: 20px;
    display: block;
    color: white;
    text-align: center;
    background: rgb(191,210,85);

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

Background div image- repeating issue

I am currently working with a banner i like to place in the background of my header section. The problem I am having is that the image is repeating itself. I have tried using attribute no-repeat and in result I do not get anything to show. The image...

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

Border-radius inside border bug in Opera

I have a problem with displaying a block with top/bottom border and border-radius. Don't know why an inside radius appears within a border.. Please, take look at the screenshot & code below..


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

CSS: Input field and navigation menu styling

I am setting up a navigation menu to a site but I am having difficulties achieving the goal. The navigation bar has an input field that goes on the top left. The position of the input field is not being set correctly with my css rules I have applied....

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

How to create hover out effect using css3

I am trying to transform my image back to original size after user hover out of my image..Not sure what to do here..

MY css

//doesn't work
.imgDiv img{

-webkit-transform:scale(1, 1);
-moz-transform:scale(1, 1);

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

Reflection of whole div

I have a div and I want to add a reflection effect to it.

I know there are lots of tutorials for adding reflection to an image (like this and this), but I didn't find anything about reflecting whole div.

Is it possible with CSS3? And what about...

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

Possible to create a static lighting effect overlay using HTML/CSS?

I'm wondering if it's possible to create a static lighting effect overlay using HTML/CSS.

What I have is a pure HTML5/JS app that consists on most pages of a top navigation bar and a series of cards in the body that are transitioned through using...

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

CSS Navigation menu bar: standout but with page friendly colors

I am currently trying to implement a navigation menu bar into my webpage. I found a great one at this SITE. The problems I am currently having is adapting the menu bar colors to be friendly with those colors in my page. I want Something that will...

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

Cross-browser CSS3 javascript library

I'm a bit worried about having to write cross-browser CSS directives every time I use a CSS3 feature, for example:

-webkit-transform: rotate(7.5deg);  /* Safari 3.1+, Chrome 
   -moz-transform: rotate(7.5deg);  /* Firefox 3.5-15 

Read the entire recipe Recipe added 1 day ago