<!DOCTYPE html>
<html>
<head>
<title>Zamanlı Popup Afiş Reklam Alanı</title>
<style>
/*<![CDATA[*/
.is-hide{
display:none;
visibility:hidden;
}
.popup-box{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
z-index:3
}
.popup-box-content{
width:800px;
height:450px;
display:block;
position:absolute;
top:50%;
left:50%;
border-radius:3px;
margin:-225px 0 0 -420px;
box-shadow:0 3px 20px 0 rgba(0,0,0,.5);
z-index:2
}
.popup-content{
background:#fff;
display:block;
width:100%;
height:100%;
border-radius:3px;
overflow:hidden
}
.popup-overlay{
background:#ff5722;
position:absolute;
top:0;
left:0;
bottom:0;
width:100%;
z-index:1
}
.popup-box-close-button {
background: #fff;
position: absolute;
width:2em;
height:2em;
line-height:2em;
text-align: center;
top:-1em;
right: -1em;
box-shadow: 0 -1px 1px 0 rgba(0,0,0,.2);
border: none;
border-radius: 50%;
cursor:pointer;
padding:0;
outline:none
}
.popup-box-close-button svg{
vertical-align:middle
}
.popup-content img{
display:block;
width:100%;
height:100%;
border-radius:3px;
}
.popup-flow-box{
position:relative;
overflow:hidden
}
@media screen and (max-width:800px){
.popup-box-content{
width:90%;
height:auto;
top:20%;
border-radius:3px;
margin:0 0 0 -45%
}
.popup-content img{
border-radius:3px;
height:auto
}
}
/*]]>*/
</style>
</head>
<body>
<div class='popup-box is-hide' id='popup-box'>
<div aria-label='Close' class="popup-overlay" onclick='document.getElementById("popup-box").style.display="none";removeClassonBody();' role="button" tabindex="0"></div>
<div class='popup-box-content'>
<a href='https://www.arlinadesign.com/2019/05/blogger-popup-banner-timeout.html' rel='noopener noreferrer' target='_blank' title='CSS ve Javascript Kodu ile Zamanlı Popup Afiş Reklam Alanı Oluşturma'>
<div class='popup-content'>
<img alt='CSS ve Javascript Kodu ile Zamanlı Popup Afiş Reklam Alanı Oluşturma' height='318' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzPFSAwHP5shR7LovpKwtRy0asC8STwGiMxoHkJ8EU_vBkLs1yP95OQUSad-n6VK6d954OE5n147b7lcfXWvzXrOXPngqmUg__7C4CGc18kNNymMPkoNMAgHgA-YcWZBWup5PSM1WHfJA/s1600/ramazan.webp' title='CSS ve Javascript Kodu ile Zamanlı Popup Afiş Reklam Alanı Oluşturma' width='635'
/>
</div>
</a>
<button aria-label='Close' class='popup-box-close-button' onclick='document.getElementById("popup-box").style.display="none";removeClassonBody();'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'></path></svg></button>
</div>
</div>
<script>
//<![CDATA[
setTimeout(function(){
document.getElementById('popup-box').classList.remove('is-hide');
document.body.className+=" popup-flow-box"
}, 4800);
function removeClassonBody(){var element=document.body;element.className=element.className.replace(/\bpopup-flow-box\b/g,"")}
//]]>
</script>
</body>
</html>
CSS3 etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
CSS3 etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Uygulama İndirme Butonları (APP Store - Play Store)
Buton CSS3 HTML<!DOCTYPE html>
<html>
<head>
<title>Uygulama İndirme Butonları (APP Store - Play Store)</title>
<style type="text/css">
/*<![CDATA[*/
.app_down_btn {
margin:16px 0 16px;
text-align:center
}
.app_down_btn a {
padding:10px 20px;
border-radius:25px;
text-align:center;
background:#e9e9e9;
margin:0 5px 0 5px;
transition:all 150ms ease-out;
border-bottom:2px solid #d15241;
display:inline-block
}
a.play_store_btn:after{
content:'';
background:no-repeat url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG7zvrIf1N7mDXNnBGMYy4epERQPTP4i8ny8Pgn6FuVSfmX27xm5MTI__-mk04YmTXHZV7bnivc0yXvKz0citqj-JSjp1kzyh60acuoTCJK0PRMRBNu9zcEAXjiD64hRNSBIhgQdH5z3E/s1600/googleplay.png);
display:inline-block;
background-size:90px 20px;
width:90px;
height:20px;
margin:0;
vertical-align:middle
}
a.app_store_btn:after{
content:'';
background:no-repeat url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcOKoMHxveDYnFgBiXeR13fhvrCuXpDio65yXiTh8iKIOVZ5DPfYIleNGAJ6Jv56RO1NypkxsAKJcLMB8vIwT9AM2fVPu5nnZM8WOPc3X_7VUaWvNv0TUFGuNSg9QW1nt5xykcow2F8oU/s1600/appstore.png);
display:inline-block;
background-size:90px 20px;
width:90px;
height:20px;
margin:0;
vertical-align:middle
}
.app_down_btn a:hover {
background:#f9f9f9;
border-bottom:2px solid #eee
}
/*]]>*/
</style>
</head>
<body>
<div class="app_down_btn">
<a class="play_store_btn" href="#" target="_blank" title="Play Store" rel="nofollow noopener"></a>
<a class="app_store_btn" href="#" target="_blank" title="APP Store" rel="nofollow noopener"></a>
</div>
</body>
</html>
Blogger Yayınlarında Başlık Listesi veya İçindekiler Tablosu Oluşturma
CSS3 HTML5 jQuery<!DOCTYPE html>
<html>
<head>
<title>Blogger Yayınlarında Başlık Listesi veya İçindekiler Tablosu Oluşturma</title>
<style type='text/css'>
/*<![CDATA[*/
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {font-family:'Fira Sans Condensed', sans-serif;margin:16px;line-height:1.5}
a {color:#000;cursor:pointer;text-decoration:none}
a:hover {color:#2196f3;cursor:pointer;text-decoration:none}
h4{font-size:18px;}
#light-contents{background:#fff0da;padding:10px 20px;border-radius:3px}
#contents_list{font-weight:700;cursor:pointer;margin:10px 0}
#contents_list:focus,#contents li:focus,.back_contents:focus{outline:none}
#contents_list svg{width:18px;height:18px;fill:#000;vertical-align:middle}
#contents li{background:transparent;margin:.2em 0 .2em 1em;cursor:pointer}
#contents ol li:before{left:-2em}
#contents li a{color:#000}
#contents li a:hover{color:#1e80ff}
#contents{display:block}
.back_contents{background:#2196F3;color:#fff;display:inline-block;text-align:right;float:right;margin:15px auto;font-size:14px;padding:2px 12px;cursor:pointer;border-radius:99em;transition:all .3s}
.back_contents:hover{background:#2d3435;color:#fff}
:target::before{content:';';display:block;height:40px;margin-top:-40px;visibility:hidden}
/*]]>*/
</style>
</head>
<body>
<div class='post-body'>
<div id="light-contents">
<div id="contents_list" onclick="if (document.getElementById('contents').style.display === 'none') { document.getElementById('contents').style.display = 'block'; } else { document.getElementById('contents').style.display = 'none'; }" role="button" tabindex="0">İçindekiler <svg viewBox="0 0 24 24"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="contents">
<ol>
<li><a href="#article_head_1" title="Çocuklarda Mahremiyet Eğitiminde Nelere Dikkat Edilmeli?">Çocuklarda Mahremiyet Eğitiminde Nelere Dikkat Edilmeli?</a></li>
<li><a href="#article_head_2" title="Çocuğunuzun Konuşma Becerisini Geliştirecek Öneriler">Çocuğunuzun Konuşma Becerisini Geliştirecek Öneriler</a></li>
</ol>
</div>
</div>
<br />
<h4 id="article_head_1">Çocuklarda Mahremiyet Eğitiminde Nelere Dikkat Edilmeli?</h4>
<p>Çocukların gelişim sürecinde mahremiyet eğitimi önemli bir yer tutar. Çocuğun kendisinin, vücudunun ve özel alanlarının farkına varması, hem kendisinin sınırlarını hem de diğer insanların sınırlarının farkına varmasını sağlar. Bu aynı zamanda, çocuğun kendisini zihnen ve bedenen koruması açısından da oldukça önemlidir.</p>
<ul>
<li>Küçük yaştaki çocuklara mahremiyet eğitimi verilirken ayıp, yasak, günah gibi kelimeler yerine ‘mahrem’ kavramının kullanılması çocukların duygusal gelişimi için önemlidir.</li><li>Çocuklara mahremiyet eğitimi, korku ve endişe yaratmadan, günlük yaşam içinde doğal olarak verilmelidir.</li><li>Yetişkinlerin 4 yaşından itibaren çocuğa dokunacağı durumlarda ona nedenini açıklayarak yaklaşması, çocuğun kendi beden imgesinin oluşmasına yardımcı olur.</li><li>Ebeveynlerin sevmek, öpmek, yıkamak gibi sebeplerle çocuğa isteği dışında, zorlayıcı yaklaşımlarının onun korunma reflekslerini zedeleyeceği unutulmamalıdır.</li><li>Çocuklara vücutlarındaki mahrem alanlar tanıtılmalıdır. Bu alanlara sadece ihtiyaç durumlarında anne, nene, dadı gibi birincil bakım vericilerin yaklaşabileceği 2 yaşından itibaren anlatılmalıdır.</li><li>Çocuklara erken yaşlarda vücut temizliği ve giyinme gibi öz bakım becerileri kazandırılarak mahremiyetlerini korumaları kolaylaştırılmalıdır.</li><li>Çocuklara ‘mahrem’ bölgeleri ile ilgili şaka yapmaktan ve onları teşhire teşvikten kaçınılmalıdır.</li><li>Ebeveynler veya akrabalar çocukları severken ya da onlarla oynarken orantısız güç kullanmamalıdır.</li><li>Çocuklar özellikle dış alanlarda çıplak kalmamalı, giyinme ve mahremiyet ilişkisi neden ve sonuçlarıyla çocuğa yaşına uygun bir dille anlatılmalıdır.</li><li>Ebeveynler çocuklarının yanında kendi mahremiyetlerini koruyarak örnek olmalılardır.</li><li>Çocukların odaları gibi kişisel alanlarına girerken haber verilerek rızaları gözetilmelidir.</li><li>Çocuklara başkalarının odalarına girerken izin almaları gerektiği öğretilmelidir.</li><li>Kız ve erkek kardeşlerin ilkokul çağından itibaren kişisel alanlarının olması teşvik edilmelidir.</li><li>Kıyafet ve aksesuarların çocukların yaşlarına ve cinsiyetlerine uygun olmasına, giysilerinin mahrem bölgelerini ön plana çıkarmamasına dikkat edilmelidir.</li><li>Çocuklara ebeveynlerinden izinsiz olarak tanıdığı veya tanımadığı kişilerle bir yere gitmemeleri ve onlardan bir şey almamaları gerektiği öğretilmelidir.</li><li>Çocuklara mahremiyetlerinin ihlal edildiği durumlarda tepki vermeleri, bağırmaları, kaçmaları veya yardım istemeleri gerektiği öğretilmelidir.</li><li>Çocuklar mahremiyetlerine yönelik kendilerini rahatsız hissettikleri durumları ebeveynleriyle veya güvendikleri bir yetişkinle paylaşmaya teşvik edilmelidir.</li><li>Çocukların izledikleri TV programları ve videolar, okudukları yayınlar, ziyaret ettikleri web siteleri ile kullandıkları sosyal medya platformları kontrol edilmelidir. Farklı mecralarda karşılaşabilecekleri mahremiyet ihlalleriyle ilgili bilgilendirilmelidirler.</li><li>Ebeveynler çocuklarının yer aldığı görüntüleri internette herkesin erişimine açık şekilde paylaşmamalıdır.</li><li>Çocuklara internette fotoğraf, isim-soyad, adres, konum gibi özel bilgileri paylaşmamaları gerektiği öğretilmelidir.</li><li>Çocuklara telefon numaranız, adresiniz ile 155 Polis İmdat, 156 Jandarma, 112 Acil gibi önemli numaralar mutlaka öğretilmelidir.</li>
</ul>
<div class="back_contents" onclick="document.getElementById('contents_list').scrollIntoView(true);" role="button" tabindex="0">İçerik Listesine Dön</div>
<br /><br />
<h4 id="article_head_2">Çocuğunuzun Konuşma Becerisini Geliştirecek Öneriler</h4>
<p>Başarılı bir iletişimin, duygu ve düşünceleri net ifade etmenin yolu güzel ve etkili konuşmaktan geçer. Güzel ve etkili konuşmak için temel olarak seslerin doğru çıkarılması, ifadelerin en kolay şekilde ve doğrudan anlaşılabilir olması gereklidir. Peki nasıl güzel konuşulur? Çocukların diksiyon bozuklukları nasıl giderilir?</p>
<b>Çocuğa güzel konuşmanın önemi anlatılmalı</b><br />
<br />
Öncelikle çocukları güzel konuşmanın, etkili bir iletişim için çok önemli olduğuna ikna etmeliyiz. Bu şekilde, duygularımızı ve düşüncelerimizi en kolay ve en etkili şekilde ifade edebileceğimizi anlatmalıyız. Daha küçük yaştaki çocuklar için de bunu günlük hayatta kullandığımız konuşmaya dikkat ederek, ona örnek olarak yapabiliriz.<br />
<br />
<b>Televizyon ve dijital oyunlar dil gelişimini etkiliyor</b><br />
<br />
Televizyon izlemenin ve dijital oyunlarla vakit geçirmenin dil gelişimine olumlu ve olumsuz etkileri olduğu biliniyor. Uzun süre ekran karşısında kalan çocuk, güçlü bir izleme alışkanlığını elde ediyor. Bu durum beraberinde, çocuğun dil gelişimiyle ilgili bir takım olumsuzlukları, televizyon veya tabletle tek yönlü iletişim kurmaktan kaynaklanan çok yönlü iletişimde zayıflık, göz teması kurma süresinin azalması, konuşma bozukluğu, sözel ifade edici dil becerisinin zayıflaması, cümle kuramama, cümle tamamlayamama, seslenildiğinde tepki vermeme, duygusal iletişim kuramama olarak sıralayabiliriz.<br />
<br />
Bunun yanında televizyon ve oyunlar, belirli bir süre konularak, ebeveyn gözetiminde ve içeriğinde seçici olunduğu sürece, çocuğun dil gelişimine olumlu katkıda bulunabilir. Çocuk, temiz ve duru bir Türkçe ile hazırlanan, diyaloğa teşvik eden, çok yönlü iletişimi güçlendiren içeriklerle karşılaştığında, dil ve motor becerilerini geliştirebilir.<br />
<br />
<b>Çocukla göz teması kurmak önemli</b><br />
<br />
Güzel ve etkili konuşmada en önemli kural, konuştuğumuz kişiyle göz teması kurmaktır. Göz teması, verilen mesajı güçlendirir ve odağın tek noktada toplanmasına yardımcı olur. Çocukla iletişim kurarken göz temasına mutlaka dikkat edilmeli. Ayrıca söylediklerimizi jest ve mimiklerimizle destekleyebilmeliyiz.<br />
<br />
<b>Güzel konuşma egzersizleri için pratik uygulamalar</b><br />
<br />
Çocuklar bazı sesleri çıkarmakta zorlanabilir. Bu tarz durumlarda ağız ve çene kaslarını geliştirmek için şarkı söylemek, tekerlemeler ve sözcük çalışmaları etkili sonuçlar verebilir. Yine ağız ve çene kaslarını geliştirmek küçük egzersizler de yapılabilir. Örneğin: Yatay bir şekilde, ısırılır gibi iki diş arasına alınan temiz bir çubuk veya kalemle birlikte tekerleme veya şarkı söylenebilir.<br />
<br />
Bu durum başta çocuk için zor olacaktır. Hatta ağız kaslarını yoracaktır ancak kalemle yapılan birkaç alıştırmadan sonra o tekerlemeyi çok daha rahat okuyacaktır. Yine çocuğumuzda dudak tembelliği olabilir, yani bazı harfleri yutarak okuma sorunuyla karşılaşmış olabiliriz. Bunu aşmak için çocuğa sesli şiir, masal, fıkra okutmalıyız ve onun okuduğu her metinde onu övmeli, teşvik etmeliyiz. Sesli okuma çalışmaları bu tip sorunları aşmakta başat araçtır. Eğer çocuğumuz bir metin okurken kelimeleri yutuyorsa ona acele etmemesi gerektiğini hatırlatmalıyız. Onu sabırla dinlemeliyiz.<br />
<br />
<b>Evde oynanabilecek konuşma egzersizi oyunları</b><br />
<br />
Ebeveynler, evde oynayacakları aşağıdaki gibi konuşma egzersizi oyunlarıyla güzel konuşmayı geliştirmeyi ödev ve sorumluluk noktasından uzaklaştırıp eğlenceli hale getirebilir.<br />
<br />
<b>Yanlışımı düzelt</b><br />
<br />
Bunun için evde çocuğunuzun sevdiği bir kitabı önce güzel konuşma kurallarına aykırı bir şekilde okuyup, çocuğunuzun yanlışları bulmasını sağlayabilirsiniz. Bu hem aranızdaki ilişkiyi güçlendirecek hem de keyifli zaman geçirmenizi sağlayacaktır. Ayrıca oyun sonunda çocuk yaptığı doğru ve yanlışları görebilecektir.<br />
<br />
<b>Gözüm sende</b><br />
<br />
Çocuğunuzla göz teması kurmadan, jest ve mimiklerinizi kullanmadan onun ilgisini çekebilecek bir konuda konuşma yapabilirsiniz. Çocuğunuz buna şaşıracak ve kendiliğinden yanlışları fark edecektir. Bu yanlış gösterimden sonra doğrusunun nasıl olması gerektiğini çocuğunuzdan göstermesini isteyebilirsiniz. Sevdiği bir filmi, okuduğu kitabı, bir gözlemini vb. anlattırabilirsiniz.<br />
<br />
<b>Anlat dinlet</b><br />
<br />
Güzel konuşmada en önemli noktalardan birinin dinleme olduğunu kavratmak için çocuğunuzla eğlenceli başka bir etkinlik daha yapabilirsiniz. Bunun için çocuğunuzdan gün içinde yaptıklarını size kurallara uygun bir şey anlatmasını isteyin. O anlatırken siz onu dinlemeyin ve ikide bir sözünü kesin. Çocuğunuz buna hem gülecek hem de sinirlenecektir. Kendiliğinden bunun yanlış olduğunu görecek ve sosyal hayatında da buna dikkat edecektir.<br />
<br />
<b>Tekerleme</b><br />
<br />
Tekerlemeleri güzel konuşma etkinliklerinize katabilirsiniz. Örneğin akşam yemeği için üç tekerleme belirleyip gün içinde çocuğunuzdan bu tekerlemeleri alıştırma yapmasını isteyebilirsiniz. Akşam olunca tekerlemeleri takılmadan ve düzgünce söyleyebildiği takdirde ona küçük bir ödül verebilirsiniz.<br />
<br />
<b>Unutmayın: En güzel yöntem örnek olmaktır</b><br />
<br />
İyi veya kötü her davranışımızla çocuklarımıza örnek oluruz. Evde, dışarıda yani her yerde bizler güzel konuşmaya dikkat edersek çocuğumuz da gördüğünü yapacaktır.
<br />
<div class="back_contents" onclick="document.getElementById('contents_list').scrollIntoView(true);" role="button" tabindex="0">İçerik Listesine Dön</div>
<br /><br />
<p><em><strong>Önemli Hatırlatma:</strong> Bu içerik ilgili uzman danışman tarafından izleyicilerimizi bilgilendirme amaçlı hazırlanmıştır. Kendinizin veya çocuğunuzun sağlığı ile ilgili her konuda, bir tıp doktoruna veya çocuk eğitimi ve psikolojisi alanında çalışan uzmanlara danışmanızı tavsiye ederiz.</em></p>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>
</script>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 14
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 14 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{background:#f5f5fa;overflow:hidden;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader-status{width:50px;height:30px;position:fixed;left:50%;top:50%;margin:-25px 0 0 -15px}
.spinner{margin:0 auto;width:50px;height:30px;text-align:center;font-size:10px}
.spinner > div{background-color:#4267b3;height:100%;width:6px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}
.spinner .rct2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.spinner .rct3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}
.spinner .rct4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}
.spinner .rct5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}
@-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}}
@keyframes stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div id='loader-status'>
<div class='spinner'>
<div class='rct1'></div>
<div class='rct2'></div>
<div class='rct3'></div>
<div class='rct4'></div>
<div class='rct5'></div>
</div>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 13
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 13 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{background:#ecf0f2;overflow:hidden;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.loader{border-radius:50%;margin:0 auto;position:absolute;top:40%;left:0;right:0;height:50px;width:50px}
.gge{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:0 solid transparent;border-bottom:60px solid #00b5ff;width:0;z-index:2}
.gge2{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:0 solid transparent;border-bottom:40px solid #ffde16;width:0;z-index:1}
.gge3{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:40px solid #1da159;border-bottom:0 solid transparent;width:0;z-index:1}
.gge4{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:60px solid #ea344f;border-bottom:0 solid transparent;width:0;z-index:2}
.circa{border:30px solid rgba(255,255,255,0.1)}
.circa2{margin-top:30px;border:25px solid #fff;box-sizing:border-box;box-shadow:0 2px 1px rgba(0,0,0,0.15),0 -2px 1px rgba(0,0,0,0.15),-2px 0 1px rgba(0,0,0,0.15),2px 0 1px rgba(0,0,0,0.15);z-index:90}
@-webkit-keyframes translateRotation{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class='spinner'>
<div class='loader gge'></div>
<div class='loader gge2'></div>
<div class='loader gge3'></div>
<div class='loader gge4'></div>
<div class='loader circa'></div>
<div class='loader circa2'></div>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 12
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 12 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50%;left:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)}
[class^="balls-"]{position:absolute;display:block;left:30px;width:12px;height:12px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.balls-1{z-index:-1;background-color:#2196F4;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.balls-2{z-index:-2;background-color:#03A9F5;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.balls-3{z-index:-3;background-color:#00BCD5;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.balls-4{z-index:-4;background-color:#009689;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.balls-5{z-index:-5;background-color:#4CAF51;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.balls-6{z-index:-6;background-color:#8BC35A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.balls-7{z-index:-7;background-color:#CDDC38;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.balls-8{z-index:-8;background-color:#FFEB4B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class='spinner'>
<span class='balls-1'></span>
<span class='balls-2'></span>
<span class='balls-3'></span>
<span class='balls-4'></span>
<span class='balls-5'></span>
<span class='balls-6'></span>
<span class='balls-7'></span>
<span class='balls-8'></span>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 11
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 11 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.loader{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-top:-100px;margin-left:-100px}
.loader > .steps{position:absolute;top:50%;left:50%;z-index:10;width:160px;height:100px;margin-top:-50px;margin-left:-80px;border-radius:5px;background-color:#1e3f57;transform-type:preserve-3d;animation:steps1 3s cubic-bezier(.55,.3,.24,.99) infinite}
.loader > .steps:nth-child(2){z-index:11;width:150px;height:90px;margin-top:-45px;margin-left:-75px;border-radius:3px;background-color:#3c617d;animation-name:steps2}
.loader > .steps:nth-child(3){z-index:12;width:40px;height:20px;margin-top:50px;margin-left:-20px;border-radius:0 0 5px 5px;background-color:#6bb2cd;animation-name:steps3}
@keyframes steps1{3%,97%{width:160px;height:100px;margin-top:-50px;margin-left:-80px}30%,36%{width:80px;height:120px;margin-top:-60px;margin-left:-40px}63%,69%{width:40px;height:80px;margin-top:-40px;margin-left:-20px}}
@keyframes steps2{3%,97%{width:150px;height:90px;margin-top:-45px;margin-left:-75px}30%,36%{width:70px;height:96px;margin-top:-48px;margin-left:-35px}63%,69%{width:32px;height:60px;margin-top:-30px;margin-left:-16px}}
@keyframes steps3{3%,97%{width:40px;height:20px;margin-top:50px;margin-left:-20px}30%,36%{width:8px;height:8px;margin-top:49px;margin-left:-5px;border-radius:8px}63%,69%{width:16px;height:4px;margin-top:-37px;margin-left:-8px;border-radius:10px}}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class='loader spinner'>
<div class='steps'></div>
<div class='steps'></div>
<div class='steps'></div>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 10
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 10 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner-wrap{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center}
.loader-balls{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
.moving-ball{animation-name:loader-balls;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white}
.moving-ball:first-child{background-color:#8cc759;animation-delay:0.5s}
.moving-ball:nth-child(2){background-color:#8c6daf;animation-delay:0.4s}
.moving-ball:nth-child(3){background-color:#ef5d74;animation-delay:0.3s}
.moving-ball:nth-child(4){background-color:#f9a74b;animation-delay:0.2s}
.moving-ball:nth-child(5){background-color:#60beeb;animation-delay:0.1s}
.moving-ball:nth-child(6){background-color:#fbef5a;animation-delay:0s}
@keyframes loader-balls{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class='spinner-wrap'>
<div class='loader-balls'>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
</div>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 9
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 9 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{background:#fff;position:fixed;overflow:hidden;left:0;right:0;top:0;bottom:0;z-index:9999}
.spinner-wrap{position:absolute;list-style:none;margin:0;padding:0;top:50%;left:50%;transform:translate(-50%,-50%);}
.loading.reversed li{list-style:none;border:3px solid #2b8ccd;animation:LOADING 2s infinite}
.loading.reversed li:nth-child(1n){animation-delay:0s}
.loading.reversed li:nth-child(2n){animation-delay:0.2s}
.loading.reversed li:nth-child(3n){animation-delay:0.4s}
.loading li{position:absolute;height:0;top:50%;left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b7ccd;border-radius:100%;transform:transformZ(0);animation:LOADING 2s infinite}
.loading li:nth-child(1n){left:-20px;animation-delay:0s}
.loading li:nth-child(2n){left:0;animation-delay:0.2s}
.loading li:nth-child(3n){left:20px;animation-delay:0.4s}
@keyframes LOADING{0%{transform:scale(0.5);background:#2b8ccd}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#2b9ccd}}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class='spinner-wrap'>
<ul class='loading reversed'>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
Kaydol:
Kayıtlar (Atom)