Naya Rivera
12 stycznia 1987
Santa Clarita
piosenkarka
aktorka
informacja 6
informacja 7
informacja 8
informacja 9
informacja 10
Ze względu na długość, instrukcję podzielę na dwie części. Najpierw wpisujemy część HTML-ową, czyli głównie tą z naszym własnym tekstem. Wygląda ona tak:
<center>
<div id="tlo1">
<div class="box1">
informacja 1 </div>
<div class="box2">
informacja 2</div>
<div class="box3">
informacja 3</div>
<div class="box4">
informacja 4</div>
<div class="box5">
informacja 5</div>
<div class="box6">
informacja 6</div>
<div class="box7">
informacja 7</div>
<div class="box8">
informacja 8</div>
<div class="box9">
informacja 9</div>
<div class="box10">
informacja 10</div>
</div>
Gdy już mamy część informacyjną zrobioną, czas przystosować wygląd naszych kwadracików (i zdjęcia). Dlatego zaczynamy zabawę z kodem CSS. Gotowiec, który można edytować, wygląda tak:
<style type="text/css">
#tlo1 {
width: 539px; /*szerokość zdjęcia*/height:808px; /*wysokość zdjęcia*/background: url("LINK DO ZDJĘCIA");}
.box1 {
background:#000; /*tło kwadratu*/padding:7px; /*odległość tekstu od brzegu tła*/height:10px; /*wysokość kwadratu*/width:10px; /*długość kwadratu*/top: 10px; /*odległość od góry zdjęcia*/overflow:hidden; /*selektor odpowiadający za rozwijanie się kwadratu, nie ruszać!*/color:transparent; /*kolor czcionki*/transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease; /*płynne rozwinięcie*/position:absolute; /*pozycja kwadratu*/border-radius: 0px; /*zaokrąglenie brzegów kwadratu*/border: 0px solid black; /*ramka kwadratu*/}
.box1:hover {
height:10px; /*wysokość kwadratu po najechaniu*/width:100px; /*długość kwadratu po najechaniu*/z-index:9999; /*widoczność elementu na zdjęciu*/color:#eee; /*kolor czcionki*/}
.box2 {
background:#cbada5; /*tło kwadratu*/padding:7px; /*odległość tekstu od brzegu tła*/height:10px; /*wysokość kwadratu*/width:10px; /*długość kwadratu*/top: 35px; /*odległość od góry zdjęcia*/overflow:hidden; /*selektor odpowiadający za rozwijanie się kwadratu, nie ruszać!*/color:transparent; /*kolor czcionki*/transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease; /*płynne rozwinięcie*/position:absolute; /*pozycja kwadratu*/border-radius: 0px; /*zaokrąglenie brzegów kwadratu*/border: 0px solid black; /*ramka kwadratu*/}
.box2:hover {
height:10px; /*wysokość kwadratu po najechaniu*/width:100px; /*długość kwadratu po najechaniu*/z-index:9999; /*widoczność elementu na zdjęciu*/color:#eee; /*kolor czcionki*/}
.box3 {
background:#000; /*tło kwadratu*/padding:7px; /*odległość tekstu od brzegu tła*/height:10px; /*wysokość kwadratu*/width:10px; /*długość kwadratu*/top: 60px; /*odległość od góry zdjęcia*/overflow:hidden; /*selektor odpowiadający za rozwijanie się kwadratu, nie ruszać!*/color:transparent; /*kolor czcionki*/transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease; /*płynne rozwinięcie*/position:absolute; /*pozycja kwadratu*/border-radius: 0px; /*zaokrąglenie brzegów kwadratu*/border: 0px solid black; /*ramka kwadratu*/}
.box3:hover {
height:10px; /*wysokość kwadratu po najechaniu*/width:100px; /*długość kwadratu po najechaniu*/z-index:9999; /*widoczność elementu na zdjęciu*/color:#eee; /*kolor czcionki*/}
.box4 {
background:#cbada5; /*tło kwadratu*/padding:7px; /*odległość tekstu od brzegu tła*/height:10px; /*wysokość kwadratu*/width:10px; /*długość kwadratu*/top: 85px; /*odległość od góry zdjęcia*/overflow:hidden; /*selektor odpowiadający za rozwijanie się kwadratu, nie ruszać!*/color:transparent; /*kolor czcionki*/transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease; /*płynne rozwinięcie*/position:absolute; /*pozycja kwadratu*/border-radius: 0px; /*zaokrąglenie brzegów kwadratu*/border: 0px solid black; /*ramka kwadratu*/}
.box4:hover {
height:10px; /*wysokość kwadratu po najechaniu*/width:100px; /*długość kwadratu po najechaniu*/z-index:9999; /*widoczność elementu na zdjęciu*/color:#eee; /*kolor czcionki*/}
.box5 {
background:#000; /*tło kwadratu*/padding:7px; /*odległość tekstu od brzegu tła*/height:10px; /*wysokość kwadratu*/width:10px; /*długość kwadratu*/top: 110px; /*odległość od góry zdjęcia*/overflow:hidden; /*selektor odpowiadający za rozwijanie się kwadratu, nie ruszać!*/color:transparent; /*kolor czcionki*/transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease; /*płynne rozwinięcie*/position:absolute; /*pozycja kwadratu*/border-radius: 0px; /*zaokrąglenie brzegów kwadratu*/border: 0px solid black; /*ramka kwadratu*/}
.box5:hover {
height:10px; /*wysokość kwadratu po najechaniu*/width:100px; /*długość kwadratu po najechaniu*/z-index:9999; /*widoczność elementu na zdjęciu*/color:#eee; /*kolor czcionki*/}
.box6 {
background:#cbada5; /*tło kwadratu*/padding:7px; /*odległość tekstu od brzegu tła*/height:10px; /*wysokość kwadratu*/width:10px; /*długość kwadratu*/top: 135px; /*odległość od góry zdjęcia*/overflow:hidden; /*selektor odpowiadający za rozwijanie się kwadratu, nie ruszać!*/color:transparent; /*kolor czcionki*/transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease; /*płynne rozwinięcie*/position:absolute; /*pozycja kwadratu*/border-radius: 0px; /*zaokrąglenie brzegów kwadratu*/border: 0px solid black; /*ramka kwadratu*/}
.box6:hover {
height:10px; /*wysokość kwadratu po najechaniu*/width:100px; /*długość kwadratu po najechaniu*/z-index:9999; /*widoczność elementu na zdjęciu*/color:#eee; /*kolor czcionki*/}
.box7 {
background:#000; /*tło kwadratu*/padding:7px; /*odległość tekstu od brzegu tła*/height:10px; /*wysokość kwadratu*/width:10px; /*długość kwadratu*/top: 160px; /*odległość od góry zdjęcia*/overflow:hidden; /*selektor odpowiadający za rozwijanie się kwadratu, nie ruszać!*/color:transparent; /*kolor czcionki*/transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease; /*płynne rozwinięcie*/position:absolute; /*pozycja kwadratu*/border-radius: 0px; /*zaokrąglenie brzegów kwadratu*/border: 0px solid black; /*ramka kwadratu*/}
.box7:hover {
height:10px; /*wysokość kwadratu po najechaniu*/width:100px; /*długość kwadratu po najechaniu*/z-index:9999; /*widoczność elementu na zdjęciu*/color:#eee; /*kolor czcionki*/}
.box8 {
background:#cbada5; /*tło kwadratu*/padding:7px; /*odległość tekstu od brzegu tła*/height:10px; /*wysokość kwadratu*/width:10px; /*długość kwadratu*/top: 185px; /*odległość od góry zdjęcia*/overflow:hidden; /*selektor odpowiadający za rozwijanie się kwadratu, nie ruszać!*/color:transparent; /*kolor czcionki*/transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease; /*płynne rozwinięcie*/position:absolute; /*pozycja kwadratu*/border-radius: 0px; /*zaokrąglenie brzegów kwadratu*/border: 0px solid black; /*ramka kwadratu*/}
.box8:hover {
height:10px; /*wysokość kwadratu po najechaniu*/width:100px; /*długość kwadratu po najechaniu*/z-index:9999; /*widoczność elementu na zdjęciu*/color:#eee; /*kolor czcionki*/}
.box9 {
background:#000; /*tło kwadratu*/padding:7px; /*odległość tekstu od brzegu tła*/height:10px; /*wysokość kwadratu*/width:10px; /*długość kwadratu*/top: 210px; /*odległość od góry zdjęcia*/overflow:hidden; /*selektor odpowiadający za rozwijanie się kwadratu, nie ruszać!*/color:transparent; /*kolor czcionki*/transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease; /*płynne rozwinięcie*/position:absolute; /*pozycja kwadratu*/border-radius: 0px; /*zaokrąglenie brzegów kwadratu*/border: 0px solid black; /*ramka kwadratu*/}
.box9:hover {
height:10px; /*wysokość kwadratu po najechaniu*/width:100px; /*długość kwadratu po najechaniu*/z-index:9999; /*widoczność elementu na zdjęciu*/color:#eee; /*kolor czcionki*/}
.box10 {
background:#cbada5; /*tło kwadratu*/padding:7px; /*odległość tekstu od brzegu tła*/height:10px; /*wysokość kwadratu*/width:10px; /*długość kwadratu*/top: 235px; /*odległość od góry zdjęcia*/overflow:hidden; /*selektor odpowiadający za rozwijanie się kwadratu, nie ruszać!*/color:transparent; /*kolor czcionki*/transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease; /*płynne rozwinięcie*/position:absolute; /*pozycja kwadratu*/border-radius: 0px; /*zaokrąglenie brzegów kwadratu*/border: 0px solid black; /*ramka kwadratu*/}
.box10:hover {
height:10px; /*wysokość kwadratu po najechaniu*/width:100px; /*długość kwadratu po najechaniu*/z-index:9999; /*widoczność elementu na zdjęciu*/color:#eee; /*kolor czcionki*/}</style></center>
W razie chęci dodania kolejnego kwadratu należy zwiększyć wartość wysokości o 25px.
Brak komentarzy:
Prześlij komentarz