Latest CSS3 Recipes

Only one function rather than many that are looking the same?

Bonjour ! here is my question, I'm using, two "kinds" of JS short functions (5 lines of code per function) but I have to make, let's say, about 10 of each kind. It would be a total of 100 lines of code which is very long... So I was wondering if there...

Read the entire recipe Recipe added 39 minutes ago

Image caption - I dont want it to fade away

I am making my index page, which is blocks of images with caption. The actual image is colored, but I set them so they can be loaded black/white. And when they hover over, they turn colored. However, when I hover over the image, it turns colored, but...

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

Style the parent of the current element

In this code, I want my ul to have a border line colored with the activate li color. For example, if the .activate element is gray, the ul border bottom must be gray. How can I accomplish this with the markup below?

<nav>
    <ul>
        <li...

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

simple use of fitVids not working?

I'm trying to get fitvids to resize my video to fill the parent area as much as it can. Here's my fiddle:

http://jsfiddle.net/LkqTU/9513/

code:

$(".video-content").fitVids();

html:

<div class='liveExample'>

    <div class='video-content'>
 ...

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

CSS filter grayscale not working in Firefox

I'm having troubles doing a transition from grayscale to colored, it works in chrome, but that is it.

Here is the HTML:

<div id="post" style="background-image:url('bg.png');background-repeat:no-repeat;">
    <p><a href="/post.php?id=1">Title -...

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

CSS Tables and spacing

I'm new to CSS tables, it's my first time. So I discovered that when you set display:table to a div, you can forgot all margin and padding (and whatever) you're planning on it's future cause they are ignored. Nice. The only property I've found to make...

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

Validation (CSS 3.0): 'text-shadow' is not a known CSS property name

I have installed both the CSS Intellisense and web standards updates then restarted VS2010. I've also verified that I have "CSS 3.0" selected in the "CSS Version Validation" drop down that's part of the Style Sheet toolbar. I still don't see any...

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

Center link text in a circle

I have a cicle created with CSS that is positioned absolutely in it's container. The text in the circle is a link. Can this link be centered vertically and horizontally inside the circle? I am testing on Firefox and Chrome with the browser set to...

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

Resize div to contentEditable iFrame using onkeyup

I've got a div that holds a contenteditable iframe. The CSS has height set on auto, I've set it up so on keyup the div resizes to the iframe's scroll height.

I'm able to correctly expand the div based on the content's height, but I am not able to...

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

media query for vertical scroll

Is there a way to detect vertical scroll distance with a media query?

It seems that media queries are designed around detecting the medium (shocking right :P) so things like browser height are testable, but not specifically how far down the page is...

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

Horizontal navigation menu with different colors when hovered

Is there a simpler solution for this? I want to make all of my nav lists with different background color when it is hovered. Now I make it with id-s. Now the code looks like the following. Updated code can check http://kontaktfotovideo.hu.

<nav>
 ...

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

How to animate semicircle-like meter indicating elapsed time with HTML/CSS/JS?

I am looking for a solution for how to go about animating the following image indicating elapsed time as you see below. To make it easier for explanatory purposes, I would like the animation to take place in 10% intervals (despite me showing the 67%...

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

CSS3 Backgrounds - multiple background-size properties

I'm trying to do something maybe impossible, but lets see what do you think. Here is my code:

html {
    background: url(../img/pattern.png) repeat, url(../img/up2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
   ...

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

Rotatate an image like a book with a css3

I have an image where the left side is black and the right side is red. My question: it's possible flip this image like a book in the middle?i would like the left side rotate and the right side stay in old position. Thanks

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

How to fade the menu with a small delay?

When you hover over the #menu it will fadeIn the #menu-big. I want to add a delay when the user moves the mouse away from the #menu-big.

What I have so far works funny (the first time works fine then it won't behave properly): ...

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

How to Use CSS transitions

Hi friends is anybody knows how to use Css cubic-bezier in the Html Page

I have tried ease-in effect here
it is not working. Help me to give ease-in effect to the div when the page-load.
Here is my css...

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

define pseudo class and pseudo element in same element

My question is really simple, just what i am trying to do is :hover, :after and :before , i want hover anf after to embed in same element, check out my css code:-

#sidebar .widget li a:before:hover, #sidebar .widget li a.active:before { 
   ...

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

How to use CSS3 within Android WebView?

I am developing Android application using HTML5, and I am trying to create rotation of an element using CSS3 transformations, which is the best way to perform this so that app could still run on Android 2.3

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

Vertical align bottom fails in Firefox &amp; Opera

I have a menu where it has a height of 69px and want the text at the bottom the height within its space.

The link is JSFiddle is: http://jsfiddle.net/YFuFV/

<div class="header fondo_amarillo">

<div class="header_central">
    <div class="grid_12">
...

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

nth-child(odd) not working

I am attempting to have alternating quotes on either side of the page (odd and even blockquote) using the CSS pseudo-class nth-child. For some reason (odd) is not working. Any ideas?

The JSFiddle.

HTML. Not as complicated as it seems. Just a whole...

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

border-radius doesn't quite touch div contents

So I have a rounded corner'd div created via the CSS3 "border-radius" rule. It has a child element at the top that has a background color (in this case, the same color as the border color). It's almost perfectly fine, except for the fact that they...

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

How to put a input text with dynamic width in a table?

I'm using twitter-bootstrap and I have two tables like this: http://jsfiddle.net/MELUd/

<table class="table table-bordered">
    <thead>
        <tr>
            <td colspan="2"><input type="text" ></td>
            <td colspan="2"><input type="text"...

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

How can I fix this 3-column layout?

I have a 3-column layout.

All columns are defined as divs. And they are all implementing the same css:

.div-column {
    display:inline-block;
    vertical-align: top;
}

As long as the content of the columns is not too wide, they stay beside each...

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

How to cut off text that is longer than the space available and show '...'?

I have a title of video that is a long title and I would like to display this in a single line like this:

Title: TxT TxT TxT ...

But is displaying like this for now:

Title: TxT TxT TxT TxT TxT TxT TxT TxT TxT TxT TxT TxT

here is a Div...

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

Reset width div-element in mobile first stylesheet

I am trying to style the Grid Columns plugin from Justin Tadlock for mobile. Source: https://github.com/justintadlock/grid-columns

In my css file I would like to set the .column-grid .column width for mobile to full, and reset the width for...

Read the entire recipe Recipe added 1 day ago