Latest CSS3 Recipes

CSS Animated Circles - Stop center content from rotating

I've been trying to alter this example of CSS3 animated circles (original by Rishabh) so that the arrow in the centre does not rotate. However, the only way I can get it be still is to remove the animation effect from the three circles (#outer-circle,...

Read the entire recipe Recipe added 42 minutes ago

Media queries not working on windows server

I have been developing a static HTML site using bootstrap 3 and media queries. It worked fine when working through a simple LAMP stack. However, I handed the exact same files over to our back end .NET guys and the media queries do not work. All code...

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

When a container element is filled with inline elements, how does the browser decide between starting a new line or extending the container?

Suppose I've got a container element, whose line is almost filled with inline or inline-block elements and can't hold another inline element, without resize.

enter image description here

How is the browser supposed to decide whether it can resize the container, extending it...

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

Font Size Conflict at Classes

I have conflict with Font Size on my Website. The Font Size is set to 0.85em at Body Class like below.

Another Class which I set 0.9em is smaller than my Standard Font Size. I dont know how it comes.

html {
   font-size: 100%;
} 

body, html {
  ...

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

JQuery Blur Animation

I'm using the following script to blur a box when I click a button, but how can I make the blur take 500ms?

$(document).ready(function() {

  //attach click event to button
  $('.button').click(function(){

    //when button is clicked we call...

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

Clearfix breaks the :last-child

It's weird but when I use the :last-child to my elements, and then put a clearfix div in the end, it breaks the last-child? Any ideas anyone?

HTML:

<div>
    <a href="#">first child</a>
    <a href="#">second child</a>
    <a href="#">third...

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

css3 transition start on click

I want a CSS3 transition to start after click.

Now it works fine if the element gets added a class with jQuery (see span.toggle-nav.two) which knows then what to do.

I've tried with :focus (see span.toggle-nav.one) but that doesn't work. How can I...

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

How can i get all the images in this div to scale with the div

I am creating a website and have made a nav banner and split it into seperate images and housed them in the header. I need to scale the header and the content inside with the page and not have it squash below. Here is the HTML, CSS and javascript that...

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

CSS Transitions not applying in Firefox

TLDR

Why is there no effect applied in Firefox when the background image changes.

Fiddle 1

(No FX on firefox, works on Chrome/Safari)

Did read

I have a slider -like component, and the content changes on callback, but when testing with Firefox the...

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

Sliding divs based on click event

Been stumped all day trying to find a plugin to fit my needs or trying to build something myself. I've got the basics set up, I'm just trying to get a nice smooth transition, instead of the jarring jump to the anchor.

<!-- HTML -->
<div...

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

How to make non drop shadows in SVG?

I need to make the following shape with shadows using SVG: enter image description here

I have the following SVG for the shape:

<svg style="overflow:visible; margin-left:136px; margin-top:59px; " height="188" width="212">
    <path d=" M 105.3,0  C 47.2,0 0,41.8 0,93.3  C...

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

vertical multiline text and image lineup

So I need to align a image and a text so that the text is right in the middle of the image, like this:

enter image description here

Here's my code, but the text stays on the top side:

<div class="container">

 <img src="#" alt="#" /> 

<div class="text">

 headline and text...

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

border to the div through the Header

i want to acheive the border and header like this -

Does css have anything for it?

What i tried and works is-

.header{
margin-top:-10px;
background:#fff;
}

Are there any other options to acheive this.?

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

Chrome flash on transition triggered by jQuery

I am trying to fade in/out a background image on scroll.

I am using jQuery .addClass()/.removeClass() to trigger the event and CSS3 to change the opacity of the second background.

I would like to stick to CSS3 for the animation but there is a white...

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

CSS transitions for layout changes (as other elements are revealed in the DOM)?

When a new block is displayed, other blocks may move around the page.

Is it possible to use CSS transitions to animate the movement of a block, when another block is displayed?

Initial state:

enter image description here

Subsequent state:

enter image description here

Eg:

  • Initially only the blue...

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

css transition background change not fading in smoothly

I am trying to fade in a new background of a header when the user scrolls down. I would like it to fade in smoothly on top of the original background.

Instead what is happening, is that it is removing the original background and then fading in the...

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

Impossible to calculate the width of my Responsive Tables Boostrap

I'm trying to make my responsible tables. http://codepen.io/Luiggi/pen/fLejw Here you have some pictures to show you my question and my layout.

First Layout enter image description here Second layout enter image description here Third Layout enter image description here

50% and 33% tables never reach the far right.

Someone knows...

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

Ghost/Blink images outside of viewport appears on sliding - IE11 and Flexslider Carousel

Using flexslider (carousel mode) and Internet Explorer 11, the ghost (blinking images outside of viewport) apeears. Initialization code is as following:

    $('.gallery-block .flexslider').flexslider({
        animation: 'slide',
       ...

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

Center Image Vertically Within Div That Is Floated Left

This is for a mobile website header. The page title is centered and the back button image floats left. I want the back button to be centered within the pageTitle div but cannot get it to work.

I found that if I give the pageTitle div a position of...

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

CSS Text Align Center Not Working When Additional Div Is Added

I have a mobile website header. The "Page Title" should be centered and the "Back" button should float to the left. The "Page Title" is perfectly centered until I add the "Back" button. Once the "Back" button is added the "Page Title" is "somewhat"...

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

get an ideal size for background image of a div that has no set width or height

I have the following Markup:

<div class="jumbotron jumbotron-personal-user clearfix">
     <div class="container">
          <div class="row">
               <div class="col-lg-1 col-centered">
                    <img src="img/avatar04.png"...

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

How to adjust 100% height to include height of added element

I have a div that is added dynamically using JS that includes an overlay and a contained element that should scroll with the page as necessary (I don't want any scrolling to happen within that div, which resizes to fit the content). The overlay is set...

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

Centering an image link inside of a &lt;td&gt; tag

I've looked at W3Schools and several threads here, and no matter what I do, these image links will not center inside of their elements. I can't just make the smaller, because some of the images further down in the table just barely fit in the their...

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

How to style this button in CSS to appear pushed down?

The button has these basic styles to make it look sort of 3D with a flat look.

background-color: #7a7acc;
border: none;
border-radius: 10px;
box-shadow: 0px 4px 0px #4747b2;
color: #fff;
font-family: Lato;
font-size: 16pt;
font-weight: bold;
height:...

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

Programmically Make a Wave using Javascript

Here is what I currently have http://jsfiddle.net/6GEfr/

This works but I want it to be like a wave. Rather than a 'v' shape, it should look like an actual wave. How do you gradually do this?

var height = 0;

setInterval(function () {
   ...

Read the entire recipe Recipe added 1 day ago