Apex Web Tutorial

Thursday, 28 July 2016

How to call directly by clicking on anchor tag

You can initiate a call just by clicking on anchor tag. It works on all platforms whether it is Windows, Android or iOS.

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<a href="tel:+91-9417012345">Call Me Anytime</a>
</body>
</html>

Output:

Wednesday, 27 July 2016

What is clipping in css

Clipping: It tells the browser which area/part of an element which should be visible anything outside of this area will be invisible.

Clipping is done with the set of predefined functions such as Circle, Polygon, Ellipse. There is other option of using SVG element as a clip path.

Try Yourself:

Triangle

-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Tapezoid

-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

Parallelogram

-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

Rhombus

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Pentagon

-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

Hexagon

-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

Heptagon

-webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);

clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);

Octagon

-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

Nonagon

-webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);

clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);

Decagon

-webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);

clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);

Bevel

-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);

clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);

Rabbet

-webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);

clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);

Left Arrow

-webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);

clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);

Right Arrow

-webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

Left Point

-webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);

clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);

Right Point

-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);

clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);

Left Chevron

-webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);

clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);

Right Chevron

-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);

clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);

Star

-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

Cross

-webkit-clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);

clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);

Message

-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

Cross

-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

Frame

-webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);

clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);

Inset

-webkit-clip-path: inset(5% 20% 15% 10%);

clip-path: inset(5% 20% 15% 10%);

Circle

-webkit-clip-path: circle(50% at 50% 50%);

clip-path: circle(50% at 50% 50%);

Ellipse

-webkit-clip-path: ellipse(25% 40% at 50% 50%);

clip-path: ellipse(25% 40% at 50% 50%);

Will update this post with more content in coming days...

Tuesday, 26 July 2016

How to redirect to another website in html

What is redirection? redirection means when a user enters your webpage url but it goes to other website with different url.
Sometimes you may require to redirect your web page to other page. For example sometimes you may require to make your website temporarily unavailable/offline for your users or sometimes you have build a new website with different url and you want your users to be presented with your new website rather than the old one. This can be possible in simple html using meta tag.
Meta Tag :- First we should know what is meta data. Meta Data is information about data. Meta tag provides information about our html document or webpage.

Meta tags are defined inside head tag <head> meta tags </head>

We can redirect using meta tag as given below:
<meta http-equiv="refresh" content="0; URL='http://www.mynewwebpage.com'" />

http-equiv :- it defines header of html document and this is sent to your browser at first priority before rest of the page. It is just like introducing yourself to some person. Your webpage introduce to the browser.

url :- url contains the new address where you want your page to be redirected.

content :- content has the number of seconds after the url you specified should be loaded.

If you just wish to refresh your webpage after come seconds you can achieve this using

<meta http-equiv="refresh" content="10" />

the above code will refresh your webpage after every 10 seconds

Monday, 25 July 2016

How to create a menu bar with icons in html/css

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://use.fontawesome.com/0809c7e939.js"></script>
<style>
body {
background: #6f6f6f;
}

ul.mainmenu {
list-style-type: none;
margin: 0;
padding: 0;
background: #ccc;
border: solid 1px #000;
float: left;
}

ul.mainmenu li {
float: left;
}

ul.mainmenu li a {
display: block;
padding: 8px 12px;
border-right: solid 1px #000;
text-decoration: none;
font-family: fantasy;
color: #B71C1C;
}

ul.mainmenu li a:hover {
background: #B71C1C;
color: white;
}

ul.mainmenu li a i {
background: white;
color: #B71C1C;
padding: 4px;
border-radius: 100%;
margin-right: 4px;
}

ul.mainmenu li a:hover i {
background: #B71C1C;
color: white;
padding: 4px;
border-radius: 100%;
margin-right: 4px;
}
</style>
</head>
<body>
<ul class="mainmenu">
<li><a href=""><i class="fa fa-home"></i>Home</a></li>
<li><a href=""><i class="fa fa-envelope"></i>Contact</a></li>
<li><a href=""><i class="fa fa-pencil-square-o"></i>About</a></li>
</ul>
</body>

</html>

Output:

Sunday, 24 July 2016

How to use word-wrap css property

When you have long words you will be able to break them and force them to next line using word-wrap property

for example:
ThisisacooltutorialforusThisisacooltutorialforus is a word

if we do not apply word-wrap property for this word in our css it will show as it is

if we apply word-wrap property for this word in css it will break that word based on the remaining space on the right side of the text.

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://use.fontawesome.com/0809c7e939.js"></script>
<style>
body {
background: #6f6f6f;
}

div {
background: lightgrey;
width: 200px;
}

div p {
color: #999;
word-wrap: break-word;
}
</style>
</head>
<body>
<div>
<p>
I liked this blog. This is a good blog for beginners.
Thankyouverymuch -<b>ThisisacooltutorialforusThisisacooltutorialforus</b>
I liked this blog. This is a good blog for beginners.
Thankyouverymuch -Thisisacooltutorialforus I liked this blog. This is
a good blog for beginners. Thankyouverymuch -Thisisacooltutorialforus
I liked this blog. This is a good blog for beginners.
Thankyouverymuch -Thisisacooltutorialforus
</p>
</div>
</body>
</html>

Output:

Saturday, 23 July 2016

How to create & use repeat backgrounds on your website

Today I will share how to create repeat backgrounds and use them in your website. It will save some space on your web hosting and also loads the page quickly.

This is the original image:

Crop the above image like this:

The final image will be this:

Code:

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

body {

background: url(hearts.jpg) repeat;

}

.wrapper {

background: #5a5a5a;

width: 600px;

height: 300px;

text-align: center;

display: table;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

box-shadow: 5px 6px 20px rgba(0, 0, 0, 0.9);

}

.inner-wrapper {

display: table-cell;

vertical-align: middle;

position: relative;

border-radius: 5px;

}

input[type="text"] {

border: 0;

outline: none;

padding: 7px;

color: #708090;

font-size: 17px;

letter-spacing: 1px;

}

button[type="submit"] {

padding: 10px;

border: 0;

outline: none;

background-color: #4a4949;

color: #fff;

cursor: pointer;

}

button[type="submit"]:hover {

background-color: #5d6b79;

}

button[type="submit"]:active {

background-color: #3b4650;

}

</style>

</head>

<body>

</button>

</form>

</div>

</body>

</html>

Output:

Friday, 22 July 2016

How to apply different styles to same class name using different html elements

You can use same class name to style differently. Check the code so that you can understand more.

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style>
.heading {
color: pink;
font-size: 20px;
}

span.heading {
color: Orange;
font-size: 50px;
}

div.heading {
color: lightgreen;
font-size: 30px;
}
</style>
</head>
<body>
<span class="heading">Heading-1</span>
<div class="heading">Heading-1</div>
<p class="heading">Heading-1</p>
<span class="heading">Heading-1</span>
</body>
</html>

Output: