Latest CSS3 Recipes

Why isn't this keyframe animation working?

I'm trying to scale the box up and back down again.

This is my first time using keyframe animations and I'm not really sure the proper way to invoke them.

Codepen

HTML:

<div class="wrap">
  <div...

Read the entire recipe Recipe added 32 minutes ago

CSS filter() Transformation/transition time

I've got a CSS filter for blurring an element and it works beautifully... But I'd like it to ease into the blur but can't figure out what css transition-property controls it?

I was using transition: 1s; but that breaks another animation on the...

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

Customize ng-repeat in AngularJS for every nth element

I am trying to customize an ng-repeat to add something like a br tag to every 4th element. I have tried searching around but cannot seem to find a solid answer. Is there a simple way to add conditions to Angular for something like this? my ng-repeat...

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

How can I change the background color of this block using BootStrap framework?

I am very new in BootStrap development and I have the following theme implemented using it: http://lnx.asper-eritrea.com/

As you can see in the content area there are 3 boxes (respectively named La Situazione, Archivio and Archivio Video).

This is...

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

CSS auto numbers for table rows - not first?

I have the following code which is used to apply a row count to a dynamic table -

.ftable table {
    counter-reset: rowNumber;
}

.ftable tr {
    counter-increment: rowNumber;
}

.ftable tr td:first-child::before {
    content:...

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

Content to slide in from right between menu and footer

Another question from me here. I'm building this site. Menu and footer are done (for now) and I have come to the point of adding the space to put my content in. I want the content to slide in from right between the menu and the footer (see...

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

How I write a:hover::before in less file?

I have some CSS rules and just I need to write them in my LESS CSS file.

This is my CSS -

div.files a > div,
div.files a:before {
    transition: background-color 350ms;
}

div.files a:hover > div {
    background-color: #000;
}

div.files...

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

How to properly center a 100% width div in css

I'm trying to center my website, i've tried putting div inside a div, but i think that's not the proper way to do it. can someone tell me how to have a 100% width but centered like facebook? thanks in advance.

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

How to position the scaled elements (jQuery, css)

I have 3 divs with animation by clicking. Positioning is applied to the 100% size, but when size is redused, there is an empty space around divs.

Jsfiddle example

HTML:

<div class='container'>
    <div class='boxes-min' id='box1'>
        <div...

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

Bootstrap overriding aspnetDisabled class

I'm using Bootstrap to style an ASP.net web forms project and I have a data paging repeater consisting of asp-net LinkButtons.

The buttons all work fine, but Bootstrap is overriding the aspnetDisabled class and making disabled links look like...

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

Making some kind of see-through glass image in css/html/js

When viewing this website: http://myankle.co.uk/faq/

Whenever you scroll down or up, the image of the ankle changes. I know that you can make a div opaque and put an image behind it, but how is this effect being done? The image seems to move with...

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

calc not working ie 11

After researching I confirmed that calc should work for ie8+ but it is not working for me.

Here is a JS fiddle I made:

http://jsfiddle.net/75tzyLoo/

here is the code: HTML:

<div id="outer">
    <div id="inner">

    </div>
</div>

CSS:

#outer{
 ...

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

Firefox behaviour: 2 divs side by side with variable width

I'm trying to display 2 divs side by side in css.

  • The first div has a variable width (in fonction of the image it contains).
  • The second one has to take all the remaining width.
  • The second div contains 3 sections: "top", "middle" and "bottom" whose...

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

How to horizontally center-align the content of a div by manipulating the CSS of the wrapper div only?

I have a element, and this element has another element which contains a <table>.

For some reasons, I can not manipulate the CSS of the inner <div> or the <table> it contains.

I need to horizontally align the <table> (or the inner <div> which...

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

image pinned to bottom of boxes

Please refer my fiddle location.

In my page, I want to maintain all boxes are in same height. So I used display: table-cell; in box_left div. I want to add shopping bag icon in each boxes. This shopping bag image is pinned to bottom of each boxes....

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

How might I tell if an HTML element is being rendered on the screen?

I'd like an element to do a CSS3 animation once the page is scrolled down enough for it to be visible, and I'm wondering if there's any way to accomplish this. Anything involving JavaScript or CSS would work. I've done many Google searches and...

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

jQuery/CSS fading jittery/not working

What I am trying to do is get the content section to fade in when the page loads, but fade out when a link is clicked (right now just on mouseover). I can get it to load and stay, but for whatever reason it won't fade out. Also, when loading, it is...

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

Chrome Text Flickr on using Css rotate. 'backface-visibility' making things worse

Firstly, here's the fiddle: http://jsfiddle.net/krish7878/wytv7n7n/3/

I am using CSS rotate an icon on hover. I tried using 'webkit-backface-visibility: hidden' and '-webkit-font-smoothing: antialiased;'. They just make text thick and ugly.

Here's...

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

Unknown bootstrap component

I've been given an assignment to recreate a form from a given image. I'm using bootstrap 3, but can't recreate the following images. At the moment I'm using a label with a rounded radius but it doesn't look the same. Can someone point out the right...

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

CSS width animation not working when clicking tabs

Below is a stripped down version of something I'm working on. Basically I have a series of tabs that when clicked on, show a different picture. When I click on the tab, I want to animate the overflow width, revealing the .show content. I can't figure...

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

How to style bootstrap col-lg-* classes?

I'm beginner in Less. I want to write a string like "Column-div" in any div with col-lg-[anyNumber] or col-md-[anyNumber] class.

For example something like this code:

.col-lg-*:before {
  content: "Column-div";
  color: #28a4c9;
}

How can I do...

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

How to place two selects side by side using Bootstrap?

I want to place two select options side by side in my form. I am using Bootstrap 3 but I can't place them with proper alignment.

Here is my HTML code:

    <form role="form">
        <div class="form-group">
            <div class="input-group date"...

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

Bootstrap 3 Media Queries: Breakpoint occuring at odd dimensions

I'm an amateur developer both in Bootstrap and Media Queries.

I am trying to making the navigation bar of a Bootstrapped site responsive with slight customization. I am running into issues when I resize the browser.

At normal dimensions, The site...

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

How to vertically align first lines of text in table cell?

I have this situation where first table cell contains "name" and second cell some text. Text may have embedded images. When image appears on the first line it pushes down entire first line. It makes first text line to be no longer aligner with first...

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

changing only alpha unknown color

I have few classes:

.overlay-blue {background-color: rgba(0,123,238,0.9);}
.overlay-orange { background-color:rgba(240,116,7,0.9); }
.overlay-purple { background-color:rgba(126,64,228,0.9); }
.overlay-green { background-color:rgba(57,151,95,0.9)...

Read the entire recipe Recipe added 1 day ago