Latest CSS3 Recipes

Fade out a CSS3 animation

The idea is to fade out only the animation itself, after you stop hovering the .item (not the entire item).

I've tried the following CSS:

.item{
    box-shadow: 2px 2px 6px rgba(0,0,0,.5);
    -webkit-transition: -webkit-animation 1s;
   ...

Read the entire recipe Recipe added 39 minutes ago

Issues Converting jQuery and CSS3 Scrolling Effect from Functional Vertical to Desired Horizontal Scrolling

I have been playing around with stroll.js today (http://lab.hakim.se/scroll-effects/) I am new to jQuery, but i'm trying to learn the language to improve my webdesign. I put a lot of effort in this question to make sure I didn't miss anything I did...

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

How could you achieve this thick border in css?

Something in the lines of this

http://a.dryicons.com/images/icon_sets/colorful_stickers_part_2_icons_set/png/128x128/sterling_pound_currency_sign.png

I want the border to be around text, but also table cells like you were doing a tic/tac/toe...

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

How can I put text into css3

I'm wondering if it's possible to have certain pieces of 'static' text in the css3 instead of in the HTML, just like one can also have 'background-image' in css3 ?

I have searched on Google but cannot seem to find any reference to this.

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

Div opens vertically when page loaded with javascript and css

Im new to web developing and would like to know if there is a way to make the div open vertically without the use of css height transitions. I also to had to add the opacity transition to the div with text since its showing before the main div...

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

CSS3 Animations Buggy/Blinky

So I'm working on this site: http://superfy.me and I have CSS3 transitions (currently only for Chrome) between the routes. Basically to perform the animation I do the following:

  1. Add the .preanimate class which rotates the phasing out div to...

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

Display fixed position element's child above absolutely positioned overlay

I have a layout containing two columns. The left column scrolls vertically and the right column is fixed. The right column contains multiple sections.

At some point, an overlay will be displayed. I want it to cover all content except for the first...

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

putting d3.js elements on the slider

Please first take a look on this picture : https://docs.google.com/file/d/0By25CEM_KEOiYzdYaWVicnp6Zm8/edit?usp=sharing

Now i want to make something like that but i want to put d3.js elements on a slider like that instead of images like a rectange,...

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

How to blur image on scroll?

Yo guys im currently developing this site its almost done , but im currently simulating a blur effect with 2 images and with opacity, so the user will think the image is blurring when you are scrolling. But i dont think the effect is good enough,and...

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

CSS - remove vertical spacing

I have a web page located at this URL http://www.hollox.net.

This is a simple page to test for a customer that need a specific menu containing pictures overlapping.

The positioning is relative.

I have two series of 3 pictures that are...

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

css border hack for 2 column div template

2 border will overlap and produced bad looking. I want to apply border to my li which located in a div, that also need to use border to seperate itself from the beside div,

<div id="1">

</div>

<div>
    <ul>
        <li>item</li>
       ...

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

Image inside text block (CSS)

can someone help me with a little trick in css? I need to put an image (<a><img/></a>) inside a text block (<p></p>) like the image above:

http://img12.imageshack.us/img12/6137/f0uq.png

Like @StephanMuller said, that's not possible, i was looking for a float:center, that doesn't exist, but i...

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

Div display:initial not working as intended in ie10 and chrome 29

I want to display a div with the following restrictions:

  • automatically hide under 1024px width
  • can be toggle by button under 1024px width, but if I click somwhere (not inside the div) the activeDiv class should be removed

I have a dummy example at...

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

Position:Absolute; Div is making the page too wide and adding blank space to the side. How do I reduce its size?

I am currently working on the site at http://crowfell.com/index2.php, if you enter a username into the log in form and log in a player profile appears in the top-right corner. When a user isn't logged in the page is fine, but once they've logged in...

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

Dragging a rotated and absolute positioned div with jQuery UI

When I try to drag an absolute positioned and rotated div ( with css3 transform: rotate(45deg)) using jQuery UI draggable, it seems that jQuery doesn't know where the new origin of the rotated div is. Therefore, when you start dragging, the div is...

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

CSS: How to target a specific cell inside a table?

I have a dynamically generated table and I need to style differently the 5th cell from the first row of that table.

I´m able to style the first row via:

//table.css

.mytable tbody tr:first-child { whatever styles I define.. }

Or the 5th column...

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

Flickering div when using CSS transform on hover

I'm making a div on top of the tweet (and also the Facebook like) button. I want it to move up as soon as I hover above the div (button) so you can actually press the real tweet button. I've tried the following.

HTML:

<div...

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

Artifacts with SVG text animations (CSS3)

I'm experiencing artifacts for text animations/scaling in most modern browsers: Chrome 29, IE10, Safari 5.1 (Windows), Safari 6.0.5 (Mac) and Opera 16. Only Firefox (tested with version 23) is working fine (all on Windows, except Safari...

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

Combine CSS3 transforms keeping the reference system

With this CSS3 transform:

transform: translateX(100px)

An element is moved to the right 100 px.

With this one:

transform: rotate(180deg)

The element is rotated 180 degrees.

But if both are combined:

transform: rotate(180deg)...

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

centering div's child element

I have the following js-fiddle, it's basically just a div that has a bunch of square child elements. The issue is that the div doesn't always stay centered. I've already set the following css:

.boutique-grid {
text-align: center;
margin-left:...

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

Cropping long text inside a link

I've created a container which will be holding a couple links. Each link has two things:

  1. Text
  2. A download link (this can even change later on to an image)

I am able to crop the text when we resize the browser but not completely to what i...

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

CSS Image caption hover with transitions

I have been trying to implement a CSS image hover similar to this example. I'm having trouble getting the hover to contain to my images.hover screenshot

It's probably important to note that I'm using Zurb Foundation and the 'large-block-grid' class. Cheers.

My...

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

How to prevent div become two rows?

I have a web page which has two divs in one line. However, some times they become two lines, when the content is too long to display. My css is as follow:

.bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0px 0px 6px...

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

Width of form input (using col-lg)

The width of the following form is not constrained properly when using Firefox. Instead it spans the whole screen although in Chrome it does not.

<form class="form-horizontal" role="form">
    <legend class="righter">Legend</legend>
    <div...

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

Make the img tag width and height 100% inside overflow hidden div while maintaining the aspect ratio

I need to make the img tag width and height 100% inside overflow hidden div while maintaining the aspect ratio.

What I reached for is putting the image within overflow hidden div And the image is max-width 100% and auto height.

<div id="foo">
   ...

Read the entire recipe Recipe added 1 day ago