Categories
CSS3

CSS only Tabs using :target

Its highly unlikely that tabs using only CSS would replace JavaScript based ones.
tabs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>CSS Tabs</title>
<style type="text/css">
.css-tabs
{
    position:relative;
    text-align:center; /* This is only if you want the tab items at the center */
}
.css-tabs ul.menu
{
    list-style-type:none;
    display:inline-block; /* Change this to block or inline for non-center alignment */
}
.css-tabs ul.menu > li
{
    display:block;
    float:left;
}
.css-tabs ul.menu li > a
{
    color:#000;
    text-decoration:none;
    display:block;
    text-align:center;
    border:1px solid #808080;
    padding:5px 10px 5px 10px;
    margin-right:5px;
    border-top-left-radius:5px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:5px;
    border-top-right-radius:5px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:5px;
    -moz-user-select:none;
    cursor:pointer;
}
.css-tabs ul.menu li > div
{
    display:none;
    position:absolute;
    width:100%;
    left:0;
    margin:-1px 0 0 0;
    z-index:-1;
    text-align:left;
    padding:0;
}
.css-tabs ul.menu li > div > p
{
    border:1px solid #808080;
    padding:10px;
    margin:0;
}
.css-tabs ul.menu li > a:focus
{
    border-bottom:1px solid #fff;
}
.css-tabs ul.menu li:target > a
{
    cursor:default;
    border-bottom:1px solid #fff;
}

.css-tabs ul.menu li:target > div
{
    display:block;
}
</style>
</head>
<body>
<div id="tab2" class="css-tabs">
    <ul class="menu">
    <li id="item-1">
        <a href="#item-1">Tab 1</a>
        <div><p>Tab Content 1</p></div>
    </li>
    <li id="item-2">
        <a href="#item-2">Tab 2</a>
        <div><p>Tab Content 2</p></div>
    </li>
    <li id="item-3">
        <a href="#item-3">Tab 3</a>
        <div><p>Tab Content 3</p></div>
    </li>
    <li id="item-4" title="click for Tab 4">
        <a href="#item-4">Tab 4</a>
        <div><p>Tab Content 4</p></div>
    </li>
    </ul>
</div>
</body>
</html>

I think its safe to say that its a real annoyance when the browser re-positions the page when a fragment (named anchor) link is clicked. We don’t want the page moving up on clicking on a tab button. Example.

Categories
General

Preventing Images From Being Saved on Right-Click

More often than not, people have asked that if they uploaded their profile picture online, would it be possible to disable downloading of their profile photo by others.

There is no full-proof method of preventing images from being saved by the end user.
The user can hit print-screen and crop the image out of the screenshot, or can directly download the image by knowing the exact image URL from the page’s source code (HTML, CSS JavaScript) or using tools like FireBug, AdBlockPlus to extract the image URL.

Whats mentioned here is a simple common technique to prevent someone from saving the actual image by right-clicking on it & Save As or Get Image Location.

  • Set the image’s src attribute to a 1 pixel transparent gif
  • Set the image’s backgound-image property to the actual image you want it to show
<img src="1x1.gif" alt="cat" style="background-image:url(cat.jpg)"/>

no save