Latest CSS3 Recipes

Extend background gradient across body without background-attachment: fixed

I want to have a background gradient, e.g.

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9))

on the body of my document which extends across the entire height of the body - and scrolls with the...

Read the entire recipe Recipe added 46 minutes ago

Is it possible to bring options of <select> tag above it

In HTML <select> tag, drop-down div (of options) appear below the <select> tag by default. Is it at all possible of bringing options of <select> tag above it?

Currently I am creating another div on click but that's not the real solution.

I was...

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

Replace dynamic content with images and other stuff

I'm struggling on how to style in the best way possible this kind of code:

<td><div data-source="lightstreamer" data-field="yellow-cards">-</div></td>

The data-source node will be dynamically deeded with content (i.e. 1, 2..) but I have to show an...

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

different styles on homepage and posts wordpress

I am a newbie in design/dev but want to learn fast. Its a Wordpress site, I cant figure out how to style homepage and posts differently. When i change settings in the theme options, it changes everything uniformly. Here is the site: ...

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

transform:rotate 5deg on menu distorts the text

I have the simple code for menu

<nav class="top-menu">
        <li class="glavnaja">Главная</li>
        <li>Новости</li>
        <li>Выставки</li>
        <li>Распродажи</li>
        <li>Вакансии</li>
        <li class="last-li">Форум</li>
...

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

Toggle CSS transitions on and off with JavaScript

All,

I've got a situation in which I'm using CSS transforms/transitions to animate the horizontal position of a div element. Specifically, I'm using...

// in CSS
myDiv {
    transition: transform 0.4s ease-in;
}

// in JavaScript, where "div"...

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

Make text overflow horizontally into column

So I have a webpage with text that is not allowed to scroll vertically.

This means that when text overflows I need it to overflow horizontally. What I am trying to do is separate it into columns. Basically, as the section of text gets too tall for...

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

Vertical align bottom for a link inside a table cell

Is it possible to push a link to the bottom of it's table cell without knowing the height of the table cell? Here's a fiddle I set up illustrating the problem: http://jsfiddle.net/77qG5/1/ I'd like the link with the red background to be aligned to the...

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

Image css max width without distort

Goody, Would like to know how can i stretch the image to fit the width, without distort the height? maybe display the center part of the image only? This is the website:

http://youthicons.my/2013/11/lorem-ipsum-dolar-sit-amet/

and the portion of...

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

CSS3 transition effect with onclick

I am working my way through CSS3 and kinda stuck at one problem.

The issue is as follows :

I have an image that is initially position at left-side of the screen :

.box img{
margin-left:0;
-webkit-transition:1s;
 }

Now, on hover, when I want the...

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

Datepicker jquery ui-datepicker-trigger

I need to add two calendar jQuery objects to the html page. I have the below setting for date picker. Have an icon image for opening the calendar object. For absolute positioning the icon image doing the below css ui-datepicker-trigger override. If...

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

How to create horizontal menu in fixed sized div with one link wider than the others

So my problem is this - I have a div with fixed size of 970px. Inside it I want to create a horizontal menu where the first element will be a link to the home page with the logo of the company and the others will be standard links to different parts...

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

border spacing property doesn't work

I am trying to make the following table: table

I have an outer border and one border at the bottom. I got it all right ,my only problem is that I can't get the space between the outer border and table (space of 20 px) when I use border-spacing it doesn't...

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

Average / most popular screen size and bootstrap3

If the average / most popular screen size width is now more than 1366px, why is bootstrap widest container (from their CDN) at max-width:1170px?

.container {
    max-width: 1170px;
}

Should I not believe everything I read?

This is from many...

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

Stacking and curves in pure-CSS logos

How could one create arbitrary curves with just pure CSS? Is there a 'Bezier' library? I didn't find anything that could match the curve of the outer edge of the logo below.

Sample Logo

Looking at the the Shapes of CSS, I think the logo could be approximated...

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

show an image partially without canvas without frame or without plugin

I have this img, and a box div around it.

http://jsfiddle.net/6d4yC/7/

1) I want when the image is in its big size, only the part of image (250x150), without creating a white overlay over it. I put a #box1 div around the image and it can't limit the...

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

Unicode down triangle doesn't show up in IE9

I'd like to include a down triangle in my CSS dropdown menu. It works correctly in every browser, except for IE9.

In normal browsers (Firefox, Opera, Chrome, etc.) it looks like this way:
normal

However in IE9 it shows up like this:
ie9

The CSS...

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

How to scale and translate3d at the same time?

Take this example:

@-webkit-keyframes slideInViewport {
    from{
        -webkit-transform: scale(1);
        -webkit-transform: translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: scale(0.8);
        -webkit-transform: translate3d(250px,...

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

javascript display and hide div element

I am new to Javascript, and I currently have an article that is being fetched from database, the article has two rows. title & content there are about 100 of these in my database. Now the objective is to list all the titles first, and when a user...

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

css - borders overlap each other

I am having a problem. My bottom border is "overlapping" my right border on the same element.

This is how it looks like: http://awesomescreenshot.com/0311z2fy84

As you can see, the green right borders bottom, is looking messed up, because of the...

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

301 redirect within the same domain/website

The standard redirect 301 template for htaccess is usually:

redirect 301 /folder_wrong/name.html http://website.com/folder-right/name.html

With the http website included

I'm wondering if the below would work WITHOUT the http website and only having...

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

CSS3 / Transition / change font color on grand-grand-grand parent over

I'm toying around with the CSS3 transition. I hope my question won't be too much noob and realistic :) Basically, whenever users mouse over some elements, I changed via css the color of the text.

Now the problem I have is that : I have a div box with...

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

CSS3 transform: rotateY breaks left half of the flipped layout

Live demo of the problem

I created 6 red blocks, binded a click listener (with a function that alerts the clicked box's id) to all of them, then applied -webkit-transform: rotateY(180deg);. Now the right half of the boxes are alerting the correct id...

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

Sticking ul to bottom of a div

I have this div (8 of them in one page ) that have an unknown height (the height change according to the data injection), I need to "stick" it to the bottom of the div. But it's not working out.

Css:

    .menuItem {
    width: 45%;
   ...

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

How to fix the headline row in a table using css?

I made a table with no borders in the columns, and I gave 1px border only in the rows.

I have used the 'border collapsed' property and then I have given all the rows a border of 1 px.

However my problem is that the row of the headlines is a bit...

Read the entire recipe Recipe added 1 day ago