Latest CSS3 Recipes

ellipsis in css works in Firefox (16.0.2) but not in Chrome (22.0.1229.94)

I have the following html:

<div class="x">
    <div class="y" title="aaaaa">
        <a href="/">
            aaaaa
        </a>
    </div>
    <div class="y" title="bbbbbb">
        <a href="/">
           bbbbbb
        </a>
    </div>
    <div...

Read the entire recipe Recipe added 29 minutes ago

How to simplify cross-browsing css animation keyframe?

If I make a keyframe animation I have to copy it 4 times, and if I want to change value I have to change 4 times each? this is crazy. any ways to simplify it?

@-moz-keyframes ballanim /* Firefox */
    {
        0%   {
            top:0px;
        ...

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

Center an `&lt;img&gt;` in a `&lt;div&gt;`

How do I center an <img> in a containing <div>?

The usual margin-left: auto; margin-right: auto; isn't working.

The image can be larger than the container, and is scaled either horizontally or vertically by the max-width and max-height.

A jsfiddle...

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

Change styles of hover effect &amp; field select in Bootstrap

I am using twitter bootstrap and my own CSS to achieve something.

What I want to do is, all the input fields like username, password & search, on selecting them, the border becomes blue, I want to change it to black.

Another thing is, I am using...

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

How can I only select one radio button?

I am creating a review-control and using radiobutton for grade selection. I wrote some simple js to add a diffrent class when a radiobutton is checked.

The problem is that you can check every radio button, I want the user only to check one value. I...

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

Fixed header and a responsive website issue

I have been trying to create a website with a fixed header but which is also responsive. Here is what I have so far. I would stick it in a jsfiddle but you can't see what I am trying to explain. The .css is in the .scss format as the .css is...

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

How to play a second CSS animation once the first one finishes

I'm running into a problem. I'd simply like to, once one CSS3 animation has completed, have my next animation begin (ideally a fade in)

Here's the first animation code:

#truck {
position: absolute;
margin-top:90px;

-moz-animation: slide...

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

CSS: set div heigth to 100%

Please take a look at this jsFiddle: http://jsfiddle.net/omarjuvera/TpWNY/#base

I would like <div class="client"> to "inherit" <div class="contact">'s height (Both inner div's to have the same size)

Keep in mind that the content on both <div...

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

adding an icon in front of a input field without disrupting the flow of the form

OK so, I have an icon that when I put in front of an input it is pushing the input to the right by 5 pixels or so therefore, throwing the fields out of visual alignment. Is there a style I can throw on :before input or something that can make the icon...

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

Trying to flip a triangle css

Been trying to follow and play with this fiddle: http://jsfiddle.net/bossy_nova/wBUW7/1/

I've been looking for a way to get this kinda triangle to become a downward facing triangle. Played with the rotations, and that didn't prove useful. Am I...

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

lightbox 2 border around thumbnail

Hey guys Iam trying 2 use light box at the moment and every thing is working fine. However what iam trying 2 figure out is how do i get a border like http://lokeshdhakar.com/projects/lightbox2/ the ones which they got in the examples to change colour....

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

Designing header with bootstrap (image, text &amp; search)

I am trying to design a header using bootstrap. I want to put a logo at the top, to the right of it, that is, at the header. And I want to place a bootstrap search bar at the right of the entire header. I've tried to float the search bar right, but...

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

Rotate 3 div simultaneously using css

I want to rotate 3 div simultaneously.

<img src="logo.png" class="logo" width="150px" height="150px"/>
<img src="1.png" class="logo" width="150px" height="150px"/>
<img src="2.png" class="logo" width="150px" height="150px"/>

All these three images...

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

Keeping text white on hover on drop-down menu

The problem is when you leave the <a> the font color will revert back to its non hover color.

I want the color of the "About" text to be white even the cursor leaves the "About" link.

I've been trying to put all color: on the text on my hover link...

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

Does google chrome 23 or firefox 17 supports CSS3-Layout?

Does google chrome 23 or firefox 17 supports CSS3-Layout? http://www.w3.org/TR/css3-layout/

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

How do I define multiple CSS background attributes?

Is it possible to have those backgrounds work together?

background: url("../images/search.png") no-repeat scroll 9px 4px transparent;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0, #fdca14), color-stop(1, #ff8d02)...

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

IOS HTML5 App - Jquery slider allows click action also

I am building a HTML5 IOS app - which has a over-complicated brief!

Basically I am building a workout guide - The functionality requires a user to swipe left and right to reveal alternate tables of exercises - the user can expand and contract each...

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

How to animate slider elements if they are not positioned absolutely?

I'm trying to create an animated slider for my website and I'm using floats and margins to position the elements of the slider, I was searching for anything I can integrate into my slider that will animate the elements, and I found that I need to use...

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

Using an Data URI SVG as a CSS background image

Backstory:

  • Goal: create a triangular shadow that can be applied via CSS and is scale-independant (i.e. a vector, not a raster image)
  • After much research (tho I'm certainly open to alternatives) I chose to use an SVG background image as a data uri...

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

Darken img while exposing text on hover

Some images in my website needs to be darken when hovered, and also in the same time, to expose text that was hidden before that hover(the text will be displayed on top of the darken image).

I already implemented the img-darken part this way - ...

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

How to prepend a div to another div using javascript

I have 5 listviews with different id's and i am giving an header to each listview using class=".k-header". whenever i am running the code the headers are coming on top and the listviews are coming next. I want header for each list view on top of...

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

Font rendering differently on all OS X browsers

I'm developing this website where I use CSS to style my menu buttons.

They all look good on Windows, but when I try them out on OS X, they render erroneously. What's even more odd is that they show good on a page, but [in my opinion] not so good on...

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

create a div containing sliding images

I have a div inside which I have placed images of many languages. The total size of the div goes above the page size in a browser. So I want the images to keep moving from bottom to top like animation slider. Image size is not what I am looking to...

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

box-shadow + transition glitchiness in IE10

JSFiddle

<div id="box">
    <div id="body">Blah blah blah</div>
</div>
#box {
    box-shadow: 0 0 8px black;
}
#body {
    height:100px;
    transition: height 0.8s ease;
}
#body:hover {
    height: 200px;
}

In IE10, the shadow at the bottom of...

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

CSS div box animation with elastic effect

Hey all i have a JSFiddle of what i am trying to accomplish here JSFIDDLE CODE

Problem being is that i am unsure on how to go about giving it the elastic effect when opening and when closing back down to a smaller square. However, currently its...

Read the entire recipe Recipe added 1 day ago