Latest CSS3 Recipes

What's faster; generating 5 small circles via CSS border-radius; or using a CSS sprite of a small circle repeated 5 times?

All in the title.

I want to do whatever will be fastest.... I would think that 5 CSS generated circles would load faster than having to load an external image, whether its a sprite or not... but I'm looking for somebody who's more educated to offer...

Read the entire recipe Recipe added 36 minutes ago

How can i get all list items to be a equal width?

I want my navigation bar to be a equal width for each ul element. i already tried Width:100% for ul.navbar a and ul.navbar li. JSfiddle:


@charset "utf-8";
/* Elements */

body {

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

responsive menu and media query css

I am trying to make responsive menu bar and for that i am using media queries. So i am using this css code and using position:absolute property so my header don't expand with drop down menu position:absolute property automatically applies on other...

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

issue with setting min-height for a div before website load based on device height

This has to be the most simple case of css issue. But I could nt find a solution to this problem..

I have a main div which has min-height of certain value. Ive given the min-height in in % so there is no outer div and it will not show the...

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

Wrong positioned element in IE9 with transform: rotate

I need to rotate a text vertically in my HTML5-application.

This works in all browsers except IE9 and lower (couldn't test it in IE10 yet):

.badgeWrapper > h3{
    -webkit-transform: rotate(-90deg) translate(-100%, 0%);

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

Cant' Position Caption Div Appropriately

Can you please take a look at JSfiddle and let me know how I can position the div with .caption at the bottom of the div with class .wrapper.

I already tried to add position:absolute; bottom:5px; rules to .caption but it positioned the caption div...

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

Div from Relative to Fixed

I'm trying to create a floating menu using CSS. WHen i scroll down past the header image i want the div to stick to the top. I tried using "position:fixed" but that leaves a gap. Is there anyway to convert the menu wrapper div from relative to fixed...

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

How do I center these footer a's?

If you go to and scroll down to the footer you'll see that the links are on the right bottom hand side.

How can I put em' in the center?

Please use Firebug or inspect element for easy access to the code.

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

Updating multiple classes with random background colors

At the moment I have a website at . However I would like to change the background colors on the cards (When they're flipped) to a random color.

I'm currently using


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

CSS file does not get loaded when 2nd CSS file by same name exists in different directory

CSS file does not get loaded when 2nd CSS file by same name exists in different directory. Only first one loaded. Can anyone help me?

link href="/Content/css/styles.css" rel="stylesheet"//fisst

link href="/Content/css/uniform.css"...

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

Make element fill horizontal line

This is a question similar to many that have been asked before. However, with all the previous questions, the necessary widths are known. For me, the widths are unknown.

If I have two columns (primary, secondary), how would I use css such that as...

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

Vertical animated css ul li menu

I wanted to create a CSS menu on my website that animates to the right when hovered. I can create the design myself, but I don't know how to move it.

This is a demo of the effect:

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

jQuery animate does not work(margin-left -200 to margin-left +200)

I am trying to get some of my text to slide in from the left using .animate and it does not work.


.body #header > a {
    font-family: Georgia, Courier, Verdana;
    font-size: 30px;
    padding: 24px;
    border-left: 3px solid red;

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

apply ellipsis when label text is overflow

In this below html design, I want to apply text-overflow to ellipsis for the media-played and remarks label and want the media-played (first big line) on the first line and remarks (second bing line) would go on the next line. The Play and Stop and...

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

Can I make something opaque if I have set my div opacity down?

div.body {
    width: 80%;
    min-height: 100.35%;
    float: center;
    background-color: black;
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
    margin: 0 auto;
    overflow: auto;

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

How to make the new long shadow trend with CSS?

Out there is a new trend along with Flat UI called "long shadow".
This is an example picture:

by Luky Vj Credit

I really like it and now I want an effect like that on my site. But I won't make a picture, I want to do it in CSS! (Or HTML5, jQuery etc).


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

Fluid Image within a fixed Div not re-sizing

Thanks in advance for any and all help and responses. I have a fixed div which floats at the bottom of the screen and is used as ad space for a mobile version of a website. The live version can be found here: ...

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

create input box inside the lable using jquery

I am trying to create a label and placed outer the input check box, like

what I was trying this, My html is

<input type="checkbox">

My jquery is

$('input[type="checkbox"]').after('<label class="label-select"><span></span></label>');

Now the...

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

My website loads to first input form

If I go visit my website, the page immediately scrolls to the first input in the contact form page, rather than display at the top of the page. I could probably set the scrollTop in a jquery script to fix it but I would rather get a solution that...

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

Improve table rendering, fastest table render

So I have to render a table with 1000 rows and 1000 columns. Accordingly this link, it seems like the best way is to build the HTML string in javascript and then inserted it into the DOM all in one go. I made a simple example of this, and compare it...

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

Multiple divs with background color behind text

I'm trying to put a background color behind text. I'll have multiple elements like this.

The current problem I'm experiencing is that, to have the background color "fit" the text, I'm using the 'display: inline' property. However, the problem is that...

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

My Fiddle Is Not Working On My Website

On my website ( I am using a reservation form.

For my reservation form, I wanted to add buttons or a trigger that once it's pressed in one of the drop down menus, another form will come up.

The problem that I am having...

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

how is Zurb's Foundation Menu button coded?

In Zurb's Foundation 4, whenever we have the following top-bar navigation

<nav class="top-bar">
<ul class="title-area">
 <!-- Title Area -->
 <li class="name"><!-- Leave this empty --></li>
 <!-- Remove the class "menu-icon" to get rid of menu icon....

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

How Can I Transfer My fiddle Code To My Website?

On my website I have a drop-down reservation form. On my form I wanted to add extra buttons to click so a separate form can come up.

I used jsfiddle to help me create the code and this is the code that I have:


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

Fonts with different color outline, for web

Is it possible to have transparent or non-transparent font with different color outline with just HTML5 and CCS3? How?

Read the entire recipe Recipe added 1 day ago