Latest CSS3 Recipes

How to dynamically adjust org chart positioning

I have an org chart and you can see some sample code here. I have some challenges with this however.

The first challenge is that when the available width is less than the width of the row, it wraps and then the lines are all messed up. Is there a...

Read the entire recipe Recipe added 29 minutes ago

How does various cols differ in bootstrap

I have a very basic question on bootstrap grid system. I have read the docs and tutorials, but this part does not get into my head.

col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-6">
    </div>
     <div...

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

Beginner: Responsive design, can&#180;t get it to work :(

Hey guys ok here is my curenty website layout

HTML:

<body>
<div id="sidr">     
  <ul>
    <li><a href="#"><img src="images/iconmonstr-magnifier-icon-24.png" width="24" height="24" alt=""/> Concepts</a></li>
    <li class="active"><a...

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

using div elements with jQuery Orbit Plugin 1.2.3

I am trying to use an older version of Orbit, 1.2.3, and I am trying to make a carousel for a few div's. It would rotate like how it would rotate img tags. I got it to work for the images but when it comes to the divs, it just overlaps all the div...

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

html css Vertical list aligning top

I'm trying to create a container with 4 columns, on the top theres an image with some text below it.

But it doesnt align towards the top, but bottom

This is the styling for li

#carousel-navigation li {
    list-style: none;
    display:...

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

CSS3 animation to fade out an image and fade in another image

At the moment I have a table within a div, the table has 2 rows the top row with 3 columns and the bottom row with 2 columns. The reason I am using tables is because I do not know how to set up the divs in this arrangement.

What I need to do is using...

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

css3 translate becomes relative positioned for children

I have a side bar that holds 2 divs

<div class="sectionsContainer clearfix"><-- Sidebar -->
    <div class="leftSection pull-left">
        <p>Maor</p>
    </div>
    <div class="rightSection pull-right">
        <div class="backButton clearfix">
   ...

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

Navbar border left &amp; right issue

Well I am truly stumped today, I am trying to recreate this Navbar:

http://www.autotrader.co.uk/

Now if you look at it, it has borders-left and borders-right for the "Buying" link. After digging about in the CSS I have worked out how they have made...

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

Weird flickering in Chrome only on Windows 7 Professional

Our website uses a lot of modern stuff like mouse parallax, scroll parallax, infinite scroll, css clip animation, etc. and most of them uses hardware accelerated animations with transition: translate3d(...).

I spend a lot of time for browser...

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

Giving an iframe a border radius

Below is the html for a div with rounded corners, inside this div is another animated div called slide up, this too has rounded corners. Inside the initial div I have an iframe with a google map. I am having trouble giving this iframe rounded corner....

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

Using Text Overflow Correctly

I have the following problem:

enter image description here

As you can see the text is being cut off because the element is not long enough, I want the text that is too long to either hide or become ellipsis. I have tried both of these and nothing...

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

Enscroll js scrollbar

I have used "enscroll" js scroll bar in my page. http://enscrollplugin.com/#demos

<div id="enscroll_name">
    <ul>
    <li id="p1">product1</li>
    <li id="p2">product2</li>       
    <li id="p3">product3</li>
    <li id="p4">product4</li>
    <li...

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

Angular-animate is not working. Animations don't get effected.

I have a page, where I have three images and three links corresponding the images. I am using angular's ng-repeat to render the images. When the links are changed the images are reordered. I have created a plunker for the same. Below is the css that...

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

CSS: hidden mistake about menu hover

I have problem with my website's navigation. When I use to put logo image above the menu menu hover not working correctly. More clear: on menu hover background not working but border working. See examples:

Above: enter image description here

With logo:

enter image description here

How I want to be:

enter image description here

...

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

CSS &quot;absolutely&quot; positioned border-image

I have a CSS design problem for a day and a halve now and it is driving me nuts. I have an horizontal navigation bar with a single unordered list inside. Each list item contains an anchor (or hyperlink) to a page within the website, the CSS is as...

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

CSS: &quot;Attribute selector&quot; and &quot;not()&quot; together

I have the following rule:

a:not(.ui-spinner-button):active 
{
  ...
}

I would like a more general rule specifying that "style must applied to all A tag that does NOT have a class name that begin with 'ui-' ".

So, I should "merge" this kinf of...

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

Reset css style color property

Is it possible to define a style this way? The class child in this example is red unless it's wrapped in a parent class where I want it to reset so that it takes the color defined in the style attribute of parent.

.child {
 color: red;
}

.parent >...

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

Csslint: Background image was used multiple times

I have this in my css:

@media screen and (max-width:1200px) {
#cssmenu {
  background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
  width: 100%;
}
}    

@media screen and...

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

CSS background-image; Re-sizing

So I have a question regarding the background image inside a DIV. Please bare with me s I try explain my issue.

Situation: I have a div element with the logo, nav & intro text inside of it. This needs to have a background-image behind it...

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

Having text on top of an image in another div

So what I am trying to achieve is have the text in the left side sit on top of the image in the right side

<div class="body-content">
    <div class="left-side">
        <p>text</p>
    </div>
    <div class="right-side">
        <div...

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

CSS pseudo element blockquote

I need some help...

I am trying to style a blockquote elemet:

<div class="container-fluid testimonials padding">
    <div class="row-fluid">
        <div class="col-xs-12 col-sm-12 col-md-5 col-md-offset-2 col-lg-5 col-lg-offset-2">
           ...

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

background color and font color transition

I know how i can change bg-color and font color with transition in css3:

/**Background color transition**/
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms...

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

pass property name as an argument in a mixin LESS

I am a newbie at less. I am trying to pass css property as an argument like this

.border(@position:"left",@color: #ddd){
    border-@position :1px solid @color;   
}

means that every time I type

.border(right,#efefef);

it should...

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

Multiple responsive images

I have four images in a vertically and horizontally centered div. I want these images to be on the same line fitting my div when the screen dimensions allow it. And if the screen is re-sized (or on a smart-phone), I want to have the first two on a...

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

Animating Images with a Dial Control (HTML/JavaScript/...)

Here is what I would like to achieve.

I have a series of images going from dark to white (with all sort of grey levels in the middle). I'd like to have a dial (like a slider) under the frame or over the frame (it doesn't matter). When the slider is...

Read the entire recipe Recipe added 1 day ago