Latest CSS3 Recipes

Having trouble making the media queries work properly.

I am new to the world of responsiveness (keep that in mind). I have the following media queries which are listed below and some of them work and some of them don't. The ones that work are: @media only screen and (min-width : 320px) and...

Read the entire recipe Recipe added 44 minutes ago

Keep element in original position after scaling from center

So i want to know how to calculate translate css property value for element that is scaled from center (css: transform-origin: 50% 50% 0).

Here is my HTML and CSS (FIDDLE: http://jsfiddle.net/rPNyM/)

HTML:

<div id="holder">
    <div id="dot"></div>...

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

Trigger event during a css transition

I want to add a class / set a custom z-index during a css transition. In my researches, I didn't find anything except webkitTransitionEnd which don't do the work.

I have an animated div on hover but if I hover multiple div, he go below the other,...

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

Image resize from center with top left tags

Alright, here is the problem.

I have an image within a div, and this is the CSS for it:

top: 420px; 
left: 517px;
position: absolute;
padding-top: 25px;
 height: 60px;
  width: 60px;

-webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s...

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

Centering a div that is displayed as a table and absolutely positioned

As the title implies, I need to know how to center a div that has the following CSS rules applied to it:

display: table;
position: absolute;

The div should be right in the middle of the viewport, and, as per usual with display: table;, it should be...

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

sliding active element background for navigation

I want to make a sliding background for the active element of the navigation, like the one in the below given website.

http://www.exosource.com/en/

enter image description here

Don't know how its done with css and jquery. Can some one help me with this please.

Thanks in...

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

Adding Logo and other image in header

I am trying to add a logo in the header but when I add it, it shifts the email and the contact number (they are also in header) downwards.

How do I fix this? I am using a simple img function to add the logo into header.

And I also want to show a...

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

How to remove Spacing Between Navigation Menu Items?

I am new to CSS3 and HTML5. I want to know how can I remove spacing between my navigation bar buttons.

My HTMLCode is:

<nav id="menu"> 
            <ul>
                <li>
                GET HELICOPTER TOURS</li><li>
                GET PARTY...

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

Removing top arrow when view on smaller screen

In my bootstrap theme I have added an up arrow to the dropdown menu

enter image description here

using the following css

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  right: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom:...

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

How to make line-through wider/bigger than text/element using CSS

Can you please let me know how I can force CSS to make the line-through property wider than element width?

For Example

<h3 style="text-decoration:line-through">50</h3>

and result looks like enter image description here now how I can make the line wider than element to be...

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

putting drop down on page in proper place

i am designing Daily Attendance System. I have designed a page where Employer can put date range FROM--TO to find attendance of some worker for particular date range now i have been told to put NAME field too like an employer can search by date range...

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

css calc and min-height can not team up properly

i'm building a layout that has dynamic height (as most people do). i've been searching for a while but have not found similar case with mine. so here it is, my simplified code:

html:

<div id="body"><div id="content">
content
</div>
</div>
<div...

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

I can not figure out why my drop down menue is not hiding

So, I can not figure out why my drop down menu is not hiding my #nav ul is set to left:-999px and so it should be way off screen, but for some reason it is not hiding and instead just sitting in plain view. BTW my nav bar is a PHP include, I have...

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

Modify more than 1 css file with javascript

I'm trying to find a way for modify CSS while HTML is running, so far I find that is possible just with a little script like this next...

$("button").click(function(){
  $("p").css("color","red");
});

As I can concern this is an effective way to...

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

Using Tether Javascript Library causing exception

I am working on a new website and I want to include a footer at the bottom of a container div.

I found a javascript library called Tether (http://github.hubspot.com/tether/) but I am having a problem with the implementation.

Below is my HTML...

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

Accordion using AngularJS and CSS animations

Using just Angular JS Animate and Css Animation, I am trying to create an Expand/Collapse (Accordion) similar to the bootstrap collapse seen here: http://getbootstrap.com/javascript/#collapse

I have an issue with the expandable items, they pop back...

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

CSS3 rotate animation causes Animate.css shake animation to disappear

Whenever I execute an Animate.css shake animation after a CSS3 rotate animation the div being shook will disappear. This only happens on the back-face of the rotated divs. The front-face doesn't have this issue.

I've put together a jsfiddle to...

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

Image won't appear as background when site is live

I am trying to get a background image to show properly when my site is live. It only works when in the development environment. Once uploaded, it defaults to background color. I have checked several times to ensure the proper file name is being used...

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

border-radius appearing under image

building a gallery and the border radius around my anchors is not cropping my image. and I can't see why.

this is the html

<div id="Portfolio_page">


<div id="portfolio_wrapper">

<a class="thumb" href="img/image-2.jpg" data-lightbox="image-1"...

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

create fluid (scaling) concentric arcs using css, canvas, or svg

I am trying to create a graph like this:

http://bl.ocks.org/cmdoptesc/6228457

or like this

http://raphaeljs.com/polar-clock.html

But I want it to be able to scale (preferably without javascript) according to the browser width. I would love to be...

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

Apply overlay gradient to images just like myspace

I want to apply gradient overlay to a lot of images just like myspace did in their new design . All the images have a title with black gradient background .

I searched but most of the tutorials are shown using a background image on a div . I want to...

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

Single gradient to multiple images

I would get this result: image

the images will be cropped in PNG without background and and black color, like the gradient in separate images its possible with CSS ?

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

What is the best css selector for 'all children'?

On my page - in my css I have put:

*{pointer-events:none;}
.pev{pointer-events:auto}

This is because I want a strong ui and there are some draggable things i don't want users accidentally selecting things, etc

So I am taking away all clicks,hovers...

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

targeting different div styles with target method

Hello I am using the target method to manipulate different div styles, for the first "link_one" everything is working, while I have only one link, the question is how to make it work for "link_two" ? So link_two will do the second part of the css ?...

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

Not able vertical align

Hi I am trying to align the text 'MyBrand' to middle of the box(Highlighted in orange). But not able to achieve that. I have tried using 'vertical-align: middle'. But that is not working. What am I missing here?

CSS

header, nav, form, a, ul, li,...

Read the entire recipe Recipe added 1 day ago