Latające elementy podczas zmiany szerokości ekranu

pytanie zadane 11 marca 2016 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

Jak wykonać kodzik css by skalowanie przechodziło płynnie z max do minimalnego (i vice versa) Elementy też podczas przesuwania straszanie skaczą gdzie im się podoba.  :)  




<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>

 <link rel="stylesheet" type="text/css"  href="index.css" />
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
 
</head>
<body>
<!-- Start your code here -->

<div class="top">
	<div class="site1">
	     <div class="nazwa">HTML5 & <span class="css"> CSS3</class></div>
	     <div class="nazwa1">designed by <span class="css1">Dariusz Hozer</class></div>
	     <div class="foto"></div>
		 
	</div>
	
	
	
	<div class="site2"></div>
	<div class="site3"></div>
	<div class="site4"></div>
	<div class="site5"></div>
</div>

div.top{
	
	max-width:100%;
	height:auto;
	width:auto;
	
	
	
}


/*początek 1 strony*/






div.site1{
	
	background-image:url(blue.png);
	background-size:100% 100%;
	height:1080px;
	
	
}


div.nazwa{
	
	font-family: Fantasy;
	word-spacing: 20px;
	letter-spacing:5px;
	font-size:140px;
	font-weight:normal;
	color:white;
	position:relative;
	top:31%;
	left:28%;
	text-shadow:2px 4px  black;
}




 span.css{
	 color:	#1E90FF;
	 
	 
	 
 }



div.nazwa1{
	
	
	font-family: Fantasy;
	font-size:28.5px;
	font-weight:normal;
	color:	#F8F8FF;
    float:right;
	margin-top:15%;
	margin-right:29.3%;
	
	text-shadow:2px 3px black;
	
}


@media (max-width: 1000px ) 
{
div.nazwa
       {
    font-size: 5em; 
	top:31%;
	left:5%;
	
	   }
	   

	
div.nazwa1
       {
    font-size: 1.065em; 
	position:relative;
	top:21.5%;
	left:23%;
	
	   }
	     
}

 span.css1{
	 color:#1E90FF	;
	 
	 
	 
 }
div.foto{
	
	background-image:url(darek.jpg);
	background-size:100% 100%;
	position:absolute;
	top:13.2cm;
	right:29.4%;
	width:155px;
	height:220px;
	opacity:0;
	transition:1s;
	
	
}

.foto:hover
{
	opacity:1;
	border: 0.9px solid #1E90FF;
    border-radius: 10px;
	position:absolute;
	top:13.2cm;
	right:29.4%;
	width:155px;
	height:220px;
	width:155px;
	height:220px;
	
	
}
@media (max-width: 1000px )
{
	div.foto{
	top:29.2%;	
	width:95px;
	height:150px;
	left: 78.5%;	
		
		
		
	}
	.foto:hover
{
	opacity:1;
	 border: 0.9px solid #1E90FF;
    border-radius: 10px;
	position:relative;
	top:29.2%;	
	width:95px;
	height:150px;
	left: 78.5%;	
	
}
	
	
}






/*koniec 1 strony*/




div.site2{
	
	background-color:green;
	height:1080px;
	
}

div.site3{
	
	background-color:blue;
	height:1080px;	
}


div.site4{
	
	background-color:red;
	height:1080px;	
}
div.site5{
	
	background-color:grey;
	height:1080px;	
}

1 odpowiedź

odpowiedź 12 marca 2016 przez xSvilen Mądrala (5,740 p.)

#jakiśdiv{
   transition: 0.5s;
}

#jakiśdiv:hover{
   transition: 0.5s;
}

komentarz 12 marca 2016 przez DariuszH Gaduła (3,100 p.)

Chodziło mi o stronę :) gdy jest otworzona maksymalnie na całym oknie przeglądarki jest ok, gdy jest minimalnie jest ok ale w pośrodku podczas powiększania lub zmniejszania okna przeglądarki elementy latają sobie gdzie im się podoba.

maxymalne