Cikkajánló
A Képes üdvözlő szövegdoboz után elhoztam a másik nagy népszerűségnek örvendő szövegdobozt is. Ez a Képes project szövegdoboz. Ebbe írható például leírás a kedvenceitek aktuális munkálatairól vagy ismertető egy
Hoztam egy újabb CSS kódot a G-Portálra. Vagyis az alap kód az már meg volt régóta, csak gondoltam tegyük kicsit egyedivé a portálunkat, így a modulcímet kicsit átvariáltam. Kettő
Végre rászántam magam és elhoztam azt a leírást, amivel a Sosugary Galériába feltöltött legfrissebb képeket meg lehet jeleníteni bármilyen weboldalon és nem csak a G-Portálon. Annyira egyszerű az egész,
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
Képes project szövegdoboz

A Képes üdvözlő szövegdoboz után elhoztam a másik nagy népszerűségnek örvendő szövegdobozt is. Ez a Képes project szövegdoboz. Ebbe írható például leírás a kedvenceitek aktuális munkálatairól vagy ismertető egy filmjéről rövidebben, stb. Az átalakításához csak a képzelet szab határt :)

 

 

Természetesen többféleképpen is belehet kódolni az ilyen és hasonló dobozokat. Az általam készített kód ez:

 

Szövegdoboz kódja

 

<div id="project">
<div class="project-bg">
<img align="left" class="block-img" src="a kisképed URL címe" width="70" /> <b>Mozifilm - Max</b><br />
<i>2015. 06. 26</i><br />
<blockquote>
IDE JÖHET A SZÖVEG. IDE JÖHET A SZÖVEG
</blockquote>
</div>
</div>

 

CSS kód hozzá

 

<style type="text/css">
.project-bg{ /* a teljes doboz háttere */
background: #000000;
width: 350px;
padding: 25px 15px;
margin-bottom: -15px;
border-bottom: 5px solid #ADD0EA;
}
.block-img { /* a kiskép kinézete */
padding: 3px;
box-shadow: 5px 5px 5px #000000;
margin: 3px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
}
div[id*="project"] blockquote { /* a tartalom kinézete */
margin: 5px 0px;
padding: 10px;
background: url(ha háttérkép kerül a tartalom mögé, ide kell tenni);
font-family: arial;
font-size: 13px;
text-align: justify;
color: #757575;
line-height: 20px;
}
--></style>

lindadesign Hozzászólások
2 797 megtekintés

Hozzászólások