Latest CSS3 Recipes

Color table columns from N onwards (td:nth-of-type)

I want to add a certain background color from a certain column onwards. Instead of having to use a css class for each column, i would rather prefer to do it otherwise if possible.

I will have a huge table with hundreds of rows and around 25 columns...

Read the entire recipe Recipe added 3 minutes ago

Form login button enabled after password field has focus

hello guys I have a login page with two inputs username and password and one button. I want to put a class on that button after password field has first character filled in. How can I do that , Thank's. If is possible to do that only with css will be...

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

How can I make icon small when using bootstrap?

If I want to minimize icon size, how can I make icon small when using bootstrap?

This is demo http://jsfiddle.net/AqUBu/

I'd like to minimize the size of this human icon.

enter image description here

<span class='badge badge-success'><i class='icon-user icon-white'></i><i...

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

Large Background Images and Screen Sizes

I am creating a website that is going to use an image that I cannot tile. I need this image to cover the entire background screen. However, I want this to work on large monitors as well as smaller monitors.

Should I make one large background image...

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

br tag between the links are not working

enter image description herehow to make the links in the cube to break into two line i tried giving the br tag between two words in the cube

http://jsfiddle.net/VXXPC/23/embedded/result/

<div style="height: 65px;">
          <div style="padding-bottom:14px;">
            <nav...

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

CSS navigation bug

I'm having trouble creating a horizontal navigation. My problem is when I want to mess around with the UL & UL's list items' margin and padding.

These are the problems I am having:

  1. When I try to change the -top & -bottom properties it seems as...

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

Webkit border radius combined with css3 translate3D bleeding

I'm struggling with a problem on Webkit based browsers where if I add a border radius to a div and then apply -moz-translate3d to a ul inside (this is because on the original example I'm using flexslider slideshow), the border radius does not apply...

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

Override bootstrap with class and simple_forms

I have the following CSS class:

.table-price-item {
  vertical-align: middle;
  margin-bottom: 10px;
  font-size: 0.875em;
  padding-right: 5px;
}

And the following input in simple_forms:

  <%= f.input :price, :input_html => { :class =>...

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

How to use CSS to select an element only if a specific element comes after the one you want to select?

Using CSS and the following example, is there a way to select only <p>'s that are followed by <ul>'s?

If not, what is the jQuery selector, or would it require an if statement?

<p>Hello there.</p>

<p>Select this para!</p>
<ul>
    <li>list...

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

horizontal alignment of form fields

how to make the city state zip to align in the same line i reduced the width but its not working how to fix it

<div class="">
   <label class="" for="">City</label><input style="width: 54px;" type="text">
   <label class="" for="">State</label><input...

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

CSS Transitions not working

I'm trying to create a container system that only shows/hides one menu at a time. It works for the most part, but I can't get the CSS transitions to work correctly. I've been looking at this for a couple hours and can't figure out why there are no...

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

Need help adjust margin and line height of submenu

I'm trying to do the following: Click on PORTFOLIO http://jsfiddle.net/kuuwj/25/, as you can see when you click on portfolio button sub menu is showing up. But I changed the colors so you can see the problem. An issue is the next button ABOUT ME will...

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

Having an issue with inline UL sizing/positioning

ok, so developing a site for one of my friend's church using wordpress and I've run into a snag. I dont normally get all fancy with the nav bar, but I decided to take a swing at it... so here's what I'm doing:

nav bar background is a 1x64 pixel...

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

css - background image instead of icon font

As of now my button uses icon font. I would like to remove icon font, use image instead.

This is how my code looks like

.zocial::before {
content: "";
/* some code goes here */
}
.zocial.plus::before {
content: "p";
}

I have created a jsfiddle to...

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

Write this in less CSS code?

I am writing some CSS transitions of 5 different elements (medals/badges). I feel like I have done it the non-opimized way, so I wonder if it is possible to write the same, but with less code?

Here is the code:

#nav .badges { float:left; height:...

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

css navigation menu

I am trying to make a navigation menu without using any image by CSS. But I don't know how to have those triangular border line at the end of each menu items. Following image would make my idea more clear:enter image description here

any good turorial of CSS or JQuery would be...

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

Removing borders from a table

How can I remove the top blue border from the table header row and also the left blue border only in the first left hand column of my table?

Css:

<style type="text/css">
    table {
        width: 800px;
        color: #235A81;
        font-family:...

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

Inset Box-Shadow for Container DIV to overlay other block elements within

I have a container <div> that wraps around 5 other <div>s. I would like to apply a box-shadow: inset property to the container div, so it looks like all the elements within that container are beneath it and the shadow is 'on top' of them.

Problem...

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

Can I override !important?

What I am trying is setting this CSS on element

background: red !important;   

so when I try to do this.

 background: yellow;  

(I am not using external css)it still only shows the red and not the yellow for that one field as I would like it to...

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

Is that possible to make &lt;video&gt; mirrored?

Is that possible to make a video inside tag mirrored horizontally or vertically?

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

How can I set the vertical alignment while using 'ul' and 'li'?

How can I set the vertical alignment while using 'ul' and 'li'?

Here every font are the same height and same width, so it's hard to explain.
Please see the table below.
Now there is a table about tag cloud.

The tags are actually different sized...

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

How to set a image pattern and color gradients as background

I see modern sites putting a color gradient + pattern as the page background. You may take a look at the 'jumbotron' class of twitter bootstrap site here.

.jumbotron {
    position: relative;
    padding: 40px 0;
    color: #fff;
    text-align:...

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

CSS arrows vs image arrows

What are the advantages / disadvantages regarding the use of CSS arrows as opposed to image arrows?

For CSS arrows I imagine there's a higher risk of cross-browser / mobile device incompatibility, plus they take up more lines of code.

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

Fluid Images with Parallax, Max-Width Trick Not Working As Intended

I'm building a Parallax site using the instructions in this tutorial: http://f6design.com/journal/2011/08/06/build-a-parallax-scrolling-website-interface-with-jquery-and-css/

The demo version of the tutorial is here: ...

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

Vertical Media Query Not Working

My screen resolution is 1240x768 but the only media query that detects in my browser is when I set the min height to 300px, the query seems to have no effect if I set it to anything greater than 300px. This makes no sense because my browser window is...

Read the entire recipe Recipe added 1 day ago