Software Development: 2014

Wednesday, 29 October 2014

How to draw a circle and motion effects using css3

index.html

<body>

<div id="advanced" class="circle"></div>

</body>

CSS

.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;
}

<style>
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}

#advanced {
width: 200px;
height: 200px;

background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);

/* webkit chrome, safari, mobile */
-webkit-animation-name: spin;
-webkit-animation-duration: 3s; /* 3 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

/* mozilla ff */
-moz-animation-name: spin;
-moz-animation-duration: 3s; /* 3 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;

/* microsoft ie */
-ms-animation-name: spin;
-ms-animation-duration: 3s; /* 3 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}

</style>

Friday, 5 September 2014

Multiple Image fade-in fade-out Using Css3

Multiple Image fade-in fade-out using css3 is very useful for making silder or other design.

Here is below example for this.

<style>
@-webkit-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}

@-moz-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}

@-o-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}

@keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}

#ritu {
position:relative;
margin:0 auto;
}
#ritu img {
position:absolute;
left:0;
}

#ritu img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 8s;

-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;

-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;

animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
#ritu img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#ritu img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#ritu img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#ritu img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
</style>

<div id="ritu" class="shadow">
<img src="images/slider1.jpg">
<img src="images/slider2.jpg">
<img src="images/slider3.jpg">
<img src="images/slider3.jpg">
</div>

Thursday, 4 September 2014

reCaptcha system using Google API and PHP and sent mail using php

The reCaptcha system will Prevent you form spam.
It will also enable the audio captcha also. here in this article I will explain how to create a reCaptcha using PHP and Google API.

What you have to do is first you have to get your Public and Private Key of Google reCaptcha API. You can register the API below,

http://www.google.com/recaptcha/intro/index.html

Sign up with your Google account.

Now you will get both Public and Private Key. Replace the $publickey and $privatekey in

index.php

<html>
<head>
<title>Sample Email Form</title>
</head>
<body>

<script>
function checkForm() {
if (document.forms.myphpform.elements['yname'].value.length == 0) {
alert('Please enter a value for the "Name" field');
return false;
}
if (document.forms.myphpform.elements['email'].value.length == 0) {
alert('Please enter a value for the "Email" field');
return false;
}
if (document.forms.myphpform.elements['message'].value.length == 0) {
alert('Please enter a value for the "Message" field');
return false;
}

return true;
}
</script>

<form action="?done=1" method="post" name="myphpform" onSubmit="return checkForm()" >
<table border=0>
<tr>
<td>Your Name:</td> <td><input type="text" name="yname" size="50" maxlength="50" value="" /></td>
</tr>

<tr>
<td>Your Email:</td> <td><input type="text" name="email" size="50" maxlength="50" value="" /></td>
</tr>

<tr>
<td>Message:</td> <td><input type="text" name="message" size="50" maxlength="50" value="" /></td>
</tr>
<tr>
<td>Are you a human being?</td>
<td>
<?php

@require_once('recaptchalib.php');
$publickey = "YOUR-PUBLIC-KEY";
$privatekey = "YOUR-PRIVATE-KEY";

$resp = null;
$error = null;

# are we submitting the page?
if ($_POST["submit"]) {
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);

if ($resp->is_valid) {
$to="you@example.com";
$subject="Feedback from example.com";
$body=" Message via webform:

Name: " .$_POST["yname"] . "\n

Email: " .$_POST["email"] . "\n

Message: " .$_POST["message"] . "\n";
/* send email */
mail($to,$subject,$body);
echo "<p>Email sent!</p>";
exit(1);

} else {
echo "Captcha Wrong";
}
}
echo recaptcha_get_html($publickey, $error);
?>
<td/>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit" value="submit" /></td>
</tr>
</table>
</form>
</body>

</html>

Tuesday, 2 September 2014

How to Show and Hide content using read more... option

This is an example using this you can easily make a read more content file.

Suppose you want to show only some content having read more... option.Then using this code you
can use easily show an hide content as per your need.
Its very simple.
Note For more read more... option, there should be id name will be unique to execute or show your content.
because of js will call values according to your data.

************** style part **************

<style type="text/css">
.more {
display: none;
}
a.showLink, a.hideLink {
text-decoration: none;
padding-left: 8px;
}
a.hideLink {
}
a.showLink:hover, a.hideLink:hover {
}
</style>

************** style part END **************
************** JS part **************
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
************** JS part END **************
************** DIV part **************
<span class="ritu">
<a href="" id="example-show" class="showLink" onclick="showHide('example');return false;">Read More...</a></span>
<div id="example" class="more">
<p>This Is Hidden content</p>
<p><a href="" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Close...</a></p>
</div>

************** DIV part END**************

Friday, 29 August 2014

On Hover Ease-in Ease-out

This is a simple example using css3 for image ease-in ease-out very smoothly.

Index.html

<div style="text-align:center">

<img src="http://fivera.net/wp-content/uploads/2013/08/green.png" alt="fivera" width="200" height="200">

</div>
<style>
img {
height: 200px;
width: 200px;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

img:hover {
width: 220px;
height: 220px;
}

</style>

Fade-In and Fade-Out Images automatically using CSS3

In this tutorial you can see this code is very useful for fade-in and fade-out two images after 9 sec.

you can use it and enjoy the html pages very lightly.

1. Put two images within you image folder

2. Change this image src in this code as per your src
3. run your index.html

Index.html

<style>
@-webkit-keyframes rituFadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}

@-moz-keyframes rituFadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}

@-o-keyframes rituFadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}

@keyframes rituFadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}

#ritu {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#ritu img {
position:absolute;
left:0;
}

#ritu img.top {
-webkit-animation-name: rituFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;

-moz-animation-name: rituFadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 10s;
-moz-animation-direction: alternate;

-o-animation-name: rituFadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 10s;
-o-animation-direction: alternate;

animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

</style>
<div id="ritu" class="shadow">
<img class="bottom" src="image/ritu.jpg">
<img class="top" src="image/ritu1.jpg">
</div>

Wednesday, 27 August 2014

Send Emails Using PHP Scipts

Send Emails Using PHP Scipts is very easy and simple to use.

To Send an email is very simple in php and there are so many ways through wich you can send email.

Here in this code this is very simple and easy example to send email.
Its very useful to clear your concepts.

<?php
$ToEmail = array( "abc@example.com", "abcd@example.com", "abcde@example.com", "info@example.com");//receivers email
$EmailSubject = 'Email Subject here';//Subject of email
$mailheader = "From: ".$_POST["guestemail"]."\r\n".'X-Mailer: PHP/' . phpversion();
$mailheader .= "Reply-To: ".$_POST["guestemail"]."\r\n".'X-Mailer: PHP/' . phpversion();
$mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n".'X-Mailer: PHP/' . phpversion();
$MESSAGE_BODY = "Name: ".$_POST["guestname"]."\n";
$MESSAGE_BODY .= "Email: ".$_POST["guestemail"]."\n";
$MESSAGE_BODY .= "Telephone: ".$_POST["guestelephone"]."\n";
$MESSAGE_BODY .= "Location: ".$_POST["guestloc"]."\n";
$MESSAGE_BODY .= "Message: ".nl2br($_POST["comment"])."\n";
foreach ($ToEmail as $email) {
@mail($email, $EmailSubject, $MESSAGE_BODY, $mailheader);
}
header('location:thanks.html');
};

?>

Thursday, 21 August 2014

Symbols And Characters

ASCII			HTML	HTML
Dec	Hex	Symbol	Number	Name

32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47	20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F	! " # $ % & ' ( ) * + , - . /	! " # $ % & ' ( ) * + , - . /	" &	space exclamation point double quotes number sign dollar sign percent sign ampersand single quote opening parenthesis closing parenthesis asterisk plus sign comma minus sign - hyphen period slash

ASCII			HTML	HTML
Dec	Hex	Symbol	Number	Name

48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63	30 31 32 33 34 35 36 37 38 39 3A 3B 3C 3D 3E 3F	0 1 2 3 4 5 6 7 8 9 : ; < = > ?	0 1 2 3 4 5 6 7 8 9 : ; < = > ?	< >	zero one two three four five six seven eight nine colon semicolon less than sign equal sign greater than sign question mark

ASCII			HTML	HTML
Dec	Hex	Symbol	Number	Name

64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79	40 41 42 43 44 45 46 47 48 49 4A 4B 4C 4D 4E 4F	@ A B C D E F G H I J K L M N O	@ A B C D E F G H I J K L M N O		at symbol

ASCII			HTML	HTML
Dec	Hex	Symbol	Number	Name

80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95	50 51 52 53 54 55 56 57 58 59 5A 5B 5C 5D 5E 5F	P Q R S T U V W X Y Z [ \ ] ^ _	P Q R S T U V W X Y Z [ \ ] ^ _		opening bracket backslash closing bracket caret - circumflex underscore

ASCII			HTML	HTML
Dec	Hex	Symbol	Number	Name

96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111	60 61 62 63 64 65 66 67 68 69 6A 6B 6C 6D 6E 6F	` a b c d e f g h i j k l m n o	` a b c d e f g h i j k l m n o		grave accent

ASCII			HTML	HTML
Dec	Hex	Symbol	Number	Name

112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127	70 71 72 73 74 75 76 77 78 79 7A 7B 7C 7D 7E 7F	p q r s t u v w x y z { \| } ~	p q r s t u v w x y z { \| } ~		opening brace vertical bar closing brace equivalency sign - tilde (not defined in HTML 4 standard)

ASCII			HTML	HTML
Dec	Hex	Symbol	Number	Name

128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143	80 81 82 83 84 85 86 87 88 89 8A 8B 8C 8D 8E 8F				(not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard)

ASCII			HTML	HTML
Dec	Hex	Symbol	Number	Name

144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159	90 91 92 93 94 95 96 97 98 99 9A 9B 9C 9D 9E 9F				(not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard)

ASCII			HTML	HTML
Dec	Hex	Symbol	Number	Name

160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175	A0 A1 A2 A3 A4 A5 A6 A7 A8 A9 AA AB AC AD AE AF	¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯	¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯	¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯	non-breaking space inverted exclamation mark cent sign pound sign currency sign yen sign broken vertical bar section sign spacing diaeresis - umlaut copyright sign feminine ordinal indicator left double angle quotes not sign soft hyphen registered trade mark sign spacing macron - overline

ASCII			HTML	HTML
Dec	Hex	Symbol	Number	Name

176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191	B0 B1 B2 B3 B4 B5 B6 B7 B8 B9 BA BB BC BD BE BF	° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿	° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿	° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿	degree sign plus-or-minus sign superscript two - squared superscript three - cubed acute accent - spacing acute micro sign pilcrow sign - paragraph sign middle dot - Georgian comma spacing cedilla superscript one masculine ordinal indicator right double angle quotes fraction one quarter fraction one half fraction three quarters inverted question mark

ASCII			HTML	HTML
Dec	Hex	Symbol	Number	Name

192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207	C0 C1 C2 C3 C4 C5 C6 C7 C8 C9 CA CB CC CD CE CF	À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï	À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï	À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï	latin capital letter A with grave latin capital letter A with acute latin capital letter A with circumflex latin capital letter A with tilde latin capital letter A with diaeresis latin capital letter A with ring above latin capital letter AE latin capital letter C with cedilla latin capital letter E with grave latin capital letter E with acute latin capital letter E with circumflex latin capital letter E with diaeresis latin capital letter I with grave latin capital letter I with acute latin capital letter I with circumflex latin capital letter I with diaeresis

ASCII			HTML	HTML
Dec	Hex	Symbol	Number	Name

208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223	D0 D1 D2 D3 D4 D5 D6 D7 D8 D9 DA DB DC DD DE DF	Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß	Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß	Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß	latin capital letter ETH latin capital letter N with tilde latin capital letter O with grave latin capital letter O with acute latin capital letter O with circumflex latin capital letter O with tilde latin capital letter O with diaeresis multiplication sign latin capital letter O with slash latin capital letter U with grave latin capital letter U with acute latin capital letter U with circumflex latin capital letter U with diaeresis latin capital letter Y with acute latin capital letter THORN latin small letter sharp s - ess-zed

ASCII			HTML	HTML
Dec	Hex	Symbol	Number	Name

224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239	E0 E1 E2 E3 E4 E5 E6 E7 E8 E9 EA EB EC ED EE EF	à á â ã ä å æ ç è é ê ë ì í î ï	à á â ã ä å æ ç è é ê ë ì í î ï	à á â ã ä å æ ç è é ê ë ì í î ï	latin small letter a with grave latin small letter a with acute latin small letter a with circumflex latin small letter a with tilde latin small letter a with diaeresis latin small letter a with ring above latin small letter ae latin small letter c with cedilla latin small letter e with grave latin small letter e with acute latin small letter e with circumflex latin small letter e with diaeresis latin small letter i with grave latin small letter i with acute latin small letter i with circumflex latin small letter i with diaeresis

ASCII			HTML	HTML
Dec	Hex	Symbol	Number	Name

240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255	F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 FA FB FC FD FE FF	ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ	ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ	ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ	latin small letter eth latin small letter n with tilde latin small letter o with grave latin small letter o with acute latin small letter o with circumflex latin small letter o with tilde latin small letter o with diaeresis division sign latin small letter o with slash latin small letter u with grave latin small letter u with acute latin small letter u with circumflex latin small letter u with diaeresis latin small letter y with acute latin small letter thorn latin small letter y with diaeresis

HTML 4.01, ISO 10646, ISO 8879, Latin extended A and B,
Browser support: Internet Explorer > 4, Netscape > 4

			HTML	HTML
Dec	Hex	Symbol	Number	Name

338 339 352 353 376 402	152 153 160 161 178 192	Œ œ Š š Ÿ ƒ	Œ œ Š š Ÿ ƒ		latin capital letter OE latin small letter oe latin capital letter S with caron latin small letter s with caron latin capital letter Y with diaeresis latin small f with hook - function

			HTML	HTML
Dec	Hex	Symbol	Number	Name

8211 8212 8216 8217 8218 8220 8221 8222 8224 8225 8226 8230 8240 8364 8482	2013 2014 2018 2019 201A 201C 201D 201E 2020 2021 2022 2026 2030 20AC 2122	– — ‘ ’ ‚ “ ” „ † ‡ • … ‰ € ™	– — ‘ ’ ‚ “ ” „ † ‡ • … ‰ € ™	€	en dash em dash left single quotation mark right single quotation mark single low-9 quotation mark left double quotation mark right double quotation mark double low-9 quotation mark dagger double dagger bullet horizontal ellipsis per thousand sign euro sign trade mark sign