×

İletişim Formu


Blogger Modal etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger Modal etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger 32 Farklı Modal Tasarımı

Blogger 32 Farklı Modal Tasarımı

6/02/2017 0 Yorum
<!DOCTYPE html> <html> <head> <link rel='stylesheet prefetch' href='https://rawgit.com/jquerycods/css/master/modal.min.css'/> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;color:#555;margin:0 auto} .container{padding-bottom:140px} .blogger-modal{margin:0 0 10px;list-style:none} .blogger-modal li{display:inline-block;margin:4px;padding:0} .btn:focus{outline:none} .modExample .btn{margin:4px 8px 4px 0} </style> </head> <body> <div class="container"> <div class="modExample"> <h2>Blogger Animasyonlu Modal Tasarımı</h2> <a href="#myModal1" role="button" data-target="#myModal1" class="btn btn-default" data-toggle="modal">Modal-1</a> <div id="myModal1" class="modal" data-easein="fadeIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Modal Başlık 1</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal2" role="button" class="btn btn-default" data-toggle="modal">Modal-2</a> <div id="myModal2" class="modal" data-easein="flipXIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 2</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal3" role="button" class="btn btn-default" data-toggle="modal">Modal-3</a> <div id="myModal3" class="modal" data-easein="flipYIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal4" role="button" class="btn btn-default" data-toggle="modal">Modal-4</a> <div id="myModal4" class="modal" data-easein="flipBounceXIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <br /> <a href="#myModal5" role="button" class="btn btn-default" data-toggle="modal">Modal-5</a> <div id="myModal5" class="modal" data-easein="flipBounceYIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 1</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal6" role="button" class="btn btn-default" data-toggle="modal">Modal-6</a> <div id="myModal6" class="modal" data-easein="swoopIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 2</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal7" role="button" class="btn btn-default" data-toggle="modal">Modal-7</a> <div id="myModal7" class="modal" data-easein="whirlIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal8" role="button" class="btn btn-default" data-toggle="modal">Modal-8</a> <div id="myModal8" class="modal" data-easein="shrinkIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal9" role="button" class="btn btn-default" data-toggle="modal">Modal-9</a> <div id="myModal9" class="modal" data-easein="expandIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 1</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal10" role="button" class="btn btn-default" data-toggle="modal">Modal-10</a> <div id="myModal10" class="modal" data-easein="bounceIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 2</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal11" role="button" class="btn btn-default" data-toggle="modal">Modal-11</a> <div id="myModal11" class="modal" data-easein="bounceUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal12" role="button" class="btn btn-default" data-toggle="modal">Modal-12</a> <div id="myModal12" class="modal" data-easein="bounceDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal13" role="button" class="btn btn-default" data-toggle="modal">Modal-13</a> <div id="myModal13" class="modal" data-easein="bounceLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal15" role="button" class="btn btn-default" data-toggle="modal">Modal-14</a> <div id="myModal15" class="modal" data-easein="bounceRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 1</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal16" role="button" class="btn btn-default" data-toggle="modal">Modal-15</a> <div id="myModal16" class="modal" data-easein="slideUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 2</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal17" role="button" class="btn btn-default" data-toggle="modal">Modal-16</a> <div id="myModal17" class="modal" data-easein="slideDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal18" role="button" class="btn btn-default" data-toggle="modal">Modal-17</a> <div id="myModal18" class="modal" data-easein="slideLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal14" role="button" class="btn btn-default" data-toggle="modal">Modal-18</a> <div id="myModal14" class="modal" data-easein="slideRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal19" role="button" class="btn btn-default" data-toggle="modal">Modal-19</a> <div id="myModal19" class="modal" data-easein="slideUpBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal20" role="button" class="btn btn-default" data-toggle="modal">Modal-20</a> <div id="myModal20" class="modal" data-easein="slideDownBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal21" role="button" class="btn btn-default" data-toggle="modal">Modal-21</a> <div id="myModal21" class="modal" data-easein="slideLeftBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal22" role="button" class="btn btn-default" data-toggle="modal">Modal-22</a> <div id="myModal22" class="modal" data-easein="slideRightBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal23" role="button" class="btn btn-default" data-toggle="modal">Modal-23</a> <div id="myModal23" class="modal" data-easein="perspectiveUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal24" role="button" class="btn btn-default" data-toggle="modal">Modal-24</a> <div id="myModal24" class="modal" data-easein="perspectiveDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal25" role="button" class="btn btn-default" data-toggle="modal">Modal-25</a> <div id="myModal25" class="modal" data-easein="perspectiveLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal26" role="button" class="btn btn-default" data-toggle="modal">Modal-26</a> <div id="myModal26" class="modal" data-easein="perspectiveRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal27" role="button" class="btn btn-default" data-toggle="modal">Modal-27</a> <div id="myModal27" class="modal" data-easein="shake" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal28" role="button" class="btn btn-default" data-toggle="modal">Modal-28</a> <div id="myModal28" class="modal" data-easein="tada" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal29" role="button" class="btn btn-default" data-toggle="modal">Modal-29</a> <div id="myModal29" class="modal" data-easein="swing" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal30" role="button" class="btn btn-default" data-toggle="modal">Modal-30</a> <div id="myModal30" class="modal" data-easein="bounce" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal31" role="button" class="btn btn-default" data-toggle="modal">Modal-31</a> <div id="myModal31" class="modal" data-easein="flash" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal32" role="button" class="btn btn-default" data-toggle="modal">Modal-32</a> <div id="myModal32" class="modal" data-easein="pulse" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> </div> <p> <h2>Animasyonlu İpucu Kutusu</h2> <div> <ul class="blogger-modal"> <li><a data-original-title="İpucu-1" data-animation="false" data-easein="fadeIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-1</a></li> <li><a data-original-title="İpucu-2" data-animation="false" data-easein="flipXIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-2</a></li> <li><a data-original-title="İpucu-3" data-animation="false" data-easein="flipYIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-3</a></li> <li><a data-original-title="İpucu-4" data-animation="false" href="#" data-easein="flipBounceXIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-4</a></li> <li><a data-original-title="İpucu-5" data-animation="false" data-easein="flipBounceYIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-5</a></li> <li><a data-original-title="İpucu-6" data-animation="false" data-easein="swoopIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-6</a></li> <li><a data-original-title="İpucu-7" data-animation="false" data-easein="whirlIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-7</a></li> <li><a data-original-title="İpucu-8" data-animation="false" href="#" data-easein="shrinkIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-8</a></li> <li><a data-original-title="İpucu-9" data-animation="false" data-easein="expandIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-9</a></li> <li><a data-original-title="İpucu-10" data-animation="false" data-easein="bounceIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-10</a></li> <li><a data-original-title="İpucu-11" data-animation="false" data-easein="bounceUpIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-11</a></li> <li><a data-original-title="İpucu-12" data-animation="false" href="#" data-easein="bounceDownIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-12</a></li> <li><a data-original-title="İpucu-13" data-animation="false" data-easein="bounceLeftIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-13</a></li> <li><a data-original-title="İpucu-14" data-animation="false" data-easein="bounceRightIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-14</a></li> <li><a data-original-title="İpucu-15" data-animation="false" data-easein="slideUpIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-15</a></li> <li><a data-original-title="İpucu-16" data-animation="false" href="#" data-easein="slideDownIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-16</a></li> <li><a data-original-title="İpucu-17" data-animation="false" data-easein="slideLeftIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-17</a></li> <li><a data-original-title="İpucu-18" data-animation="false" data-easein="slideRightIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-18</a></li> <li><a data-original-title="İpucu-19" data-animation="false" data-easein="slideUpBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-19</a></li> <li><a data-original-title="İpucu-20" data-animation="false" data-easein="slideDownBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-20</a></li> <li><a data-original-title="İpucu-21" data-animation="false" data-easein="slideLeftBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-21</a></li> <li><a data-original-title="İpucu-22" data-animation="false" data-easein="slideRightBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-22</a></li> <li><a data-original-title="İpucu-23" data-animation="false" data-easein="perspectiveUpIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-23</a></li> <li><a data-original-title="İpucu-24" data-animation="false" data-easein="perspectiveDownIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-24</a></li> <li><a data-original-title="İpucu-25" data-animation="false" data-easein="perspectiveLeftIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-25</a></li> <li><a data-original-title="İpucu-26" data-animation="false" data-easein="perspectiveRightIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-26</a></li> <li><a data-original-title="İpucu-27" data-animation="false" data-easein="shake" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-27</a></li> <li><a data-original-title="İpucu-28" data-animation="false" data-easein="tada" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-28</a></li> <li><a data-original-title="İpucu-29" data-animation="false" data-easein="flash" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-29</a></li> <li><a data-original-title="İpucu-30" data-animation="false" data-easein="pulse" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-30</a></li> <li><a data-original-title="İpucu-31" data-animation="false" data-easein="swing" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-31</a></li> <li><a data-original-title="İpucu-32" data-animation="false" data-easein="bounce" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-32</a></li> </ul> </div> </div> <script src='https://rawgit.com/jquerycods/jquery/master/jquery-1.min.js'></script> <script src='https://rawgit.com/jquerycods/jquery/master/jquery-2.min.js'></script> <script src='https://rawgit.com/jquerycods/jquery/master/velocity.min.js'></script> <script src='https://rawgit.com/jquerycods/jquery/master/velocity.ui.min.js'></script> <script type='text/javascript'> //<![CDATA[ $('a[rel=popover]').popover().click(function(e){e.preventDefault();var open=$(this).attr('data-easein');if(open=='shake'){$(this).next().velocity('callout.'+open);}else if(open=='pulse'){$(this).next().velocity('callout.'+open);}else if(open=='tada'){$(this).next().velocity('callout.'+open);}else if(open=='flash'){$(this).next().velocity('callout.'+open);}else if(open=='bounce'){$(this).next().velocity('callout.'+open);}else if(open=='swing'){$(this).next().velocity('callout.'+open);}else{$(this).next().velocity('transition.'+open);}});$(".modal").each(function(index){$(this).on('show.bs.modal',function(e){var open=$(this).attr('data-easein');if(open=='shake'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='pulse'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='tada'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='flash'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='bounce'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='swing'){$('.modal-dialog').velocity('callout.'+open);}else{$('.modal-dialog').velocity('transition.'+open);}});}); //]]> </script> </body> </html>
Basit CSS Modal Kutusu

Basit CSS Modal Kutusu

6/02/2017 0 Yorum
<!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;margin:0 auto 0 auto} a {text-decoration: none;outline: none;transition: all 0.25s;} .modal-box{z-index:9} .modal-box__overlay{position:fixed;top:0;right:0;bottom:0;left:0;visibility:hidden;opacity:0;background:rgba(0,0,0,0.8);-webkit-transition:opacity 0.1s ease-in;-moz-transition:opacity 0.1s ease-in;transition:opacity 0.1s ease-in;cursor:default} .modal-box__content{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:800px;padding:20px;background:#fff;opacity:0} .modal-box:target .modal-box__overlay,.modal-box:target .modal-box__content{opacity:1;visibility:visible} .modal-box--close{background:#606061;color:#ffffff;height:30px;line-height:30px;position:absolute;right:-15px;top:-15px;padding:0 10px} </style> </head> <body> <a href="#modal-box--open">Modal Kutusunu Aç</a> <div id="modal-box--open" class="modal-box"> <a href="#modal-box--close" class="modal-box__overlay"></a> <div class="modal-box__content"> <a href="#modal-box--close" class="modal-box--close">Kapat</a> <h2>Modal Kutusu</h2> <p>Bir teknoloji ürünü dengeli kullanıldığında, çocukların etkili iletişim becerilerinin gelişmesine ve sizinle iletişimine katkıda bulunabilir.</p> </div> </div> </body> </html>
Açılır CSS Modal Kutusu

Açılır CSS Modal Kutusu

6/02/2017 0 Yorum
<!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif} html,body{height:100%;margin:0;padding:0;width:100%} .modal{background:dodgerblue;height:1px;overflow:hidden;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:width 0.5s ease 0.5s,height 0.5s ease;transition:width 0.5s ease 0.5s,height 0.5s ease;width:0} .content{color:transparent;font-family:'Consolas',arial,sans-serif;font-size:2em;position:absolute;top:50%;text-align:center;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-webkit-transition:color 0.5s ease;transition:color 0.5s ease;width:100%} label{color:dodgerblue;cursor:pointer;font-family:'Consolas',arial,sans-serif;font-size:2em;position:fixed;left:50%;top:50%;text-transform:uppercase;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:color 0.5s ease 0.5s;transition:color 0.5s ease 0.5s} input{cursor:pointer;height:0;opacity:0;width:0} input:focus{outline:none} input:checked{height:40px;opacity:1;position:fixed;right:20px;top:20px;z-index:1;-webkit-appearance:none;width:40px} input:checked::after,input:checked:before{border-top:1px solid #FFF;content:'';display:block;position:absolute;top:50%;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:100%} input:checked::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)} input:checked + label{color:#FFF;-webkit-transition:color 0.5s ease;transition:color 0.5s ease} input:checked ~ .modal{height:100%;width:100%;-webkit-transition:width 0.5s ease,height 0.5s ease 0.5s;transition:width 0.5s ease,height 0.5s ease 0.5s} input:checked ~ .modal .content{color:#FFF;-webkit-transition:color 0.5s ease 0.5s;transition:color 0.5s ease 0.5s} </style> </head> <body> <input id='button' type='checkbox'> <label for='button'>Buraya tıkla!</label> <div class='modal'> <div class='content'>Sadece CSS kodları ile tasarlanmış olan modal kutusu.</div> </div> </body> </html>
Blogger Uyumlu Modal Tasarım

Blogger Uyumlu Modal Tasarım

6/02/2017 0 Yorum
<!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0 auto 0 auto;height:100vh;background:#f44336} *{box-sizing:border-box} h1,h2,h3,p{font-weight:300;margin:0 0 2.4rem 0} h1,h2,h3{line-height:1.3} a{text-decoration:none;color:inherit;font-weight:400} .modal{will-change:visibility,opacity;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;z-index:1000;visibility:hidden;opacity:0;-webkit-transition:all 0.5s cubic-bezier(0.23,1,0.32,1);transition:all 0.5s cubic-bezier(0.23,1,0.32,1);-webkit-transition-delay:$modal-delay;transition-delay:$modal-delay} .modal--active{visibility:visible;opacity:1} .modal--align-top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start} .modal__bg{background:transparent} .modal__dialog{max-width:600px;padding:1.2rem} .modal__content{will-change:transform,opacity;position:relative;padding:2.4rem;background:#ffebee;background-clip:padding-box;box-shadow:0 12px 15px 0 rgba(0,0,0,0.25);opacity:0;-webkit-transition:all 0.25s cubic-bezier(0.23,1,0.32,1);transition:all 0.25s cubic-bezier(0.23,1,0.32,1)} .modal__content--active{opacity:1} .modal__close{z-index:1100;cursor:pointer} .modal__trigger{position:relative;display:inline-block;padding:1.2rem 2.4rem;color:rgba(0,0,0,0.7);line-height:1;cursor:pointer;background:#ffebee;box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all 0.5s cubic-bezier(0.23,1,0.32,1);transition:all 0.5s cubic-bezier(0.23,1,0.32,1)} .modal__trigger--active{z-index:10} .modal__trigger:hover{background:#e5d3d6} #modal__temp{will-change:transform,opacity;position:absolute;top:0;left:0;right:0;bottom:0;background:#ffebee;-webkit-transform:none;transform:none;opacity:1;-webkit-transition:opacity 0.1s ease-out,-webkit-transform 0.5s cubic-bezier(0.23,1,0.32,1);transition:opacity 0.1s ease-out,-webkit-transform 0.5s cubic-bezier(0.23,1,0.32,1);transition:opacity 0.1s ease-out,transform 0.5s cubic-bezier(0.23,1,0.32,1);transition:opacity 0.1s ease-out,transform 0.5s cubic-bezier(0.23,1,0.32,1),-webkit-transform 0.5s cubic-bezier(0.23,1,0.32,1)} img{max-width:100%} .demo-btns header{padding:7vh 10vw;background:#ffebee;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center} .demo-btns header h1{margin:0;color:rgba(0,0,0,0.54);font-weight:300} .demo-btns .info{background:#f44336;padding:3vh 10vw;height:70vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-flow:column wrap;flex-flow:column wrap} .demo-btns p{text-align:center;color:#fff} .demo-btns .link{font-size:20px} .demo-btns .modal__trigger{margin-right:3px} @media (max-width:640px){.demo-btns .modal__trigger{margin-bottom:0.8rem}} .demo-close{position:absolute;top:0;right:0;margin:1.2rem;padding:0.6rem;background:rgba(0,0,0,0.3);border-radius:50%;-webkit-transition:all 0.5s cubic-bezier(0.23,1,0.32,1);transition:all 0.5s cubic-bezier(0.23,1,0.32,1)} .demo-close svg{width:24px;fill:#fff;pointer-events:none;vertical-align:top} .demo-close:hover{background:rgba(0,0,0,0.6)} </style> </head> <body> <div class="demo-btns"> <header> <h1>Material Modal Tasarım</h1> </header> <div class="info"> <div class="buttons"> <p> <a href="" data-modal="#modal" class="modal__trigger">Modal 1</a> <a href="" data-modal="#modal2" class="modal__trigger">Modal 2</a> <a href="" data-modal="#modal3" class="modal__trigger">Modal 3</a> </p> </div> <p>Bir modalı etkinleştirmek için bir butona tıklayın.<br><a href="http://bloggereklentileri.blogspot.com" target="_blank" class="link">Blogger Eklentileri</a></p> </div> </div> <div id="modal" class="modal modal__bg" role="dialog" aria-hidden="true"> <div class="modal__dialog"> <div class="modal__content"> <h1>Modal</h1> <p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> <a href="" class="modal__close demo-close"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg> </a> </div> </div> </div> <div id="modal2" class="modal modal--align-top modal__bg" role="dialog" aria-hidden="true"> <div class="modal__dialog"> <div class="modal__content"> <h1>Büyük Modal</h1> <h3>Teknoloji Çocuklarla İletişimimize Destek mi Köstek mi?</h3> <p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbLGh-8t71-IWwYCeROcvCLLTd9sVxoM95uV1PFfOdEbs3FQ5dCcR-FmBJdtKuzeRnPnA8kxgzVtwSH5NdC7lsMgCTq8DGqY-3tIbisUHshaZtY6kgEUNmsbIecqqvwGDq-6T7iK7u-p4/s640/teknoloji.jpg" alt="resim" /></p> <p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur. İlgili bir veli olarak çocuğunuza yakın bir mesafede oturup, hem çocuğunuzun seyrettiği, ilgilendiği veya kullandığı şeyleri kontrol edip gerektiğinde müdahale edebilirsiniz, hem de işinizi tamamlayabilirsiniz. Çocuğunuzun bilgisayarına güvenlik programlarını indirip uygunsuz sitelere girişini engelleyebilirsiniz veya günümüzde medya okuryazarı denilen medya zekâsı yüksek, eleştirel düşünebilen çocuk olması ve kendi kendini denetlemesi için onu yetiştirebilirseniz.</p> <p>Bireysel kullanılan teknoloji ürünleri de vardır, grup olarak kullanılabilecek teknoloji ürünleri de. İkisine de dengeli olmak şartıyla zaman ayırabilirsiniz. Ama beraberce yapabileceklerinizi seçmekte fayda vardır. Örneğin, internet sayfasında bulunan eğitici ve eğlenceli etkinliklerden birlikte yapılabilecek olanları seçersiniz. Böylece sohbet de ederseniz, işbirliği de yaparsanız, beraberce eğlenir aile olmanın tadını da çıkarırsınız.</p> <a href="" class="modal__close demo-close"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg> </a> </div> </div> </div> <div id="modal3" class="modal modal__bg" role="dialog" aria-hidden="true"> <div class="modal__dialog"> <div class="modal__content"> <h1>Modal 3</h1> <p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> <a href="" class="modal__close demo-close"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg> </a> </div> </div> </div> <script> var Modal=(function(){var trigger=$qsa('.modal__trigger');var modals=$qsa('.modal');var modalsbg=$qsa('.modal__bg');var content=$qsa('.modal__content');var closers=$qsa('.modal__close');var w=window;var isOpen=false;var contentDelay=400;var len=trigger.length;function $qsa(el){return document.querySelectorAll(el);} var getId=function(event){event.preventDefault();var self=this;var modalId=self.dataset.modal;var len=modalId.length;var modalIdTrimmed=modalId.substring(1,len);var modal=document.getElementById(modalIdTrimmed);makeDiv(self,modal);};var makeDiv=function(self,modal){var fakediv=document.getElementById('modal__temp');if(fakediv===null){var div=document.createElement('div');div.id='modal__temp';self.appendChild(div);moveTrig(self,modal,div);}};var moveTrig=function(trig,modal,div){var trigProps=trig.getBoundingClientRect();var m=modal;var mProps=m.querySelector('.modal__content').getBoundingClientRect();var transX,transY,scaleX,scaleY;var xc=w.innerWidth / 2;var yc=w.innerHeight / 2;trig.classList.add('modal__trigger--active');scaleX=mProps.width / trigProps.width;scaleY=mProps.height / trigProps.height;scaleX=scaleX.toFixed(3);scaleY=scaleY.toFixed(3);transX=Math.round(xc-trigProps.left-trigProps.width / 2);transY=Math.round(yc-trigProps.top-trigProps.height / 2);if(m.classList.contains('modal--align-top')){transY=Math.round(mProps.height / 2+mProps.top-trigProps.top-trigProps.height / 2);} trig.style.transform='translate('+transX+'px, '+transY+'px)';trig.style.webkitTransform='translate('+transX+'px, '+transY+'px)';div.style.transform='scale('+scaleX+','+scaleY+')';div.style.webkitTransform='scale('+scaleX+','+scaleY+')';window.setTimeout(function(){window.requestAnimationFrame(function(){open(m,div);});},contentDelay);};var open=function(m,div){if(!isOpen){var content=m.querySelector('.modal__content');m.classList.add('modal--active');content.classList.add('modal__content--active');content.addEventListener('transitionend',hideDiv,false);isOpen=true;} function hideDiv(){div.style.opacity='0';content.removeEventListener('transitionend',hideDiv,false);}};var close=function(event){event.preventDefault();event.stopImmediatePropagation();var target=event.target;var div=document.getElementById('modal__temp');if(isOpen&&target.classList.contains('modal__bg')||target.classList.contains('modal__close')){div.style.opacity='1';div.removeAttribute('style');for(var i=0;i<len;i++){modals[i].classList.remove('modal--active');content[i].classList.remove('modal__content--active');trigger[i].style.transform='none';trigger[i].style.webkitTransform='none';trigger[i].classList.remove('modal__trigger--active');} div.addEventListener('transitionend',removeDiv,false);isOpen=false;} function removeDiv(){setTimeout(function(){window.requestAnimationFrame(function(){div.remove();});},contentDelay-50);}};var bindActions=function(){for(var i=0;i<len;i++){trigger[i].addEventListener('click',getId,false);closers[i].addEventListener('click',close,false);modalsbg[i].addEventListener('click',close,false);}};var init=function(){bindActions();};return{init:init};}());Modal.init(); </script> </body> </html>
Blogger CSS Modal Kutusu

Blogger CSS Modal Kutusu

6/02/2017 0 Yorum
<!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;padding:1%;font:1/1.5em sans-serif;text-align:center;margin:0 auto 0 auto} .modal{opacity:0;visibility:hidden;position:fixed;top:0;right:0;bottom:0;left:0;text-align:left;background:rgba(0,0,0,.9);transition:opacity .25s ease} .modal__bg{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer} .modal-state{display:none} .modal-state:checked + .modal{opacity:1;visibility:visible} .modal-state:checked + .modal .modal__inner{top:0} .modal__inner{transition:top .25s ease;position:absolute;top:-20%;right:0;bottom:0;left:0;width:50%;margin:auto;overflow:auto;background:#fff;border-radius:5px;padding:1em 2em;height:50%} .modal__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer} .modal__close:after,.modal__close:before{content:'';position:absolute;width:2px;height:1.5em;background:#ccc;display:block;transform:rotate(45deg);left:50%;margin:-3px 0 0 -1px;top:0} .modal__close:hover:after,.modal__close:hover:before{background:#aaa} .modal__close:before{transform:rotate(-45deg)} @media screen and (max-width:768px){.modal__inner{width:90%;height:90%;box-sizing:border-box}} .btn{cursor:pointer;background:#27ae60;display:inline-block;padding:.5em 1em;color:#fff;border-radius:3px} .btn:hover,.btn:focus{background:#2ecc71} .btn:active{background:#27ae60;box-shadow:0 1px 2px rgba(0,0,0,.2) inset} .btn--blue{background:#2980b9} .btn--blue:hover,.btn--blue:focus{background:#3498db} .btn--blue:active{background:#2980b9} p img{max-width:200px;height:auto;float:left;margin:0 1em 1em 0} </style> </head> <body> <h1>CSS Modal Mod Kutusu</h1> <div> <p>Modal tetik butonunu istediğiniz yere yerleştirebilirsiniz.</p> <p> <label class="btn" for="modal-1">Modal kutusu 1</label> <label class="btn btn--blue" for="modal-2">Modal kutusu 2</label> </p> </div> <input class="modal-state" id="modal-1" type="checkbox" /> <div class="modal"> <label class="modal__bg" for="modal-1"></label> <div class="modal__inner"> <label class="modal__close" for="modal-1"></label> <h2>Modal kutusu 1</h2> <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs5biMSHUmaYFiPVGL8XvOseY1Fyxe-9wAuRvY-8qeL-eoGtUP4FSPJK3Qjl1yZHgV1ULvJm7vaeXcAA9bZawVq4hPBlsn1sbtK5bo3liViX_wGclRdpYOColnCgIEtf4x0WHXh0UkGDM/s1600/modal.png" alt="" />Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> </div> </div> <input class="modal-state" id="modal-2" type="checkbox" /> <div class="modal"> <label class="modal__bg" for="modal-2"></label> <div class="modal__inner"><label class="modal__close" for="modal-2"></label> <h2>Modal kutusu 2</h2> <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs5biMSHUmaYFiPVGL8XvOseY1Fyxe-9wAuRvY-8qeL-eoGtUP4FSPJK3Qjl1yZHgV1ULvJm7vaeXcAA9bZawVq4hPBlsn1sbtK5bo3liViX_wGclRdpYOColnCgIEtf4x0WHXh0UkGDM/s1600/modal.png" alt="" />Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> </div> </div> </body> </html>
Basit CSS Modal

Basit CSS Modal

6/01/2017 0 Yorum
<!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;padding:2rem;background-color:#2980b9;margin:0 auto 0 auto} *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} html,body{height:100%} .container{display:table;width:100%;height:100%} .interior{display:table-cell;vertical-align:middle;text-align:center} .btn{background-color:#fff;padding:1em 3em;border-radius:3px;color:#2980b9;text-decoration:none} .modal-window{position:fixed;background-color:rgba(255,255,255,0.5);top:0;right:0;bottom:0;left:0;z-index:999;opacity:0;pointer-events:none;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s} .modal-window:target{opacity:1;pointer-events:auto} .modal-window>div{width:400px;position:relative;margin:10% auto;padding:2rem;background:#fff;color:#444} .modal-window header{font-weight:bold} .modal-close{color:#aaa;line-height:50px;font-size:80%;position:absolute;right:0;text-align:center;top:0;width:70px;text-decoration:none} .modal-close:hover{color:#000} .modal-window h1{font-size:150%;margin:0 0 15px} </style> </head> <body> <div class="container"> <div class="interior"> <a class="btn" href="#open-modal">Aç</a> </div> </div> <div id="open-modal" class="modal-window"> <div> <a href="#modal-close" title="Close" class="modal-close">Kapat</a> <h1>CSS Modal</h1> <div>Çocuğun ödevini yetişkin desteği olmadan yapabilmesi önemli ve ihtiyaç duyulan bir kazanımdır.</div> </div> </div> </body> </html>
Blogger CSS Modal 4

Blogger CSS Modal 4

Sağlık ve Güzellik Önerileri 6/01/2017 0 Yorum
<!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;background-color:#ECF0F1;color:#444;margin:0 auto 0 auto} #target-content{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;-webkit-transition:opacity 200ms;transition:opacity 200ms} #target-content:target{pointer-events:all;opacity:1} #target-content #target-inner{position:absolute;display:block;padding:48px;line-height:1.8;width:70%;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);box-shadow:0 12px 24px rgba(0,0,0,0.2);background:white;color:#34495E} #target-content #target-inner h2{margin-top:0} #target-content #target-inner code{font-weight:bold} #target-content a.close{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:#34495E;opacity:0.5;-webkit-transition:opacity 200ms;transition:opacity 200ms} #target-content a.close:hover{opacity:0.4} #button{position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);padding:16px 24px;border-radius:1px;text-decoration:none;font-size:24px;display:block;color:white;background-color:#34495E;text-align:center;font-weight:100;-webkit-transition:box-shadow 200ms;transition:box-shadow 200ms;border-radius:4px} #button:hover{box-shadow:0 12px 24px rgba(0,0,0,0.2)} </style> </head> <body> <a href="#target-content" id="button">CSS Modal Açmak İçin Tıkla</a> <div id="target-content"> <a href="#" class="close"></a> <div id="target-inner"> <h2>Blogger CSS Modal</h2> Bu sayfada, Ruby için Google API İstemci Kitaplığı'nı kullanarak Blogger API'sı kullanmaya başlama hakkında bilgi verilmektedir. Buna ek olarak, aşağıdaki dokümanlarla ilgilenebilirsiniz:<br> <code>href</code><br> <code>target</code><br> <code>href="#"</code> </div> </div> </body> </html>