Showing posts with label css kodlarım. Show all posts
Showing posts with label css kodlarım. Show all posts
Örnek:
HTML Dosyası
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="css.css" rel="stylesheet" />
<script type="text/javascript">
function func() {
var spanProgress = document.getElementById('progressSpan');
progressWidth = "100%";
spanProgress.style.width = progressWidth;
}
</script>
</head>
<body>
<div class="progress efect" >
<span id="progressSpan" style="width: 0%"></span>
</div>
<input type="button" value="progress" onclick="func()" />
</body>
</html>
.progress{
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
border-radius: 5px;
}
.efect{
}
.progress span{
display: inline-block;
height: 100%;
border-radius: 3px;
background-color: #008000;
transition-property: width;
transition-duration: 10s;
}
.efect span{
background-size: 30px 30px;
background-image: linear-gradient(135deg,rgba(255,255,255,.15)25%,
transparent 25%,transparent 50%,
rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent 75%,transparent);
animation: animation-efect 3s linear infinite;
}
@keyframes animation-efect{
0%{
background-position: 0px 0;
}
100%{
background-position: 60px 0;
}
}
CSS position özellikliği ile sayfa içerisindeki öğelerimizi konumlandırabiliriz. Position özelliği üç değer alabilir. Bu değerler; relative, absolute ve fixed'tir. Bu örneğimde ben relative özelliği üzerine bir örnek yaptım.
Fixed özelliği öğeyi sayfa içerisindeki bir alana sabitlemek için kullanılır. Sayfa içerisinde scroll hareket etse bile öğe aynı yerinde sabit kalır.
Örnek:
HTML Dosyası
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="css3.css" rel="stylesheet" />
</head>
<body>
<div id="kapsayici">
<div id="kutu1" class="ortak"></div>
<div id="kutu2" class="ortak"></div>
<div id="kutu3" class="ortak"></div>
</div>
</body>
</html>
body {
margin: 0px;
padding: 0px;
}
.ortak{
width: 50px;
height: 50px;
}
#kapsayici{
width: 200px;
margin: 100px auto;
background-color: #000000;
}
#kutu1{
background-color: blue;
}
#kutu2{
left: 30px;
top: 30px;
position: fixed;
background-color: red;
}
#kutu3{
background-color: green;
}
CSS position özellikliği ile sayfa içerisindeki öğelerimizi konumlandırabiliriz. Position özelliği üç değer alabilir. Bu değerler; relative, absolute ve fixed'tir. Bu örneğimde ben relative özelliği üzerine bir örnek yaptım.
Absolute özelliği öğeyi onu kapsayan ve position:relative özelliğini almış öğeye göre ayarlar. Aksi halde kök elemente (<body>) göre ayarlar.
Örnek:
HTML Dosyası
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="css3.css" rel="stylesheet" />
</head>
<body>
<div id="kapsayici">
<div id="kutu1" class="ortak"></div>
<div id="kutu2" class="ortak"></div>
<div id="kutu3" class="ortak"></div>
</div>
</body>
</html>
CSS Dosyası
body {
margin: 0px;
padding: 0px;
}
.ortak{
width: 50px;
height: 50px;
}
#kapsayici{
width: 200px;
margin: 100px auto;
background-color: #000000;
position: relative;
}
#kutu1{
background-color: blue;
}
#kutu2{
position: absolute;
left: 30px;
top: 20px;
background-color: red;
}
#kutu3{
background-color: green;
}
Ekran Görüntüsü
Not! Kapsayıcı öğenin position:relative özelliğini silerek kırmızı kutunun <body> elementine göre pozisyonunu ayarladığını görebilirsiniz.
Relative özelliği öğeyi yanındaki elemana göre konumlandırır ve bu konumlandırma işleminden diğer elemanlar etkilenmez.
Örnek:
HTML Dosyası
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="css3.css" rel="stylesheet" />
</head>
<body>
<div id="kapsayici">
<div id="kutu1" class="ortak"></div>
<div id="kutu2" class="ortak"></div>
<div id="kutu3" class="ortak"></div>
</div>
</body>
</html>
body {
margin: 0px;
padding: 0px;
}
.ortak{
width: 50px;
height: 50px;
}
#kapsayici{
width: 200px;
margin: 100px auto;
background-color: #000000;
}
#kutu1{
background-color: blue;
}
#kutu2{
position: relative;
left: 20px;
top: 30px;
background-color: red;
}
#kutu3{
background-color: green;
}
Ekran Görüntüsü
