2014. 08. 11.

MM - Szövegdobozok

Sziasztok!

Mint a címből is kideríthettétek, ezúttal szövegdobozokat hoztam nektek. Az egyik egy saját gyártmány, ezért ha valaki viszi, feltétlenül tüntesse fel a nevemet, vagy legalább a blogot! A másik egy mostanában eléggé elterjedt kód, amit igazából csak azért mutatok meg nektek, mert van benne valami, ami zavar (milyen meglepő, igaz?). Egy ideje gondolkodtam azon, hogy jobban meg szeretném vizsgálni a kódot, hátha ki tudom küszöbölni azt a problémát, de arra már lusta voltam, hogy meg is keressem, ám nem rég a Sweet Design nevezetű blog szinte az arcomba nyomta, ezért kénytelen voltam játszadozni vele egy kicsit. Nagyon szépen köszönöm nekik, hogy hozzájuttattak. :)


Szóval, akkor lássuk az első szövegdobozt, amit nem én csináltam, csak átalakítottam.
Íme az eredeti változat:


Cím
<style type="text/css">
.regan .alec { width: 240px; height: 80px; background-color: #736aa2; border-bottom: 7px solid #660000; position: relative; top: 0px; left: 0px; opacity: 0; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; }
.moretti a:hover { color: #660000; }
.regan .anna { width: 150px; padding-top: 5px; padding-bottom: 5px; font-size: 10px; letter-spacing: 2px; color: #fff; text-align: center; text-transform: lowercase; font-style: italic; background-color: #d2788c; font-family: cambria, serif; position: absolute; top: 65px; opacity: 0; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s;}
</style>
<link rel="stylesheet" type="text/css" href="http://yougobeckycoco.b1.jcink.com/uploads/yougobeckycoco/tracker.css" />

<center>
<div class="regan" style="background-color: #9eacca; width: 240px;">
<div class="img">
<div style="width: 150px; height: 150px; border-radius: 100%; background-image: url(KÉP LINKJE);">
<div class="anna">

Cím

</div>
</div>
</div>
<div class="alec">
</div>
<div class="moretti">

SZÖVEGSZÖVEGSZÖVEGSZÖVEG
</div>
</div>
</center>

Nekem nem tetszik, hogy a képnek van háttere, még hozzá ilyen nagy, ezért leszedtem róla és csak akkor jelenik meg, ha ráviszed az egeret.



Cím
<style type="text/css">
.regan .alec {
    width: 240px;
    height: 80px;
    background-color: #736aa2;
    border-bottom: 7px solid #660000;
    position: relative;
    top: 0px; left: 0px;
    opacity: 0;
    transition-duration: .6s;
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    -ms-transition-duration: .6s;
    -o-transition-duration: .6s;
}
.regan .alex {
    width: 240px;
    height: 313px;
    background-color: #C6BDF7;
    position: relative;
    top: 0px; left: 0px;
    opacity: 0;
    transition-duration: .6s;
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    -ms-transition-duration: .6s;
    -o-transition-duration: .6s;
}

.moretti a:hover {
    color: #660000;
}
.regan .anna {
    width: 150px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 10px;
    letter-spacing: 2px;
    color: #fff;
    text-align: center;
    text-transform: lowercase;
    font-style: italic;
    background-color: #d2788c;
    font-family: cambria, serif;
    position: absolute;
    top: 65px;
    opacity: 0; transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transition-duration: .6s;
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    -ms-transition-duration: .6s;
    -o-transition-duration: .6s;
}
.regan: hover .regan {
    -webkit-box-shadow: 1px 1px 21px 3px rgba(25, 25, 25, 0.30);
    -moz-box-shadow: 1px 1px 21px 3px rgba(25, 25, 25, 0.30);
    box-shadow: 1px 1px 21px 3px rgba(25, 25, 25, 0.30);
}
.regan {
    width: 250px;
    height: 400px;
    position: relative;
    overflow: hidden;
}
.regan .img {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 130px;
    left: 50px;
    transition-duration: .6s;
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    -ms-transition-duration: .6s;
    -o-transition-duration: .6s;
    z-index: 9;
}
.regan:hover .img {
    top: 10px;
    z-index: 9;}

.regan:hover .alec {
    opacity: .99;
}
.regan:hover .alex {
    opacity: .99;
}
.regan .moretti {
    width: 195px;
    height: 200px;
    padding-right: 5px;
    bottom: -250px;
    position: absolute;
    left: 25px;
    transition-duration: .6s;
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    -ms-transition-duration: .6s;
    -o-transition-duration: .6s;
    overflow: auto;
    font-family: cambria, serif;
    font-size: 10px;
    text-align: center;
    color: #222;
}
.moretti a {
    letter-spacing: 2px;
    font-family: cambria, serif;
    font-size: 10px;
   
    text-align: center;
    text-transform: lowercase;
    color: #000;
    font-style: italic;
    transition-duration: .6s;
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    -ms-transition-duration: .6s;
    -o-transition-duration: .6s;
}
.regan:hover .moretti {
    bottom: 25px;
}
hover .regan {
    background-color: #480000;
}
.moretti::-webkit-scrollbar {
    width: 10px;
    background-color: #222;
    border: 4px solid #fafafa;
}
.moretti::-webkit-scrollbar-thumb {
    background-color: #222;
    border: 3px solid #fafafa; 
}
.regan:hover .anna {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition-duration: .6s;
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    -ms-transition-duration: .6s;
    -o-transition-duration: .6s;
    opacity: .99;}
</style>

<center>
<div class="regan" style="width: 240px;">
<div class="img">
<div style="width: 150px; height: 150px; border-radius: 100%; background-image: url(150px x 150px KÉP LINK);">
<div class="anna">
Cím

</div>
</div>
</div>
<div class="alec">
</div>
<div class="alex">
</div>
<div class="moretti">
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG

</div>
</div>
</center>


És ígértem egy saját készítésű szövegdobozt is, ami kicsit hasonló a fentiekhez, de mégis más. Remélem, elnyeri a tetszéseteket!



Cím
<style type="text/css">
.alap .háttér {
    width: 100px;
    height: 100px;
    background: url(http://kepfeltoltes.hu/140728/900x500_Dare_to_dream_www.kepfeltoltes.hu_.png);
    position: relative;
    top: 0px; left: 0px;
    opacity: 1;
    transition-duration: .6s;
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    -ms-transition-duration: .6s;
    -o-transition-duration: .6s;
    border-radius: 60px;
    box-shadow: 0px 0px 5px #818181;
    top: 45px;
}

.szöveg a:hover {
    color: #660000;
}
.alap .cím {
    width: 150px;
    text-shadow: 1px 1px 1px #000;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 17px;
    letter-spacing: 2px;
    color: #E9AB9E;
    font-weight: bold;
    text-align: center;
    text-transform: lowercase;
    font-style: italic;
    font-family: cambria, serif;
    position: absolute;
    top: 40px;
    left: -25px;
    border-radius: 70px;
    opacity: 1;
     transform: rotate(-0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transition-duration: .9s;
    -webkit-transition-duration: .9s;
    -moz-transition-duration: .9s;
    -ms-transition-duration: .9s;
    -o-transition-duration: .9s;
}

.alap {
    width: 240px;
    height: 220px;
    position: relative;
    overflow: hidden;
}

.alap:hover .háttér {
    opacity: 1;
    height: 210px;
    border-radius: 40px;
    width: 230px;
    top: 0px;
    box-shadow: 1px 1px 5px #818181;
}

.alap .szöveg {
    width: 195px;
    height: 150px;
    padding: 5px;
    bottom: -250px;
    position: absolute;
    left: 18px;
    transition-duration: .6s;
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    -ms-transition-duration: .6s;
    -o-transition-duration: .6s;
    overflow: auto;
    font-family: cambria, serif;
    font-size: 10px;
    text-align: justify;
    color: #222;
    background: rgba(233, 171, 158, 0.30);
    border-radius: 10px;
}
.szöveg a {
    letter-spacing: 2px;
    font-family: cambria, serif;
    font-size: 10px;
    text-align: center;
    text-transform: lowercase;
    color: #000;
    font-style: italic;
    transition-duration: .6s;
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    -ms-transition-duration: .6s;
    -o-transition-duration: .6s;
}
.alap:hover .szöveg {
    bottom: 25px;
}


hover .alap {
    background-color: #480000;
}
.szöveg::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
}
.szöveg::-webkit-scrollbar-thumb {
    background-color: #E9AB9E;
    box-shadow: 0px 0px 5px;
    border-radius: 3px;
}
.alap:hover .cím{
    box-shadow: 0px 0px 0px #818181;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition-duration: .6s;
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    -ms-transition-duration: .6s;
    -o-transition-duration: .6s;
    opacity: .99;
    top: -3px;
    left: 0;
    width: 100%;
    font-size: 30px;
    border-radius: 15px 15px 0px 0px;
    background: transparent;
}
</style>

<center>
<div class="alap" style="width: 240px;">
<div class="háttér">
<div style="width: 150px; height: 150px; border-radius: 100%;">
<div class="cím">

Cím

</div>
</div>
</div>
<div >
</div>
<div class="szöveg">
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG
SZÖVEG SZÖVEG SZÖVEG SZÖVEG

</div>
</div>
</center>
<a href="
https://draft.blogger.com/profile/11570807376423883516" target="_blank" title="Tiny Hand"><img src="http://kepfeltoltes.hu/140728/45653830Sin_t_tulo-1_www.kepfeltoltes.hu_.png" border="0" alt="Tiny Hand" style="box-shadow: none; position:absolute; top: 0px; right: 0px;" /></a>

Ha nem tudjátok egyedül átalakítani valamelyik szövegdobozt (nem kell, hogy ebből a bejegyzésből, vagy oldalról való legyen), akkor nyugodtan keressetek fel a blog e-mail címén és szívesen segítek ez ügyben. Ne féljetek tőlem, nem harapok, csak segíteni akarok, ha esetleg nem értenétek a kódokhoz, mégis szívesen használnátok egyet, akkor ne csúnyítsátok el a blogotok, inkább tényleg keressetek fel!

További jó olvasgatást és blogolást kívánok!
M. Mircsi

16 megjegyzés:

  1. Szia:) A második szövegdoboz nagyon tetszik, csak valahogy nekem nem akar összejönni. Itt az emailem: dallosdalmi@gmail.com Ott is írok neked. Ha látod, kérlek írj vissza, megtennéd, hogy segítesz?

    VálaszTörlés
    Válaszok
    1. Szia!

      Megkaptam a e-mailed és válaszoltam is rá. :)

      Törlés
  2. Ezt a megjegyzést eltávolította a szerző.

    VálaszTörlés
  3. Ezt a megjegyzést eltávolította a szerző.

    VálaszTörlés
  4. szia! Vittem a másodikat.köszönöm a munkádat :)

    VálaszTörlés
  5. Szia Mircsi!
    Szerettem volna az oldalamra kitenni a második szövegdobozt, de nem sikerült. Tudnál segíteni nekem? O.o

    VálaszTörlés
    Válaszok
    1. Szia!
      Természetesen. Keress meg facebookon, vagy írj egy levelet a gmail fiókomra. :)
      https://www.facebook.com/mircsi.miracle
      mircsi9919@gmail.com

      Törlés