What is css clear property?

By // No comments :

Hi friends,in this post I am sharing css clear property .We are using float property to move an image(or) text from  right or left according to our needs in an element.But the problem is ,this float property also consider the other elements and cause floating.To avoid this floating to other elements , we have to use the clear property.

 

 

 

css-clear-property

 

 

 

Let we consider with an example.Create a .html file using notepad then copy and paste the below code.I have save the file name as agh.html

 

 

<html>
<style>
.agh{
float:left;}

</style>
<body >
<div class="agh">
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
</div>

</body>
</html>

The output will be

 

css-float

  • Now I am adding another div element.Now copy and paste the below code in html file.
  • <html>
    <style>
    .agh{
    float:left;}

    </style>
    <body >
    <div class="agh">
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    </div>
    <div >
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    </div>
    </body>
    </html>

    Now the output will be like below.And this is the problem since we have not given any class to the next div element.But it also consider the float property in for the next div element.

 

css-without-clear-property

 

  • Here ,we are using the clear property in css.Now copy and paste the below code in html file.

<html>
<style>
.agh{
float:left;}

.ahh{clear : both;}

</style>
<body >
<div class="agh">
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
</div>
<div class=”ahh”>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
</div>
</body>
</html>

Output will be like below,

 

css-with-clear-property

run angularjs locally in browser using notepad

By // No comments :

Hi friends in this post I am sharing about angular js . Angular js is actually a javascript framework and used to declare dynamic views in web-applications ,especially useful for single page applications.Angular js was initially an idea of an google employee and after some years google made a development team and released officially.Now I am explaining how to learn offline using notepad which also reduce net cost.

 

run-angularjs-in-notepad

  • First goto angularjs.org.and click the download button.

 

angularjs-website

 

  • Now a popup window appears and asks to download the file.I recommend to choose legacy and click zip format and finally download.I tried minified but it was not worked for me.So i recommend to download zip format.Size will be ~8.2MB.

 

 

download-angularjs

 

 

  • I have downloaded angular-1.2.26 .First extract it and get the angular-1.2.26.

 

 

 

extract-angularjs-folder

 

 

 

  • Now create another folder and name it as “img”.Move the angular folder-1.2.26 to img folder.

 

move-angularjs-folder-to-img-folder

 

 

 

    • Now rename angular-1.2.26  to angular folder.

 

 

rename-angularjs

 

 

  • Create a img.html file using notepad ,copy and paste the below code in img.html file.Be sure this html file should be in img folder.Mention the file path correct .File path should mention for the angular.min.js . Highlighted yellow color is very vey important.

 

<!DOCTYPE html>
<html ng-app>
  <head>
    <title>A simple introduction to AngularJS - Part 2</title>
    <script src="angular/angular.min.js"></script>
  </head>
  <h3>AngularJS using notepad</h3>
<body>
<label>Example:</label>
  <input type="text" data-ng-model="techinfoweb" />
{{techinfoweb}}


</body>
</html>

Now run img.html in browser and you will get the output like below.

 

 

 

angularjs-demo

Skitch-a free screen capture and annotation tool

By // No comments :

Hi friends,in this post I am sharing a wonderful free software which can be used to took screen capture and to annotate .highlight and adding shapes to images.Size of the file is `35MB.And this is absolutely free!!!!.Skitch is one of the product of evernote. Eventhough skitch looks like simple software ,it will give a professional look to the image.Screen capture another facility provided by this software.As an extra option you can import image from desktop to skitch and you can add your necessary shapes.Skitch supports on most of all devices(computers and mobiles).

Visit site

 

skitch-free-screen-capture-annotate-tool

 

Tools in skitch

  • Arrow tool
  • Text tool
  • Pen tool (normal pen, highlighter pen)
  • Stamp tool
  • Pixelate tool
  • Crop and resize tool
  • Marker tool
  • Rectangle tool ,Rounded tool,Ellipse,Line

Workspace of skitch

 

 

 

    skich-workspace

Css image opacity

By // No comments :

Hi friends in this post I am sharing about css image opacity.Css image opacity is used to make images transparent.

 

 

 

css-image-opacity

 

 

 

Copy and paste the below code in notepad and save in”.html” format(be sure you have added an image from your pc and replace path in yellow highlighted color) and open with browser.For internet explorer , we are using filter: alpha(opacity=40); .If filter: alpha(opacity=0); the image will be more transparent.

If filter: alpha(opacity=100); the image will not have a transparent effect.Like the same for “opacity:0.4;” the image transparent will be more when it is “opacity:0.1;” .And the image will not have transparent effect when it is “opacity:1.0;” .

 

 

<style>

img{
opacity: 0.4;
    filter: alpha(opacity=40);
}
img:hover{

opacity: 1.0;
    filter: alpha(opacity=100);
}
</style>
<body>

<div>
<img src="D:/desk/pencil-icon.png" width="auto" height="auto">
   

</div>
</body>

Image with transparent effect (when opacity is 0.4):

 

 transparent-image

Image with no transparent effect (when opacity is 1.0):

 

image-with-no-transparent-effect

best free download managers

By // No comments :

Hi friends , in this post I am sharing free download managers.And why we have to use these download managers?.Because when you use download a file using google chrome  definitely you will face a problem that resume option is not working properly.The download managers given below will be definitely solve these issues and they are absolutely and downloads the file with a little bit fast.

 

free-download-managers

 

Microsoft download manager

Ofcourse ,I didn’t know about in my early days of blogging.I have already said that microsoft have lot of useful free softwares (some software  come as like inbuilt !!!!) and they are awesome.And in these free row,microsoft download manger was one of them .File size is only 1.3MB.

What microsoft says about this download manager?

The Microsoft Download Manager enables you to download files simply and easily. It also makes downloading large files such as application and multimedia files quick and reliable. It was specifically designed to help users manage file downloads from supporting Microsoft Web sites. Once started, the Microsoft Download Manager’s easy-to-use interface displays the status of downloads and enables you to suspend active downloads or resume downloads that have failed.

Visit microsoft download manager

 

Download Accelerator Manager (DAM)

DAM is another free and fast download manager and have the media grabber which helps to download videos from youtube and more other sites.And it supports all popular browsers.

Visit download accelerator manager

 

Dam says about their Benefits:

  • Download with the fastest possible speed, using a smart download logic accelerator
  • Download videos from YouTube etc. (learn how to download YouTube videos)
  • Support all popular browsers, e.g. Firefox, IE, Chrome, Safari, Opera, etc.
  • Accelerate, schedule, resume, recover, and manage downloads
  • Blazing fast, light, easy to use, free and safe
  • 100% Clean - no spyware! no adware! no virus! no malware.

 

Eagle Get

Another free download  manager which is worth to use with no spyware or malware.Also resume the broken downloaded files.Eagle also available in many languages.And it has the video grabber which took videos with download option from any sites.

Visit eagle get

 

There are more free download managers and we will list them in further posts. Upto that try these softwares and enjoy fast downloading.

android5.0,lollipop-google’s new android version

By // No comments :

Hi friends,now google announced new android version and named it as android5.0 Lollipop.we know the previous version was kitkat 4.4.Kindly check the below page

Visit android5 lollipop 

 

 

android5-lollipop-google-announced-new-android-version

What google says about lollipop?

As previewed at Google I/O, Lollipop is our largest, most ambitious release on Android with over 5,000 new APIs for developers. Lollipop is designed to be flexible, to work on all your devices and to be customized for you the way you see fit. And just like Android has always been, it’s designed to be shared.

Lollipop is made for a world where moving throughout the day means interacting with a bunch of different screens—from phones and tablets to TVs. With more devices connecting together, your expectation is that things just work. With Lollipop, it’s easier than ever to pick up where you left off, so the songs, photos, apps, and even recent searches from one of your Android devices can be immediately enjoyed across all the other ones.
As you switch from one screen to another, the experience should feel the same. So Lollipop has a consistent design across devices—an approach we call Material Design. Now content responds to your touch, or even your voice, in more intuitive ways, and transitions between tasks are more fluid.
Lollipop also gives you more control over your device. You can now adjust your settings so that only certain people and notifications can get through, for example, when you’re out to dinner or in the middle of an important meeting. And when an important notification does come through, you can see it directly from the lock screen.
And because we’re using our devices a lot more, there’s a new battery saver feature that extends the life of your device by up to 90 minutes—helpful if you’re far from a power outlet. We’ve enabled multiple user accounts and guest user mode for keeping your personal stuff private. And you can now secure your device with a PIN, password, pattern, or even by pairing your phone to a trusted device like your watch or car with Smart Lock. But this is just a small taste of Lollipop.

Features of lollipop

  • A bold, colorful, and responsive UI design.
  • A battery saver feature which extends device use by up to 90 minutes.
  • Easier on/off toggles for Wi-Fi, Bluetooth, and location.
  • Power-efficient scanning for nearby Bluetooth low energy (“BLE”) devices like wearables or beacons
  • 4x performance improvements.
  • Support raw formats like YUV and Bayer RAW
  • 15 new languages added.
  • Print preview and page range support

capture entire webpage using awesome screenshot

By // No comments :

Hi friends,in this post I am sharing about awesome screenshot to take entire webpages.We already have a inbuilt screenshot software (i.e) using  print screen button in keyboard.But it is not enough to take screenshot of an entire webpage.Awesome screenshot  a free chrome application which is a best solution for this method.

Visit awesome screenshot

  • Goto the above page and kindly make a login with a gmail account.And click the button free as shown in below image.

 

awesome-screenshot

 

  • Now wait for sometime where awesome screenshot is adding to chrome.When successfully installed you will get like below image.
  • awesme-screensot-added-to-chrme

 

  • Now in chrome browser,an icon on left most side will be appeared like below image.Now click “select entire page” if you want to take full screenshot of a webpage.

awesome-screeshot-capture-entire-page

  • When you click select entire image ,it screenshots whole page and it opens in  new tab.Now in that page you can edit (i.e) shapes ,text and more.

awesome-screenshot-annotate-page-for-image-editing

  • When you finished edit process, now you can save the image.Also you have more options to save the image.

awesome-screenshot-save-image

Awesome screenshot has lot of options now its your turn to work on it.