Convert an image to grayscale in HTML/CSS



img {
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

/* Disable grayscale on hover */
img:hover {
  filter: none;
  -webkit-filter: grayscale(0);
}
Advertisements

Convert a Menu to a Dropdown for Small Screens


We come across the digital world where the technology is at its pace. As the time passes the websites are compatible to mobile devices, but still there are some issues due to which the website cannot be made device compatible. So, what to in this case.

Here comes the solution:

The HTML

The HTML for these two menus is different. As far as I know, you can’t style <select>and <option> elements to look and behave like <a>s or vice versa. So we need both. You could just put both in the markup. That’s what Five Simple Steps does:

<nav> 

  <ul> 
    <li><a href="/" class="active">Home</a></li> 
    <li><a href="/collections/all">Books</a></li> 
    <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> 
    <li><a href="/pages/about-us">About Us</a></li> 
    <li><a href="/pages/support">Support</a></li> 
  </ul> 
  
  <select> 
    <option value="" selected="selected">Select</option> 
    
    <option value="/">Home</option> 
    <option value="/collections/all">Books</option> 
    <option value="/blogs/five-simple-steps-blog">Blog</option> 
    <option value="/pages/about-us">About Us</option> 
    <option value="/pages/support">Support</option> 
  </select> 

</nav>

Let’s go with that for now.

The CSS

By default we’ll hide the select menu with display: none;. This is actually good for accessibility, as it will hide the redundant menu from screen readers.

nav select {
  display: none;
}

Then using media queries, we’ll do the switcheroo at some specific width. You can determine that on your own (here’s some standard breakpoints).

@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
}

But now you gotta maintain two menus?

Well yeah, that’s one concern. Maybe your menus are created dynamically and you can’t control the output easily. Maybe you and hand crafting menus but want to make sure you don’t accidentally get your menus out of sync. One way we can fight this is to dynamically create the dropdown menu from the original.

Using jQuery, we can do that with just a few lines of code:

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});

Then to make the dropdown menu actually work…

$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});

Source: www.css-tricks.com

CSS nowrap Alternative


To achieve the same results as a TD nowrap (<td nowrap=”true”>) using cascading style sheets, use the following:

white-space: nowrap;

This style attribute only applies at the TD element level ie needs to be applied to each TD, ie not the the TR or TBODY.  If you’re desparate to not apply it to each TD,  then you can get away with only applying it to the TD’s of the first row – but this is only effective if applied to the cells containing thelongest data (so IMHO is a half-baked approach – ie don’t do it).

Floating Header: Scroll Effect using HTML,CSS,JQuery


Ever scrolled halfway down the page – and then the navbar at the top appears? This can be very useful and looks professional. This tutorial will introduce a very basic approach how to get this happening.

1. Download the basic ‘Bootstrap’  Pre-Config from ( BootStrap ) .

Now update the index.html with the following:

<!DOCTYPE HTML>

<html>

<head>

<link rel="stylesheet" href="css/bootstrap.css">

<script type="text/javascript" src="js/vendor/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>

<style type="text/css">

body {

padding-top: 60px;
 Continue reading 

An Introduction To The CSS3 Multiple Column Layout Module


Joliet Junior College-Web Design Certificate


Tutorial Details

Topic: CSS3 Column Layout

Difficulty: Beginner

DownloadSOURCE FILES

DemoVIEW IT ONLINE

The Multi Column Layout Module has been introduced to help us create columns quickly and easily using CSS3 only. In this tut I’m going to be taking a look at some of its properties and demonstrate them through a series of examples.

 

Introduction

Anyone who has tried to create multiple columns in the past using CSS will already know that this type of layout has been achievable for a long time. However, this has often resulted in the use of hacky techniques and floats. More often that not this has been quite time consuming and definitely not the easiest of layouts to create. The truth is creating multiple columns using CSS has been an extremely awkward process up until now. The multi column layout module offers more flexibility and control over previous CSS methods.

The new…

View original post 1,949 more words

Convert a Menu to a Dropdown for Small Screens


<!DOCTYPE html>
<html>
<head>
<meta charset=’UTF-8′>
<title>Convert Menu to Dropdown</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
font: 300 21px “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
width: 500px;
margin: 0 auto 15px;
}
nav {
display: block;
width: 960px;
margin: 100px auto;
text-align: center;
} Continue reading