Enis Baydemir : Karışık Kodlar

Karışık Kodlar

Açılır Pencere Tıkla

<p style="MARGIN: 0px">
<font face="trebuchet ms" color="#DC005D"><h1 style="font-weight:normal; font-size:28px; text-align:center"></h1></font>
<center><font face="trebuchet ms" color="#660033" style="font-size:23px;"><center><font face="trebuchet ms" color="#000000" style="font-size:19px;">
<style>
/* Container */
.modal {
/* Overlay page content */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;
/* Transition opacity on open */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
/* Hide for now */
opacity: 0;
pointer-events: none;
}
/* Show modal */
.modal:target {
opacity: 1;
pointer-events: auto;
/* at time of writing (Feb 2012), pointer-events not supported by Opera or IE */
}
/* Content */
.modal > div {
width: 500px;
background: #fff;
position: relative;
margin: 10% auto;
/* Default minimise animation */
-webkit-animation: minimise 500ms linear;
-moz-animation: minimise 500ms linear;
/* Prettify */
padding: 30px;
border-radius: 7px;
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
background: #fff;
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
text-shadow: 0 1px 0 #fff;
}
/* Override animation on modal open */
.modal:target > div {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
}
.modal h2 {
font-size: 36px;
padding: 0 0 20px;
}
@-webkit-keyframes bounce {
  0% {
      -webkit-transform: scale3d(0.1,0.1,1);
      box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
      -webkit-transform: scale3d(1.08,1.08,1);
      box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
      -webkit-transform: scale3d(0.95,0.95,1);
      box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
      -webkit-transform: scale3d(1,1,1);
      box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}
@-webkit-keyframes minimise {
  0% {
      -webkit-transform: scale3d(1,1,1);
  }
  100% {
      -webkit-transform: scale3d(0.1,0.1,1);
  }
}
@-moz-keyframes bounce {
  0% {
      -moz-transform: scale3d(0.1,0.1,1);
      box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
      -moz-transform: scale3d(1.08,1.08,1);
      box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
      -moz-transform: scale3d(0.95,0.95,1);
      box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
      -moz-transform: scale3d(1,1,1);
      box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}
@-moz-keyframes minimise {
  0% {
      -moz-transform: scale3d(1,1,1);
  }
  100% {
      -moz-transform: scale3d(0.1,0.1,1);
  }
}
/* Modal close link */
.modal a[href="#close"] {
position: absolute;
right: 0;
top: 0;
color: transparent;
}
/* Reset native styles */
.modal a[href="#close"]:focus {
outline: none;
}
/* Create close button */
.modal a[href="#close"]:after {
content: 'X';
display: block;
/* Position */
position: absolute;
right: -10px;
top: -10px;
width: 1.5em;
padding: 1px 1px 1px 2px;
/* Style */
text-decoration: none;
text-shadow: none;
text-align: center;
font-weight: bold;
background: #000;
color: #fff;
border: 3px solid #fff;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.modal a[href="#close"]:focus:after,
.modal a[href="#close"]:hover:after {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
}
.modal a[href="#close"]:focus:after {
outline: 1px solid #000;
}
/* Open modal */
a.openModal {
-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
    -webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
    box-shadow:inset 0px 1px 0px 0px #caefab;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
    background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
    background-color:#77d42a;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #268a16;
    display:inline-block;
    color:#306108;
    font-family:Verdana;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #aade7c;
}
a.openModal:hover,
a.openModal:focus {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
    background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
    background-color:#5cb811;
}
</style>
<a href="#example" class="openModal">açılır pencerede içerik</a>
<aside id="example" class="modal">
    <div>
        <h2>
içerik buraya </h2>
<h3>
yazı veya kod eklenebilir </h3>
<a href="#close" title="Kapat">Kapat</a>
    </div>
</aside>