Latest CSS3 Recipes

Stick to top then drop in css - [I have example site]

enter image description hereI've just discovered this great site about art. I am curious about they can make the left header stick to the top then stop and specific place. Due to my understanding the position: absolute; should stick on top all the time, shouldn't it ?

Do we...

Read the entire recipe Recipe added 32 minutes ago

Selecting all rows but the last of class with CSS3

I am trying to select all elements in the rows of a certain class except the last row of that class. I have been trying to figure out the correct syntax to do so, but I just can't figure it out.

Here is the CSS I was thinking would do the...

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

Stacking divs responsively

I am working on a responsive site that when on desktop / large screen it will be in the following layout.

  1. Header
  2. Menu
  3. Content

Then when it's in phone / small screen it will be

  1. Header
  2. Content
  3. Menu

How can do this? The examples I've seen all...

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

Pop up spheres in web page using CSS3 / HTML5

I am designing a web app in whose log in page, I would like to pop up filled spheres in the sequence 1 - 2 - 3 - 4 - 5 as given in the following (crudely) drawn representation.

enter image description here

I have just used plain HTML before and very little CSS. So I am very...

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

How can I use Modernizr to get border-radius working in IE8?

I know there has been numerous articles about obtaining rounded corners in IE8. My question is, how to use Modernizr to support CSS3/HTML5 features?

For example to show rounded corners in IE8, I am using CSS-3 property

-webkit-border-radius:...

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

safari and iphone issue with -webkit-box-shadow

I have an unordered list which is set to display block. Inside that UL I have 4 li elements which are floating.

There is an issue when displaying it in Safari and therefore on iphone and ipad. The issue is that the inner element is inset slightly by...

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

transform: scale and positioning

How is that when I apply transform scale the "z-index is changed" ? What i'm I missing ? Is there any "trick" for playing with transform ?

.thumb > a .img-cover{
    -webkit-transition: all 1.2s ease-out;border-radius:5px;
    -webkit-transform:...

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

CSS3 Text Effect (Text outline and shadow effect)

I am trying to copy a text effect using css3

Here is the image of the text I am trying to copy:

enter image description here

Here is what I have upto now:

h1 {

font-size:4em;  
color: #E6012F;

text-shadow:
      3px 3px 0 #888087,
     -1px -1px 0 #888087,  
      1px -1px...

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

HTML CSS - Styling an Accordion

I'm trying to create an accordion using HTML and CSS, but I've run into some problems:

Demo: http://jsfiddle.net/MMFBz/

Issue 1 - Each label should have a 1px dashed #C5B7A6 border-top, except for the first one. When I create a pseudo element of...

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

Login Button similar to dropbox using images

I am currently trying to create a login button that is similar to that of dropbox. There is another thread available on how to do this, but I wish to do it differently. Note I tried to follow the code provided in that thread as close as I can, but it...

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

image positions not working

I can't seem to get boxclosed1.png to stay in the same spot if i re-size the browser. does anyone have any ideas? i'm testing in chrome. I tried to follow what was posted at this link: CSS: position absolute fails in resizing

EDIT: so i tried...

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

infinite animation keyframes & z-index issue at the end of the cycle

I have a some animation which in the end will hopefully make up a nice CSS-only Vintage Flip Clock.

Basically i have the numbers split into two parts and animate each of the two parts with a 180° Rotation on the X-Axis.

╔═══════╗   
║   ##  ║   
║ ...

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

Why Firefox doesn't accept -moz-transition in style?

Possible Duplicate:
How to set CSS3 transition using javascript?

I try to add an CSS3 transition css property to an element with (native) JavaScript by style object of the element, it doesn't work in Firefox but everything is fine in webkit...

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

html5: how can i trigger or stop a css3 loop animation?

I have a slideshow made with css3 animation like this:

@-keyframes animBanner
{
0% {top: 0px;}
18% {top: 0px;}
20% {top: -60px;}
38% {top: -60px;}
40% {top: -120px;}
58% {top: -120px;}
60% {top: -180px;}
78% {top: -180px;}
80% {top: -240px;}
98%...

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

input width 100% and margin/padding

How to use inputs with 100% width and margin/padding??

When the input has no focus the width is 2 pixel wider than the parent element, but on focus the width is right? How to solve this?! :-/

jsfidle

http://jsfiddle.net/eHQSR/1/

code

input,...

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

Display error messages at the bottom of form submit

Is there a twitter boot strap class to display all validation error messages at the bottom of the form submit button?

<div class="row-fluid">
<div class="span12"> 
    <div class="devise-body">

<%= simple_form_for(resource, :as => resource_name,...

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

Border radius does not work with I.E.?

Css

border-bottom: 1px solid silver;
background-color: #000;
background: rgb(51,51,51); /* Old browsers */
background: -moz-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(153,153,153,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left...

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

twitter bootstrap drop down issue

Hi I am using twitter bootstrap for my website. I have put dropdown in collpsable which is in modal window. My problem is the dropdow I have put in collaspable inner, it cutoff the menu. Here is that Imageenter image description here

It should show like this : enter image description here

I have tried...

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

which browsers currently support standard css border-radius

which browsers currently support standard css border-radius.

Is it now safe to omit the -moz-border-radius and -webkit-border-radius elements.

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

Text shadow not behind gradient clip background

I am trying to get a logo to use gradient fill with clip and then place a text shadow behind it. However the shadow always seems to be placed on top?

Obviously I can do this in SVG etc. but for other reasons I would like do it with CSS.

I have...

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

CSS 3 animation effects are not working in IE

I am trying to include this beautiful list of animation effects from Liffect - Effect for Lists into my ASP.NET application.

<form id="form1" runat="server">
    <div>
        <ul effects="pageTop">
            <li>
                <img...

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

My jquery sortable is not sorting

I'm creating a simple scroll that I want to enforce a sortable in just to make it fun. Yet I can't see why it's not sorting like it should.

$('.sorting').sortable({cursor:'pointer',
    tolerance:'pointer', scroll: false, revert: true});

I have a...

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

Animating jQueryUI Sortable using CSS3 transitions

How can I use CSS3 transitions (or any other means) to make a jQuery Sortable act more like the list re-ordering in iOS, where list items smoothly animate while dragging, so items scurry out of the way as you drag?

[editing to turn this into an FAQ...

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

filling area with elements using float

I am working with DIVs with float:left

when DIV 2 increases size

we get something like this:

+---+ +----+
| 1 | |    |
+---+ |    |
      |  2 |
      |    |
      |    |
      +----+
+---+
| 3 |
+---+

Is there a way to achieve this:

+---+...

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

jquery plugin to create square-tiles with a background image

I need to split an image into square-shape tiles on which users can hover or click on.

Should i use pure css or do I have to use jquery ? Do you have examples of jquery plugins doing that? (I found this one but would be interested in other...

Read the entire recipe Recipe added 1 day ago