Latest CSS3 Recipes

Bootstrap fixed navbar : padding-top and body 100%

For a client, I have to do fullscreen website, responsive design. I am using Bootstrap with a fixed navbar, so in order to place my content, I added a 60px padding-top to the body.

Here is my problem : the scrollbar shows systematically, because my...

Read the entire recipe Recipe added 59 minutes ago

css3 animation issue font rendering

I have a question for you. I'm currently working on text animation and i have a little problem with it. When I use properties like -webkit-transform my font goes from normal to thinner during the animation and goes back to normal when the animation is...

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

Not able to take footer out of the container

I am using Constellation Theme wordpress and i am unable to get the footer out of the body

even though i place the code out of the body it was considering it as code inside the body how can one solve this kind of problem

site the problem exists is...

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

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 3 hours, 56 minutes ago

Modify event attributes during propagation

Problem

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

Example fiddle: http://jsfiddle.net/9QZ2a/ (need debug console open)

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

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

diagonal lines as background for css - how to switch angle

http://jsbin.com/enazac/1/

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 6 hours, 3 minutes ago

CSS Transparency on background affects content

I have a div with CSS properties like so:

div.header {
    opacity:0.4;
    filter:alpha(opacity=40);
    background:#000;
    width:300px;
    height:300px;
}

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

Read the entire recipe Recipe added 6 hours, 59 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 7 hours, 57 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 8 hours, 56 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 10 hours, 3 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 11 hours, 1 minute 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 - http://alt.example.com (9 frameset type errors 4.01 Strict, CSS3 pass) OR ...

Read the entire recipe Recipe added 12 hours, 3 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);
background-image:...

Read the entire recipe Recipe added 12 hours, 56 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 13 hours, 58 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 http://design3web.in/law-firm/

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

Read the entire recipe Recipe added 15 hours, 1 minute 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

---------------
First-Name...

Read the entire recipe Recipe added 16 hours, 1 minute ago

Body width can be can be overwritten?

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

<body>
<table id="table1">
<tr><td></td></tr>
</table>
<table id="table2">
<tr><td></td></tr>
</table>
</body>

css:
body{width:970px;}
#table1{width:100%;}
#table2{width:100%;}

I...

Read the entire recipe Recipe added 17 hours, 3 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.

fiddle http://jsfiddle.net/5TzQK/

thanks d

Read the entire recipe Recipe added 17 hours, 58 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: http://jsfiddle.net/2nvwU/2/

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

Read the entire recipe Recipe added 18 hours, 57 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 20 hours, 1 minute 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 21 hours, 1 minute 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..

http://img703.imageshack.us/img703/3074/scrren1.jpg

...

Read the entire recipe Recipe added 21 hours, 58 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 23 hours, 1 minute 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);
-o-transform:scale(1,...

Read the entire recipe Recipe added 23 hours, 56 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 1 day ago