Latest CSS3 Recipes

CSS Text indenting with custom bullet image

I know there is a way to keep indent for second line of text in list items. I'm trying to apply the similar effect for a text paragraph with custom list image.

HTML

<p>
    <a class="bullet">
        Lorem ipsum dolorsit & consectetur adipisicing
 ...

Read the entire recipe Recipe added 24 minutes ago

CSS have div over top of another div?

I am not sure how to ask my question. If you go to this site: http://powellgroupconstruction.com/ I am trying to get the bottom of my content class to go over top my footer, like in this example image. enter image description here

Here is my HTML:

<div class="wrapper">

   ...

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

Bootstrap 3 btn-group width

I have another Bootstrap related problem. I want to add radio and checkboxes to my form, I would like them also to take 100% width of form element.

I've added button group as this:

<div class="form-group">
    <label class="col-sm-3...

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

Bootstrap 3 multiselect plugin as form element

I'm trying to add multiselect plugin to my form. I've managed to get everything working just fine (http://jsfiddle.net/Misiu/t2qaP/), but I would like to get that select to be 100% width.
I can add css by hand:

 .btn-group, .btn-group .multiselect {
...

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

Bootstrap 3 daterange select in form

I'm trying to add daterange (https://github.com/eternicode/bootstrap-datepicker) select to my bootstrap 3 form. I've added form element to my form:

<div class="form-group">
    <label class="col-sm-3 control-label">Dates range</label>
    <div...

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

How to style for first-child?

For example, I have HTML like :

<div class='page'>
    <span>2</span>
    <span>2</span>
    <a>1</a>
    <a>6</a>
</div>

How can I style for first child a

I used like this : .page a:first-child {color:red}

but it doesn't run....

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

Is it possible to replace favicon with @font-face?

I'm planning to create a cross-browser web site that does not use images(.jpg, .png, .svg, etc.) for modern browsers. Is it possible to replace favicon.ico with a @font-face?

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

grid view using twitter bootstrap columns has some empty columns in a row

I am trying to create a grid view in my site, a 4x10 columns as you can see here. The issue is that there is a row where the columns are not fully filled, as can be seen on this screenshot:

enter image description here

Any idea what might be causing this? I tried debugging...

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

Click through canvas is not working

I am creating a doughnut (showing in pink) to represent data using the canvas. The problem is remaining area left by canvas (e.g.: filled with green in diagram) is not clickable in IE and Safari for Windows. I am using pointer-events for click through...

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

how to create a image gallery with shaped border

Now I am working on a project with a image gallery having a shaped image border here is the mock up, I have no idea about how to implement it. SVG? Canvas? Any one can give me help?

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

tablet and mobile same layout with bootstrap 3

How do I design same type of layout for mobile and tablets with bootstrap 3.

My navbar doesn't look the same in mobile and tablet. The navbar in tablet looks same as desktop. But I want it to look like mobile.

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

Prevent elements in hidden div to be 'clickable'

I am creating a site, where you can click a button, and a little panel will show. (Like the notification/message panel on facebook)

The function works fine, but when the panel is hidden, you can still hover the links, where they are supposed to be,...

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

How to Make CSS3 Columns Display Properly

I am working on a website that uses CSS3 colums to break up the text of the article to three columns. In it's current state, there is a few paragraphs, an unordered list and a few more paragraphs.

I want the article to essentally read like a...

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

Transition List Item Scrolling - HTML

Here's the FIDDLE.

List item that appears on clicking the up and down arrows.

When I click on it. It appears instantly which I don't want it to be like that.

I wanted to add a transition to it but I don't have any clue whether to apply it on a li...

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

Resume camera when i come back to app in wp8?

I am windows phone 8 app developer, My question is how to resume camera? Basically camera is first page of my app and when i switch to some other functionality in the phone and when i come back to the app then camera page got black.

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

Jquery Accordion alternate colors

Hi i have jquery accordion, iam trying to give alternate colors upto 9th position its wokring fine but from 10th postion color is not getting effected,

     .ui-accordion .ui-accordion-header:first-of-type {
         background-color : #CACACA;
   ...

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

Is it possible to update input type text using css3?

I've sample keyboard layout mentioned below: On click of every number on the screen, i want to get it updated in text area. On click of backspace, i want to remove last number. On click of clear all, complete text ares need to get cleared. On...

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

ios icon transition effects on unlock

Without the right search term I could not find what do you call that effect on ios devices.

Is there a library, tutorial, a fiddle that actually does that transition effects on icons upon unlock of the device, specifically done using css3 only or a...

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

CSS3: hide overflow for transform effect

I'm trying to make a simple CSS3 hover effect over the image. I'm trying half the image to show transparent. To make it easier to see the issue, I've set it as black.

<div class="section">
    <img src="http://placekitten.com/110/155" />
    <div...

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

I have some weird sizing and spacing issues going on between browsers

This is bugging me because it seems like it should be so simple. I'm going to attach the images of Chrome, FF, and IE 11.

First off, It's just a simple login with email and password inputs on the page centered vertically and horizontally....

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

How to spin a div?

I would like to have a circular div on my webpage and to be able to spin it as if it were like a wheel of fortune using the mouse. I have tried to use jQuery drag, but I couldn't figure out a way to rotate the div.

Is there a way to rotate div...

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

How to center images of unknow dimensions in floating boxes of fixed dimensions?

In each row I have three boxes (blue) of fixed dimensions (width: 299px, height: 307px) In every box there is an image (pink) of unknown dimensions. I know only max-width: 262px and max-height: 200px. Under the image there is some short two-three line...

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

Slicing photoshop image into a HTML5 + CSS3 button (issue with the corners)

I am trying to slice a .psd image of a button into a HTML5 + CSS3 button. But I don't want just to set it as background. I want to slice 1 repeating tile for the background and 4 corners, so the button expands correctly, according to its content. Can...

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

How to make the last keyframe of your animation &quot;stay&quot; after animation is finished

I have tried many iterations of this, but it doesnt seem to want to just stay on the last keyframe.

Im not sure what Im doing wrong here.

<style>
#container{
    position: relative;
    width: 100%;
    height: 100%;
    background-color:...

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

Can't get 60fps on opacity transition in Chrome

I'd like a 60fps or better opacity transition and am testing with Chrome dev tools timeline. I've created a jsfiddle (http://jsfiddle.net/jnoody/Zt8nd/) to demonstrate, but basically it's just a div that has a class toggled every few seconds and...

Read the entire recipe Recipe added 1 day ago