Latest CSS3 Recipes

to align properly using css

Below am positng my jsp page. home.jsp

<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@taglib uri="/WEB-INF/struts-tiles.tld"...

Read the entire recipe Recipe added 47 minutes ago

CSS: border around image moves it

So i have my image on my webpage. In my css code, i have a transition for a :hover (glow appears), which works fine, and i want to add a stroke on :active. Here's my code :

#bb
{
    top: 55%;
    left: 6%;
    opacity: 0.85;
    -webkit-transition:...

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

Vertically &amp; Horizontally Align inner DIV center of the page

Possible Duplicate:
Best way to center a <div> on a page vertically and horizontally?

My website landing page has Container DIV with 100% Height & Width. I am able to align the InnerContainer div in center horizontally but i am not able to...

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

How do I add a horizontal scrollbar to a table in a div?

How can I add a horizontal scroll bar to a table that is inside a div? Is there CSS solution for this?

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

CSS opacity animation safari bug?

I have a simple animation (only for Safari in this example):

h1 {
    -webkit-animation: moveDown 1s ease-in-out;
}

@-webkit-keyframes moveDown {
    0% {-webkit-transform: translateY(-20px); opacity: 0;}
    100% {-webkit-transform:...

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

Centering an image for responsive website

So i am making a responsive design for a school assignment and i am trying to center an image width.

i scaled the image in photoshop so i don't have to set any width or height to the image

this is what i got now but this does not work

<header> ...

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

IE9 no sub-pixel anti-aliasing on border-radius

I have applied border-radius on a div and the result is very poor rendering in IE9. I know that I am probably asking for too much, but still this is something that should not happen at all.

It is very dificult to explain to a client what sub-pixel...

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

Create an L-shaped border with round corners using HTML and CSS

Here is the picture of the desired solution (note round corners):

enter image description here

Here is what I have so far:

http://jsfiddle.net/cBwh8/1/

http://jsfiddle.net/cBwh8/2/

http://jsfiddle.net/cBwh8/3/

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

2 column css layout without faux column

I know the common solution to this problem is the faux layout, but that doesn't work for me because I have a section with a shadow that needs to extend over the sidebar. Are there any new work arounds for this issue? I'd like this content section to...

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

Create an L-shaped border using HTML and CSS, is it possible?

Is it possible to create an L-shaped border like this using only HTML and CSS?

An L-shaped border

Edit: That is what I have at the moment: http://jsfiddle.net/cBwh8/

Edit2: I'm looking to replicate the picture above -- appropriately curved round corners. This is the...

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

css3 nth of type restricted to class

Is there any way to limit css3's nth-of-type to a class? I've got a dynamic number of section elements with different classes designating their layout needs. I'd like to grab every 3rd .module, but it seems that nth-of-type looks up classes element...

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

Sliding divs in css3 and jquery

I am working on a web project where I want to have a row of images at the top of the page, but all of the images will be blurred out except for one.

What I was thinking was a div that overlays each image with a background colour of white and the...

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

CSS Gradients - Less Mixins

I was just wondering if it's possible to alter the color of the Less mixin gradient by applying something like lighten or darken to the CSS code?

Here is the Less Mixin:

.css-gradient(@from: #20416A, @to: #3D69A5) {
    background-color: @to;
   ...

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

How to have complex shadow background on variable height content area via CSS?

I am trying to build out a complex shadow background on a variable length content section of a website. I have tried every trick I know to make this work and just cannot figure out how to get this to work right. I am hopeful a CSS ninja here can...

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

JQuery Mobile word wrap on buttons using photo swipe

I have a series of buttons containing images using the photoswipe plugin for Jquery mobile. Now, I have text in each one of these buttons (which are inside of the .gallery li a), but if the image is too small or the browser is made too narrow, the...

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

add image over an element

Is it possible to add a transparent image (like stripe) over an element without javascript or adding an other element in html, a css foreground technique. Something like an experiment border-image inside with a box-sizing:border-box; or something like...

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

Making @font-face more efficient in IE9

I'm using @font-face on a website. The code works and in Firefox, Chrome, and Opera the @font-face font loads perfectly. The code used is the same that's generated by Font Squirrel. This is the @font-face code:

@font-face {
    font-family:...

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

jQuery glowing animations : how to improve?

I've been making things glow with CSS and jQuery (simple CSS style change, see here), and now I wonder how to make these animations even better.

For the moment, I'm just making a transition between no box shadow and a box shadow, and that looks good....

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

font-weight:700 or font-weight:bold which one we should follow in CSS?

I have seen some websites, which mentioned in CSS - font-weight: 700 or font-weight: bold. But both results are the same. Which one is the correct and how should we follow? Please suggest me.

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

Generating page information depending on variable selected

I am building a site with a select tag that has all 50 states. I want to be able to have a page generated for each state selected rather than having to write 50 separate pages. Any ideas on how I would accomplish this? Thank you.

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

center radio button below label

Let's say I have some radio buttons with their labels looking like this:

<label for="my_radio_button_id">My Label</label>
<input type="radio" name="radio" id="my_radio_button_id" />

How do I center each radio button below its corresponding label...

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

Stack two borders with drop-shadows?

How could I wrap a border around another border and have them both use inset drop-shadows (like double matting in a picture frame)?

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

CSS transitions, different durations with the same property?

I know you can set different durations for different properties with CSS transitions. But is it possible to set different durations for the same property?

Example: I want a box to grow/shrink in width to length A quickly when hovered/mouse exits, but...

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

Tricky CSS scroll length

<div class="container1"></div>
<div class="container2"><div class="container2-inner"></div></div>

.container1 { height: 5000px; }
.container2 { height: 100%; width: 100%; position:absolute; }
.container2-inner { height: 1000px; margin: 0 auto;...

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

CSS3 Box Shadow Effect for IE8?

I have the following style to get this effect:

It works in IE9 and Chrome but not in IE8. What should I change to make it work in IE8.

Please note that I have applied this style to a tag encapsulating the image.

enter image description here

 border-collapse: separate...

Read the entire recipe Recipe added 1 day ago