Latest CSS3 Recipes

Image icons in HTML that display nicely in Retina displays

I want to have nice images in my HTML that display very nicely on browsers in computers with Retina displays. I'm guessing I just have to have a high resolution image in my img tag. But then the lower resolution browsers will all have to download this...

Read the entire recipe Recipe added 31 minutes ago

Why does my media query not work?

My CSS looks like something below:

@media  (max-device-width:480px) {
    {
        body{background: red;}
   }
}

when I resize the browser to iphone width, I dont see body get red background. Do you guys know what is happening. I also tried...

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

Keeping HTML footer at the bottom of the window if page is short

Some of my webpages are short. In those pages, the footer might end up in the middle of the window and below the footer is whitespace (in white). That looks ugly. I'd like the footer to be at the bottom of the window and the limited content body just...

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

html5 css3 creating audio sound from text

Is it possible to create an audible sound from text?

So that one can play a page although one have no knowledge about the spelling?

So that we can use a tag like below:

<read gender="woman">Read Me in the voice of a robotic woman</read>

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

CSS Filter on Retina Display: Fuzzy Images

When you apply a -webkit-filter and a -webkit-transition to an Image and change the filter on hover, the image transition does well, but then the image gets really fuzzy.

Note: This only happens on Retina-Displays — no problem at all with 'normal'...

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

How to distribute HTML list items evenly in an unordered list

I want my li elements that form a horizontal menu to be distributed evenly across the width of my ul element. I normally float my li elements to the left and add some margin. But how do I put the proper spacing so they extend from the left of my ul...

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

CSS for ribbon end

How do I draw the end of a ribbon like the left side of this image using only CSS? enter image description here

I know I can use the fact that corners in CSS are mitered, so I can have a div with a border of size 0 and other borders bigger to give me triangles. Is there a way...

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

Building Responsive UI with media queries

I have read somewhere that when you build a Website and also want to use media queries to make it Responsive, general convention is that you build the Mobile Interface first then build the UI for desktop browsers after. Why is this recemmended over...

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

Target body with sibling

I have a HTML page with contents (div, h1, ...). With interaction on one of these contents I would like to affect my body. I look at ~ and + sibling symbol for CSS but without success.

Is there a way to achieve what I want to do ?

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

CSS repeat image

How can I define background-image repeat with cap insets? I want the image to be repeated without border. Is it possible to repeat (tile) or stretch the middle in CSS?

Resizable image with cap insets.

The first (smaller) rounded rectangle is my PNG image. Red lines show cap insets...

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

I need this :nth:child equations

I have searched google and know how to write equations for nth:child, but I can not select the following child. I need to select 5th, 9th, 13th, 17th, ...

Do you know an equations for that?

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

why can't I see the box-shadow for twitter bootstrap navbar?

In version 2.0.4 of Twitter Bootstrap I added a box shadow to my nav-bar and it worked great. (see the image below)

enter image description here

I recently upgraded to version 2.2.1 and tried doing the same but I fail to see the box shadow below my navbar. Here is my current...

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

Unwanted Inner box-shadow on input field

I want to apply two box-shadows with a 90 degree angle to my input field, so I expect the shadows to be only at the top and bottom borders, but not at the left and right borders. Instead, there is a dark inset shadow on the left that I can't get rid...

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

CSS Container Issue - Background not running full length

I'm having issues trying to get my main container (the white background) to stretch to the bottom of the content, it currently runs in the header only. I've been racking my brains for ages, I've tried adding in a clear and also made sure that all the...

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

How can I target a specific group of siblings in a flat hierarchy?

Assume you have this HTML:

<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing...

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

Why is there padding between my first nav and the body?

enter image description hereI though the first part of my css would make no padding in the body. This is enough content to explain my problem stackoverflow, please allow me to post my question now.

The CSS:

*{ 
    margin: 0px;
    padding: 0px;
}

header, nav, section, aside,...

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

Making CSS generic for image centering

Below is my CSS. It is used to centre an image. (This code works)

.imagecentre{
    width: 25px;
    position:relative;
    margin:0 auto;

}

In order for it to work, you need to state the width. However, not all my images are 25px.

How can I...

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

list-style-type can be set to NONE in CSS3?

I'm validating this CSS via W3C validator:

#breadcrumbs {
  list-style-type: none;
  padding-left: 0;
}

and getting this output:

Value Error : list-style-type none is not a list-style-type value : none

What's wrong with value none here?

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

Animation for the automatic height change when content is resized with javascript

I want to control the automatic height change of the container when I add something that changes the lenght of the content. Right now, if I apply a innerHTML change on the content, the height is changed accordingly. I want to apply a transition to...

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

Line-height on top only?

I have a site: http://starthumble.com/

The menu does a scroll-to-anchor effect on the same page. However, if you click "home" it scrolls and cuts half of the call-out text off. I've figured out that if I set

.companycallout h1 {
    line-height:...

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

CSS 3D transform to make trapezoid of given edge lengths

I have an element of given dimensions (say, 100x300 px) living in a container of the same height and variable width that I want to transform using rotateX around -webkit-transform-origin: top center; while picking the -webkit-perspective of the...

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

put a symbol after word enclosed in h3 or span in the same line with css

I have crafted a webpage. It has many words enclosed in spans and h3 tags. Now I am trying to put some symbols at the end of text on the same line using CSS class. I can do this with class something like below using background-image property:

   ...

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

CSS3 scale transform and positioning

So I'm working on a project where I need to scale a div (and all the elements it contains) as the window resizes. My idea is to use the CSS3 scale transform. However, as I resize I find that the div shrinks into the middle of the window rather than...

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

Recreate this pattern with CSS instead of image?

I came across this pattern online but it's an image and I'd like to avoid using images as decoration as much as possible.

Any ideas on how to recreate this pattern? (excluding the background texture behind it)

enter image description here

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

Z-index on dynamic elements

Hopefully I'll be able to explain this well enough without an example...

I have two instances of wonky z-index. Let me explain each:

1) I have a navbar with a dropdown using a css3 slide transition and jquery with positioning to move into place. I...

Read the entire recipe Recipe added 1 day ago