Latest CSS3 Recipes

Wraping one div id around another

How to wrap one div around another. I have following two div ids

#course{
width:325px;
padding-right:25px;
border-right:1px solid #999;
border-top:1px solid #999;
}

#home-page-sign-up {
width:275px;
#padding-left:25px;
float:right;
margin: auto;...

Read the entire recipe Recipe added 32 minutes ago

Div's not properly aligning horizontally

Here is the site in question: http://jayduff.co.uk/

I previously had the images/links on the left and the header on the left, I decided to change it to make it more standardized but the top two divs that hold the title and the links don't seem to...

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

CSS3 Flexible Box Layout and overflow: auto;

I'm trying to create a flexible box layout that fills the entire viewport, and has inner sections that scroll if the content is too long. However the inner content is stretching out the entire layout rather than sitting within the smaller area and...

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

Hide div after CSS3 Animation

Would like to know how to hide an div after a set of css3 animation. Here's my code:

html

<div id='box'>
    hover me
</div>‚Äč

css3

#box{
 position:absolute;
 top:200px;
 left:200px;
 width:200px;
 height:150px;
...

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

Maximize a box using jquery

when i click on one panel link "hello" or "Hi", then that panel must be maximized and only that panel must be shown in page, again when i click it back it need to go for its original position, same for other panel, i tried implementing but some where...

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

How would I &quot;stick&quot; text to the bottom of an element without using position:absolute?

I was playing around with the new CSS3 transitions and I seem to have hit a little road block. I am using transitions to scale links being held within an unordered list, but this is creating some unwanted behaviour. It will be easier to just show...

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

Font-Face is not smooth in WebKit

Fontface is working great in firefox and explorer but chrome. How can I fix it ?

http://goo.gl/Bgt4J

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

html 5 canvas shadow just one border

i am trying to apply a blur shadow to a circle, but the thing is i just want the outer edge to have this blur/shadow affect, how can i do that? currently, the shadow is applied to all the borders oh by the way, i am trying to animate...so the...

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

How do I &quot;stop&quot; a gradient from flowing further down the page?

I think the easiest way to explain is simply linking to an example of what I want:

http://macrumors.com

At the top there's a small blue gradient that doesn't stretch very far.

I want to replicate this, but the only way I know how to do gradients in...

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

border radius in ie 8 using RoundRect

I have a site which has a lot of corners. I don't want to have to go through it and apply special rules to the specific divs.

I came across RoundRect at https://github.com/csnover/RoundRect

Sounded like a great idea.

But i keep getting error :...

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

Jquery nth-child that is not 3n+6

Hi im trying to access every child that is not 3n+6 i.e something like this $('div:nth-child(!3n+6)') is there a way to select every child that is not 3n+6 in jquery

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

Link styles not working on all links, only some

http://pastebin.com/mYk8M038 here is what I have so far... I think it may be something to do with the div's... BUT that doesn't explain why my Email me link hover effect is working but the links to soundcloud, linked in etc dont? Would anyone be able...

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

Clear css :after declaration with jquery

I have the following css declaration in place:

#envelope:after
{
    z-index: -1;
    position: absolute;
}

How do I remove it (set it to empty at least) with jQuery at runtime?

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

Show left to right

So I have problems with sliding from left to right div with display:none.

<div class="second">
<li><a id="sale_man" rel="showinfo"><?php echo $lang['sale_man'];?></a></li>
<li><a id="purch_man" rel="showinfo"><?php echo...

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

Overwrite font-weight in @font-face

Currently I'm using @font-facewith a fallback for not supported browsers:

@font-face
{
  font-family: TheSansBlack;
  src: local( TheSansBlack ), url( ../fonts/TheSans_TT9_.woff ) format( 'woff' );
}

font-family: TheSansBlack, Arial, Verdana,...

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

DropDown menu with ClickEvent

When I click a button, then a drop down menu must be shown. When I click anywhere in the page it, needs to hide. The problem I have is here: when I run the page, I can see the drop down menu instead of the click event. I tried with different div tags,...

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

Applying position relative and then position:absolute makes the div stretch across the container?

Here's my code..

<div id="secondWrapper">
    <div class="para1">  
      <div class="heading">
        <h1>Heading 1</h1>
      </div>
      <div class="paragraph">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at ipsum...

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

FireFox inset box-shadow bug

I know there is a bug with box-shadow(inset) in Firefox. It lags a lot. I'm trying to disable box-shadow for FF 11. But -moz-box-shadow:none!important; is not working! Browser just begins to use the property box-shadow (without -moz).

.class {
   ...

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

any way to combine background-size classes?

I'm trying to change background-size using css: I want 100 heights and 100 widths, but do not want to create 10,000 classes. e.g.

// style
.tall {background-size: whatever 200%}
.narrow {background-size: 50% existing}
// javascript
element.className...

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

Fix CSS and other issues in IE

Making websites that appear correctly in IE is a big problem. Is there any java script library to fix all CSS and other issues associated with Internet Explorer (7, 8, 9) and make it work like Google Chrome, Firefox?

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

CSS Transitions code organisation

I'm experimenting with CSS Transitions these days. I'm trying to build an animated web page with solely CSS.

Everything works just fine, but I came across an organisation-related issue: My CSS file look like a mess! If the client asks me to delay a...

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

Web site layout that changes with different widths?

Does anyone know how to accomplish a different layout based on the browser width, like these two sites?

http://sasquatchfestival.com/

http://css-tricks.com/

I've tried to Google it, look through Stackoverflow questions, and look at their code but I...

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

Text shadow for IE

I am building a website and I am using the text-shadow function, however it doesnt work for IE.

Graphic:

2

text-shadow: 0.1em 0.1em 0.2em black;

Is there any solution or hack to over come this, or something that mimics the text-shadow function for...

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

Select all input tags where type is not checkbox

I need CSS selector that match all input tags where type is not checkbox.

This match:

<input value="Meow!" />

<input type="password" />

...but this does not:

<input type="checkbox" />

Because type is checkbox!

This is what I have at the...

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

What's the best technique to code this image

I've got this image: image

I want to code this image (just the bar, not the background - background can change) using html and css3. It has to be scalable in height and width. What's the best technique to do that? Thanks.

Read the entire recipe Recipe added 1 day ago