Latest CSS3 Recipes

align the text to the bottom of the a tag

How do I get the text to the bottom of the a tag which is inside the li.

Here is my code

<div id="navigation">         
    <ul>
        <li><a href="#">ter</a></li>
        <li><a href="#">redg</a></li>
        <li><a href="#">ryer More</a></li>
  ...

Read the entire recipe Recipe added 20 minutes ago

jQuery UI - issue with addClass/removeClass: Unwanted white background

I'm trying to set an hover effect using jqueryUI's addClass() and removeClass().
This is what I came up with: http://jsfiddle.net/5aS77/ .
As you can see, 'onmouseout', the background becomes white for a time and then 'jumps' to blue again.
I just...

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

Make small font bolder

I'm wondering if anyone has a smart js or css trick to make a small font a little bolder.

For a client, we're using the Courier font with font-size 12px/15px and text-transform uppercased. I added font-weight bolder to the text, but the text still...

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

css3 transition not working properly in opera

Opera supports css3 transition perfectly according various websites. When I first tried everything worked fine because I first tried the basic example of width transition. But when I tried transition with background color, In opera nothing happens on...

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

Menu displaying in Chrome but not Safari

So I am building out a website for a client, and I've come across an interesting bug. The top nav appears in every browser but Safari. The thing is, the links are there, they just are not visible. But the cursor goes to a pointer! This is so strange!...

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

Rotating text with CSS3/HTML5

I have a <span> that I want to rotate. I am using HTML5, CSS3, and Internet Explorer 9.

I tried the below CSS, but it's not working:

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 

How do I rotate the span?

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

Why are the elements in Stellar.js not moving?

I have 3 circles in the header that are suppose to fall at different rates when scrolled via stellar.js; unfortunatly, they dont even move. They all have position attributes(absolute); Moreover, I've applied thedata-stellar-ratio to the approprate...

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

CSS3 animation, translate to position

I have a div that I click on to drag it. Once it's on an area, it animates to its position via:

$("#wheel1").animate({left: "200px", top: "100px"});

I can also get it to animate with:

@-webkit-keyframes wheel1 {
    0% {
    }
    100% {
       ...

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

CSS3 animation, stay put

I'm using the following animation:

.wheel1anim {
    -webkit-animation-name: wheel1go;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay:...

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

Does -moz-win-borderless-glass work?

So, I found out that in Firefox, I can make an element to have Windows Aero effect using CSS's -moz-appearance. However, it doesn't seem to work. When I click on the button, nothing happened. Am I doing anything wrong there? Thanks.

...

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

Define custom color

border:3px solid black;

In the above example, you can set color by saying the color's name. There is also a wide verity of color name out there also.

And so my question is this. Is there a way to define your own custom color name on your site in...

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

css - Aligning issue

I want to do some design tweaks in my web application, but I'm stuck due to some alignment issues.

Please go to http://qlimp.com

Login username/password: dummy/dummy.

Then go to this link http://qlimp.com/information.

There you can find Keywords...

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

Add zoom functionality to jquery polaroid gallery

I'm using a jquery and css3 photo gallery from this site, and I would like to able to enlarge the images onclick. The author has said there is a way to do this, but not explicitly how (I'm no jquery expert).

I tried creating a separate script...

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

Overflow-y affecting visibility of element within a container

I have a div with some content that has a negative position relative. I want the span's to appear above its container in the x-axis, but overflow-y is clipping my text. I need it to have a vertical scroller.

I don't want an horizontal scroll. I want...

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

Space between two divs

My issue is that I have two (or more) divs of the same class, that need to be spaced from each other. I cannot directly use margins however, as the last or first element would also have the margin applied, which I do not want.

example
-Green is where I want...

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

rounded corners not inherited in webkit browsers

I'm working on some sort of online indesign editor and i ran into the following problem. I'm placing divs on my page with a absolute position, and in that div i place a image, also with a absolute position, because i want to be able to drag the image...

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

Border-radius doesn't affect inner elements

I have a layout where the all of the page content is in a box with rounded corners. This includes the title of the page, etc. I have a div element that contains my header content, a div that contains the main content of the page, and a div that...

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

Change div background based on file chooser choice

I'm looking for a way to have a div background image change when the user chooses an image from a form input. As you can see below I have a input type of file. Once the user chooses the file they want I would like the div#imgHolder to change the...

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

How to make a drop shadow go all the way across the edge of a div, not inset

This is a super simple issue that I can't figure out.

I want to have a drop shadow go all the way across the bottom of a div. As it is, it covers most of the bottom:

enter image description here

And here is the code:

box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49)

I...

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

Best method for creating a pure HTML5 + CSS3 animated &quot;sonar wave&quot; icon.

I've created the following animated icon here:

http://jsfiddle.net/KphgD/9

Does anyone have any experience designing a comparable icon or have any suggestions on making this better, more "realistic"?

I would be open to using javascript perhaps to...

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

Floating div will not give full height

jsFiddle

The left red div will not go all the way down. I want it to go all of the way down, regardless of how tall the main ("li") div is.

css

.li_wrap {
    padding:7px;
    float:left;
}
.song-list li{
    position: relative;
    display:...

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

slick effect using CSS on hover

I've found this nice slick effect in here - http://www.red-team-design.com/wp-content/uploads/2011/04/css3-box-shadow.html.

Here is a copy of this - http://jsfiddle.net/cyvvilek/cL7x6/3/

I was wondering if there is any way to get this effect on...

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

Multiple rules for ::selection and ::-moz-selection (and user-select?)

I have website, where I first set

::selection
{
    background: transparent;
}
::-moz-selection
{
    background: transparent;
}
*
{
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select:...

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

Rendering box shadow around unconventional shapes with HTML/CSS

I'm currently working on a little project in which I'm trying to create a venn diagram representing additive colors. I've started with three circles (border-radius: 50%;) and used a combination of statically-position elements with hidden overflow to...

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

Why should we include ttf, eot, woff, svg,... in a font-face

In CSS3 font-face, there are multiple font types included like ttf, eot, woff, svg and cff.

Why should we use all of these types?

If they are special to different browsers, why is the number of them greater than the number of the major web browsers?

Read the entire recipe Recipe added 1 day ago