Latest CSS3 Recipes

How do I hide the parent of a nested list while keeping the nested list visible?

I want to hide the parent of a nested list while keeping the nested list visible. In addition, I do not want the parent to take up any space on the page when it is hidden.

HTML

<ul>
    <li class="parent">Menu
        <ul class="nested">
           ...

Read the entire recipe Recipe added 13 minutes ago

blank space on the right side of the page

I have this issue with my page right now, everything is pretty much centered and exactly like I want, but if I scroll horizontally I can see a white space on the right. I have no idea which element is doing this. I have overflow-x: hidden in the body...

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

How to make object with fixed positioning move from top of my browser window to the bottom as I scroll down my website?

I have a website that is 6 times the height of my browser window. I Want to have an image with fixed positioning move from the top of the browser window to the bottom as I scroll from the top of my website to the bottom.

Id give you some example code...

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

css3 columns wrong order

I am using css3 columns in order to create 3 columns per row order, like pinterest.

but it seems to sort this way:

1 | 4 | 7

2 | 5 | 8

3 | 6 | 9

instead of:

1 | 2 | 3

4 | 5 | 6

7 | 8 | 9

here is what I wrote:

.list...

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

Spinner/Loader does not stop after page loading

I found a simple spinner/loader that uses only one div and one css. When I implemented that, i found that it was not stopping. It goes on and on.... so I inserted window load script given below. still it does not stop. What am I doing wrong? Here is a...

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

How to convert SVG CSS animation to pure JS code

I would like to convert an svg path animation, to a pure javascript one.

SVG code:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340px" height="333px" viewBox="0...

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

How to edit the CSS of a td element through the hierarchy?

For example, I'd like to edit this:

table.organization_detail tr td {
  font-size:20px;
}

But the above code simply isn't doing anything, I'm not sure how to target the TD element through the above hierarchy. Essentially, there's a table with an...

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

how make div viewport height, not page height in CSS?

All the suggestions to use top: 0em; bottom 0em; are incorrect. If the page is taller than the viewport, that code stretches the div beyond the viewport's bottom.

The other suggestion to use 100vh unfortunately doesn't have enough support (I need it...

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

Bootstrap Fade on Tab is not working

Here is my code

<!-- Nav tabs -->
            <div class="container">
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class=""><a href="#tab1" role="tab" data-toggle="tab">Tab1</a></li>
  <li role="presentation"><a...

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

Proper rounded border around fieldset and legend

I'm trying to get a border around a fieldset and its legend, without having the bottom part of this border on the legend.

Here's the default behavior:

fieldset {
  border:  1px solid #ccc;
  border-radius: 5px;
  padding: 25px;
}
legend {
...

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

Modernizr isn't working for &quot;column-count&quot; in IE9

I added reference to Modernizr JS file and put class="no-js" in html tag.

<html lang="en" class="no-js">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta...

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

Trouble making my pie chart smaller

I've created a pie chart using only HTML5 and CSS3, and it works perfectly. The problem however, is that I made the pie too big.

What I want is for the pie to be about 50% - 75% of it's current size. How should I do this?

Here's the JSFiddle; LINK

...

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

Positioning of image and text in a div using css

I'm working on mobile app , i'm not getting how to position text and image in one line in a div.

Please let me know if at all it is possible or not.

Below is image what i'm trying to get!

Below is my code. I want it to be like image. Thanks in...

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

How to start animations when element appears on screen?

How is an HTML element animated as soon as it appears on screen?

I found an example on the stack overflow tour page, where info elements slide into the page as soon as you scroll down far enough. What is the trick behind that?

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

How to stop an image returning to its starting point using CSS3 rotate3d

In order to get a ball moving in 3D I have created a new container to contain the image and rotated the container.

The java code is:

//Run the play when the "Play Ball" button is selected.
        runButton.addClickHandler(new ClickHandler()
       ...

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

Bootstrap background image not filling up space when mobile

i'm trying to make a background image fill up (in height) when going mobile. When i make the browser smaller, it doesn't seem like my media queries are kicking in. Any help would be greatly appreciated. Here's what my css looks like:

#main {
   ...

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

Why is the last line falling out of the wrapper?

My Fiddle is here: http://jsfiddle.net/7j5d9bcy/

My main problem is this code:

CSS:

 .picWrapper {
     width:250px;
     border: 1px solid black;
 }
 .picThumb {
     width:250;
     height:250;
     margin:auto;
     padding-bottom:10PX;
    ...

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

Center Div with padding instead of margin

I have a full width tab navbar with a bottom border, and I want to center the tabs horizontally.

The thing is, I can't do it with "margin: auto" because I want the bottom border to be full width. Is there any other way to center this, with padding...

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

Can't seem to horizontally center text that has been translated 270 deg?

So we have these HTML tables with "vertical headers". We are using the css3 translate property to rotate the text. All of this is working great, except, I cannot find a way to correctly center the text horizontally. I can of course manually center the...

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

android 2.x - 4.3.x phonegap doesn't support flexbox css3

I am developing and app with phonegap. I wanted to use the flexbox in my playfield, but i have this issue:

Chrome, Mozilla, android 4.4 - http://i.stack.imgur.com/1aunA.jpg

android - 2.x - 4.3.x - http://i.stack.imgur.com/yqIf0.jpg

  playfield {
 ...

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

Set height of div to 100% of remaining space under header

I have 2 divs:

  1. A header div at the top of the page with a set height of 150px.

  2. A container div sitting under the header div.

What I would like is for the container div to be dynamic and resize to 100% of the remaining space underneath the header...

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

Div with gradient border but transparent background for text

I have a div with some text, and I want to give it a gradient border but have the inside of the div transparent because there's a background image.

I tried modifying some existing code from examples I found, but I'm not quite there yet. Here are a...

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

White space appears when using margin-top

I am attempting to use margin-top push a container down relative to its parent container. However, when trying to do so, a white gap is appearing between the parent div and the preceeding div (see screenshots). I am wondering if anyone has a solutionenter image description here...

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

HTML/Javascript Element Rotation

I have an element that I have setup to represent a speedometer. It has a background element which has the actual image of the gauge, and I also have a "needle" element that overlays it and I change its transform rotate property based on a variable...

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

clean a div of a specified css rules

In a website, I have a header and footer that comes from another website.

Those header and footers came with javascript and add lots of CSS files (CSS files used from another website) ... and the main website too! Those CSS are like battle themselves...

Read the entire recipe Recipe added 1 day ago