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. Unknown2014. augusztus 20. 9:49

    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. MIRacIe M.2014. augusztus 20. 10:03

      Szia!

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

      Törlés
  2. Unknown2015. április 3. 13:34

    Ezt a megjegyzést eltávolította a szerző.

    VálaszTörlés
  3. Unknown2015. május 3. 11:21

    Szia :D
    vittem a harmadikat :p

    VálaszTörlés
  4. Unknown2015. május 4. 19:47

    Szia!
    Vittem mindet. :D

    VálaszTörlés
  5. ShieraBlack2015. május 11. 8:40

    Ezt a megjegyzést eltávolította a szerző.

    VálaszTörlés
  6. Unknown2015. május 25. 19:49

    Elvittem az elsőt köszi^^:33

    VálaszTörlés
  7. Névtelen2015. július 8. 15:32

    szia! Vittem a másodikat.köszönöm a munkádat :)

    VálaszTörlés
  8. Janet Mira Yılmaz2015. július 27. 10:41

    Szia! Vittem az utolsót ;)

    VálaszTörlés
  9. Hayako2015. augusztus 10. 20:33

    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. MIRacIe M.2015. augusztus 10. 21:07

      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
  10. Névtelen2015. november 27. 1:33

    Nagyon jók...

    VálaszTörlés
  11. Kanna-chan2016. február 6. 20:34

    Szia. Vittem a harmadikat.

    VálaszTörlés
  12. Timi2016. március 18. 16:42

    Vittem a masodikat

    VálaszTörlés
  13. Timi2016. március 18. 16:54

    Vittem a masodikat

    VálaszTörlés
  14. sweet-sugar-cake2016. május 17. 12:21

    Vittem az elsőt, köszi

    VálaszTörlés

Feliratkozás: Megjegyzések küldése (Atom)