Latest CSS3 Recipes

Apply Range for Class and ID in CSS

I had created accordion layout using html and CSS. I will create many parent row in an loop using JavaScript, so i don't know the exact parent count to apply CSS. To went for range specification like [class*="tabb"] and [id*="tabb"], MY try has been...

Read the entire recipe Recipe added 48 minutes ago

d3js chart: how to use clip-path to limit the length of a line to specific bounding box

My chart features a tooltip which has cross-hairs on hover. These cross hairs are simple two lines (one vertical, one horizontal).

GOAL: limit the length of these lines such that they are contained within the graph area (gray 'grid plot' see line...

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

Rounded bottom border for div

enter image description hereI am trying to round in the bottom border of a div. Is it possible to do with css? I know you can round in corners with:

border-bottom-left-radius: 50px;

I guess I am trying to achieve the inverse of this.

Any help would greatly be...

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

Best method to combine 2 images with points of reference?

I have 2 PNG images (image A and image B), each one with 2 points (point L and point R) which I know its pixel coordinates. Both images are placed inside a .

I need to make a javascript or jQuery function to combine these images. The image A should...

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

Background image scale html5 css3

I've been messing with some html5 / css3 transitions and for the life of me i cant make the background image zoom in when hovering over the text what am i doing wrong is it possible this way ? or am i completely off route

code below.....

<!doctype...

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

Nesting Flexboxes in CSS

I'm starting a website for a school project and I though it'd be nice to try out the Flexbox CSS layout.

But I'm having a little problem nesting them with my header, that contains a logo image and a nav bar. Here is the HTML:

<header id="logo-nav">
...

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

Slide up one menu item with transition

I am trying to create a menu that slides up on hover. My problem is that all the links slide up instead of just one at a time.

This is my html

<section id="content">
<div id="stuffhere">asd</div>
</section>
<div id="bottom">
  <nav id="links">
   ...

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

How to get two sibling elements to transition simultaneously?

I have two elements in a div, an image that fades in and some text that changes color, but I am unable to get them to transition at the same time. In other words, the mouse can only be over one or the other.

I tried to put the properties in the div...

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

css two rows 1 column box layout

I've been working on a two row and 1 column layout with flexbox, I'm using flexbox because I don't think css2.1 can fill the remainding space for box-B. In my example of my jsFiddle, I can't get box-C to shift up on the right hand side and also I...

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

Why does the -webkit-keyframes feature of CSS3 not validate in HTML5?

This animation feature does not validate when the css file is uploaded in http://validator.w3.org/ The error says that this -webkit-keyframes is inactive, although it is providing the rotating animation I expect.

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

Easiest way to transition an overlay on hover over a photo?

I'm looking for css magic here. I want the user to hover over the box which already has the text on it. Then I need the black box to rise up from below and sit behind the text.

MY JS FIDDLE HERE!

I've got this:

<div class="box expanded">
Some...

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

Smooth css change transitions

I've setup a jQuery function that changes the body background colour when a certain div comes into view, e.g. the body background colour is black, when #block-three (that contains black text), the body background colour changes to white, and changes...

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

jQuery animation with css not working correctly

Hello and thanks for reading this.

I have a problem with my jQuery, I'm trying to change the the visibility of my articles and the padding-top when I scroll down. The problem is that I want to do the "animation" to be slow, but it change right away...

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

Social Media Icons Wont Lay Side By Side

I can't seem to figure this out. I know its easy for most. I have used float left and right but I can't seem to get the Three Social Media icons at the very top of the site to lay down side by side.

You can find the site here: ...

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

Is there a toggle for hover or mouseenter/mouseleave?

I have some div element which each one contains a few div elements inside. So I want to give effect these div element in hover. I am not sure to use hover or mouseenter. For example in hover of a div, it must run an animate am move to left or change...

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

Box sizing suddenly stopped working

I´m using the box-sizing: border-box; element to make my boxes on my website behave the same on multiply browsers. It has worked perfectly great since I started create the website but today the box-sizing element suddenly stopped working. I´ve no clue...

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

How to insert image as background using CSS?

I want to insert image as background without using the <img/> tag. I've tried the following code:

HTML:

<body>

     <div class="icon"> </div>

</body>

CSS:

.icon 
{
    background-image:url("Pictures/control.png");
}

I've also tried #icon in...

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

Combining Color and Texture with CSS - With Font Above Texture

How can I add a texture over top a solid color background using the pseudo :after element, while keeping the font on top of the texture? Such as that used on the Font Awesome website.

Using the Font Awesome website and CSS: Combine Texture and Color...

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

Linear-gradient works only with -moz vendor prefix

Since this code works with the -moz vendor prefix I thought it would work a well with -webkit or -ms for instance, but it doesn't seem to allow it:

background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0)...

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

CSS Transition won't work on Firefox

I'm working on a transition onmouse hover an div. The effect should be a text merging from the top to the middle of the div while the div turns from square to circle. The problem is that if in FireFox the square to circle effect works but not the text...

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

Equally distributed nav bar with hover that fills the entire li element

I've tried to find a solution to my problem and a lot of others problems have been similar but I cant quite seem to crack this one. CSS has never been my strong point so Im trying to get a better grasp on fluid layouts.

I have a nav bar with 3...

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

Making navigation menu responsive

This is the first time I am doing any css after college. I have managed to write this pen :

Navigation with hover effect

But If you resize the browser, everything gets messed up. So far I have just used bootstrap to make website prototypes. But now...

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

Transitions time in IE

I have this css codes for my element that works in firefox and chrome :

.button {
border : 1px;
background : #fff;
transition : 1s;
}

.button:hover {
border : 2px;
background : #000;
}

And i set a "Transition:1s" for this element.

But now this...

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

css3 3d cube strange rotation behavior

I have a css3 3d cube which I'm trying to get to rotate on a button click. Right now it does rotate, but in a different way then I'd like. I'm trying to have it so the cube position stays still, but rotates to the correct side. Right now it rotates...

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

Center section?

Why doesn't my "Section" center properly ?

I thought this should do it:

section{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

what went wrong this time ?

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"...

Read the entire recipe Recipe added 1 day ago