Cikkajánló
Elindítom azt a cikksorozatot, amiben külön-külön minden CSS kódrészről leírom, hogy micsoda, mire való és mi mindenre hathat a G-Portálon. Belinkelem mindegyik cikkhez azokat a G-Portálos leírásokat, amik már
Sziasztok! A napokban készítettem rendelésre G-Portálos design-okat, és úgy belejöttem, hogy csak úgy, mert éppen volt időm, csináltam négy darab ingyen letölthetőt is :) Többször van, hogy mostanában úgy
Jó sok kérdést kaptam már arról, hogyan lehet a G-Portálon úgy kinézetet készíteni, hogy a szélső és középső modulok a lap alján egyforma hosszúak legyenek. Volt már szó ezekről
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 3.
Gilmore girls | 2016
      

 

Az ikonokhoz ezt a kódot is másoljátok ki:

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

 

Az ikonokat itt tudjátok módosítani: https://fortawesome.github.io/Font-Awesome/icons/

 

Doboz kódja

 

<div class="project" style="background:url(/images/scripts/szovegdobozok/025/001.jpg); left top no-repeat; background-size:cover;"><div class="details">Gilmore girls | 2016<br />
<small><a href="/"><strike class="fa fa-picture-o"></strike></a>&nbsp; &nbsp;<a href="/"><strike class="fa fa-info-circle"></strike></a>&nbsp; &nbsp;<a href="/"><strike class="fa fa-facebook-official"></strike></a></small></div>
</div>

 

CSS kód

 

<style type="text/css">
.project {
margin:0 auto 10px;
padding:0;
width:auto;
height:150px;
max-width:340px;
overflow:hidden;
text-align:left;
position:relative;
color: #ffffff;
font-family: Century Gothic;
font-size: 12px;
font-weight: bold;
line-height: 20px;
opacity:0.6;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
}
.project .details {
position:absolute;
top:90px;
left:6px;
z-index:100;
background: #000000;
border: 1px solid #ffffff;
padding: 5px;
}
.project small {
font-weight: 300;
color: #bbb;
}
.project a {
color: #ffffff;
font-size: 15px;
}
.project a:hover {
color: #A48377;
}
strike {
text-decoration: none;
}
</style>

lindadesign Hozzászólások
1 589 megtekintés

Hozzászólások