Latest CSS3 Recipes

@keyframes not working in Firefox

Umm, hello. I was playing around with the @keyframes property of CSS3 and the animation doesn't seem to work in Firefox. Can someone please tell me what is wrong in my code?


    height : 150px;
    width : 190px;

Read the entire recipe Recipe added 9 minutes ago

IE10/Win 7 ignores CSS keyframes when within a media query?

0I'm working on some CSS animations for a web app with a responsive layout. Some of my animation adjusts the width of some containers and position of a background image. As a result I have something like this (prefixes omitted for brevity):


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

Setting after content in html with angularjs?

If I have the following CSS:

.myStyle {
    background-color: #e5e5e5;

.myStyle:after {
    content: "My Content";

And the following html:

<div class="myStyle">
    Set content for after?

I would like to set the content for after...

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

Expand a Div Vertically to fit contents

I have Login page, with a div in the center. I have set the height and it fits perfectly. However, if I add validation errors at the top of the div, the button at the bottom gets pushed outside the div. The page is a bit more complicated, but I have...

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

How to write media queries for HD/Retina Display in Landscape position?

Essentially I have two different styles I want enacted on mobile devices. One set for Portrait View, the other for Landscape. I have run into a problem during testing in that my Galaxy S4 is showing what is supposed to be my Landscape View while in...

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

How can I avoid animation artifacts on my touch-draggable border-radius element on iPad?

I’ve written a little example page with elements that are draggable on touch devices (based on code by Peter-Paul Koch).

I have two draggable <div> elements: a green block, and a red ball (made ball-shaped with border-radius). The...

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

css3 transition: firefox makes on hover out and chrome in hover in

I would like both to behave like webkit, but for some reason in webkit works as I expected but -moz- does the animation when mouseout the .porftolio item,

Any idea why?


.portfolio-item {
  float: left;
  width: 300px;
  height: 300px;

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

Linear gradient percentages vs pixels

I have two examples, both of which to my knowledge should be identical.

The percentages are calculated based on the width which is 960px;

Here's the pixel version, which seems to work great.

.pixel {
    background-color: #111111;

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

How to Change input language of textbox in html?

I want to change language of textbox to marathi in html file My code is as follows but it not working

<html lang="mr" xml:lang="en">

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

CSS hovering on elements

I have two div's

<div id="a">A</div>
<div id="b">B</div>

I am trying to make an effect that when hovering on #b the background color of #a changes. I used


#b:hover + #a{
    background: #000;

But it is not working.
If i use



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

Strange lines safari 6 gradients

I'm trying to make gradients to the block.


a {
      display: inline-block;
      box-sizing: border-box;
      width: 330px;
      height: 160px
      background: -moz-linear-gradient(top, #fdfdfd 0%,#fcfcfc 100%);

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

Play a css3 sprite animation once and hold on the last frame

I have an sprite animation that I would like to play once, finish, and hold on the last frame. I've tried changing the iteration count to 1 and added forward to the fill mode but neither worked. Any information or ideas would help.

I'm using this...

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

Trying out a simple css3 transition, not working in IE


<div class="mask">
    <div class="mask-wrapper">
        <div class="front">
            <img src="" />

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

css3 resetting the translate immediately before using it again in a transition

I'm trying to animate this scrolling function where links are transitioned out of the screen by having a translate y value of 100%. The problem I'm facing is that when I scroll up I need to reset the 100% back to a percentage higher off the screen,...

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

CSS Fade in on hover

I'm currently attempting to have a with an image fade in when I hover over some text using CSS. I've applied the CSS code, but the effect doesn't show; the div appears, but without the fade-in.

Also, I realize that CSS transitions don't really work...

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

Twitter Bootstrap: white space on left and right side in smaller screen widths?

I have markup similar to this:

<div class="container-fluid">
    <div class="container">
        <div class="row">
            <h1>Hello World!</h1>

Obviously, I want the .container-fluid to span the entire width of...

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

How to customize &quot;not enough columns given to draw the requested chart&quot; message?

Is there any way to customize Google charts to prevent them from displaying this 'red' message? E.g., silently drawing nothing instead?

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

CSS3 transition for custom underline images

Hi friends I am looking for a strictly CSS3 fix for opacity transitions on custom underlines using background-images and nested in a navigation list. I realise after some research that background-image transitions are not currently supported, I...

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

Creating beveled corners

I need to create a button with straight, beveled corners instead of rounded corners, for example, this:

beveled corner

Instead of this:

rounded corner

I can't use multiple box-shadow declarations, because I need a 1px border to outline the whole shape. And I can't use the...

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

min-height, height, class, id precedence

I have a class that receives the same height across the project. I want one div that is a member of the class to expand dynamically. So I give the div an ID (more specificity). I was also under the impression that min-height would take precedence...

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

Modify text padding not image padding on menu

I have a sprite menu, and want to fix the padding, If I add pad the text is moved but also image...

#categories{width:1042px;height:170px;margin:15px 0px 0px 0px;}

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

Making some primitive cardboard waves move with canvas

I've written a script that draws a very cartoony, primitive wave;

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.moveTo(0, 12);
var waux=120;

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

Why don't blocks that use % properties and add up to 100% not go side-by-side?

I am trying to make two blocks fit side-by-side within another block, but I'm confused as to why they don't sit nicely next to each other?

.container {height: 200px; width: 400px; background:darkgrey;}
.left {height: 100%; width: 49.8%; margin: 0...

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

Using gradient on div border with rounded corners

I have some divs that have rounded corners and colored borders. I want the borders of the div to have the gradient so that it will change when the user hovers overs the div.

I have found all of the sites on how to use the gradient (...

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

rotate 3d pictures using javascript

I am starting working on a one page website which uses javascript extensively. The main purpose of this site is to promote my customers products. This website will include one product 3d image. When user clicks and drag then it should rotate...

Read the entire recipe Recipe added 1 day ago