Latest CSS3 Recipes

How to remove Space between dt and dd in Bootstrap Horizontal description

Can you please let me know how I can remove the gap/space between dt and dd in bootstrap Horizontal description?

As you can see from following image there is a big space between dt and dd(highlighted in yellow)

enter image description here

I tried to set the dt cell value by...

Read the entire recipe Recipe added 40 minutes ago

Adding a stencil on a black overlay with CSS - Inverted circle mask

I have an iPhone screenshot (jpeg background) with a black overlay (with some opacity). I need to dynamically add a round stencil with a specific radius that overrides the black background so that it becomes more visible.

By dynamically I mean that i...

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

How to keep content centered vertically and display any vertical overflow with a scrollbar?

I have a content area that should behave in the following way:

  • Content is centered vertically if there's no vertical overflow (currently achieved via display:table/-cell)
  • No scrollbar is displayed unless there is vertical overflow
  • the height of the...

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

flexbox with a table child

I have a flexbox based layout that I want to look like this:

| top banner    |
| tabular data  |
|               |

With the tabular data taking up whatever size is available after the...

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

HTML Div with data and status at top right corner

I am trying to get this working but could not find anything on the web. What I need is a simple div (110px Height * 230px Width). It has two texts on it (A Title and a description). But I need a to show a status on the top right corner across with...

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

Twitter bootstrap navbar and dropdown - not resizing

Im currently using a dropdown inside of the menu in my navbar. The drop down works fine when the navbar is in high resolution layout.

When operating in the mobile layout the navbar will not resize when the dropdown is selected, that is unless I open...

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

CSS transistion apparently not applying

I've just drafted together some custom "selectors" (actually, they're DIVs) and came across a little cosmetical issue: I'd like a fading effect on the color with minified code, transistion doesn't seem to do the job in this case. Might I oversee...

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

Vertically centering content within a space-filling flex box

I'm trying to vertically center the content within two flex boxes in a column layout.

I have created a simplified Fiddle to demonstrate.


<div id='container'>
    <div id= "top">
        some content!
    <div id= "bottom">

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

Box-shadow disappears over input elements

I tried to add box-shadow for a div while scrolling. I just went for a try and everything works fine except that the box-shadow is not applied over text-area or text-fields... And I'm using twitter-bootstrap Here is what i tried out...


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

Vertical Aligning - IE10 Flex box not working

I have my center aligning working in all browsers that support it apart from IE10. I think that I have the syntax correct and that it does it support it. Could anyone help? DEMO

html {
    height: 100%;
body {
    background: red;

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

Flexbox doesn't work with buttons

I want to use flex box model in my html

I have a div container with three buttons inside.

<div id="viewport" class="linearlayout horizontal" data-am-control="vertical-layout" >  
    <!-- El div "container_buttons" estarĂ­a centrado en el medio del...

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

How to implement responsive web design and its best practices

I have a website which uses pixel to render the pages. But when i view the website in different devices having different screen resolution the whole page will not fit into screen and if i use percentage, the page content will get squeezed.

Is the...

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

jQuery animate a -webkit-transform

Is it possible to use jQuery to animate a webkit translate3d?

I read that when using the animate property of jQuery that you must camel case the css properties but in the case of the translate3d this doesn't seem to work.

I have the following code...

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

Responsive google map in zurb foundation 3

I have a dynamic google map generated using the version 3 API on a Zurb Foundation page. The map works perfectly and everything is all good EXCEPT, the map is not responsive.

Please note, that I cannot use the iframe solution because I am getting...

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

How to disable media queries support in firefox?

I have a mobile website that is styled with extensive use of CSS3 Media Queries.

I want to do a version for browsers that don't support Media Queries by adding an extra css file for them, that overwrites some of the css rules.

I was wondering if...

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

Float left div is covering up non-float div on the right

I'm trying to get the right dark square to cover up a little of the big white square, and making the white square a "float: left" almost does this, but the white square is covering up the black square. How do I fix this?


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

How do you use overflow hidden with unordered list?

This is what I'm trying to achieve: enter image description here



What am I missing here? I want to keep my unordered list on one single line and be overflow:hidden... I know that I could also re-write the html in a way that i could absolute position the arrows on a high...

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

3D effect with shadow effects on CSS3

am trying to realize this 3D effect using css3, enter image description here

This is what i've try so far :

    border-radius: 12px;
    box-shadow: 0px 0px 11px #000000;

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

Javascript function that works with or without CSS3

How would you implement a Javascript function that fades out a DOM element, using CSS3 if available (but is still functional when CSS3 isn't available)?

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

CSS3 /CSS - spinning background image

is it possible to spin a background-image in css?

i can spin an element using:

@-webkit-keyframes spinX
0%   {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}  
100% {-webkit-transform: rotateX(360deg);...

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

Circular div to expand about the middle point, not the top edge

I need a circular div to expand about the middle point, not the top edge!

I have a circle that is 100px by 100px with border-radius of 50%

I want it to expand to 500x500 when hovered over, I have done the hovering part. However when the circle...

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

CMS that allows custom CSS/HTML

I have an issue. I have made a custom website using CSS and HTML. I want to allow my client to edit and add posts to the website without any knowledge of HTML or CSS while still giving myself the ability to manage the code. Is there any programs or...

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

How to use CSS3 transition to enable diagonal movement of inline-block elements?

I have a particular problem that I want to solve with CSS3 transitioning. So I have a container with inline-block elements, and once I select one of the elements, everything else will be hidden and that selected element should move smoothly to the...

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

HTML click to view and hide bulletin

I encountered a problem that puzzles me a lot. I'm writing a web-based tool and in the webpage, I have a bulletin, which when clicked will display or hide recent updates --- i.e., the line of "Click to view/hide bulletin" in the code below. This used...

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

How to create a stylesheet which complies with CSS3 standards

I am not quite sure how to create a new / modify my current stylesheet so that it complies with CSS3 using the new selectors etc...

My current stylesheet does not take some new selectors such as border-top-right-radius: 5px; as properties it simply...

Read the entire recipe Recipe added 1 day ago