Latest CSS3 Recipes

Drupal Dropdown Menu

I am having trouble with my drop down menus. I would like to have multiple columns under one drop down. here is what I am working with.

 #navigation-primary > ul > li > h2, #navigation-primary > ul > li > a {
/* font-size...

Read the entire recipe Recipe added 49 minutes ago

Radial gradient for Internet Explorer

I am trying to do an animation with pure css3. The animation would be eyes that move left to right, my probleme is I using radial gradient background for the eyes but on Internet Explorer this effect doesn't look to work, but on Chrome and Firefox its...

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

Hiding a div on every page except for the index

I have ran into a minor problem that I almost found an answer to. I have my header/footer that I made into an include file since the client was making me add and remove stuff to these daily. Now I can do all the changes in one file, boy what a nifty...

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

align text outside table with column in table in CSS

I have a table with 9 columns, and under column 8, I want to print that column's total (which I have stored in a variable). How do I align the text so that it appears under column 8?

I currently have the total in a h5 tag, but if that prevents the...

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

Responsive gridding what is it and how to achieve it

I just tested few of my webpages in cross browsers testing tool and found out that for lower resolutions all my divs were not coming separately.

Afters googling I found out about responsive griding.

After reading that I wanted to ask that whether...

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

CSS3 dropdown menu not working anymore

Ive been making a website with a CSS3 menu. However during the validating process to check if i made no mistakes i broke my CSS3 menu. The menu itself works but theres no drop down menu when hovering "Categorieen" like it did before.

Heres the...

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

CSS3 background-size

Is there a way of switching between CSS classes without using JS? Just HTML with CSS.

I would like to be able to switch between these two classes

.b1 { background-size: cover }
.b2 { background-size: 100% }


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

My CSS3 doesn't work in my html page

Im trying to use some CSS3 code to rotate my text but I think it doesn't get recognized?

CSS code:

.menu {
    cursor: pointer;
    width: 61px;
    height: 205px;

    -webkit-transform: rotate(270deg);

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

Left menu disappears from screen

The problem I'm having is as follows:

This website I'm working on has a left menu, then content. The menu on the left should be visible at all times. On my screen this works just fine, but on smaller screens (<=1280pxx720px) the menu will disappear...

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

Div has no height when there is img inside it

I have a div[div1] that is surrounding other elements. Inside the elements I have an image that is positioned absolute. Div1 and the elements have float left on them and are showing no height. Is there a way to have this so the main overall div1 has a...

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

Responsive Website Design No Longer Responsive

I'm working on converting a site to a RWD (Not Rear wheel drive) and have suddenly run into a problem.

As part of my diagnosis, I tried backtracking in my css file so that the only change to mobile.css is the color of the background from #000 to...

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

jQuery - Add CSS3 animation to div using jQuery

I have this loader I've created using CSS3 and CSS3 Animations. Although, I want to use jQuery to create the actual loading function (depending on how many seconds I say.)

Example, I want so I can set it to ex. 30 seconds to load the bar to full....

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

Centered icons with float:left

I have a problem with the centering icon


.icons .overview {
    position: relative;
    float: left;
    width: 16.6666666667%;
    text-align: center;
    overflow: visible;

.icon {
    display: inline-block;
    width: 64px;

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

Confusion with selectors, div ~ h1 vs div &gt; h1

I am having a problem understanding the div ~ h1, it appears it selects all h1 tags that directly follow a div.

But isn't this what div > h1 actually does ?

It selects all h1 that is a direct child of the div ?

I also came across div + h1 and at...

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

Display my two sidebars under content div if mobile phone?

I have two sidebars on my template and output on desktop computers will look like this:

<!--sidebar one--><!--content--><!--sidebar two-->

Like in This Fiddle. This looks exactly as i want.

My code for desktop layout:

<div class="wrapper">

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

Fit my page with screen at zoom-out or zoom-in

Sorry if my tone is not good! Here is my HTML and CSS code.

 #home article {
background: url(../images/top_bg.png) repeat;
height: 100%;
position: absolute;
text-align: center;
top: 0px;
border: solid 7px #FFFFFF;
width: 99%;



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

Windows 8 Horizontal Content Page

I love Windows 8, among many of the apps, and one of my favorites is the weather app. Today I wanted to try making "horizontal page content" as seen on the weather app in the screenshot below.

I was trying to do this...

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

Change menu buttons without reload site

Actually my menu looks like this, in the end my navbar should look like this: I can't use it because I can't load thems .js.. It just dosen't works well.

So I'm trying to write it...

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

CSS3 keyframe animation not working in Firefox

Here is a small excerpt from my CSS3 animation. Works in Chrome, IE10 but not in FF. What did i miss here?



    <div class="pic u1"></div>
    <div class="pic u2"></div>
    <div class="pic...

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

How to get continuous sliding effect of images and text as if a video is playing

I am trying to build the slider in Jquery/JavaScript where I can able to slide images and texts simultaneously with fade effect.

Please see this link for reference

Anyone suggest me how can we get this effect same as in the link provided...

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

Is it possible to rotate characters of a word instead of rotating the whole word using css3

I am trying to transform text in a div using onload window event.

I know that transform: rotate(360deg) scaleX(-1); makes the whole word rotate but I need to rotate the text characters and return them back to their same position while on load.

My ...

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

Infinite Image slider with pure CSS3

There are numerous example of sliders made by CSS3, but almost all of them needs click trigger to change the slide. I wonder if it is possible to make a auto-slider, which continuously and indefinitely change the slides.

For example, consider a...

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

Style every third element?

How can I style every third element with plain CSS.

I have seen questions like this, but they involve javascript. I want a plain CSS solution. I know I can use even or odd with :nth-child but :nth-child(third) doesn't work neither does...

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

Icon aligns to center when using display: table and margin: auto, but when I change to display:none it does not align to center after .show()

This works and properly aligns the icons:

#stepSuccess {
    display: table;
    margin: auto;
#stepFailure {
    display: table;
    margin: auto;

Here are the icons themselves:

<i class='icon-ok icon-4x icon-green'id='stepSuccess'></i>

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

Responsive Design: how to have text input and button stay 100% width of parent

Very simple question... I'm hacking it right now with floated percentages (but I know that there has to be a better solution) please see my photo as an example to go by. I want to have the parent stay 100% in width and the search box be an automatic...

Read the entire recipe Recipe added 1 day ago