Latest CSS3 Recipes

Callback when CSS3 transition finishes

I'd like to fade out an element (transitioning its opacity to 0) and then when finished remove the element from the DOM.

In jQuery this is straight forward since you can specify the "Remove" to happen after an animation completes. But if I wish to...

Read the entire recipe Recipe added 44 minutes ago

Override one part of multiple-property css declaration

If I have the declaration:

h1 {
  background-image: url(a.png), -webkit-linear-gradient(transparent, black), url(b.png);
}

is it possible to override only one part of the multiple values, i.e. (pseudocode):

h1.foo {
  background-image: default,...

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

CSS3 text editor software

I'm looking for a software similar to Photoshop, but to create a CSS3 styled text. I want to be able to create a styled text using WYSIWYG editor and then automatically generate HTML5+CSS3 code. Is there any software like this?

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

How to replace #site-title with a RESIZABLE image?

I am able to replace the #site-title text with a fixed-size image, no problem.

But now I would like to make it resize automatically based on the browser's size, just like WordPresse's header in Twenty Eleven.

FireBug tells me that the CSS...

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

Arrow Pointing to Each Line of Form

In my sign up form for my website, I want to make a tooltip kind of thing for my form, but I want an arrow constructed from css3. I haven't the foggiest clue how to do this kind of thing.

Essentially, when input:focus, a triangle (rendered with...

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

Twitter Bootstrap: What is the correct way to use the `.btn` class within a navbar?

I'm using a navbar for the standard nav stuff and i'd like to include a button for Sign in and Sign up.

The I'm using an a tag with the btn btn-large btn-success classes and by default it appears the navbar does not accommodate the use of nested...

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

CSS3 Flexbox full-height app and overflow

I have a app that uses a classic email like layout like the one below.

I have constructed it using the new CSS3 flexbox model and it works brilliantly until I add the ability for the user to dynamically add new items in the folders box. I would...

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

Choosing SVG or CSS3 for gradients

I would like to use gradients heavily in a new website I'm working on. I've been wondering if it would be better to implement the gradients in CSS3 or SVG.

Typically I only need multi-stop linear gradients so both meet my needs there.

I initially...

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

dynamically change style of all <img> tags

I am trying to simulate shaking by changing the position of img tags within a div.

I have it working for one img at a time.

Is there a way to change the style of all the img tags within a div at once?

This is what I am currently doing

    bird =...

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

IE 9 rounded corner with background picture

Is there any solution for this problem? When using rounded-corner in IE9 with background picture (repeating by x) the background is standing out. Everything is OK in other browsers(without shadow!)

http://i.stack.imgur.com/XLIer.png

css:

...

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

Looking for a “swing”-like easing expressible both with jQuery and CSS3

I have to perform two animations on an object simultaneously.
For a number of reasons, I want to use jQuery for the vertical animation and CSS3 for the horizontal one.

On jQuery side, swing easing works great:

jquery swing

swing: function...

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

Is it possible to set the width of a set of elements to add up to 100%?

Probably not the best title I've ever written, but I find it hard to formulate this question well. I'm working on a div that should cover 100% of the parent (could be body). This div should have a variable number of children, so every time the page is...

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

Displaying background both on top and bottom of a div? #multiple background-position

i need to get this little gray rectangle (red circle) to be displayed both on top n bottom of a div that coitains thumbnails (btw this div might aswell cointain 2 or 3 rows of thumbnails)

Picture:

2x borders?

here is my code for how it looks...

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

DOM: How to prevent [mouseClick -> selection] with jQuery Css3 HTML5

I am creating a web-app and selection of elements or text of any sort is unnecessary and doesn't look nice.

I would like to stop any sort of selection initiated by mouse click and dragging of images except in one single div where I want the text to...

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

Lightbox fading in and out with any transition

I'm trying to make a fade in and out with my lightbox based on only css and a bit of javascript. So far I only managed to do the fading in. How can I make it fade out?

Style.css:

@-webkit-keyframes FadeIn {
0% {
    opacity:0;
}
10% {
   ...

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

IE7's float right property

I have the follow code:

// CSS
.foo strong {
    float: right;
}

// HTML
<div class="foo">
    foo
    <strong>bar</strong>
</div>

And want to float the "strong' to right, but IE7 don't recognize the action..

Wrong

enter image description here

Correct

enter image description here...

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

Multiline Text Truncating

Does anyone know of a clean and easy way to truncate a section of text to two lines. This is what I am trying to truncate (p element):

<blockquote><p>&#8220;<?=$test_entry ?>&#8221;</p></blockquote><cite><?=$test_name ?></cite>

I have tried various...

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

Gradient background of submit button in IE

I am trying to add a gradient to a submit button in IE9 using the vendor specific CSS rule:

background: -ms-linear-gradient(#6671E8,#434991);

But for some reason this doesn't work. Is it something I'm doing wrong or is IE9 screwing things up again...

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

Is CSS3 part of HTML5?

Is CSS3 part of HTML5?
It means if a browser supports CSS3, will it support HTML5 elements too?

I had tried HTML5 elements in IE9, They didnt work.
But CSS3 properties( like box-shadow, border-radius) do work in IE9 fine by doing little changes in...

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

centering all Imgs on Responsive Design

I'm wondering if there's a good, generic, simple way, to code/ state all images to be centered horizontally within a responsive design below a certain viewport.

Eg, below 480px width viewport, all images display as block and are centered on the screen.

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

css being overridden/shut off

I downloaded a website template and I am trying to add an iChat like message system using CSS as seen in the link (style 4). My problem is if I take out the template I can see the bubbles as shown in the iChat example. You can see my page here of what...

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

CSS: is it possible to enlarge with animation an element in place with CSS?

Check this jsFiddle. Now that CSS animations are almost in full swing, I'd like to do something like this in CSS: when mouse comes over an element (.box), it is enlarged with an animation, its center stays in the same place and all other elements stay...

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

How can i scale an image with (moz/webkit/etc) while scrolling

im trying to do this i just cant figure out how to any ideas?

Dont pay attention to the parallax just wanna know how to scale the image while im scrolling(if the scroll goes up make the image smaller and when it goes down bigger)

www.smartusa.com

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

Css3 / webkit: how do I change the size of the scroll bar slider?

fiddle: http://jsfiddle.net/vVJGD/

::-webkit-scrollbar{
    width: 10px;
    padding-top: 40px;
}

::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    border: 1px solid black;
    background: rgb(41,41,41);
   ...

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

Prevent Safari cuts with transform

I have an element that is positioned absolutely above another. The thing is the background element has a little JS to rotate on the Y axis depending on the mouse's movement. Unfortunately, I am seeing an issue in Safari that doesn't appear in Firefox...

Read the entire recipe Recipe added 1 day ago