Latest CSS3 Recipes

setting width calc with jquery

can someone help me properly add calc width with jquery? Or maybe theres a better option for dynamic width in jquery than applying css3 calc width?

var calc = "calc(100% - 270px)";

$(".two").focus(function () {
    $('.one').animate({ width: "85px"...

Read the entire recipe Recipe added 50 minutes ago

Trigger CSS3 transition on page load

I am trying to achieve a loading effect on the page load by CSS3 width transition. Here is the demo.


<div class="skill-bar">
    <span class="w70"></span>


.skill-bar {
    width: 57%;
    float: left;
    height: 11px;

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

css3 dynamic background image url

I am attempting to lighten the weight of my CSS files, and have a question. It is a bit difficult to explain, so in an attempt to simplify the question a bit, imagine this (fictitious) scenario.

Imagine I owned an electrical shop, and sold TV's,...

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

Bootstrap 3: Span rows in a grid

I'm trying to do something pretty simple, but still have not been able to figure it out- even with all the snippets I have seen online.

In the following layout I want to span the panel on the right across 3 rows, how can I achieve this?

enter image description here

Here is my...

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

Increase width and height of position:absolute

I have a circle element (a element) with position: absolute and CSS3 transition. On the hover event, I want to increase both height and width of the circle but I want to add pixels to all sides not only in left side or right side.

Here is the...

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

Positioning an element in css on a page at specified pixels

    border:5px solid red;
    border:5px solid red;

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

Opacity applying on all inner div's

I'm trying to make opacity on only navigation background, but its applying on all inner divs like logo and nav, but I don't want apply opacity to logo background.

How can i make this possible? I'm using code like this:



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

Display some popup, when i mousenter to element. Pure CSS

I have some problem. For example, i have some div elem, with img inside. I need display another div, when mouse hover to element. It ease to do using js\jquery. But i need todo this in pure html\css

For example simple code...

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

Change an element CSS while hovering on another element using only CSS

I have the following HTML:

<div class="wraper">
   <div class="elementA"></div>
   <div class="elementB"></div>
   <div class="elementC"></div>

I need change background-color of elementA when we hover on elementC. I've tried a lot of CSS...

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

CSS3 Animation Delay Times after next move

I have a problem that is why css3 animation finish one time . than it will delay next time to go.

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

Jquery mobile when used in the website it effects the older design and classes

I have a general question . That is I have been working on a mobile website for already existing website .

I was doing the css myself for the pages. But now I want to include the Jquery mobile Ui for some of the elements like forms,input button...

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

Changing &lt;tr&gt; bgcolor based on the count of &lt;tr&gt;'s present in HTML with CSS

I am using multiple <tr> in HTML page with bgcolor values like:

<tr bgcolor="#000000">
<tr bgcolor="#E5F1CC">
<tr bgcolor="#D30A0A">
<tr bgcolor="#656766">

I need to give different background colors for all <tr>.

There are no classes nor ids used...

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

Positioning child content outside of parent container

I'm trying to visually position a DIV (article header) outside of it's parent DIV (article) container. Is this possible?

enter image description here

My mark-up example is available here -

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

how to bring to front DIV

Hi I'm having a problem regarding bringing DIV to front to other DIV.

here my sample code:JSFIDDLE

In my sample in JSFIDDLE I have a menu bar and a sub menu, my problem is when the sub menu shows it on the back of other DIV

Thank you in ADVANCE!

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

Can a CSS selector &quot;inherit&quot; all declarations from another selector?

Is there any way to have

a CSS selector "inherit" all declarations from another selector?

For example, imagine I have some simple img transformation rules:

.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;

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

how to get a footer div to the bottom of the page?

I've been trying for hours now couldn't find any solution for my problem I've made my footer stick to the bottom by position:fixed;bottom:0; the footer gets to bottom but when my content is more the footer doesn't expand to the bottom relative to the...

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

Issue on Padding - Margin

Can you please take a look at this Demo and let me know why there is white space between Purple and Yellow divs? I tried every thing like setting:

*{padding:0; margin:0;} 

or setting left right margins of all divs to 0 but that space still there!...

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

Should I use a CMS for this website?

I plan on making a wiki styled website but with lots of graphics/pictures, polls, comments and social media functionality. I'm new to this kind of website building so I don't know if I need a CMS.

I need advice. Basically CMS or not?

Thank you in...

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

How to combine wildcard and not selectors in CSS

Imagine you have a div in one of three possible states.

<div id="apple" />
<div id="apple" class="expanded" />
<div id="apple" class= "collapsed" />

How can you explicitly target the #apple div only when the expand AND collapse classes are NOT...

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

Animation when adding a class not working

I have a JQuery and CSS3 snippet to create a "scrolled into view animation". What's suppose to happen is it doesn't start the animation unless the class animated has the class visible. What keeps happening though is it adds the class visible but the...

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

Bootstrap carousel - style pagination dots

I have a Bootstrap 3 carousel that has 3 images with white background. My pagination dots are lost now, given that they have a white border with a transparent center (in my case, white as well). How can I use CSS to style these to a darker color?...

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

CSS3 Overlay Target One Click – Two Transitions

I have a CSS3 div overlay. From left to right. Would it be possible to move (slide) the id „content“ from right to left after click on „open it“?

.overlay-target:target {
    right: 0;
    left: 0%;
    top: 0;

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

How do I make a symmetrical downward pointing angle that is greater than 90 degrees using CSS?

I've tried using various iterations of skew to get outline of an angle like this with pure CSS:

downward facing angle

It never seems to come out right. I can easily make a 90 degree angle with rotation and a border, but getting a greater than 90 degree angle has escaped...

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

Why did my website's layout fall apart?

So I'm doing a class on udemy on coding a PSD page mockup in CSS3 and HTML5. Everything was going well, and then when I started laying out the sidebar, my layout collapsed, with multiple objects appearing out of place. None of the divs are in the...

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

Avoid overflow of the page caused by a large div

this is my jsfiddle main structure: There are 2 divs inside a div

<div id="c1">
    <div id="c2"></div>
    <div id="c3"></div>

and I would like that, even if #c2 and #c3 overflow the window, no x scrollbar have to...

Read the entire recipe Recipe added 1 day ago