Theme images by Storman. Powered by Blogger.
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Sunday, 13 November 2016

How to create transparent overlay on background image

- No comments
image overlay example
 
        Full-screen image based homepage is the very popular design concept and it is adapted by many websites. Whenever web designer adds the full-screen image on the landing page, a requirement to add text or other contents, over it comes into the picture. But directly adding the text on the image is not a good idea and this makes user experience bad.

This is where adding overlay on the image comes. If you want to add content on the image first create overlay than put content on top of it. Here I gave one example, there is much more use case where you can use an overlay for better user experience.

See here what I am talking about View demo

In this post, I am going to share you how you can use CSS to create overlay on the image.

Let’s go step by step

STEP 1: First I am going to create HTML file and basic HTML structure where I will be writing my code.

<!DOCTYPE html>
 <html>
  <head>
         <title>Overlay demo</title>
  </head>
  <body>
   <!-- add your code here -->
  </body>
 </html>

STEP 2: Next I will reset default CSS. So look into given code how you can do same.

body, html {
    margin: 0;
    padding: 0;
    border:0;
    height: 100%;
    font: inherit;
    vertical-align: baseline;
}

STEP 3:  Create an outer div with the background image and make 100% so it can occupy full screen of the browser window.

<div id = "main-img"></div>


#main-img{
 background-image: url("images/back.jpg");
 background-size: cover;
 background-position: center center;
 position: relative;
 height: 100%;
 width: 100%;
 top:0;
 bottom: 0;
}

STEP 4: Create another div inside the outer div and make it position absolute. Add the CSS given below for inner div.

<div id = "main-img">
 <div id = "img-overlay"></div>
</div>


#img-overlay{
 position: absolute;
 height: 100%;
 width: 100%;
 top:0;
 bottom: 0;
 background-color: rgba(0,0,0,0.5);
}

STEP 5: Create content tags as many you want and position them based on your requirement. Here I am using  <div> to add text on the image.

<div id = "main-img">
 <div id = "img-overlay"></div>
 <div class = "img-text">CSS full image transparent Overlay Demo</div>
</div>


.img-text{
    color: white;
    font-size: 50px;
    text-align: center;
    width: 100%;
    position: absolute;
    margin: 100px auto;
}

You can see the demo and get complete code here.
Source Code

Congratulations, you learnt something new. Now it’s time to go and try on your project.

Happy learning :-)

Saturday, 8 October 2016

Disable cut(CTRL+X), copy(CTRL+C), paste(CTRL+V) and mouse right click in web page

- 2 comments
In this article, I am going to share you how you can disable right-click and cut/copy/paste keyboard option using JavaScript and HTML on your web page.

Before starting anything I am going to give you brief insight about the usage of  disabling right-click and cut/copy option on the web page. So these are few cases.

1. Prevent user to view the source code.
2. Prevent user to copy content.
3. Prevent user to save images or any assets from the web page.

These are the methods you can use to achieve it.

METHOD 1 :  Disable right click and cut, copy, paste using HTML.

Set the oncontextmenu, oncopy, oncut, onpaste to return false in body tag. Your code will be look like this :

<body oncontextmenu = "return false" oncopy="return false" oncut="return false" onpaste="return false">

METHOD 2 :  Disable right click and cut, copy, paste using JavaScript.

To disable right click using JavaScript you can bind function that performs the check for the given input on mouse down Event. Similarly, you can use oncopy, oncut and onpaste event and bind the function to it.
Here is the code snippet :

<script type="text/javascript">

//Disable cut copy paste
document.oncopy = function(){alert("copy option disabled"); return false;}
document.oncut = function(){alert("cut option disabled");return false;}
document.onpaste = function(){alert("paste option disabled");return false;}

//Disable mouse right click
document.onmousedown = disableclick;
msg = "Right Click Disabled";
function disableclick(e)
{
     if(event.button==2)
     {
     alert(msg);
     return false;
   }
}
</script>

METHOD 3 : Disable right click and cut, copy, paste using Jquery.

To do same with  jQuery first you should download jquery file and attach to your html file as given below:
<script src="jquery.min.js"></script>

Next write your Jquery code as given below:

<script type="text/javascript">
$(document).ready(function () {

    //Disable mouse right click
    $("body").on("contextmenu",function(e){
        return false;
    });

    //Disable cut copy paste
    $('body').bind('cut copy paste', function (e) {
        e.preventDefault();
    });

});
</script>

Disabling right-click and cut/copy/paste option will not give you the guarantee to secure your data from any action but it will make things difficult for the novice.




Submit
Subscribe to Newsletter

Complete the form below, and we'll send you our recent update.

Recent Posts

© Copyright 2016 Tech Makers Guide. Designed by Bloggertheme9. Distributed By Protemplateslab.