Kronikowy Kącik Kodowania: informacje

Pokazywanie postów oznaczonych etykietą informacje. Pokaż wszystkie posty

10 sierpnia 2017

Ukryty tekst po kliknięciu na zdjęcie

<script language="JavaScript" type="text/javascript"></script>

<a class="przycisk" href="javascript:ReverseDisplay('kliknij')">

</a>

<div class="separator" style="clear: both; margin-bottom: -23px; text-align: center;">

<a class="przycisk" href="javascript:ReverseDisplay('kliknij')"><img src="link do grafiki" /></a></div>

</div>

<div id="kliknij" style="display: none;margin-top: 15px!important;"><div style="text-align: justify;">

TUTAJ WKLEJ TEKST</div></div>

9 sierpnia 2017

Wysuwane informacje - kwadraty

Informacja pierwsza

Informacja druga

Informacja trzecia

Informacja czwarta

<center>

<style type="text/css">

.kwadrat1 {position:absolute;top:35px;left:60px; /*położenie*/}

.kwadrat2 {position:absolute;top:65px;left:60px;}

.kwadrat3 { position:absolute;top:95px;left:60px;}

.kwadrat4 { position:absolute;top:125px;left:60px;}

.kwadrat1:hover,.kwadrat2:hover, .kwadrat3:hover, .kwadrat4:hover, .kwadrat5:hover, .kwadrat6:hover, .kwadrat7:hover {

width: 200px;

border-bottom:2px solid #524d4f; /*obramowania*/

border-top:1px dashed #524d4f;

box-shadow:inset 20px 0 0px 0px #524d4f; /*kolor kwadratu*/

background: transparent;

padding-left: 25px;

text-transform:uppercase; /*drukowane litery*/

text-align:center;

color: #14061b !important; /*czcionka*/

transition: 0.5s;

}

.Dane{

display: block;

overflow: hidden;

width:20px;

height:15px;

padding-bottom: 3px;

font-family: inherit;

text-transform:uppercase;

box-shadow:inset 20px 0 0px 0px #524d4f; /*kolor kwadratu po najechaniu*/

color: transparent;

font-size:13px;

letter-spacing:2px;

transition: 0.5s;

}

div#postać{

width: 500px;

height: 500px;

background: url('link do zdjęcia) center no-repeat;

transition:all 2s ease-in-out;

-moz-transition:all 2s ease-in-out; /* Firefox 4 */

-webkit-transition:all 2s ease-in-out; /* Safari i Chrome */

-o-transition:all 2s ease-in-out; /* Opera */

}

div#postać:hover {

display:block;

-moz-transition:all 2s ease-in-out; /* Firefox 4 */

-webkit-transition:all 2s ease-in-out; /* Safari i Chrome */

-o-transition:all 2s ease-in-out; /* Opera */}

</style>

<div id="postać">

</div>

</center>

<di style="margin-top: -150px;">

</di><br />

<div class="Dane kwadrat1">

Informacja pierwsza</div>

<div class="Dane kwadrat2">

Informacja druga</div>

<div class="Dane kwadrat3">

Informacja trzecia</div>

<div class="Dane kwadrat4">

Informacja czwarta</div>

Wysuwane informacje - kółka

Informacja pierwsza

Informacja druga

Informacja trzecia

Informacja czwarta

Informacja piąta

Informacja szósta

Informacja siódma

<center>

<style type="text/css">

.koło1 {position:absolute;top:25px;}

.koło2 {position:absolute;top:60px;}

.koło3 { position:absolute;top:95px;}

.koło4 { position:absolute;top:130px;}

.koło5 { position:absolute;top:165px;}

.koło6 { position:absolute;top:200px;}

.koło7 {position:absolute;top:235px;}

.koło1:hover,.koło2:hover, .koło3:hover, .koło4:hover, .koło5:hover, .koło6:hover, .koło7:hover, .koło8:hover {

width: 190px!important;

background: #524d4f;

box-shadow: 0px 0px 0px 0px #524d4f;

border:0px dashed #fff;

border-radius: 0px;

color: #fff;

font-size:12px;

padding-top:2px!important;

text-align:center;

letter-spacing:1px;

transition: 0.5s;

}

.Dane1{

display: block;

margin: 5px;

width: 20px;

margin-left:50px;

overflow: hidden;

text-transform:uppercase;

font-family:catamaran;

color: transparent;

height: 20px;

margin-bottom:-11px!important;

border-radius:100% ;

background:#524d4f!important;

box-shadow: 0px 0px 0px 2px #524d4f;

border: dashed 2px #fff;

transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

}

div#postać1{

width: 500px;

height: 500px;

background: url('link do zdjęcia) center no-repeat;

transition:all 2s ease-in-out;

-moz-transition:all 2s ease-in-out; /* Firefox 4 */

-webkit-transition:all 2s ease-in-out; /* Safari i Chrome */

-o-transition:all 2s ease-in-out; /* Opera */

}

div#postać1:hover {

display:block;

-moz-transition:all 2s ease-in-out; /* Firefox 4 */

-webkit-transition:all 2s ease-in-out; /* Safari i Chrome */

-o-transition:all 2s ease-in-out; /* Opera */}

</style>

<div id="postać1">

</div>

</center>

<di style="margin-top: -150px;">

</di><br />

<div class="Dane1 koło1">

Informacja pierwsza</div>

<div class="Dane1 koło2">

Informacja druga</div>

<div class="Dane1 koło3">

Informacja trzecia</div>

<div class="Dane1 koło4">

Informacja czwarta</div>

<div class="Dane1 koło5">

Informacja piąta </div>

<div class="Dane1 koło6">

Informacja szósta </div>

<div class="Dane1 koło7">

Informacja siódma</div>

<br/>

<div class="separator" style="clear: both; text-align: center;">

</div>

Wysuwane informacje - kółeczka

Informacja pierwsza

Informacja druga

Informacja trzecia

Informacja czwarta

Informacja piąta

<center>

<style type="text/css">

.okrąg1{

cursor:pointer;

display: block;

width: 22px;

margin-bottom:7px;

height: 22px;

background :#352826; /*kolor tła*/

border: solid 3px #352826; /*nie ruszać*. Kolor taki jak tło*/

transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

border-radius: 50% ;}

.Informacje1{

width: 185px; /*szerokość rozwijanego tła*/

position: absolute;

color:transparent !important;

background: transparent;

padding: 4px 0px 4px 0px;

font-family: Trebuchet MS; /*czcionka*/

text-align:center;

font-size:12px; /*rozmiar czcionki*/

letter-spacing:2px; /*odległość między literami*/

text-transform:uppercase; /*drukowane litery*/

text-decoration: none;

display:inline-block;

transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

}

.Informacje1{

margin: 1px 0 0 40px; }

.okrąg1:hover{

background :#6b6c37; /*kolor kółeczka po najechaniu*/

border: solid 3px #6b6c37 ;

transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

}

.okrąg1:hover .Informacje1{

box-shadow: inset 190px 0px 0px #6b6c37; /*kolor tła po najechaniu*/

color:#fff !important;

transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

border-radius: 0px ;

}

.okrąg1 {

position: relative ;

z-index: 10000 ;

top: -470px ; /*na jakiej wysokości ma pojawić się kółko*/

left: 50px; /*położenie kółka*/

}

div#postać1{

width: 500px;

height: 500px;

background: url('link do zdjęcia') center no-repeat;

transition:all 2s ease-in-out;

-moz-transition:all 2s ease-in-out; /* Firefox 4 */

-webkit-transition:all 2s ease-in-out; /* Safari i Chrome */

-o-transition:all 2s ease-in-out; /* Opera */

}

div#postać1:hover {

display:block;

-moz-transition:all 2s ease-in-out; /* Firefox 4 */

-webkit-transition:all 2s ease-in-out; /* Safari i Chrome */

-o-transition:all 2s ease-in-out; /* Opera */}

</style>

<div id="postać1">

</div>

</center><br />

<div class="okrąg1"><div class="Informacje1">Informacja pierwsza</div></div>

<div class="okrąg1"><div class="Informacje1">Informacja druga</div></div>

<div class="okrąg1"><div class="Informacje1">Informacja trzecia</div></div>

<div class="okrąg1"><div class="Informacje1">Informacja czwarta</div></div>

<div class="okrąg1"><div class="Informacje1">Informacja piąta</div></div>

<br/>

Informacyjne kwadraty #2

Informacja pierwsza

Informacja druga

Informacja trzecia

Informacja czwarta

Informacja piąta

Informacja szósta

Informacja siódma

treść karty

<style type="text/css">

.color1 {position:absolute;top:180px;left:60px;} /*odpowiada za położenie kwadratów na zdjęciu*/

.color2 { position:absolute;top:140px;left:60px;}

.color3 {position:absolute;top:220px;left:60px;}

.color4 { position:absolute;top:260px;left:60px;}

.color5 {position:absolute;top:300px;left:60px;}

.color6 { position:absolute;top:340px;left:60px;}

.color7 { position:absolute;top:380px;left:60px;}

.color1:hover, .color2:hover, .color3:hover, .color4:hover, .color5:hover, .color6:hover, .color7:hover {

width: 250px;

background: #524d4f; /*efekt po rozwinięciu*/

box-shadow: 0px 0px 0px 3px #524d4f;

padding-left: 25px;

color: #eae5dd !important;

transition: 0.5s;

}

.small{

margin-right: 4px;

box-shadow: 0px 0px 0px 3px #6b6c37; /*obramowanie zewnętrzne*/

border: solid 1px #fff;

display: block;

overflow: hidden!important;

margin-left: 2px;

width:25px;

height: 5px;

padding-bottom: 15px;

padding-top: 5px;

text-transform: uppercase; /*czcionka*/

background: #6b6c37; /*tło kwadratów*/

color: transparent;

text-align: center;

font-size: 12px;

transition: 0.5s;

}

div#kp3 {

width: 500px; /*szerokość zdj*/

height: 540px; /*wysokość zdj*/

margin-left:25px; /*położenie zdjęcia w poście*/

margin-top:-40px;

background: url('link do zdjęcia') center no-repeat;

transition:all 2s ease-in-out;

-moz-transition:all 2s ease-in-out; /* Firefox 4 */

-webkit-transition:all 2s ease-in-out; /* Safari i Chrome */

-o-transition:all 2s ease-in-out; /* Opera */

}

div#kp3:hover {

-moz-transition:all 2s ease-in-out; /* Firefox 4 */

-webkit-transition:all 2s ease-in-out; /* Safari i Chrome */

-o-transition:all 2s ease-in-out; /* Opera */}

</style>

<div id="kp3">

</div>

</center>

<di style="margin-top: -150px;">

</di><br />

<div class="small color1">

Informacja pierwsza</div>

<div class="small color2">

Informacja druga</div>

<div class="small color3">

Informacja trzecia</div>

<div class="small color4">

Informacja czwarta</div>

<div class="small color5">

Informacja piąta</div>

<div class="small color6">

Informacja szósta</div>

<div class="small color7">

Informacja siódma</div>

<div style="margin-top: -50px; text-align: center;">

treść karty</div>

Informacyjne prostokąty

Dom:

Data urodzenia:

Status krwi:

Bogin:

Patronus:

Różdżka:

<center><style type="text/css">

.kwadrat1 {background:#546449;border:1px solid #aeb9ab;top:30px;left:-15px;}
/*tło kwadratu, obramowanie, wysokość, położenie*/

.kwadrat2 {background:#546449;border:1px solid #aeb9ab;top:80px;left:-15px;}

.kwadrat3 {background:#546449;border:1px solid #aeb9ab;top:140px;left:-15px;}

.kwadrat4 {background:#546449;border:1px solid #aeb9ab;top:200px;left:-15px;}

.kwadrat5 {background:#546449;border:1px solid #aeb9ab;top:260px;left:-15px;}

.kwadrat6 {background:#546449;border:1px solid #aeb9ab;top:320px;left:-15px;}

.rozmiar{ text-align:center; position:absolute;
width:130px;/*szerokość kwadratu*/
height:10px; /*wysokość kwadratu*/
padding-top:20px; /*odległość od tekstu*/
padding-bottom:20px; /*odległość od tekstu*/
text-transform: uppercase; /*drukowane litery*/

font-size: 11px; /*rozmiar czcionki*/display: block;margin:10px;}

div#karta {
width: 500px; /*szerokość zdjęcia*/
height: 540px; /*wysokość zdjęcia*/
border:1px solid #d2d3d3; /*obramowanie zdjęcia*/
border-bottom:5px solid #d2d3d3; /*dolne obramowanie zdjęcia*/
background: url('Link do zdjęcia') center no-repeat; transition:all 2s ease-in-out;-moz-transition:all 2s ease-in-out; /* Firefox 4 */-webkit-transition:all 2s ease-in-out; /* Safari i Chrome */-o-transition:all 2s ease-in-out; /* Opera */}

div#karta:hover {
-moz-transition:all 2s ease-in-out; /* Firefox 4 */-webkit-transition:all 2s ease-in-out; /* Safari i Chrome */-o-transition:all 2s ease-in-out; /* Opera */}

</style>
<div id="karta"></div></center>
<div class="rozmiar kwadrat1">Dom:</div>
<div class="rozmiar kwadrat2">Data urodzenia:</div>
<div class="rozmiar kwadrat3">Status krwi:</div>
<div class="rozmiar kwadrat4">Bogin:</div>
<div class="rozmiar kwadrat5">Patronus:</div>
<div class="rozmiar kwadrat6">Różdżka:</div>