2017. 11. 20.Képes project szövegdoboz 32.
2017. 11. 18.Videó beágyazása Coppermine galériába 2.0
2017. 11. 16.Coppermine themes
2017. 11. 16.WordPress themes
2017. 11. 15.Új design a LindaDesign-on
png-keszites.flv

PNG kép készítése

demi-lovato.png

Sosugary Gallery themes

lindadesign-fantasy.png

Coppermine Gallery themes

vanessa-marano.png

G-Portál themes

Képes project szövegdoboz 26.
750 megtekintés

A bejegyzés címe lehetett volna, hogy négy darab új képes project szövegdoboz, mert most négy újat hoztam, de mivel egy bejegyzésbe csak egyet teszek, így a legutolsó címet kapta a modul. A másik három dobozt a lenti linkeken találjátok és azt, hogy hogyan néz ki a másik három azt a kiemelt képen látjátok ;) Tehát itt most a 26. doboz kódjai és a demó található.

 

 

Képes project szövegdoboz 26.

 

Trónok harca
daenerys targaryen — (2017)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Bővebben erről a projektről!

 

DIV kód
Itt a kép jelenleg 280 pixel széles

 

<div id="projects">
<div class="img"><span class="title">Trónok harca</span>
<span class="info">daenerys targaryen -- (2017)</span></div>
<div id="sinopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. <a href="/">Bővebben erről a projektről!</a></div>
</div>

 

CSS kód

 

<style type="text/css">
#projects {
margin: 0px auto;
width: 280px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
}
#projects .img {
background: url(IDE JÖN A KÉP URL CÍME);
}
#projects .title {
text-transform: uppercase;
color: #6b5740;
background: #ffffff;
letter-spacing: 0.3em;
font-size: 11px;
font-style: normal;
font-weight: bold;
padding: 3px;
position: relative;
bottom: -45px;
left: -10px;
}
#projects .info {
text-transform: lowercase;
font-style: italic;
letter-spacing: 0.2em;
font-size: 10px;
font-weight: normal;
position: relative;
bottom: -50px;
left: -16px;
}
#projects .img {
background-size: cover;
height: 80px;
color:#ffffff;
line-height: 110%;
padding: 60px 20px 0 20px;
margin: 0 0 10px 0;
text-align: left;
}
#sinopsis {
background: #f6f6f6;
border-left: 1px solid #dddddd;
text-align: justify;
padding: 8px;
}
#sinopsis a {
background: #98AFA5;
color: #ffffff;
text-decoration: none;
}</style>




Előző, következő cikk



  DIV kód A demó doboz a két kód között található a modul közepén :) A kép nagysága 100×100 pixeles, de a CSS kódban fel is van tüntetve. A perjelek helyére mennek a linkek URL címei.   <div class="projects">

Régebben már hoztam arról leírást, hogy például egy Coppermine Galériából hogyan lehet csoportosan képeket letölteni. Jó az a leírás még most is, de most hoztam egy annál egyszerűbbet. Sőt, ezzel a programmal, (mert ez egy picike program) olyan képeket

 



Hozzászólások