Latest CSS3 Recipes

CSS3 box-shadow inset painful performance killer

After very hours debugging my app when I start first tests to deploy a Desktop executable with Awesomium (for Visual Studio 2010) I see a lot of render issues in webkit, since slow redraw and very slow IO when typing. At first I think it's because...

Read the entire recipe Recipe added 49 seconds ago

Page curl css3 effect issue

Can anyone point out what is causing the page curl effect to NOT be visible. I'm wrecking my brain here and I'm just not figuring it out

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

Div on top of another div

What I'm trying to put together is basically remaking the YouTube thumbnail with the timestamp at the bottom right of the thumbnail image, like this:

However, I can't seem to figure out how to make the timestamp go on top of the image and then...

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

CSS border-image compatibility bug

i have problem with border-image in mozilla and safari, in chrome it works, but in other browsers no the code:

border-width: 50px;
-moz-border-width: 50px;
-webkit-border-width: 50px;
border-image: url('/img/border.png') 50 50...

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

why current page link is not different in my code?

here is my style for navigation bar but its not working... i am a new learner of CSS styling plz help me how to do that ... here my active id is not working i dont know where is the mistake...


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

CSS3 :not(selector) isn't working on section

I'm not quite sure what I'm doing wrong.

Here's the Fiddle

section:not(#2) { font-size:33px; }


Forgot about not using numbers for the example!

Silly me, I was doing something like this and forgot the # before current. Pesky syntax...

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

How to style this value with jQuery

I am trying to apply this style with jQuery so that it has wider support than just applying it via css.

It is involving the calc() function of CSS3.

Here is the CSS3 style:

    top:calc(3rem + 32px);

How can I add the 32px when...

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

Dynamically adding ID's to links inside nav element

I am using Superslides, it is a jQuery fullscreen slider basically. It generates navigation links depending on the number of slides.

For my case I would need those navigation links absolutely positioned on different positions on screen. Here is the...

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

in css3, use calc() to center vertically with vh and vw

in what has to be a widely used case, using vh for height of a div, and using vm for font size.


div.outer { height: 20vh; }
div.inner { font-size: 3vw; height: auto; }
div.inner2 { font-size: 2vw; }

html - case 1


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

Swiper not working in Jquery Mobile

i am using Swiper by with Jquery Mobile...

Here i am using Scroll Container Swiper for a content slider...

Just facing a lot of problem embedding the code together...

The scrollbar is not...

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

Parent Height doesn't follow their float children

My mainContainer height doesn't follow their children width

and here is my code do you have any suggestion please advise.

I need the CSS solution not JavaScript so thank in advance

<div id="mainContainer">
    <div id="leftContent">



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

Layout in Chrome breaks on initial page load, corrects after reloaded?

Very strange problem: when my webpage loads for the first time, the layout is broken like so:

broken layout upon initial page load in chrome

If I refresh the browser, the layout is corrected and appears as it should:

layout displayed correctly if page is reloaded in chrome

Here are the styles which affect this portion of the...

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

span not working on Bootstrap button

I have a bootstrap button over which I want to have a bubble with a number, much like a notification that appears on an app icon in an iphone.

My mark up for the button is:

<button class="btn btn-warning view-sl-btn" type="button"><span...

Read the entire recipe Recipe added 12 hours ago

Content Moves when resizing

I've started making a website, and would like a banner to sit under my nav bar. I originally had both divs positioned exactly how i wanted them, however upon resizing, the right div moved under the left div. Both were positioned using float:left and...

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

how to animate color of a link on hover

i've few types of links on my website.

First is just simple link without any styles such as backgrounds. The second type of links are with background colors similar to buttons.

these both have hover color change effect which is accomplished by...

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

How do I center a div block of left aligned images?

I'm trying to center a div block of left-aligned images. Here is the screen shot:

enter image description here

The desired result is this:

enter image description here

My HTML is this:

<div style="margin-left:auto; margin-right:auto;padding:10px 0 0 0;">
    <img class="medium_thumb_rounded" id="15"...

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

How do I make the text in the next line to be centered and not aligned to the left?

I have a div that has the following CSS:

 .div_stuff {
 width: 830px;
 margin: 20px auto;

How do I prevent the text that goes to the next line to not align left right under the text above but simply become centered on the next...

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

CSS Animating Nav elements on :hover

I have a standard nested UL nav structure and some CSS to animate the sub-navs on :hover ...

See this fiddle:

Everything is working as expected with exception of the animation on the deepest UL. The first subnav animates...

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

CSS3 translate() method

I have the following code:

border:1px solid black;
-ms-transform:translate(50px,100px); /* IE 9 */

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

IE flexible box model not working

Im trying to implement the flexible box model into my website, and while its working for the -webkit-browsers like chrome and safari, other browsers like mozilla and opera, I jus cant seem to get it working in Internet Explorer, no matter what I do....

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

css keyframes animation not initializing

I've got a css @keyframe animation I'm trying to initiate but it never starts... What am I doing wrong?

@-webkit-keyframes slideNotificationsHide {
   0%{ width:70%; }
   100%{ width:94%; left:0; right:0;...

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

How to make a jQuery step animation?

I have searched for anything on how to animate a color wheel using jquery to step through the defined colors in order and I can't seem to find anything.

What I'm looking to do is spiral an effect by "opening" slivers of the colors at 45 degrees and...

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

how to make block of 2 headers responsive and &lt;p&gt; in front of image too

I want to make responsive 2 headers and the paragraph tag, the problem is the background of

is an image, so That should be responsive too? And if I put an image inside, maybe herency is the way to go

I have tried modifying it but had no luck, I...

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

CSS3 Background Popup Transition

I'm working on a new site, and my client has a transition on the menu items that he'd like to try and keep. The problem is that the menu is built in Flash (it can be seen here). How do I replicate that sort of movement using pure CSS? While I could...

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

CSS: 'Background-size' and 'background-repeat: repeat' stretch issue

I'm sure this is correct behavior for the implementation I have, but I'm wondering if theres an easy way to do what I want to accomplish.

I have a background image that is a 3px x 3px pattern.

I want this pattern to repeat-x the full width (100%) of...

Read the entire recipe Recipe added 1 day ago