Instrukcje - zdjęcie z informacjami

Élise de la Serre

ur.1768 | Templariusz | Paryż | Wersal | rewolucja francuska
powiązania | pamiętnik

Kolejna, mam nadzieję, że przydatna instrukcja na efekt pokazany powyżej. Można oczywiście kod modyfikować na różne sposoby - dodać tło, coś odjąć, coś przesunąć, ale do tego trzeba skupić się właśnie na kodzie. Zamieszczam go z drobnym kredytem zaufania, że docenicie, iż spędzam trochę czasu na ułożenie go i jednak czasem postanowicie zajrzeć do Księgi Pobrań.

<center>
<div id="tlo">
<div id="puste">
</div>
<div id="nazwisko">
IMIĘ I NAZWISKO     </div>
<div id="info">
najważniejsze informacje <br />
<a href="LINK DO PODSTRONY1"_blank">link1</a> | <a href="LINK DO PODSTRONY2" target="_blank">link2</a>
</div>
</div>
</center>
<style type="text/css">
#tlo {
   height:700px; /*wysokość zdjęcia*/
   width:500px;  /*szerokość zdjęcia*/
   background: url("LINK DO ZDJĘCIA");
}
#puste{
   height:500px; /*odległość między górą zdjęcia a tekstem*/
}
#nazwisko {
   text-align: center; /*wyśrodkowanie tekstu*/
   width:100%; /*długość pola tekstowego*/
   height:60px; /*szerokość pola tekstowego*/
   font-family: 'Vladimir Script'; /*rodzaj czcionki*/
   font-size: 50px; /*rozmiar czcionki*/
   color: black; /*kolor czcionki*/
   text-shadow: 2px 0px 2px white; /*cienie pod tekstem*/
}
#info {
   text-align: center; /*wyśrodkowanie tekstu*/
   width:96%;  /*długość pola tekstowego*/
   height:65px; /*szerokość pola tekstowego*/
   font-family: 'Georgia'; /*rodzaj czcionki*/
   font-size: 14px; /*rozmiar czcionki*/
   letter-spacing: 5px; /*odległość między literami*/
   padding: 5px; /*odległość między ramką a tekstem*/
   border-radius: 0px 0px 50px 50px; /*zaokrąglenie ramki*/
   border: 1px solid #000; /*ramka dla tekstu*/
   background:rgba(0, 0, 0, 0.7); /*kolor tła tekstu*/
   color: grey; /*kolor czcionki*/
   text-shadow: -2px 0px 5px #ada495, 2px 0px 5px #040203; /*cienie pod tekstem*/
}
</style>

Wartości zaznaczone kolorem można zmieniać według własnego uznania.