Kezdés
Welcome message

Üdvözlök minden kedves erre tévedőt a Glamour Factory nevet viselő webmagazinon! Az oldal grafikákra, kellékekre, photoshop leírásokra és kódolásra specializálódott, melyek hasznosak és ötlet adóak, inspirálóak lehetnek kezdő, haladó és akár profi oldal szerkesztőknek, blogolóknak. A glamour gyár hetente frissülni fog változatos tanácsokkal, érdekességekkel és tippekkel. Érezd jól magad itt, ha tetszik a munkám nézz be máskor is! bcp de bisous, Efruse

Elérhetőségeink:

 
Partnerek
Partners

Képre vár vagy inaktív:

Orchiq ; Berni ; Birds

 
Üzenj
Chat

 
Köszönet
References

Bizony az oldal nem jöhetett volna létre segítség nélkül, és úgy gondolom, hogy a forrásaim, "nevelőim" megérdemlik azt, hogy megemlítsem őket, köszönetet mondjak nekik. Az alapokat Linda leírásai után sikerült elsajátítanom, általa és nővérem által ismerkedtem meg a honlapszerkesztéssel, csöppentem bele a G-Portál világába. Ahogy egyre jobban belejöttem a dolgokba, úgy ismerkedtem meg több grafikákkal, photoshop leírásokkal, illetve kódok ismertetésével foglalkozó weblappal. Ide tartozik nikkii*, Brielle, Adry és Bogee (az egykori Design World szerkesztője). Mellettük sok támogatást és segítséget nyújtott egyaránt Nikrécia, JuciZed és Gergő. Tovább a külföldi forrásokhoz >>

 
Jövőbeli tervek
Plans for the future
kód navigációs menü
kód projektdoboz
leírás ajánlott betűtípusok
leírás sosugary galéria átalakítása
kód cserék szöveggel, képpel
grafika psd színezések
leírás esztétikus kinézet
 
Görgess lefelé, belépés button a fejlécre

@2017.03.25.

Forrás: codepen

Ebben a tutorialban arról olvashatsz, hogy hogyan is lehet elhelyezni egy olyan lefelé mutató nyilat, vagy éppen 'Belépés' / 'Enter' feliratot a fejlécre, amelyre ha rákattintunk, rögtön az oldal tartalmi része jelenik meg, ezzel 'átugorva' a fejlécet.

Script:

Ez a script lesz az alap, amire mindenképp szükségünk lesz. Egy üres oldalmodulba célszerű helyezni, emellé pedig bekerülhet a forráskódba még a CSS és a HTML kód is, nem fogják zavarni egymást.

<script>
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
</script>

Lefelé mutató nyíl készítése:

CSS kód:

Ugyanabba a modulba is helyezheted akár, ahova a fenti scriptet helyezed, persze forráskód nézetbe.:)

section { - Ezután a rész után tudjuk megadni a button paramétereit.
#nyil a span { - Magának a nyílnak a kinézete.
#kezdet { - Itt lehetséges beállítani azt, hogy a lap tetejétől számítva hol kezdődik el az oldal tartalma, tehát itt állíthatjuk be azt, hogyha rákattintunk a nyílra, mennyire 'dob' minket le.

section {
position: absolute;
margin: 0 auto !important; /* minden felbontásban ugyanott helyezkedik el */
top: 500px !important; /* a button távolsága a lap tetjétől */
width: 980px; /* button középre helyezése - függ az oldalszélességtől */
height: 100px;
}
#nyil a {
padding-top: 60px;
}
#nyil a span {
position: absolute;
top: 0;
left: 50%;
width: 30px;
height: 30px;
margin-left: -12px;
border-left: 2px solid #fff; /* a nyíl baloldali szárának vastagsága - stílusa - színe */
border-bottom: 2px solid #fff; /* a nyíl jobboldali szárának vastagsága - stílusa - színe */
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#kezdet {
position: absolute;
margin: 0 auto;
top: 700px !important; /* ha rákattintunk a nyílra ennyivel dob le a lap tetejétől */
height: 1px;
}

HTML kód:

Ez is nyugodtan mehet ugyanazon modul forráskód nézetébe, akárcsak a css és a script.

<div id="kezdet">
</div>
<section id="nyil">
<a href="#kezdet"><span></span></a>
</section>

 

'Belépés' felirat készítése:

CSS kód:

section { - Ugyanúgy a button elhelyezkedését határozhatjuk meg itt.
#nyil a { - Button kinézete.
#nyil a:hover { - Button kinézete ha rávisszük az egeret.
#kezdet { - Úgyszintén itt lehetséges beállítani azt, hogy a lap tetejétől számítva hol kezdődik el az oldal tartalma, tehát itt állíthatjuk be azt, hogyha rákattintunk a nyílra, mennyire 'dob' minket le.

section {
position: absolute;
margin: 0 auto !important; /* minden felbontásban ugyanott helyezkedik el */
top: 510px !important; /* a button távolsága a lap tetjétől */
width: 915px; /* középre helyezés - függ az oldal szélességétől */
height: 100px;
}
#nyil a {
border: 2px solid #fff; /* keret a szövegnek */
color: #fff; /* betűszín */
font-family: Montserrat, sans-serif; /* betűtípus */
font-size: 12px; /* betűméret */
text-transform: uppercase; /* nagybetűs */
letter-spacing: 2px; /* betűk közötti távolság */
text-shadow: 0 0 5px rgba(255,255,255,0.4); /* szövegárnyék */
padding: 10px; /* keret és szöveg közötti távolság */
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#nyil a:hover {
opacity: 0.7; /* kissé átlátszóvá válik */
}
#kezdet {
position: absolute;
margin: 0 auto;
top: 700px !important; /* ha rákattintunk a nyílra ennyivel dob le a lap tetejétől */
height: 1px;
}

HTML kód:

<div id="kezdet">
</div>
<section id="nyil">
<a href="#kezdet">Belépés</a>
</section>