Latest CSS3 Recipes

How to center div inside div in following case

i got problem with setting my layout right, elemnts doesn't align way i want to and i'm running out of ideas, or repeat same misteakes.

There is wrapper(green) thats fits its size to page width, container that i want to center (blue) that shrinks or...

Read the entire recipe Recipe added 20 minutes ago

Applying CSS 'fadeInDown' animation on a div stops jQuery 'Scroll to Fade' working on the same div

Does anyone know why applying CSS 'fadeInDown' animation on a div would stop jQuery 'Scroll to Fade' working on the same div?

I'm working on an interactive infographic and want a piece of text to fade down using CSS fadeInDown but also fade out on...

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

Is it possible to break a positioned element out of a parent that has a transform?

Please see this example: http://jsfiddle.net/niaconis/5jgHj/

Using position: fixed works to break box "b" out of its position: relative parent.

Is it possible to do the same for box "d" even though -*-transform is applied to its parent?
If so, how?
...

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

Clear icon floating next to input text

I would like to know if there is a jquery function that would let me create a clear icon floating next to input text inside a search box like this:

enter image description here

I could not find any example anywhere, I doubt that this is possible but a confirmation would be...

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

CSS animation - Animating image left to right and increasing height along an angled path

At the moment I'm using css animation to move an image from the left to the right of the screen. This works without issue.

What I want to do is actually have the animation start at a certain height then as it animates to the other side of the screen...

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

Alternating row colors with CSS will not work inside another

Why is this? Both blockquotes are blue. The TR's do alternate in color, but the blockquotes will not. How come?

<tr>
    <blockquote>Hello</blockquote>
</tr>

<tr>
    <blockquote>Hello</blockquote>
</tr>



tr:nth-child(even){ background-color:...

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

LESS compiles border-radius: 50% / 20%

I have this line in my less file.

 border-radius: 50% / 20%;

LESS compiles this line to:

 border-radius: 2.5%;

How to force Less not to compile this line?

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

Add a line next to a header with CSS

Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:

I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using :after and...

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

1px broken line under the 1st tab in my css menu

I need your help.

I have a CSS tabbed menu with a little javascript support, however, it appears that under my first menu item there is a broken 1px line, how can this be fixed?

enter image description here

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Tabbed...

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

is css :not attribute able to target only one element?

here's the html

<div class="first" style="height:468px">
<div></div>
<div></div>
<div></div>
<div></div>

<div class="notme">

    <div></div>
    <div></div>

</div>

and the css

.first {background:pink}

.first div:not(.notme)...

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

Firefox not displaying header correctly

I have a question regarding my previous post: Animation stop with css3

The slider works perfect in Chrome. In firefox however it is not working properly. Does anyone here have an idea?

Slider can be found here http://jimmytenbrink.nl/slider/

It...

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

span content without an extra element tag

I am trying to creat plus and minus icons using spans for my accordians. I have managed to style up the span into a circle, however without putting a <p>+</p> inside the <span class="accordian-icon"></span> how can I put the '+' inside the span using...

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

Why a div with float: right does not respect the margin of the hr tag below?

I'm using twitter-bootstrap framework and I'm trying to put a form-control with some text aligned to the right and some text aligned the the left (all in the same line).

Here is the fiddle: http://jsfiddle.net/2gu29/3/

HTML

<div...

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

can't get a hover event to work on a sibling of a target element using jquery ui duration paramater or CSS

My goal is to change the background color of an element and one of its siblings that is higher in the DOM but in the same parent on hover. I was able to use css transition to change the first element but i couldn't get the sibling to change. so I...

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

Transitioning Affixed Navigation bar - CSS

I've a got a fixed navigation bar using the affix() of Twitter Bootstrap 3.

Everything is working fine with the navigation bar. I wanted to add a transition in the appearance of the navigation bar.

When the user scrolls the page the navigation bar...

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

Converting CSS menu from tab hover to tab click

I need your help,

How can the following code below be modified such that, as opposed to hovering over the tabs to switch them, that the user can click on the tabs to switch them instead?

Here is a fiddle:

http://jsfiddle.net/QA5Zp/

The...

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

How to change the text of an element upon hover or being activated?

I'm working on a website that has a "Hire me" button centralized on the page. It was created using the following code:

<div id="hire_me_button">
    <a href="contact.html"><h4 id="hire_me" class="button">Hire Me</h4></a>
</div>



#hire_me_button...

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

Background won't cover entire div

So I am having just a small issue with a site that I am modifying for a client: http://gator3094.hostgator.com/~sunhome/staging/.

As you can see, the background image that I am putting around the <header></header> tags is not stretching the full...

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

block divs height ingnored

I have one div style

.metal_rods{        
    max-width:200px;
    background:red; 
    margin:1px;
    display:block;
}

And here are the divs

<div class='metal_rods' height='10px'> 50 </div> 
<div class='metal_rods' height='110px'> 50 </div>...

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

Start CSS transition when reach the div (or image)

I already search for that, but didn't find much information about it. It's possible to create and CSS transition with :hover effect, for example:

div { color: red;} div:hover {color: blue;}

And you just have to add the transition to this CSS. But I...

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

Select last child with different types of children

I have a .page div element, with multiple children, of types header, div and footer.

My goal is to give the last of the children elements of the .page element a larger margin, but this does not do the job:

.page:last-child { margin-bottom:2em;...

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

Image &lt;input&gt; and table-cell display

I have an <input> and an <input type="image"> displayed as table-cell.
I cannot figure out why the image is on a new line in WebKit-powered browsers.

This is my HTML:

<div id="search">
    <div id="search_input_wrapper">
        <input type="text"...

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

CSS Position fixed not fixing header to top

I am trying to fix the position of my header and cause a CSS transition on certain amount of scroll like this link

I appended the position fixed for the header, in the header div, with the top:0 which apparently is a common mistake, unfortunately,...

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

jQuery dotdotdot not working with calc

Applying calc to a width of a containing div stops the jQuery dotdotdot plugin from working.

html {
    font-size: 62.5%;
}
div#outer {
    width: calc(100% - 1px);
}
div#inner {
    width: 200px;
    height: 100px;
    font-size: 4rem;
}
<div...

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

css -webkit, -o, and -moz requirements

I am running through CSS3 tutorials and I have come across these new requirements. Obviously each browser has different implementations, so you must tell your style sheets to use them. How do you know when a certain browser requires a certain prefix?...

Read the entire recipe Recipe added 1 day ago