2016. 07. 25.

Karaktertábla #1

Sziasztok!
Korábban már ígértem, hogy valamikor majd hozok néhány saját készítésű karaktertáblát, és most itt is vagyok eggyel. Remélem, hasznát veszitek majd :)
így nézne ki:

 

 


Bridgit
Mendler
 

A kód pedig ez lenne hozzá:

<link href="http://fonts.googleapis.com/css?family=Allura" rel="stylesheet" type="text/css"></link>
<link href="http://fonts.googleapis.com/css?family=Chathura" rel="stylesheet" type="text/css"></link>
<style type="text/css">
 
 
 .bigbox{
width: 300px; 
height: 400px; 
background: url('http://kepfeltoltes.hu/160725/szovegdoboz_www.kepfeltoltes.hu_.png'); 
box-shadow: 0px 2px 10px #000000;
border: 2ox }
 
.picture{
width: 125px; 
height: 125px; 
border-radius: 70px; 
background: url('http://67.media.tumblr.com/fdc5a6b590db2d09a46c58eafd9c0db5/tumblr_nh8004bRue1rv2dduo1_250.gif') center top;
position: relative;
top: 150px;
left: 80px;
box-shadow: 2px 2px 10px #000;
border: 2px solid #000;
}
 
.title1{
font-family: 'Allura'; 
font-size: 55px;}
 
.title2{
font-family: 'Chathura';
font-size: 30px;
text-transform: uppercase;
top: -37px;
left: -20px;
position: relative;
}
 
</style>
<br />
<center>
 
<div class="bigbox">
<div class="title1">
Bridgit
</div>
<div class="title2">
Mendler
</div>
 
<div class="picture">
</div>
</div>
</center>

 

2 megjegyzés:

  1. A nevet, hogy tudjuk megváltoztatni? És a mozgóképet?

    VálaszTörlés
    Válaszok
    1. Szia!
      A névnél csak ki kell keresned a "Bridgit" és a "Mendler" szavakat, és átírni, amire szeretnéd. (Böngészőben Ctrl+F-fel tudsz keresni.)
      A mozgókép a .picture osztályban van, de mivel az az egyetlen gif kép a kódban, ugyanezzel a módszerrel elég, ha rákeresel a "gif" szóra.
      Remélem, sikerül megoldanod :)
      Szimy

      Törlés