Latest CSS3 Recipes

Repeating background gradient with html and body at 100%

I'm trying to get the background gradient to stretch the entire height of the page and not break once the viewport ends, as it does here http://jsfiddle.net/szfiddle/hTU7d/

However, I also need to keep the height at 100% for the html and body tags in...

Read the entire recipe Recipe added 9 minutes ago

CSS flexbox: Header, main, footer layout. Main part collapsing in the middle

I have a simplest situation with

<!DOCTYPE html>
<html>
<head>
    <title>Whatever</title>
</head>

<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>

So I want my header to be say .. 15%, my footer 5% and my main part taking...

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

Overlay or popup with full screen

In my website, I have some images and iframe which I am displaying them inside a fancybox.

Everything is working ok, but now the requirement of the website is to have a fullscreen like the overlay screen in usatoday website.

...

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

How to fill remaining space in div with pseudo elements?

I'm trying to make a h2 element with a line in a background, but only in the remaining space. I know the simplies way is to use span inside H2, but user will generate content by WYSIWIG, so I can't use additional elements in h2. I tried many things...

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

CSS display:table and display:table-cell alternative for fixed widths

I thought I'd discovered something pretty great with the display:table and display:table-cell properties for making navigations more responsive and fluid-like, with the display:table applied to the ul with table-layout: fixed; and the li's given the...

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

Unusual tapered div design

How can I achieve a design like this with CSS3. I tried to give it a very high transparent border but that makes the taper outwards and not inwards.

It looks like something that can be achieved with CSS that is why I am reluctant to use images for...

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

Place arrow image on bottom border

Following is my jsfiddle in which I am trying to place an arrow image on the bottom border centerally aligned but I am unable to do that. Kindly let me know how to put an arrow image so its centrally aligned no matter what the width of the box is or...

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

Two Simple button CSS issue

I'm trying to change the the look of the read more button. Here is the code I'm using:

.readmore {
    display: block;
    color: #ffffff !important;
    border: none;
    background-color: #7ebe54;
    .border-radius(3px);
    .transition(all 0.4s...

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

Display image on top of bootstrap &lt;nav&gt;

I have a JSFiddle set up here showing what is currently happening: http://jsfiddle.net/YX7T6/1/

This is the code:

<nav class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
               ...

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

Adding an overlay to images within a Flexbox List

I know I've seen similar questions, but for whatever reason, I can't seem to get them to work on these. It's a list of images, displayed using flexbox with javascript to swap them to a larger, main container.

What I'm trying to do is to apply an...

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

How to ignore image resize on zoom in?

How would I go about ignoring to resize image when zooming in on the website just like on this website: http://antares.pcadviser.ro/

My website: http://vizz.tv/

I am using this right now but the image resizes when scrolling in:

#headerImage {
   ...

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

Is there a way to do this effect with images on hover with css?

I have a div with 40px width and 40px height, inside i have an image (or background-image: url();) with a blue facebook icon (blue "f" without background). I wan't that when i hover that div, the logo on blue turns white and the background which is...

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

Style -CSS a php session value

How to style php output? Here is an code for example? I can only style with css the code who is in the echo.How to style the session value?

 echo "<h1>Logged in as:</h1>"  .$_SESSION['myusername'];

Any tip?

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

HTML5 - validation

Good morning.

I just got a free template from my friend, and everything worked fine except all .html files. Every html file has at least one issue, it's like if eclipse wouldnt recognize the HTML5 validation.

See an example:

<!DOCTYPE...

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

Bootstrap grid system row content overlapping other row

I've a problem with grid system of bootstrap, I've 6 elements inside a row, each one with class set to "col-md-2", the problem is that the only first 5 elements are shown on the row, and the 6º jumps to 2nd row. So the 2nd row gets empty spaces.

See...

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

How to increase the normal or given font-size values little bit more in wicked-pdf

I have a body content in my wicked-pdf report with variable font-size

If i add font-size to paragraph like

p {
   font-size: 16px !important;
}

then whole paragraph font-size will become 16px, there may be a word containing 22px font-size also in...

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

Slide div onclick then back again - Jquery

I have 2 buttons side by side that when clicked are tagged with an 'active' class & also trigger a CSS slide effect on a below div.

At first hit of the page, button A is already classed as 'active' & slide 1 is open. When you click button B, it is...

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

add border to background

I have the following markup and style:

<input class="my-input" type="text />

.my-input {
    background: url(my-icon.png) no-repeat right center;
}

I actually created an input with an icon on the right.
Now I want to add left border to that icon....

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

Menu - Style ul / li to be width depend on text lenght

i am trying to style my menu. I had a working code but notied that parent div is smaller then child div. I am pretty sure its not right so i try to edit it a bit but now i have a problem with it. It looks like: enter image description here

As you can see last part of menu...

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

Odd spacing at the top of html5 boilerplate demo

I downloaded the HTML5 Boilerplate template from here http://html5boilerplate.com.

When I opened it to preview the template; I see an odd space on the top. It can be seen on their online demo also: http://demo.html5boilerplate.com/

enter image description here

I see this on...

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

CSS- Expanding An Element Without Losing Page's Original Structure. To create Drop Down

I want to create a drop down menu (alternate to Browser's <select> tag).

So Here I've created a <div> in another <div> to stimulate the <select>

But When I expand the dropdown <div> The Exapanded div Pushes down all other page's structure.

I mean,...

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

Adjusting flex boxes

My current attempt to arrange boxes within a container has brought forth this output.

enter image description here

But what I'm trying to achieve is,

  • fill each row with maximum number of boxes but each box has a fixed padding and margin. I believe I have already achieved...

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

Table with three cells: auto-resize left and right in pure CSS

I have three entities in a row, currently I use table to display them:

<table>
  <tbody>
    <tr>
      <td id='td1'>some text</td>
      <td id='td2' style='width:600px;'>some text</td>
      <td id='td3'>some text</td>
    </tr>
 ...

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

Keep footer at bottom but not sticky?

My basic layout is simple:

<header></header>
<main></main>
<footer></footer>

If I make my footer position:fixed it does stay at the bottom of the page, but is a "sticky" footer and covered content when scrolling is needed.

I would like to keep...

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

Adding and removing a class to a list of divs for creating a content slider

I'm creating a very basic content slider in CSS3 however this question is regarding the jQuery part of it. My content structure is as follows:

<div class="slider>
    <div class="container>
        <div class="slides">
            <div class="slide...

Read the entire recipe Recipe added 1 day ago