Latest CSS3 Recipes

Centering 4 Images Horizontally and stacking them vertically if the width of the page shrinks?

I currently have 4 images on a page. I'd love to center them horizontally, so that when the page shrinks they continue to stay centered. I want to stack them vertically if the page shrinks too much.

Here's a site that does what I'd love to do: ...

Read the entire recipe Recipe added 52 seconds ago

CSS hardware accelerated width?

I am attempting to build a Phonegap app that will allow the user to change the size of a two column layout by moving the middle divider.

I was able to get this working, but there is a huge UX problem: it's laggy. It's not terrible, but on the latest...

Read the entire recipe Recipe added 56 minutes ago

css text-indent on input text doesn't work in internet explorer 10

i'm trying to customize a text input with css, i want the text inside it to have a margin of 10px to the left so i use:

#text{
text-indent: 10px;
border: 1px solid #333;
outline: none;
padding: 0;
margin: 0;
width: 168px;
height: 20px;
border-radius:...

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

Save images after using CSS filter

I'm building a new website that will let users apply filters to images (just like Instagram). I will use -webkit-filter for that.

The user must be able to save the filtered image. There is any way I can do that using JavaScript?

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

Dim screen on alert of div

I have the following html div and css when a pop up alert box fires. I want the rest of the screen around it to go dim, but the CSS isn't working.

Can we dim the screen around the focused div, using only css?

.dim {
    height:100%;
    width:100%;
...

Read the entire recipe Recipe added 4 hours ago

Fixed width title text with links

I have several posts like this:

<p>Title 1 <a href="/view/1">view</a></p>
<p>Title 2 <a href="/view/2">view</a></p>
<p>Longer Title 3 <a href="/view/3">view</a></p>

Is is possible to CSS them so that the title text has a fixed width, e.g. 300px,...

Read the entire recipe Recipe added 5 hours ago

CSS Transition causing images in &lt;a&gt; tags to jump in chrome

I have a CSS3 transition opacity on a image responsive image (max-width: 100%) contained in tag, on hover it changes size fractionally and then goes back to normal, when you remove the cursor it again does the same adjustment, I can't see anything...

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

CSS menu not displaying in IE 8

I have an issue with the following CSS menu in IE 8 it will not display - it shows a default list - not the menu as shown in other browsers (http://interclub.org.uk)

Please advice any corrections or support or alternatives for the CSS or document to...

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

Fix the columns height in css

I have the following CSS source:

/**Track Properties***/
#area {
    font-size: 14px;
}
conteiner {
    height:100%;

}
.track {
    position: relative;
    padding: 0px;
    margin: 0 auto;
    width: 980px;
}

.trackdetails {
    position:...

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

Flexible box model - display : flex, box, flexbox?

Many of us are aware today that the older values of the display property like inline and block are outdated after the new flexible box model has been introduced in CSS3. But, we might find different information on the web in the same flexible box...

Read the entire recipe Recipe added 9 hours, 1 minute ago

Sketchy style borders with CSS border-image? Anyone identified this species yet?

Call me crazy, but wouldn't it be cool to apply a hand-written/sketchy style border to your HTML elements? Has anyone done this with any success yet? Please share!!!

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

Is it possible to detect support of CSS3 functions like attr() or url() using Modernizr?

I've been searching for a while for a Modernizr test for CSS functions like attr(), but I couldn't find anything. Is there a way to test these features?

Read the entire recipe Recipe added 11 hours ago

Get color value of specific position in colorbar with gradient

I generated a gradient colobar with CSS3 styles (fiddle) and now want the color value of a specific location (by x and y coords) in that colorbar. As far as I know there is no direct way to do that.

I see two options:

  1. Implement the gradient...

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

Parallax Scrolling

Can anyone point me in the right direction? I have a DIV with a background image that is fixed, but I'd like it to scroll at a slower rate when scrolling down the page. I'm not great with jQuery or CSS3 so asking for some help.

Thanks in advance.

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

CSS Content special character : Hex vs normal character

Example 'BLACK STAR' ★ (U+2605)

.a:after {
   content: "\2605";
   position:absolute;
}

.b:after {
   content: "★";
   position:absolute;
}

Demo : http://jsfiddle.net/l2aelba/vBjxX/

Why someone/most recommended to use HEX like \2605 in CSS value...

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

Place div over other elements

I'm trying to place an icon over a div but the overlaying div is pushing the rest of the contents down. I'm stuck although it should be pretty easy. Please have a look at this fiddle and let me know what I'm doing wrong (apart from using tables in the...

Read the entire recipe Recipe added 15 hours, 1 minute ago

Create vertically centered horizontal line to fill width of title with padding in CSS

I basically need to create a title that has a vertically centered horizontal line filling up the width (left and right) but that also supports multiple text elements on the same line, e.g. to form something like:

----- Alpha - Beta - Gamma...

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

How am I supposed to address elements that are not a direct child of a given element in CSS?

Consider this snippet:

<div class="container">
  <input type="text">
  <div class="myList">
   <input type="text">
  </div>
</div>

I thought the following selector could address entire text inputs, except for those that are direct child of myList...

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

How to control multiple images for a single background definition

In CSS, I'm trying to figure out how to individually control the size of 2 background images, stacked on top of each other. So in CSS, one could define 1 background image as such: background:url('base.png') no-repeat center;. In order to stack an...

Read the entire recipe Recipe added 18 hours ago

CSS Resizing based on key variables

I've built a dynamically sized grid layout that can adapt to reasonably in any sized resolution (phone, tablet, desktop) and handle resizing, all while being near pixel-perfect (sorry, I'm OCD -- and I say "near" because my math is broken right now...

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

How to use media queries for mobile devices and desktop?

I know that this kind of questions were asked before, I've looked them up but still couldn't quite get my mind around it. Here's my problem: I want the index page of my website to look in desktop layout on desktops and mobile jquery on mobile devices....

Read the entire recipe Recipe added 20 hours ago

CSS - Cropping Image Height To Match Text Length

I've got 2 things sharing section - a header comprised of text, and an imaged floated to its right. I'd like the image width to always be 308px, and its height to crop according to the needs of the text length. I'm not interested in setting a fixed...

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

Map a movie within a HTML5 video tag to modal

I have a movie I'm playing on a site that I would like to map (like an image) so that I can have people click on a certain area of the movie tag so to speak. I've basically done it how I used to image map way back in 2005, but it's not panning out. ...

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

CSS3 transform property on TideSDK Mac

I'm building an application that I would want to run on both mac and windows. I'm using CSS3 for the styling and the UI of this application. I'm using selector:hover {transform : scale(1.5,1.5)} for certain images of my app and this works absolutely...

Read the entire recipe Recipe added 23 hours ago

CSS3 White to Transparent Gradient

I'm using CSS3 and RGBA to create a white-to-transparent gradient:

div {
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0,...

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