Cikkajánló
Telepítést és hasznos leírásokkat ezeken a linkeken olvashattok:   WordPress hozzászólások importálása Disqus-be Disqus használata bővítménnyel Legfrissebb bejegyzések megjelenítése az oldalsávban   Ebben a cikkben most pár szóban megismertetem
Igazából ezzel a kicsike programmal azt lehet letesztelni, hogy kisebb vagy nagyobb felbontásban az oldalatok kinézete vagy azon elhelyezett menük, galéria képek, üdvözlő üzenetek nem-e csúsznak el más felbontásokban.
A hétvégén kértetek egy Nathan Sykes .psd fejlécet. Hát elkészült :)  Közben 16 darab .png képet is készítettem Nathan-ról, ami pedig a galériába lett feltöltve. A .psd fejléc innen
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
Képes project szövegdoboz 6.

Sorozat címe

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 in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Frissek Online Hivatalos Képek

 
Doboz kódja
A perjel helyére mennek a link címek a frissek, online, stb-nél

 

<div class="hovereffect">
<img alt="" class="img" src="ide jön a kép URL címe" />
<div class="overlay">
<h2>
Sorozat címe</h2>
<p>
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 in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3><a href="/"><b>Frissek</b></a> <a href="/"><b>Online</b></a> <a href="/"><b>Hivatalos</b></a> <a href="/"><b>Képek</b></a></h3></div>
</div>

 

CSS kód

 

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab&subset=latin,latin-ext);
.hovereffect {
width: 650px; /* a doboz szélessége */
height: 400px; /* a doboz magassága */
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
margin: 0px auto;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background: #4B4B4B; /* háttérszín a képre */
filter:alpha(opacity=50); /* háttérszín átlátszósága */
-moz-opacity:0.5; /* háttérszín átlátszósága */
opacity: 0.5; /* háttérszín átlátszósága */
-webkit-transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
}
.hovereffect:hover .overlay { /* háttérszín, ha ráviszed az egeret */
background: #F3B07B;
opacity: 0.5;
filter: alpha(opacity=70);
-moz-opacity:0.7; /* háttérszín átlátszósága */
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 { /* cím kinézete */
font-family: 'Roboto Slab', serif;
text-transform: uppercase;
color: #ffffff;
text-align: center;
position: relative;
font-size: 17px;
font-weight: normal;
letter-spacing: 1px;
padding: 10px;
background: #000000;
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
}
.hovereffect:hover h2 {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hovereffect p { /* tartalom kinézete */
font-family: Arial;
font-size: 13px;
text-align: justify;
color: #000000;
border: 1px solid #000000;
background: transparent;
display: inline-block;
opacity: 0;
filter: alpha(opacity=0);
font-weight: normal;
padding: 25px 25px;
margin: 30px 30px 10px 30px;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
}
.hovereffect:hover p {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect p:hover {
box-shadow: 0 0 5px #686868;
}
.hovereffect h3 { /* cím kinézete */
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
}
.hovereffect b { /* linkek kinézete */
font-family: Arial !important;
font-size: 13px !important;
font-weight: normal !important;
text-align: center;
padding: 7px;
color: #ffffff;
border-bottom: 4px solid #ffffff;
background: #FD835E;
}</style>

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

Hozzászólások