Latest CSS3 Recipes

making a custom shape using css

I'm trying to use CSS3 to make this custom shape using css3.

shape http://mattieumoreau.com/wp-content/uploads/2014/02/forme.jpg

I would like to add text over it, and the red color is the background of my website (it will be a background image, so...

Read the entire recipe Recipe added 26 minutes ago

Placing a div outside a viewport without changing the orginal width. Using Skrollr plugin.

I'm currently fiddling with a parallax site using Skrollr. I want to create a curtain effect when I scroll down, I change the left and right of two divs 'sliding' open.

Now the problem I encounter is that when I scroll the divs left or right there...

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

Apply CSS on HTML.Helpers

I know this is an old question that has already been answered on StackOverFlow. However, none of those answers is working here. I can't apply CSS on any of my html helpers.

My HTML:

@Html.TextBox("Origin", new { @class = "MyInputClass" }) 

My...

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

nth-child(2) active on nth-child(1) = why?

Here (http://livespot.pl/gw2/forum/) on that black background I need background-size: auto;... but on that white/red background I need background-size: cover;. I can't get that. Why?

.l-submain:nth-child(2) {
    background-image:...

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

HTML class name containing spces?

can we set a class name for HTML tag containing some spaces like this

<div class="drag-down drag-here">
this is the body part .. 
</div>
.

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

iframe 'child' can style this parent? within the iframe self

In Google mail I can add my own app. But it's in an IFrame. The parent of the IFrame has a gray background-color.

(class="hi")

I want to change that color.

Is it possible that I can style the parent that's outside the IFrame from the IFrame...

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

Scroll bar is seen only when there is overflow

Scroll bar should be seen only when there is overflow else it should be hidden.But by default it is displaying scrollbar although div has appropriate non overflow content. How we can stop that?

<body>
  <p>The overflow property specifies what to do...

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

Firefox ignoring slide animation

I've made a slider of sorts, which works as expected on chrome. However, only half of it works on Firefox.

There are 2 animations involved, a fadein effect, and a slidein effect. Only the fadein effect is displayed in firefox.

HTML

<div...

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

how to make div background image responsive

How to make this image responsive

HTML:

<section id="first" class="story" data-speed="8" data-type="background">
    <div class="smashinglogo" id="welcomeimg" data-type="sprite" data-offsetY="100" data-Xposition="50%"...

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

Problems with :nth-of-type in haml and scss

DEMO

I'm having a really weird problem with haml and scss...I want to loop through div.star and apply a random width, height and position. I am able to do this, and I can see in the compiled code that everything is working as expected, yet for some...

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

How to disable touch overlay in windows8 mobile application

enter image description here

I need to avoid this squire shaped overlay. I am using html5 for the development. please help me :)

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

How to position div with sticky?

I need to fixed position with scrolling so I used position:sticky but I not positioning where I placed. I tried with this.Link

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

Custom Bootstrap 3 Navbar - Justify Links

So after reading several similar questions and some trial and error (mostly error) I am still trying to get this sorted out.

The links on the custom nav bar we created are left justified.

|link link link link ....................... | (all left...

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

Does Bootstrap 3 have a pre-built steps option for forms?

enter image description here

Couldn't find anything in the doc's but perhaps someone knows better or can suggest a work around using available properties to hack it together?

If not in bootstrap does anyone know of a gem (rails) or generator that can create the CSS/jQuery/JS?

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

@Keyframes don't move my div

i'm trying to make my div moves up and down with CSS3, but it doesn't

<div class="globo"></div>

@-webkit-keyframes mover {
    0%, 100% { top: 0%;}
    50% { top: 5%; }
}
@-moz-keyframes mover {
    0%, 100% { top: 0%;}
    50% { top: 5%;...

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

Multiple Image Sliders 1 single Page with example

I'm trying to build an multiple image slider and the problem is I cant show booth sliders at same time.

I extract the slider from CodePen

There is an example page with 2 sliders Example.

 <ul class="slides">
   <input type="radio" name="radio-btn"...

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

Creating a lamp pull chain in CSS and HTML

Please look at the following image:

enter image description here

I'm trying to create the above in CSS, and then use some Javascript so when people click on the circle, it pulls down (i.e.e the chain becomes longer). Next click would pull it back up.

Here is what I have so...

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

Dart: how to change the color of a button's text

I'm really new to HTML and CSS and have been attempting to learn and use Dart for the last couple of days. I'm now attempting to change the color of a button's text when a timer times out.

HTML

<button class="command-btn" type="button"
  ...

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

CSS left change with jQuery not transitioned

I'm trying to make a pagewide box that can be switched with a previous and next button to create a "timeline" effect.

Here's my code:

HTML:

<div class="wrapper">
<div class="header"><div class="previous">PREVIOUS</div><div...

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

Move an element by clicking on a link with pure CSS

Is it possible to affect one element by another element? I want to move .box element when I click on the link a.link.

I tried this, But couldn't get it to work. What should I write at link:active?

<html>
<head>
<style>

.box
{
    height:100px;
   ...

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

Internet Explorer 11 Not allowing calculation within @keyframe

I have a little bit of code that bounces some text back and forth within the width of a DIV.

While this example works in Firefox, Opera, Safari and Chrome it will not work within Internet Explorer 11.

The problem seems to be with the calculation...

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

How can I create this shape using pure CSS3?

I'm having problems recreating this sort of shape using CSS3! This is going to be used as a header that will stretch across the whole site, and the background of it needs to be transparent, so I'm having issues attempting to recreate it!

EDIT: This...

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

Chrome (33) displaying inline-block different

http://jsfiddle.net/3tBvG/

If you open the jsfiddle example, it gets displayed fine in older Chrome, Firefox, IE but in the newest Chrome version (33) it breaks the last <a> icon to new line:

Chrome 33: enter image description here

Others enter image description here

Does someone know how to fix this...

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

Bring multiple background element to the front

I'm currently working on a hobby website, and I'm trying to accomplish something which seems way more advanced that it should be, I hope you can help me.

I wish to bring a background element, du the foreground (Because a little bit of it should reach...

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

change background position onclick

I have an anchor <a>, which I am using as a button. I am using a sprite to make the button change its shape depending on mouse events. From normal to hover, It is working. I change the opacity as indicated in code below. The problem is when the button...

Read the entire recipe Recipe added 1 day ago