Latest CSS3 Recipes

jQuery and Background Gradient on rollover

I am trying to apply a background gradient after a roll over in Jquery. I made a basic demo of it on jsfiddle but the problem is in safari, it doesn't reapply the gradient and I get a flat color on it after a user rolls off.

...

Read the entire recipe Recipe added 13 minutes ago

pseudo elements IE10 button

I put together a button using :before and :after elements and IE10/9 are ignoring them completely, as far as I can tell they should be working perfectly in at least those 2 versions.

.buttonSML {
    background-position:-35px -432px;
   ...

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

Equal line height with varying border width (border-box)

In this simplified example I have 4 circles, each with varying border-width and I am trying to maintain equal line height in each to keep them horizontally aligned.

However the border width seems to effect the line height (despite being technically...

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

CSS: Combine Texture and Color

someone how to combine Texture use as background-image and Background-color above that texture ?

Here the texture :

Texture alone

I want my body background page to be like this :

enter image description here

I'm struggling with backroung-image and background-color : ...

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

Create banner with gradient opacity overlay

I need to create the following Banner: http://schuub.net/banner.png

My question is, how can I create this gardient from white to transparent which overlays the image partially on the left.

My html can be found here: http://schuub.net/banner.html

 ...

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

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 5 hours, 16 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: http://jsfiddle.net/HeyItsProdigy/a2zVr/

CSS:

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

body {
    margin:0;
   ...

Read the entire recipe Recipe added 6 hours, 13 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 7 hours, 19 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 8 hours, 13 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%);
    -webkit-transform-origin:...

Read the entire recipe Recipe added 9 hours, 19 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 10 hours, 11 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 11 hours, 14 minutes ago

How do I center these footer a's?

If you go to http://www.leapfm.com 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 12 hours, 16 minutes ago

Updating multiple classes with random background colors

At the moment I have a website at http://projects.jack-spence.com/mortune/index.html . However I would like to change the background colors on the cards (When they're flipped) to a random color.

I'm currently using

    <script>
function...

Read the entire recipe Recipe added 13 hours, 13 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 14 hours, 15 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 15 hours, 13 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: http://www.flashmo.com/preview/flashmo_207_vertical.

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

CSS

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

Read the entire recipe Recipe added 17 hours, 11 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 18 hours, 16 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;
    height:...

Read the entire recipe Recipe added 19 hours, 15 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).

I...

Read the entire recipe Recipe added 20 hours, 16 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 21 hours, 16 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 22 hours, 14 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 23 hours, 17 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 1 day ago