Cikkajánló
Volt egy kis időm, így készítettem CSS kódot a blog modul lapozójához. Kicsit átvariáltam superuser CSS kódját. Összevontam pár részt benne, meg megcsináltam, hogy a lapozó pont a blog
Hoztam még egy .psd fejlécet és a hozzá gyűjtött .png képeket is feltöltöttem a galériába. A fejléc a szokásos helyen tölthető le: PSD – Photoshop fejlécek Itt pedig meg
Általában a lapozást is mindenki bővítménnyel oldja meg. Viszont én amit lehet szeretek kóddal megoldani, mert a túl sok bővítmény lassíthatja a honlapot. Plusz kevesebb macera, mert nincs mit
Prémium téma | Ellie Goulding G-Portálos téma WordPress | Bejegyzés nem jelenik meg a főoldalon Gal Gadot G-Portálos téma Emilia Clarke G-Portálos téma Cole Sprouse G-Portálos téma
2017. szeptember. 08.
Képes project szövegdoboz 26.

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>

Kapcsolódó bejegyzések

lindadesign
181 megtekintés

Előző, következő cikk

Képes project szövegdoboz 25.

  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">

Coppermine | Csoportos képletöltés 2.0

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