Dream Of Code: front end web design

Showing posts with label front end web design. Show all posts

Friday, 6 November 2015

CSS animation for Venn Diagram representation

<html >
<head>
<style>
.Lower_layer {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.Upper_layer {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
body{background-color: white;}
.circle-container {
position: relative;
background-color:blue;
width: 35vw;
height: 35vw;
padding: 0;
border-radius: 50%;
list-style: none;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
margin: 13vw auto 0;
transition: 0.5s all;
transition-delay:0.5s;
}
.circle-container:hover{
background-color:red;
transition: 0.5s all;
position: relative;
width: 12vw;
height: 12vw;
padding: 0;
border-radius: 50%;
list-style: none;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}

.circle-container > * {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 6vw;
height: 6vw;
margin: -4.1vw;
}
.circle-container > *:nth-of-type(1) {

}
.circle-container > *:nth-of-type(2) {
}
.circle-container > *:nth-of-type(3) {
}
.circle-container > *:nth-of-type(4) {
}
.circle-container > *:nth-of-type(5) {
}
.circle-container > *:nth-of-type(6) {
}
.circle-container > *:nth-of-type(7) {
}
.circle-container > *:nth-of-type(8) {

}
.circle-container a {
display: block;
text-align: center;
color:black;
text-decoration: none;
border-radius: 50%;
position:absolute;
display:block;
margin: auto;
height:8vw;
width:8vw;
border-radius:50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background-color:orange;

}
.circle-container a:hover{

background-color:red;
-webkit-animation: fly4 0.5s 0s ease both;
animation: fly4 .5s 0s ease both;
}

@keyframes fly4 {
from {
transform: rotate3d(0,00,0,1080deg);
}
}
@-webkit-keyframes fly4 {
from {
-webkit-transform:rotate3d(0,000,0,0deg);
}
}
</style>
<script>
$('.circle-container').children().each(function() {
$(this).addClass('item'+($(this).index() + 1));
});
</script>

</head>
<body >
<div id="Venn">
<ul class='circle-container' >
<div style="position:absolute;margin-top:-1.75vw;margin-left:-3.75vw;font-size:2vw;text-align:center;vertical-align:middle;
">Full(100%)</div>

<li style=" font-size:1vw;
"><a style="height:10vw;width:10vw;
line-height:10vw;
-moz-transform: rotate(0deg) translate(11vw) ;
-ms-transform: rotate(0deg) translate(11vw) ;
-webkit-transform: rotate(0deg) translate(11vw) ;
transform: rotate(0deg) translate(11vw);
"
href = "javascript:void(0)" onclick = "myfuncstart1();" >Item1(24%)</a></li>

<li style="font-size:1vw"><a style="height:5vw;
width:5vw;
line-height:5vw;
-moz-transform: rotate(45deg) translate(14.5vw) rotate(-45deg);
-ms-transform: rotate(45deg) translate(14.5vw) rotate(-45deg);
-webkit-transform: rotate(45deg) translate(14.5vw) rotate(-45deg);
transform: rotate(45deg) translate(14.5vw) rotate(-45deg);"
href = "javascript:void(0)" onclick = "myfuncstart2();">Item2(10%)</a></li>

<li style="font-size:1vw"><a style="height:8vw;width:8vw;
line-height:8vw;
-moz-transform: rotate(90deg) translateX(13vw) rotate(-90deg);
-ms-transform: rotate(90deg) translateX(13vw) rotate(-90deg);
-webkit-transform: rotate(90deg) translateX(13vw) rotate(-90deg);
transform: rotate(90deg) translateX(13vw) rotate(-90deg);"
href = "javascript:void(0)" onclick = "myfuncstart3();">Item3(12%)</a></li>

<li style="font-size:1vw"><a style="
height:8vw;width:8vw;line-height:8vw;
-moz-transform: rotate(135deg) translate(12.5vw) rotate(-135deg);
-ms-transform: rotate(135deg) translate(12.5vw) rotate(-135deg);
-webkit-transform: rotate(135deg) translate(12.5vw) rotate(-135deg);
transform: rotate(135deg) translate(12.5vw) rotate(-135deg);"
href = "javascript:void(0)" onclick = "myfuncstart4();">Item4(12%)</a></li>

<li style="font-size:1vw"><a style="
height:7vw;width:7vw;
line-height:7vw;
-moz-transform: rotate(180deg) translate(12.5vw) rotate(-180deg);
-ms-transform: rotate(180deg) translate(12.5vw) rotate(-180deg);
-webkit-transform: rotate(180deg) translate(12.5vw) rotate(-180deg);
transform: rotate(180deg) translate(12.5vw) rotate(-180deg);"
href = "javascript:void(0)" onclick = "myfuncstart5();" >Item5(11%)</a></li>

<li style="font-size:1vw"><a style="
line-height:5vw;
height:5vw;width:5vw;
-moz-transform: rotate(225deg) translate(9.5vw) rotate(-225deg);
-ms-transform: rotate(225deg) translate(9.5vw) rotate(-225deg);
-webkit-transform: rotate(225deg) translate(9.5vw) rotate(-225deg);
transform: rotate(225deg) translate(9.5vw) rotate(-225deg);"
href = "javascript:void(0)" onclick = "myfuncstart6();">Item6(10%)</a></li>
<li style="font-size:1vw">
<a style="
height:5vw;width:5vw;
line-height:5vw;
-moz-transform: rotate(270deg) translate(9vw) rotate(-270deg);
-ms-transform: rotate(270deg) translate(9vw) rotate(-270deg);
-webkit-transform: rotate(270deg) translate(9vw) rotate(-270deg);
transform: rotate(270deg) translate(9vw) rotate(-270deg);"
href = "javascript:void(0)" onclick = "myfuncstart7();" >Item7(10%)</a></li>
<li style="font-size:1vw">

<a style="
height:6vw;width:6vw;
line-height:6vw;
-moz-transform: rotate(315deg) translate(12vw) rotate(-315deg);
-ms-transform: rotate(315deg) translate(12vw) rotate(-315deg);
-webkit-transform: rotate(315deg) translate(12vw) rotate(-315deg);
transform: rotate(315deg) translate(12vw) rotate(-315deg);"
href = "javascript:void(0)" onclick = "myfuncstart8();" >Item8(11%)</a></li>

</ul>
</div>



<div id="1" class="Upper_layer">

<script >

function myfuncstart1(){

document.getElementById('1').style.display='block';
document.getElementById('fade').style.display='block'

}

</script>
<center>Information related to Item1</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('1').style.display='none';document.getElementById('fade').style.display='none'">
<center> Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>
<div id="2" class="Upper_layer">
<script id="field">
{
var options = {};
$('#field').datepicker(options).focus();

}
function myfuncstart2(){

document.getElementById('2').style.display='block';
document.getElementById('fade').style.display='block'

}

</script>
<center>Information related to Item2</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('2').style.display='none';document.getElementById('fade').style.display='none'">
<center>Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="3" class="Upper_layer">
<script id="field">
{
var options = {};
$('#field').datepicker(options).focus();

}
function myfuncstart3(){

document.getElementById('3').style.display='block';
document.getElementById('fade').style.display='block'

}

</script>
<center>Information related to Item3</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('3').style.display='none';document.getElementById('fade').style.display='none'">
<center>Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="4" class="Upper_layer">
<script id="field">
{
var options = {};
$('#field').datepicker(options).focus();

}
function myfuncstart4(){

document.getElementById('4').style.display='block';
document.getElementById('fade').style.display='block'

}

</script>
<center>Information related to Item4</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('4').style.display='none';document.getElementById('fade').style.display='none'">
<center>Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="5" class="Upper_layer">
<script id="field">
{
var options = {};
$('#field').datepicker(options).focus();

}
function myfuncstart5(){

document.getElementById('5').style.display='block';
document.getElementById('fade').style.display='block'

}

</script>
<center>Information related to Item5</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('5').style.display='none';document.getElementById('fade').style.display='none'">
<center> Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="6" class="Upper_layer">
<script id="field">
{
var options = {};
$('#field').datepicker(options).focus();

}
function myfuncstart6(){

document.getElementById('6').style.display='block';
document.getElementById('fade').style.display='block'

}

</script>
<center>Information related to Item6</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('6').style.display='none';document.getElementById('fade').style.display='none'">
<center> Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="7" class="Upper_layer">
<script id="field">
{
var options = {};
$('#field').datepicker(options).focus();

}
function myfuncstart7(){

document.getElementById('7').style.display='block';
document.getElementById('fade').style.display='block'

}

</script>
<center>Information related to Item7</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('7').style.display='none';document.getElementById('fade').style.display='none'">
<center> Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="8" class="Upper_layer">
<script id="field">
{
var options = {};
$('#field').datepicker(options).focus();

}
function myfuncstart8(){

document.getElementById('8').style.display='block';
document.getElementById('fade').style.display='block'

}

</script>
<center>Information related to Item8</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('8').style.display='none';document.getElementById('fade').style.display='none'">
<center>Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>

</div>
</body>
</html>

Thursday, 5 November 2015

Sample Newspaper website template 2.0 (Using amazing 3D animations)

<html>

<head>

<style>

body{

background-color: #00bcd4;

}

.card{

float:left;

width: 10%;

height:10%;

padding-top:3%;

margin:2%;

box-shadow: 0 1px 2px black;

background: white;

border-radius: 5px;

text-align:center;

-webkit-animation: fly4 2s 0s both;

animation: fly4 2s 0s ease both;

}

.card:hover {

cursor: pointer;

float:left;

width: 10%;

height:10%;

padding-top:3%;

margin:2%;

box-shadow: 0 1px 2px black;

background: red;

border-radius: 5px;

text-align:center;

animation:show 1s 0s ease both;

-webkit-animation:show 0.125s 0s ease both;

}

.card1{

float:right;

width: 10%;

height:10%;

padding-top:3%;

margin:2%;

box-shadow: 0 1px 2px black;

background: white;

border-radius: 5px;

text-align:center;

-webkit-animation: fly4 2s 0s both;

animation: fly4 2s 0s ease both;

}

.card1:hover {

cursor: pointer;

float:right;

width: 10%;

height:10%;

padding-top:3%;

margin:2%;

box-shadow: 0 1px 2px black;

background: red;

border-radius: 5px;

text-align:center;

animation:show 1s 0s ease both;

-webkit-animation:show 0.125s 0s ease both;

}

.card2{

float:left;

width: 30%;

height:10%;

padding-top:3%;

margin:2%;

box-shadow: 0 1px 2px black;

background: white;

border-radius: 5px;

-webkit-animation: fly 1s 1s both;

animation: fly 1s 1s ease both;

text-align:center;

}

.card3{

text-align:center;

float:left;

width: 10%;

height:10%;

padding-top:3%;

margin:2%;

box-shadow: 0 1px 2px black;

background: white;

border-radius: 5px;

-webkit-animation: fly4 1s 1s both;

animation: fly4 1s 1s ease both;

}

.card3{

cursor: pointer;

}

.card4{

float:left;

width: 45%;

height:60%;

padding-top:3%;

margin:2%;

box-shadow: 0 1px 2px black;

background: white;

border-radius: 5px;

-webkit-animation: fly5 1.5s 1.5s both;

animation: fly5 1.5s 1.5s ease both;

text-align:center;

}

text-decoration:none;

text-color:black;

color:black;

}

@keyframes fly {

from {

transform: translateY(80em) rotate(-1620deg) scale(2,5);

opacity:0;

}

@-webkit-keyframes fly {

from {

-webkit-transform: translateY(80em) rotate(-1620deg) scale(2,5);

opacity:0;

}

@keyframes fly1 {

from {

transform:translateX(150vw) translateY(80em) rotate(-1620deg) scale(2,5);

opacity:0;

}

@-webkit-keyframes fly1 {

from {

-webkit-transform:translateX(150vw) translateY(80em) rotate(-1620deg) scale(2,5);

opacity:0;

}

@keyframes fly2 {

from {

transform:translateX(-150vw) translateY(80em) rotate(-1620deg) scale(2,5);

opacity:0;

}

@-webkit-keyframes fly2 {

from {

-webkit-transform:translateX(-150vw) translateY(80em) rotate(-1620deg) scale(2,5);

opacity:0;

}

@keyframes fly3 {

from {

transform-origin:50% 50%;

transform: translateY(80em) rotate3d(0,100,0,1080deg) scale(2,5);

opacity:0;

}

@-webkit-keyframes fly3 {

from {

-webkit-transform-origin:50% 50%;

-webkit-transform:translateY(80em) rotate3d(0,100,0,1080deg) scale(2,5);

opacity:0;

}

@keyframes fly4 {

from {

transform: rotate3d(200,100,100,1080deg) scale(2,5);;

opacity:0;

}

@-webkit-keyframes fly4 {

from {

-webkit-transform:rotate3d(200,100,100,1080deg) scale(2,5);

opacity:0;

}

@keyframes fly5 {

from {

transform-origin:50% 50%;

transform: translateY(80em) rotate3d(0,100,0,1080deg);

opacity:0;

}

@-webkit-keyframes fly5 {

from {

-webkit-transform-origin:50% 50%;

-webkit-transform:translateY(80em) rotate3d(0,100,0,1080deg) scale(5,10);

opacity:0;

}

</style>

</head>

<body>

<Strong>Sports</Strong>

</div></a>

<div class="card3" style="-webkit-animation: fly1 1.5s 1s ease both;

animation: fly1 1.5s 1s ease both;

margin-left:7%; ">

<Strong>Prev Article</Strong>

</div>

<Strong>Current Article</Strong>

</div>

<div class="card3" style=" -webkit-animation: fly2 1.5s 1s ease both;

animation: fly2 1.5s 1s ease both;">

<Strong>Next Article</Strong>

</div>

</a>

</div>

</a>

</section>

<Strong>Politics</Strong>

</div>

</a>

News Article

</div>

<Strong>Europe<br>and<br/>Australia</Strong>

</div>

</a>

</section >

<Strong>Current Affairs</Strong>

</div>

</a>

<Strong>America</Strong>

</div>

</a>

</section>

<Strong>Business</Strong>

</div>

</a>

<Strong>World</Strong>

</div>

</a>

</section>

</body>

</html>

Monday, 2 November 2015

Source code to change background color according to Day/Night

//Javascript code to change background color according to day/night.
//We can change background image instead of color as well.

<html>
<head>
<script>
function dayandnight(){
var current = new Date();
var day_night = current.getHours();
if (day_night < 12){
//Day
var bodyColor = document.getElementsByTagName("BODY")[0];
bodyColor.style.backgroundColor = "blue";
document.write("Day");
}
else{
//Night
var bodyColor = document.getElementsByTagName("BODY")[0];
bodyColor.style.backgroundColor = "red";
document.write("Night");
}
}
</script>
</head>
<body>
<script type="text/javascript">
dayandnight();
</script>

</body>
</html>