Latest CSS3 Recipes

Why doesnt text fill its line completely?

I need to make sure height of the text is exactly same as its line. But when font-size and line-height are the same, the text is still slightly smaller then its line. See Fiddle. I use text-transform: uppercase here, so there are no extra parts that...

Read the entire recipe Recipe added 56 minutes ago

CSS border-radius bleed with dark colors

I've got a containing box that has a border-radius then I have an element within the container that also has a border-radius set, and it butts up against the edges of the box.

The containing box is "bleeding" around the edges of the interior box:

enter image description here

...

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

CSS counter-reset and increment

I would like to fix my CSS counter so it resets on each occurrence of OL or UL top level parent. Nested OLs should not reset the counter, but it should reset only for each instance of top level OL or UL.

The css that is likely the...

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

Why isn't text alignment animated in this HTML?

Why isn't the text align changed? Here's my HTML.

<!DOCTYPE html>
<html>
<head>
<title>CSS 3 Animation</title>
<style>
.table
{
width: 400px;
height: 80px;
border: 1px dotted black;
}

.animatedMargin
{
font-size: xx-large;
-webkit-animation:...

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

Show different 'height' for links on hover over with CSS

I want to do this with CSS only. I have an unordered list and some hyperlinked list items and I want to limit the width and height of the links (list items) to width:300px and height:1.5em. So, no matter what the length of the links are, only up to...

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

Adding style to file upload button in css

I have a text field and button with following css:

JS fiddle link : http://jsfiddle.net/Tdkre/

.submit {
      -moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
      -webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
      box-shadow:inset 0px 1px 0px...

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

Resize background-image by html5 and css3

In this forum i read that i need to use JQ to resize background-image. but i don't know JQ and want to resize background-image by css3. Can i do it? If possible show me the right direction, please.

I have two background images. One - texture with...

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

jQuery Mobile changePage failed

I'm having issues making the simple script below to work but it's not:

<div data-role="page" id="targetPage">

    <div data-role="content">
        <form action="" method="" name="targetForm">
            <a id="bt-addTarget" data-role="button"...

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

CSS or PHP? color that is 80% of original but without &quot;transparency&quot;?

this might be a tough question.

I have a php function that returns a color value in rgba() with an argument $alpha.

function colorWheel($alpha) {

   "rgba(170, 135, 178, ".$alpha.")"
   …
}

So when calling …

.title { color: <?php echo...

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

Convert True/False to Tick/Cross image using CSS only

I have some data that I'm reading from JSON and writing into a Table.

Currently looks like following.

<table>
<tr><td>Feature 1</td><td>true</td><td>false</td></tr>
<tr><td>Feature 2</td><td>false</td><td>false</td></tr>
<tr><td>Feature...

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

Modifying a CSS style

I'm struggling creating a CSS style.

This is what I've got: http://jsfiddle.net/WhNRK/26/

It was designed for a label, but now I'm trying to modifying for something like this:

<input type='radio' name='mcq' id='radio-choice-1' value='1' /> 
<div...

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

&lt;button&gt; and &lt;a&gt; seem have different line-heights, how to go around it?

The button is 2px bigger then the a tag with same styles. Any ideas why is it doing it and how to fix it?

jsfiddle

<a href="">Some Text</a>
<button> Some Text</button>

a, button {
  background-color: red;
  border: none;
  text-decoration: none;
 ...

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

How to blur one side of the div using CSS

I want to have left side of the inner div to be blurred, I mean I don't want to have such sharp edge. But only on the left side, right side is fine. any idea how to do this?

http://jsfiddle.net/9UaKX/8/

.wrapper {
 position: relative;
 width:...

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

Chrome 24 css3 transform 3D flickering on hover

I'm having a weird bug on chrome 24. Better than a long description you can take a look here

.card {
  width:270px;
  height:180px;
  background:lightblue;
  border:1px solid black;
}

.card:hover {
  -webkit-transform:perspective(2000) rotate3d(0,...

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

Stop CSS3 transition from firing on page load

I'm experiencing an issue with the CSS transition property beeing fired on page load.

The problem is that when I apply a color transition to an element, (ex: transition: color .2s) then when the page first loads my elements flashes from black to it's...

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

CSS3 style an element depending on the state of an input checkbox

What is the meaning of '~' in this example? I saw this example from this tutorial. http://css-tricks.com/the-checkbox-hack/

I know it can be used to style an element completely differently depending on the state of that checkbox. However, I can't...

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

CSS effect like Cinemax logo (angle ends of background)

I have tilted text and a background using -webkit-transform: rotate(-#deg); and background selectors, but the ends of the background stay perpendicular to the text. How can I customize the degree at which the ends are cut off (à la the Cinemax...

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

Are there any javascript code (polyfill) available that enable Flexbox (2012, css3), like modernizr?

I'm looking for any javascript library that like modernizr (which actually does not) enables flexbox for "older browsers" (a polyfill).

Yea I know this is a really new feature (infact "there aren't" is a valid answer), but I'm hoping for something...

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

Possible to get an HTML span element to word-wrap when inside a pre element?

I have an issue where I have span elements that are absolutely positioned (they are call-outs). They are typically a single line, but sometimes need to wrap. That works fine. I set a width and they automatically wrap. Unless they are within a pre...

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

Why don't CSS3 animations work on outline with default none?

I've got to this point in which I'm trying to do a hilite animation on an element which I can't move or modify its boundings, so i used an outline in addition to its background color to have an animation area bigger than the element itself (here's a...

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

Overriding a class in CSS

There are already many questions related to this. But I'm still not clear. Also not sure if the title of the question is correct. Here's my problem:

What the below CSS code means?

#nav li { /*some cssA*/ }
#nav li.over { /*some cssB*/ }
#nav li a {...

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

Multiple CSS keyframe animations using transform property not working

While working with CSS keyframe animations I found that when I give an element two animations like:

.element {
    animation: animate1 1000ms linear infinite,
               animate2 3000ms linear infinite;
}

If both of the animations animate using...

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

Show div when hover another div using only css

I have searched the web for this one but didn't find anything similar.

Say we have div A and div B. When hover on div A, div b should be visible ON (should look like overwriting) div A and not placed under.

It should appear like only the content of...

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

CSS3 media queries to target specific device

I have my wordpress theme with basic CCS, Now I want to make this design responsive for most used device layout's noted below.And I want to target all apple devices in landscape as well as in portrait mode:-

blackberry(320x240),
iphone3...

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

how can I center this menu with CSS

I have this menu fixed, how can I center this menu?
I already tried with margin: 0 auto, and float: left, but it doesn't work.
Are there any way to center ??
here I have a demo:

http://jsbin.com/enaliw/3/edit

<nav>
        <ul id="main-nav"...

Read the entire recipe Recipe added 1 day ago