Latest CSS3 Recipes

Blurry text on Chrome when using CSS -webkit-transform

I'm using

-webkit-transform: skew(-15deg, 0deg);

to skew a div, and then

-webkit-transform: skew(15deg, 0deg);

to deskew the text-containing child. The skewing looks ugly and pixlated in google chrome, so I use

-webkit-backface-visibility:...

Read the entire recipe Recipe added 9 seconds ago

animated background effect

I have the following code in my website which will animate two background images, transitioning them over one another and from left to right - http://codepen.io/anon/pen/pJKmn/.

Modifying the HTML and CSS from the codepen, how would I be able to...

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

Define Position Content Div Overflow Scroll

Is it possible to define the position (center), in this case the image div, in the div with overflow?

http://jsfiddle.net/KAy22/1/

#scroll-h-v {
    width: 300px;
    height: 300px;
    position: relative;
    overflow: auto;
}
.image {
   ...

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

A blue highlight on dropdown box when select any value in windows phone 8

Working on a windows phone 8 app in Phonegap. When I touch the dropdown box a blue highlight will appear. I gone through the question already asked here

windows phone 8 highlight colors in input fields

tried the answer

$('select').on('click',...

Read the entire recipe Recipe added 3 hours ago

Css3 scale animation not working

This is the css that i have,

div {
    background-image: url(some url);
    width:100px;
    height:100px;
    background-size:cover;
}

.animate {
    animation:changeSize 3s 1;
}
@keyframes changeSize {
    0% {transform: scale(1);}
    65%...

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

-moz-transform not behaving the same as -webkit-transform

I have circular elements that I am filling with quarter-circles to show progression. In Safari, IE and Chrome, these look great and fill the circle as they're supposed to:

Webkit

However, when I open the same page in Firefox, the transformations are...

Read the entire recipe Recipe added 5 hours ago

Responsive design navigation menu

enter image description here


  • This is a responsive design.
  • Logo is the ONLY fixed width element in here. Other element’s width should be depend by thiere content.
  • Navigation item are uncountable. So No way to set a fixed width. (May be 3 or 4 menu items)
  • Search element’s...

Read the entire recipe Recipe added 6 hours ago

CSS 3 dynamic columns, same width align top

My JSFiddle:

http://jsfiddle.net/3YGdL/

My CSS:

#sidebar {
    width: 100%;
    background-color: blue;
}

#sidebar div {
    width: 33%;
    display: inline-block;
}

#sidebar-left {
    background-color: green;
}

#sidebar-center {
   ...

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

Bigcartel bxslider image twitch?

Hey all I'm working on a site for a client but there is this annoying twitch present when the image transitions. The theme is a modified Luna theme (noticed that they now support flexslider am I going down the wrong path?) was just wonder what people...

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

Border radius proportions

#menu a {
    display: block;
    margin-right: 67px;
    text-decoration: none;
    font-family: Novecentosanswide-Book;
        font-weight: normal;
    font-style: normal;
        -webkit-font-smoothing: antialiased !important;
       ...

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

@font-face with multiple font-families

We're changing a font on our site from FontA to FontB. Seems simple enough. The problem is is that FontA is hardcoded everywhere, and even in places that we can't easily access (content that we're pulling in from external databases has this font...

Read the entire recipe Recipe added 10 hours, 1 minute ago

Responsive CSS Caption | Mouse Over Image

I would like to show caption on mouse over image – but on mobile, the caption should positioned below the image. Any ideas? http://jsfiddle.net/X8eCV/2/

@media (max-width:600px) {

#caption
{
display:block;
}

}
#caption {
...

Read the entire recipe Recipe added 11 hours, 1 minute ago

How to make responsive background?

My question is:

Is there any possibility to make something like responsive background ? What I mean is if there is a possibility that if I go to my website from the mobile phone (e.g. 840px width) my background will automatically fit to my screen but...

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

CSS Hover with background image and opacity

I have a div, and when the user hovers on the div, I want a background with opacity and a background image like so:

.ml-thank-you-box-item:hover{
    opacity:0.5;
    background-color:#9b9b9b;
    background-image:url(box_item_hover_img.png);
   ...

Read the entire recipe Recipe added 13 hours ago

Targeting every consecutive pair of li elements, possible with CSS3?

I want to append some CSS to a series of li elements, but only for every consecutive pair after missing one out. Example of the ones in a series I would want to target:

1
3/4
6/7
9/10
12/13

It doesn't look as if li:nth-child can help me out since...

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

Enlarge image on hover with css and ease

I use some pretty straightforward css to show a larger image on hover. This is the HTML structure:

<div class="Enlarge">
<img src="small.jpg" />
<span><img src="large.jpg" /></span>
</div>

And here's the CSS:

.Enlarge {
position:relative;
}   ...

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

create a logo with css3

I would like to create a Vodafone logo with css like this one: enter image description here

I know some people are able to draw anything with css. I can't figure out how to make the tear drop shape. This is what I have as far as now:

http://jsfiddle.net/n3w7y/

Can anyone...

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

how to create a hover effect for Div class and ID inside the class

I am trying to create next/prev button similar to flexslider default button.

But I want to do that using div and classes.

Fiddle is here

My mark up is shown below:

<div class="dirnav">
    <div id="next"> Next </div>
    <div id="prev" > Prev...

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

How to add a left border to the navigation menu

I want to display a border to the left of the menu. I tried adding another border to the menu, but this does not work as I expected.

border menu

I want it to be displayed as in this image. Should I add the border as an image in the list or adjust the border...

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

curvyObject warning: zero-width box with no accountable parent IE8-7

I am using curvey corner to round div .. but i am getting error in ie7-8 i have searched but could not get exact answer.. i found that its due to the html5 tags i used

curvyObject warning:
zero-width box with no accountable parent
tag: NAV
id:...

Read the entire recipe Recipe added 19 hours ago

fixed div width 100%, exceeds body width of 960px

I have a body width of 960px, but when I set the width of the fixed header div to 100% it exceed the 960px body width and has a width of 1349px.

How do I get the 100% to match the 960px body width ?

HTML

<body>
<header>
    <div class="banner">
  ...

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

How to display Bootstrap button label vertically using CSS?

I want to display bootstrap button label in following way-

S

U

B

M

I

T

Now I have following code-

<button name="form-submit" id="book-button" class="btn btn-primary btn-responsive btn btn-primary" type="submit">SUBMIT</button>

And this code...

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

Navigation bar to the center

I have designed a header that is center of the page with logo and some links. Below the header I have navigation menu which is aligned to the left of the page. I want the navigation menu to the center of the page that is as below the header.How do I...

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

How to create desired shapes and position them accordingly using CSS, CSS3?

Below is the image which shows the design that I want to display in one of my page,

enter image description here

I'm more of a developer than a designer so designing as shown above is quite of a higher level to me. So any suggestions or tips on how to achieve the above task?...

Read the entire recipe Recipe added 23 hours, 1 minute ago

css increase bar width dynamically from left based on screen size

hi have bar to put breadcrum and some other content in middle and behind it there is background which is set from left to right.its full width from left here is the image for this.enter image description here

<div class="yellow_bend">
    <div class="content_wrapper">
       ...

Read the entire recipe Recipe added 1 day ago