Latest CSS3 Recipes

How to create sub child menu from a json

I created a horizontal menu from a json file. But I can't create the child and subchild. When I create the child of administrator it goes to home's child. My javascript file is

var data = [{
    "menu":[
        {
            "MenuId":1,
           ...

Read the entire recipe Recipe added 53 minutes ago

Opera 12.14 border-radius on <input /> not working

I am trying to make a simple login kind of page and trying to make it cross browser and, tho I am still at the beginning, I already found a problem that I don't find any answer at. I am trying to make some text inputs and submit input buttons with...

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

CSS button size different in Firefox 19 (works in chrome and IE9)

Firefox version 19 is giving me problems with spacing between an input field and a button. I would like the input button to appear to be inside the form background, and vertically centered, but the button is larger in Firefox than in Chrome or IE9 so...

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

Border Bottom property doesn't appear at the place

I am just working in a small project of mine.

Here is the url http://jsfiddle.net/KpFj2/1/embedded/result/

               <article>
                <div class="entry-meta">
                    <div class="comment"><i class="icon-calendar"></i>25...

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

webkitTransitionEnd not firing

I'm not sure what exactly happened, but I am pretty sure this was working at one point.

The event just isn't firing (or I am not catching it properly)

var $zoomBox = $('#zoomBox');
$zoomBox.bind('webkitTransitionEnd', function(e) {
   ...

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

Automatic columns

I have a long list of short items, such as below:

  • Apples
  • Oranges
  • Banana
  • USB stick
  • ...

I would like this list to split into columns automatically to fill the width of the containing element, such that no item is broken onto two lines ("USBstick"...

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

bootstrap modal code

I am using twitter bootstrap js to implement the modal..... i used the online example..... copied the html, css and js code into the fiddle.... but i dont see any output....

http://jsfiddle.net/nJ6Mw/

<div class="modal hide fade">
  <div...

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

How do I get my html to take up the entire browser window?

If my browser window is large enough, the web page is fine. If it is smaller and I scroll to the right, my backgrounds don't go horizontally across the entire browser window. They stop inside the webpage. I have made the body background blue so you...

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

How do I vertically align my wrapper so it will be centered on a (mobile) screen?

I am practising with making a webpage responsive for mobile screen resolutions. I succeeded with the width. How do I manage this with height? My wrappers continues to stay on top instead of vertical align.

I've seen a lot of questions about this...

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

Create gradient bar with angled side in CSS3

I'm trying to create this gradient filled box that has an angled right side in CSS and failing. Is this possible?

CSS Gradient - Illustrated

The box needs to be sitting over an image so the right angle needs transparency.

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

Is it possible to achieve beveled edges with css?

I am trying to play around with borders in CSS, but can't figure out how to achieve the following "boxy" look:

enter image description here

Is it possible? If so how can this be achieved (don't use dark background as it is there to add contrast)

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

How do I change the css so lowering one class does not lower the other?

I have two css classes. One is supposed to hold images of text on the left side of the page and the other is supposed to hold a form on the right side of the page. For some reason, when I increase the padding to try to lower the text images on the...

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

CSS &lt;div&gt; Style Shorter than Child Element

I'm working on a project to better my knowledge of Spring MVC practices. To do this, I've been creating a very scaled down version of Twitter. Basically, a user can sign in and post a little blurb and also see a timeline of their previous blurbs and...

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

Vertical Gradient

I am unable to get this gradient to go from left to right. Currently it goes from top to bottom.

background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(166, 230, 230)), color-stop(0.33, rgb(231, 231, 231)), color-stop(0.15,...

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

CSS3 background-image slider: animate and background-size

I am creating an image-slider by using CSS only. I am almost done coding, but I can't figure out what I have to do so that the images don't scale unproportional while sliding. I still want them to fill the div and not to be stretched at 100% and I...

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

How to make the body width equal to the device-width automatically in CSS3 media query?

I'm doing a mobile website now and trying to target different devices using CSS3 media queries. Part of my code is as follows:

@media screen and (max-width:320px) {
body {
    width: 320px;
}
/* some other style */  
}

As you can see, I have to set...

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

CSS3 transition (background-color) refusing to work in Firefox

This is odd and I may be missing something blatant by my main navigation buttons on build.advocatedaily.com have a CSS background color transition associated with them on hover.

It works in Chrome, but in FX it's just refusing to comply....

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

Aligning divs inside a td

I would like to align via CSS the following div elements inside a td. I have:

<table>
<tr>
<td style="width:300px;height:300px">

<div id="div1">hor+ver center alignment</div>
<div id="div2">top right</div>
<div id="div3">bottom...

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

jQuery UI Tabs - How to represent an active tab using a down arrow (instead of the standard style)

One of my service pages needs inner tabs. I already use regular jQuery UI Tabs in the page and I would like to use a different styling for the inner tabs.

Many popular sites use inner tabs differently from the main tabs by using simple text for the...

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

Firefox only runs the CSS animation once

I'm building an open source tab system for beginners to start off with. I think i've found a bug in how Firefox renders CSS animations.

Tab animations only fire once in firefox

I am using Dan Edens animate.css to do the animation for each tab. ...

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

Javascript Image Changing Position Over Time

Basically what I am trying to do is to get the red block to move from the left to the right side of the screen over some period time. The problem I am running into is that the page runs to java script without showing the animation. The block is just...

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

nav not working properly in ie8 - no background colour + sub menus dont have inline style

Relatively new to CSS and html5, I have used this tutorial to create a simple pure CSS/html5 drop down menu. In IE8 it does not work properly unfortunately. I have used the HTML shiv and given all the html5 elements a display:block style in my...

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

extra space with h1 tag

There is unknown space when I add the h1 tag above the p tag.

Here is the fiddle

What I need is here in the below image

enter image description here


After considering float:left, I tried it in my real page but it still gives problem

Here is the new code with float:left

...

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

web page responsive resizable grid design with 3 resizable areas

I hope this is the right place to ask this,
I want to make a web page with 3 div inside a container
in a way that the left and right div are resizable
while the center div gets resized accordingly to the left and right div,
something like the coding...

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

How to display text to the right of icon in same line

I want to display text on the right side which is aligned perfectly in the code. How can I do it? I do not want to use position absolute.

.down {
margin-top: 5px;
border: 1px solid red;
}

.icontext {
display: inline-block;
margin-right: 8px;
}

Read the entire recipe Recipe added 1 day ago