Latest CSS3 Recipes

Placing image inside a div in HTML 5

My simple div element is as below:

<div class="avatar">
  <img src="http://quickshare.my3gb.com/download/testpic.jpg" />
</div>

(The original image is 216 * 216 pixels) and my CSS is as follows,

.avatar {
float: right;
border: 1px #ccc...

Read the entire recipe Recipe added 14 minutes ago

avoid scaling scale the children of an element

I want to scale only the 'outer shell'

http://jsfiddle.net/97gSF/

.progress-radial:hover{
    -webkit-transform: scale(1.2);
}

<div class='progress-radial progress-100'>
    <div class='profilePicture'></div><a href='#'...

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

CSS layout with twitter bootstrap

I'm asked to create a layout using Twitter bootstrap that changes quite drastically when some button is pressed - so I need to write some JavaScript to change the layout. Let me explain:

By default: a 3 column layout where the far right column is...

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

Truncate text in floated box and show it entirely when hovering

I have following html:

<div class="box">
  <div class="box-left">
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</p>
  </div>
  <div class="box-right">
    <button>Resource View</button>
    <button>Employee View</button>
   ...

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

How can I detect whether a browser supports CSS3 blur?

I'm trying to write something in JS that allows me to tell whether a user's browser supports CSS3 blur, and display (or not display) an element as necessary. It doesn't look like Modernizr supports it, and I really couldn't figure out another way to...

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

How to use input:nth-of-type(n) for selecting an input tag?

I need to apply a style only to a specific input tag using E:input:nth-of-type(n).

Please look at his jsfiddle: http://jsfiddle.net/nLK2w/3/

Could you point me out what is wrong here? Would make sense use E:nth-of-type(n) instead?

 <div...

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

Broken CSS Sprites

all. I have some weird glitch going on with my CSS sprites displayed in the following code:

<footer>
    <div id="social">
        <a href="#" target="_blank" class="socialicons twitter">Twitter</a>
        <a href="#" target="_blank"...

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

I want to re format my css and jquery code for dropdown menu

I have following code working fine for dropdown menu but i need to modify css and jquery.

Need to increase the main box and decrease the 1st icon row

but when i try to decrease the width it is decrease whole box width

please guide. FIDDLE...

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

Make My Form and Image Background Fluid

I do have a Optin form created in my Homepage. But when i scale the browser down, the text fields and background images doesn't get smaller.

Here's my HTML

<div class="jpl-ebook">
  <div class="jpl-form">
    <form>
      <table width="220">
    ...

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

Select nth-child from last/bottom

I have list of items with alternating background colors. I'm currently using the :nth-child(odd) selector to make the alternating row colors. Users have the ability to add new items to the top of the list asynchronously using jquery -- this poses an...

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

CSS3 (or jQuery) Background Color Animation Vertically from Center of div

I'm trying to create an effect like the right nav on this site:

http://dianabobar.com/

With jQuery. The way the color opens up from the middle is the effect I'm going for but unfortunately that site is done in Flash so I don't have the option of...

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

Cannot understand the syntax of background position?

I am learning design patterns using gradients in CSS3. But stuck up with something which I cannot able to understand how it works. Actually, I am trying to understand patterns through the blog post of Lea Verou: Link.

Now, there's one pattern i.e.,...

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

apply an external css file to a scoped div tag?

I have a main css file for the whole site called StyleSheetMain.css. I download a slider that has his own style.css file and there is a conflict on some items.I want to scope the slider's css file only to a div that it will contains only the slider...

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

How to make the articles 90% height of the site

I have one section and in it three sections:

 <section id="home">

 <article id="rechts">
<h1>√úbersicht</h1>
 </article>
 <article id="mitte">
<h1>Leute</h1>
 </article>
 <article id="links">
<h1>Links</h1>
 </article>

 </section>

I tried to make...

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

HTML/CSS Box Sizing or Padding Issues for Responsive Pricing Table - Can't Find Parent Settings - Live Example - Newbie :-)

On a site I am building, I imported a responsive CSS pricing table. Its great and works well but there seems to be a 40px padding on the left margin so the bottom border doesn't go across the whole table in the feature section. I've tweaked the css...

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

How to make elements stop from moving when resizing the window after using percentage

So I have divs that I have within my webpage .. like header , or div boxes .. they adjust fine on bigger screen sizes so that they dont look too tiny on a big monitor , but the issue is that when I resize the window or browser to make it small , all...

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

Use knockout handler to resize div and slide in other div

I have fullcalendar.js wrapped in a div (content) (I use bootstrap3 to set the size).

This content area of the page is currently setup to cover only 2/3rds of the left side of the page and the other 1/3rd of the page on the right side, is blank. ...

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

Does IE9 support the new CSS3 four-value background-position syntax?

The current CSS3 recommendation (the be exact this candidate version) gives new possibilities for positioning background-images, that may prove very useful when working with CSS sprites.

I am particularly interested in the possibility to bottom...

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

Issue making Bootstrap3 icon spin

Inspired by Fontawesome, I'm trying to make a spinning icon with bootstrap3. It's easily achieve via CSS3 transition and transform. Problem is the icon does not not rotate around the center. It swings while rotating.

Code pasted below. Anyone know...

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

How to make rounded tabs with css?

I'm wondering if it's possible to archive the following effect with CSS

Tabs

I found these articles that kind of help but the problem is that in my case the tab sides are diagonal not straight vertical lines:

...

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

box-shadow hidden, not above

i try to put a box-shadow on a div and make it above the div below, but the shadow is hidden : http://jsfiddle.net/fraiddo/9TMdc/

<div style="z-index: 2000; width: 300px; height: 130px; background-color: #eeeeaa; -webkit-box-shadow: 0px 4px 50px...

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

firefox css3 translate on element with overflow hidden element disappears

I have a DOM element which I translateX() to some new position.

In Firefox this element disappears as soon as the translate occurs. After a lot of debugging it seems that this happens only when the translation is applied dynamically to the element...

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

Bootstrap fixed size right column

I'm using bootstrap v. 2.3.2 (ie7 reason), and would like to make a grid with one fixed column size (300px). I can do this when that col is first and in left column but I need it in the right side of page. I also found on stack some working examples,...

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

CSS Flipping Page Effect

I'm building an web application with effect similar to FlipBoard.

At first, I was trying to use this open source. But I don't really like the way it's implemented (create duplicates for each page and overlap each other when rotate)... plus, when I...

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

CSS3 spotlight effect using a rounded rectangle with gradients

I'm writing an interactive tutorial for a web app that is meant to highlight the various parts of the user interface. The tutorial is meant to spotlight one part at a time and tell the user how to interact with it. You've probably seen something...

Read the entire recipe Recipe added 1 day ago