Latest CSS3 Recipes

Using a video as a background

I want to know which is a good way to use a video as a background, like is used for example in Square Cash: https://square.com/cash

Read the entire recipe Recipe added 9 minutes ago

html5: three-rows flexbox with fixed top/bottom and scrollable middle

Is it possible to make an html5 flexbox layout with fixed header/footer and a scrollable article section like the following for firefox 24 and chromium 31?

+----------+
| header   |
+----------+
| article ||
|         ||
|         ||
|        ...

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

div:after do not show image with background-size: cover

I wanted to show a background image with opacity setting, so I used this code

Mark up:

<div class="container">
    <div class="BackLayer">
         <section id="galleria">
             <div class="title-box">
                 <h1...

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

Can I disable wrap by div behavior in CSS3. Bootstrap

now I have such code, use bootstrap 2

<div class="row-fluid">
    <div class="span4">Some text 1</div>
    <div class="span4">Some text 2</div>
    <div class="span4">Some text 3</div>
</div>
<div class="row-fluid">
    <div class="span4">Some text...

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

nth-of-type acting like nth-child

I have this html code:

 <div class="productWarp">
    <div class="clear"></div>
    <div class="productLine" ></div>
    <div class="clear"></div>
    <div class="productLine" ></div>
    </div>

css:

  .productWarp .productLine {
       ...

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

What is the difference in this CSS?

I usually just figure this out as I go and eventually it works but I am trying to work out what the difference really is so I can become a bit more adept with CSS, that in mind what is the difference between...

H2.class

and

H2 .class

and can I...

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

make parent anchor link color change on dropdown hover

I am a mega menu and i want color of parent menu to change to red/green when one hover over the sub-menu.

Right now i tried few things which didnt work may be i am doing something wrong

http://jsfiddle.net/5eecT/13/

This doesnt seem to work

.nav >...

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

Stack divs horizontally according to size of container

Is there a CSS(3) trick to stack divs horizontally if they don't fit in their container? If the container is smaller than the sum of widths of the divs, they should overlap each other, the first aligned to the left, the last to the right, until there...

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

stuck with jquery function for css element displayer and hider

I created a function in jquery which displays the hidden css elements on window resize and now I'm stuck with, if window re-size to default then hide the elements....I'm not getting how to do that...

var cwidth =...

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

Is any better way of using @font-face

with this code i can get the cross browser compatibility, but the problem is, here i need to add lots of file type of the same font, how to avoid that and still able to get the cross browser compatibility?

@font-face {
    font-family: 'Name';
   ...

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

CSS3 animations delay issue

I have three images in my html file that I want to scale one at a time. I've tried placing these delays: -moz-animation-delay: -2s; and animation-delay:2s; within the ID #animation-container2 and #animation-container3. All the images still scale at...

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

Center Align Links In Navbar?

I tried messing with float and margin but I can't seem to figure it out.

I have float:left; and margin-left:15px; maybe that's the problem?

I'm trying to figure out where to put my text-align:center; and display:inline-block (or...

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

CSS3 Firefox not recognizing my liner gradient color

Im trying to use this code in css to display a linear gradient background but Im not sure why firefox is not displaying it..

body
{
height: 100%;
/*background-color: #F0F0F0;*/
background-repeat: repeat-x;

/* Safari 4-5, Chrome 1-9 */
background:...

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

CSS Matrix animation issue

I've tried to create some matrices animation lately. But I noticed something weird. The following code works differently on Firefox, Safari and Chrome :

@-moz-keyframes matrix
{
    from 
    { 
       -moz-transform: matrix(-1.0, 0.0, 0.0, -1.0,...

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

How to create a Sass mixin for this CSS radial gradient?

I am using the Ultimate CSS Gradient Generator to create a radial gradient, and it provided the Sass includes, however having trouble completing the background-image mixin

The CSS

background: rgb(220,156,118);
background:...

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

Bootstrap 3: Can a nav-pills nav menu collapse like navbar?

I understand that Bootstrap 3 ships with a navbar that collapse when viewed on smaller screens. However, I do not like the look of the navbar and have decided to style my main navigation menu using the nav-pills class. Is it possible to collapse my...

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

How to enable horizontal sliding to bootstrap carousel?

I have two samples of twitter bootstrap carousels.

Below you can find the links of sources:

  1. Source page (last sample). Here is a DEMO.
  2. Source page. Here is a DEMO.

Both of samples contains full screen background rotators. I would like...

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

Bootstrap 3: Can the Glyphicons be stacked like Font Awesome's icons?

Is it possible to "stack" the default glyphicons using Bootstrap like you can with Font Awesome's icons? Can Glyphicons do this: http://fortawesome.github.io/Font-Awesome/examples/#stacked or do I have to do custom coding?

Thanks!

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

Bootstrap 3: How to code my banner?

Does anyone have any advice on how to place a small image at the bottom of my banner? See this attachment (circled in red) to get an idea of what I am talking about. Can I do this using CSS3 or am I better off just placing an image there? It would be...

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

how to use nth-of-type for classes -- not elements

I am working on a simple HTML for an image gallery. Each row of the gallery can have 2, 3 or 4 images. (In an 2-image row, each image element is named type-2, the same goes to type-3 and type-4.)

Now I want to select the last element of each row to...

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

Border Pictures in Html

Below picture is the part of my website which I need to display some data in each boxes.

I imagined each box as div, but I could not figure out how to make stitchy borders. I don't want to use the whole picture in the web site as it would be awkward....

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

Is it possible to use CSS3 animations to move an image up and down while infinitely scrolling side to side?

I have a question that I am hoping I can achieve with just CSS3 animations but if the use of jQuery animate is necessary then thats alright as well. :]

I have an image of clouds sliding from right to left with an infinite loop on them. This works...

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

Device Detection Using CSS Media Queries and Flask/Jinja

I'm trying to use CSS media queries with Jinja and Flask to determine device type and serve appropriately sized images based on the device. Requests from mobile phones would get smaller images than desktops, tablets, etc.

The problem is that {{...

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

Scrolling element without scrollbar with CSS

JSbin here for visuals and code.

Left sidebar, full height, fixed position, content overflows that needs to be accessible WITHOUT scrollbars (that means no overflow: scroll). I really don't want to do this in Javascript.

At one point months ago, I...

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

hide the text inside select control

How can I hide the part of the text written inside of the option?

I've tried the following:

<select name='what'>
   <option value='some value'>Value to be shown <span class='hide'>value to be hidden</span></option>
   ....
</select>

And here is...

Read the entire recipe Recipe added 1 day ago