Izdali smo novu knjigu “Content Marketing in u društvenim mrežama : Kako ući u glave svojih pretplatnika i natjerati ih da se zaljube u vaš brend.”
Algoritmi rangiranja - metode za ocjenu kvalitete web stranica TOP 10 treba sadržavati samo one stranice koje što potpunije odgovaraju na zahtjev korisnika. Visokokvalitetni rezultati osigurani su posebnim matematičkim formulama koje određuju "korisnost" pojedine stranice. Tražilice ne otkrivaju informacije o svojim algoritmima; webmasterima daju samo općenite preporuke za poboljšanje i optimizaciju web stranica. Međutim, optimizatori su naučili identificirati određene obrasce na temelju kojih se razvija strategija.
pokret.
Više videa na našem kanalu - naučite internet marketing uz SEMANTICA
Koje kriterije uzima u obzir algoritam rangiranja? Tražilice ocjenjuju web stranice na temelju mnogih parametara. Među najznačajnijim kriterijima su:
jedinstvenost i optimizacija tekstova (prisutnost ključnih fraza, mučnina, sadržaj vode);
starost domene;
količina i kvaliteta dolaznih poveznica;
vrsta korištenog CMS-a;
brzina učitavanja stranice stranice;
prisutnost grešaka u kodu.
Razumijevajući kako radi algoritam tražilice, webmaster može utjecati na rangiranje svoje web stranice. Da biste to učinili, potrebno je „prilagoditi“ stranice web projekta zahtjevima PS-a. Konkretno, trebat ćete ugraditi ključne izraze u meta oznake naslova i opisa, kao i izravno u tekst stranice. Ako promičete na temelju geo-ovisnog zahtjeva, tada, uz ključeve, trebate dodati naziv željenog grada ili regije.
Ovo je zanimljivo! Tražilica se povremeno nadograđuje, što dovodi do radikalne promjene postojećih algoritama. Takve mjere usmjerene su na borbu protiv neželjene pošte pretraživanja. Često promjena algoritma Yandexa dovodi do pogoršanja položaja web stranica promoviranih "crnim" i "sivim" metodama.
Sankcije pretraživanja Ako webmaster očito pokušava manipulirati algoritmima Yandexa, onda sustav pretraživanja može prema njemu primijeniti razne sankcije. Mogu se pojaviti sljedeći problemi:
Niže rangiranje u rezultatima pretraživanja
Loše indeksiranje novih stranica (ili gubitak starih dokumenata iz indeksa)
Potpuna ili djelomična BAN
Algoritmi Yandexa nameću sankcije za pretjeranu optimizaciju tekstova, na primjer, za objavljivanje popisa ključnih fraza na stranicama. Filtar se može primijeniti kako bi se "nevidljivi" tekst stopio s pozadinom. Sankcijama podliježu i portali i internetske platforme koje kopiraju tuđe sadržaje.
Novi Yandex algoritam – Minusinsk Ovaj algoritam uključuje pesimiziranje web projekta za korištenje SEO veza. Govorimo o stranicama koje kupuju tisuće poveznica pomoću automatiziranih razmjena kao što je Sape. S Yandexovog gledišta, poveznica se smatra "SEO" ako vodi s donatorske stranice niske kvalitete i ima komercijalno sidro.
Razlog korištenja filtra “ ” može biti naglo povećanje mase veze. Stoga, kako biste zaštitili svoj web projekt od mogućnosti takve sankcije, trebali biste postupno kupovati veze i razrijediti sidrene veze hipervezama koje nisu sidrene.
Ima mnogo gotova rješenja za stvaranje takvih ploča koristeći jQuery , zasebni dodaci i moduli za različite sustave upravljanja sadržajem. koristeći CSS ? Naravno, možete! Ali budite oprezni))), imajući na umu da ne podržavaju svi preglednici moderna CSS3 svojstva jednako dobro.
Ne tako davno on je “na planini proizveo” rješenje i primjer rada. Jedan od prvih komentara bio je: “ajmo to pomaknuti u stranu...”. Zašto ne? hajmo)).
Danas ću vam reći i pokazati vam primjer kako možete koristiti "CSS magiju" za stvaranje potpuno funkcionalnog klik-to-klik izbornika.
HTML oznaka Započnimo analizu s prekidačem ploče, za koji koristimo standardnu zastavu ():
Postavite potvrdni okvir na vrh dokumenta, po mogućnosti odmah iza oznake
. Pišemo skriveni atribut, izravno označavajući "skriveno" stanje
ovog elementa , i također dodijeliti
jedinstveni identifikator , id="nav-toggle" na primjer, za povezivanje s atributom oznake for
, koji ćemo dizajnirati i koristiti kao gumb za prebacivanje ploče.Koristio sam oznaku kao omotač za sadržaj bočne trake s određenom klasom class="nav" , budući da Internet Explorer do inačice 8.0 uključivo zanemaruje ovu oznaku, možete koristiti uobičajenu .
Unutar baznog spremnika postavljamo sadržaj koji nam je potreban.
Prije svega, napišimo oznaku (tag
) formiran u css-u u obliku upravo tog “hamburger gumba”, uz pomoć kojeg ćemo uspostaviti vezu sa skrivenom zastavicom checkbox-a. Da biste to učinili, potrebno je da naziv atributa for mora odgovarati ID-u potvrdnog okvira. Prazan atribut onclick se koristi za u iOS-u
web stranica <
ul>
<
li><
a href=
"#1"
>Jedan
<
li><
a href=
"#2"
>Dva
<
li><
a href=
"#3"
>Tri
<
li><
a href=
"#4"
>četiri
<
li><
a href=
"#5"
>Pet
<
li><
a href=
"#6"
>Šest
<
li><
a href=
"#7"
>sedam
Jedan Dva Tri četiri Pet Šest sedam Ovime završavamo označavanje bočnog izbornika. Istina, postoji još jedna potpuno izborna značajka, ovo je zatamnjivanje pozadine glavnog sadržaja kada je ploča uključena. Ako ti treba, samo
<
div class
=
"mask-content"
>
U demonstraciji sam ovu značajku isključio iz rada prema zadanim postavkama, komentirajući ovaj blok; ako vam iznenada zatreba, možete je lako pronaći i jednako lako omogućiti))).
Dakle, svi potrebni elementi su na mjestu, ostaje ono najvažnije i najzanimljivije, da se formira izgled , boje, oblikuju i daju pokret našem jelovniku. Sve ovo ćemo raditi isključivo koristeći CSS. Nema javascripta ili dodatnih slika.
CSS Neću opisivati svako pravilo i svojstvo, budući da sam to učinio izravno u css kod .
/** * Promjenjiva bočna navigacijska traka * klizi van klikom na lijevu stranu */ . nav( /* širina je proizvoljna, slobodno eksperimentirajte */ širina: 320px; min-width: 320px; /* popraviti i postaviti visinu ploče na maksimalnu */ visina: 100%; položaj: fiksni; vrh: 0 ; dolje: 0 ; margina: 0 ; /* pomakni (sakrij) panel u odnosu na lijevi rub stranice */ lijevo: - 320px; /* ispuna */ ispuna: 15px 20px; /* glatki prijelaz pomaka ploče */ - webkit- prijelaz: lijevo 0. 3s; - moz- prijelaz: lijevo 0. 3s; prijelaz: lijevo 0,3s; /* definirajte boju pozadine panela */ pozadina: #16a085; /* na vrhu ostalih elemenata */ z-indeks: 2000; ) /** * Gumb za prebacivanje ploče * oznaka
*/
. navigacijski prekidač ( /* apsolutno pozicioniran */ pozicija: apsolutna; /* u odnosu na lijevi rub ploče */ lijevo: 320px; /* uvlačenje od gornjeg ruba ploče */ gore: 1em; /* ispuna */ podstava: 0,5em; /* definirajte boju pozadine prekidača * često u skladu s bojom pozadine panela */ pozadina: naslijediti; /* boja teksta */ boja: #dadada; /* vrsta kursora */ kursor: pokazivač; /* veličina fonta */ veličina fonta: 1.2em; visina linije: 1; /* uvijek na vrhu ostalih elemenata stranice */ z-indeks: 2001; /* animira boju teksta pri lebdenju */ - webkit-prijelaz: boja. 25s lakoća - ulazak - izlazak; - moz- prijelaz: boja . 25s lakoća - ulazak - izlazak; prijelaz: boja. 25s lakoća - ulazak - izlazak; ) /* definirajte tekst gumba * Unicode znak (TRIGRAM ZA NEBO) */ . nav- prebacivanje: nakon (sadržaj: "\2630" ; tekstualni ukras: ništa; ) /* boja teksta pri lebdenju */ . nav- prebacivanje: lebdi ( boja: #f4f4f4; ) /** * Skriveni potvrdni okvir (potvrdni okvir) * nevidljiv i nedostupan :) * atribut naziva selektora potvrdnog okvira */ [ id= "nav-toggle" ] ( pozicija: apsolutna; prikaz: ništa; ) /** * promijenite položaj prekidača * kada se gleda na Mobilni uredaji * kada je navigacija proširena, postavljamo je unutar ploče */ [ id= "nav-toggle" ] : označeno ~ . nav > . nav-toggle (lijevo: automatski; desno: 2px; gore: 1em; ) /** * Kada je potvrdni okvir označen, panel se otvara * koristite pseudo-class:checked */ [ id= "nav-toggle" ] : označeno ~ . nav ( lijevo: 0 ; sjena okvira: 4px 0px 20px 0px rgba(0 , 0 , 0 , 0.5 ) ; - moz- sjena okvira: 4px 0px 20px 0px rgba(0 , 0 , 0 , 0.5 ) ; - webkit- box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5); overflow-y: auto; ) /* * pomaknuti sadržaj stranice * veličinom širine ploče, * izborna značajka, nije za svakoga */ [ id= "nav-toggle" ] : označeno ~ glavni > članak ( - webkit- transform: translateX(320px) ; - moz- transform: translateX(320px) ; transform: translateX(320px) ; ) /* * promijenite simbol prekidača, * uobičajeni križ (MNOŽENJE X), * možete koristiti bilo koju drugu ikonu */ [ id= "nav-toggle" ] : označeno ~ . nav > . nav- prebacivanje: nakon ( sadržaj: "\2715" ; ) /** * popravi grešku u Androidu<= 4.1.2
* см: http://timpietrusky.com/advanced-checkbox-hack
*/
tijelo ( - webkit- animacija: ispravak pogrešaka beskonačno 1s; ) @- webkit- ključni okviri popravak pogrešaka ( do ( padding: 0 ; ) ) /** * pobrinite se za srednje i male ekrane * mobilnih uređaja */ @medijski zaslon i (min. širina: 320px) ( html, tijelo ( margina: 0 ; preljev- x: skriveno; ) ) @ medijski zaslon i (maksimalna širina: 320 px) ( html, tijelo ( margina: 0 ; preljev- x: skriveno; ) . nav ( širina: 100%; sjena okvira: ništa ) ) /** * Oblikujte stil zaglavlja panela (logo) */ . nav h2 (širina: 90%; ispuna: 0; margina: 10px 0; poravnanje teksta: centar; sjena teksta: rgba(255, 255, 255, .1) - 1px - 1px 1px, rgba(0, 0, 0 , .5 ) 1px 1px 1px; veličina fonta: 1. 3em; visina linije: 1. 3em; neprozirnost: 0; transformacija: skala (0.1, 0.1); - ms- transformacija: skala (0.1, 0.1) ; - moz- transformacija: scale(0.1, 0.1) ; - webkit- transformacija: scale(0.1, 0.1) ; transform- origin: 0% 0%; - ms- transform- origin: 0% 0%; - moz- transform- porijeklo: 0% 0%; - webkit- transformacija- porijeklo: 0% 0%; prijelaz: neprozirnost 0,8s, transformacija 0,8s; - ms- prijelaz: neprozirnost 0,8s, - ms- transformacija 0,8s; - moz- prijelaz: neprozirnost 0,8s, - moz-transformacija 0,8s; - webkit- prijelaz: neprozirnost 0,8s, - webkit- transformacija 0,8s; ) . nav h2 a ( boja: #dadada; tekst- dekoracija: nema; tekst- transformacija: velika slova; ) /*glatki izgled naslova (logo) kada je ploča proširena */ [ id= "nav-toggle" ] : označeno ~ . nav h2 ( neprozirnost: 1 ; transformacija: skala (1 , 1 ) ; - ms- transformacija: skala (1 , 1 ) ; - moz- transformacija: skala (1 , 1 ) ; - webkit- transformacija: skala (1 , 1) ) ;) /** * izravno oblikujte sam izbornik * koristite neuređeni popis za stavke izbornika * dodajte transformacije i glatke prijelaze */ . nav > ul (display: block; margin: 0; padding: 0; list-style: none;) . nav > ul > li (visina linije: 2,5; neprozirnost: 0; - webkit- transformacija: translateX(- 50% ) ; - moz- transformacija: translateX(- 50% ) ; - ms- transformacija: translateX(- 50% ) ; transform: translateX(- 50 % ) ; - webkit-transition: neprozirnost . 5s . 1s, - webkit- transform . 5s . 1s; - moz- prijelaz: neprozirnost . 5s . 1s, - moz- transform . 5s . 1s ; - ms- prijelaz: neprozirnost . 5s . 1s, - ms- transformacija . 5s . 1s; prijelaz: neprozirnost . 5s . 1s, transformacija . 5s . 1s; ) [ id= "nav-toggle" ] : označeno ~ . nav > ul > li ( neprozirnost: 1 ; - webkit- transform: translateX(0 ) ; - moz- transform: translateX(0 ) ; - ms- transform: translateX(0 ) ; transform: translateX(0 ) ; ) /* odredi intervale za pojavljivanje stavki izbornika */ . nav > ul > li: nth- dijete(2) ( - webkit- prijelaz: neprozirnost . 5s . 2s, - webkit- transformacija . 5s . 2s; prijelaz: neprozirnost . 5s . 2s, transformacija . 5s . 2s; ) . nav > ul > li: nth- dijete(3) ( - webkit- prijelaz: neprozirnost . 5s . 3s, - webkit- transformacija . 5s . 3s; prijelaz: neprozirnost . 5s . 3s, transformacija . 5s . 3s; ) . nav > ul > li: nth- dijete(4) ( - webkit- prijelaz: neprozirnost . 5s . 4s, - webkit- transformacija . 5s . 4s; prijelaz: neprozirnost . 5s . 4s, transformacija . 5s . 4s; ) . nav > ul > li: nth- dijete(5) ( - webkit- prijelaz: neprozirnost . 5s . 5s, - webkit- transformacija . 5s . 5s; prijelaz: neprozirnost . 5s . 5s, transformacija . 5s . 5s; ) . nav > ul > li: nth- dijete(6) ( - webkit- prijelaz: neprozirnost . 5s . 6s, - webkit- transformacija . 5s . 6s; prijelaz: neprozirnost . 5s . 6s, transformacija . 5s . 6s; ) . nav > ul > li: nth- dijete(7 ) ( - webkit- prijelaz: neprozirnost . 5s . 7s, - webkit- transformacija . 5s . 7s; prijelaz: neprozirnost . 5s . 7s, transformacija . 5s . 7s; ) /** * dizajn poveznica stavki izbornika */ . nav > ul > li > a ( display: inline- block; position: relative; padding: 0 ; font- family: "Open Sans", sans-serif; font- weight: 300 ; font- size: 1. 2em; color : #dadada; širina: 100%; tekstualni ukras: ništa; /* glatki prijelaz */ - webkit-prijelaz: boja. 5s jednostavnost, podstava. 5s lakoća - moz- prijelaz: boja . 5s jednostavnost, podstava. 5s lakoća prijelaz: boja. 5s jednostavnost, podstava. 5s lakoća ) /** * stanje veza izbornika pri lebdenju */ . nav > ul > li > a: lebdjeti, . nav > ul > li > a:focus (boja: bijela; padding- lijevo: 15px;) /** * veza izbornika podcrtana */ . nav > ul > li >
a :
prije {
sadržaj :
""
;
prikaz :
blok ;
položaj :
apsolutni ;
pravo :
0
;
dno :
0
;
visina :
1px ;
širina :
100
%;
-
webkit -
tranzicija :
širina 0s lakoća ;
tranzicija :
širina 0s lakoća ;
}
.
nav >
ul >
li >
a :
nakon {
sadržaj :
""
;
prikaz :
blok ;
položaj :
apsolutni ;
lijevo :
0
;
dno :
0
;
visina :
1px ;
širina :
100
%;
pozadina :
#3bc1a0; -
webkit -
tranzicija :
širina .
5s lakoća ;
tranzicija :
širina .
5s lakoća ;
}
/** * animirajte podcrtavanje * veza dok lebdite */
.
nav >
ul >
li >
a :
lebdjeti :
prije {
širina :
0
%;
pozadina :
#3bc1a0; -
webkit -
tranzicija :
širina .
5s lakoća ;
tranzicija :
širina .
5s lakoća ;
}
.
nav >
ul >
li >
a :
lebdjeti :
nakon {
širina :
0
%;
pozadina :
transparentan ;
-
webkit -
tranzicija :
širina 0s lakoća ;
tranzicija :
širina 0s lakoća ;
}
/* pozadina je zatamnjena na glavnom sadržaju * dok su elementi blokirani * ovo je kontroverzna značajka, ako vam treba * samo uklonite komentar */
/* .mask-content ( prikaz: blok; pozicija: fiksna; vrh: 0; lijevo: 0; z-indeks: 1000; širina: 100%; visina: 100%; boja pozadine: rgba(0, 0, 0) , 0,4); vidljivost: skriveno; neprozirnost: 0; ) :checked ~ .mask-content ( vidljivost: vidljiva; neprozirnost: 1; -webkit-transition: neprozirnost .5s, vidljivost .5s; prijelaz: neprozirnost .5s, vidljivost . 5s; ) */
/** * Promjenjiva bočna navigacijska traka * izvlači se klikom na lijevu */ .nav ( /* širina je proizvoljna, slobodno eksperimentirajte */ širina: 320px; minimalna širina: 320px; /* popravite i postavite visinu panela do maksimuma */ visina: 100%; položaj: fiksno; vrh: 0; dno: 0; margina: 0; /* pomakni (sakrij) panel u odnosu na lijevi rub stranice */ lijevo: - 320px; /* padding */ padding: 15px 20px; / * glatki pomak ploče */ -webkit-transition: lijevo 0,3 s; -moz-transition: lijevo 0,3 s; prijelaz: lijevo 0,3 s; /* definirajte boju pozadine ploče */ pozadina: #16a085; /* na vrhu ostalih elemenata * / z-index: 2000; ) /** * Gumb za prebacivanje ploče * oznaka */ .nav-toggle ( /* apsolutno pozicioniran */ položaj: apsolutan; /* relativno u odnosu na lijevi rub ploče */ lijevo: 320px; /* uvlaka od gornjeg ruba ploče */ vrh: 1em; / * padding */ padding: 0.5em; /* odredite boju pozadine prekidača * najčešće u skladu s bojom pozadine panela */ background: inherit; /* boja teksta */ color: #dadada; /* kursor vrsta */ kursor: pokazivač; /* veličina fonta * / veličina fonta: 1.2em; visina linije: 1; /* uvijek na vrhu ostalih elemenata stranice */ z-indeks: 2001; /* animirana boja teksta pri lebdenju */ -webkit-transition: boja .25s ease-in-out; -moz-transition: boja .25s ease-in-out; prijelaz: boja .25s ease-in-out; ) /* definirajte tekst gumba * Unicode znak (TRIGRAM ZA NEBO) */ .nav-toggle:after ( content: "\2630"; text-decoration: none; ) /* lebdite u boji teksta */ .nav-toggle:hover ( boja: #f4f4f4; ) / ** * Skriveni potvrdni okvir (potvrdni okvir) * nevidljiv i nedostupan :) * atribut oznake imena selektora */ ( pozicija: apsolutna; prikaz: nijedan; ) /** * mijenjanje položaja prekidača * kada se gleda na mobilnim uređajima * kada je navigacija proširena, postavljamo ga unutar ploče */ :checked ~ .nav > .nav-toggle ( lijevo: auto; desno: 2px ; top: 1em; ) /* * * Kada je potvrdni okvir označen, panel se otvara * use pseudo-class:checked */ :checked ~ .nav ( lijevo: 0; box-shadow:4px 0px 20px 0px rgba(0, 0,0, 0.5); -moz-box-shadow :4px 0px 20px 0px rgba(0,0,0, 0.5); -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5) ; overflow-y: auto; ) /* * pomak stranica sadržaja * prema veličini širine panela, * izborna značajka, nije za svakoga */ :checked ~ glavni > članak ( -webkit-transform: translateX(320px); - moz-transform: translateX(320px); transform: translateX(320px); ) /* * promijenite simbol za prebacivanje, * uobičajeni križ (MULTIPLICATION X), * možete koristiti bilo koju drugu ikonu */ :checked ~ .nav > . nav-toggle:after ( content: "\2715"; ) /** * popravi grešku u Androidu<= 4.1.2
* см: http://timpietrusky.com/advanced-checkbox-hack
*/ body {
-webkit-animation: bugfix infinite 1s;
} @-webkit-keyframes bugfix {
to {
padding: 0;
}
} /**
* позаботьтимся о средних и маленьких экранах
* мобильных устройств
*/ @media screen and (min-width: 320px) {
html,
body {
margin: 0;
overflow-x: hidden;
}
} @media screen and (max-width: 320px) {
html,
body {
margin: 0;
overflow-x: hidden;
}
.nav {
width: 100%;
box-shadow: none
}
} /**
* Формируем стиль заголовка (логотип) панели
*/ .nav h2 {
width: 90%;
padding: 0;
margin: 10px 0;
text-align: center;
text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
font-size: 1.3em;
line-height: 1.3em;
opacity: 0;
transform: scale(0.1, 0.1);
-ms-transform: scale(0.1, 0.1);
-moz-transform: scale(0.1, 0.1);
-webkit-transform: scale(0.1, 0.1);
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transition: opacity 0.8s, transform 0.8s;
-ms-transition: opacity 0.8s, -ms-transform 0.8s;
-moz-transition: opacity 0.8s, -moz-transform 0.8s;
-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
} .nav h2 a {
color: #dadada;
text-decoration: none;
text-transform: uppercase;
} /*плавное появление заголовка (логотипа) при раскрытии панели */ :checked ~ .nav h2 {
opacity: 1;
transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
} /**
* формируем непосредственно само меню
* используем неупорядоченный список для пунктов меню
* прикрутим трансфомации и плавные переходы
*/ .nav > ul ( display: block; margin: 0; padding: 0; list-style: none; ) .nav > ul > li ( line-height: 2.5; neprozirnost: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: neprozirnost .5s .1s, -webkit-transform .5s .1s; -moz-transition: neprozirnost .5s .1s, -moz-transform .5s .1s; -ms-transition: neprozirnost .5s .1s, -ms-transform .5s .1s; prijelaz: neprozirnost .5s .1s , transformacija .5s .1s; ) :checked ~ .nav > ul > li ( neprozirnost: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0) ); transform: translateX(0); ) /* odredi intervale za pojavljivanje stavki izbornika */ .nav > ul > li:nth-child(2) ( -webkit-transition: neprozirnost .5s .2s, -webkit -transformacija .5s .2s; prijelaz: neprozirnost .5s .2s, transformacija .5s .2s; ) .nav > ul > li:nth-child(3) ( -webkit-prijelaz: neprozirnost .5s .3s, -webkit- transformacija .5s . 3s; prijelaz: neprozirnost .5s .3s, transformacija .5s .3s; ) .nav > ul > li:nth-child(4) ( -webkit-transition: neprozirnost .5s .4s, -webkit-transform .5s .4s ; prijelaz: neprozirnost .5s .4s, transformacija .5s .4s; ) .nav > ul > li:nth-child(5) ( -webkit-transition: neprozirnost .5s .5s, -webkit-transform .5s .5s; prijelaz: neprozirnost .5s .5s, transformacija .5s .5s; ) .nav > ul > li:nth-child(6) ( -webkit-transition: neprozirnost .5s .6s, -webkit-transform .5s .6s; prijelaz: neprozirnost .5s .6s, transformacija .5s .6s; ) . nav > ul > li:nth-child(7) ( -webkit-transition: neprozirnost .5s .7s, -webkit-transform .5s .7s; prijelaz: neprozirnost .5s .7s, transform .5s .7s; ) /* * * dizajn poveznica na stavke izbornika */ .nav > ul > li > a ( display: inline-block; position: relative; padding: 0; font-family: "Open Sans", sans-serif; font-weight: 300 ; veličina fonta: 1.2em; boja: #dadada; širina: 100%; dekoracija teksta: ništa; /* gladak prijelaz */ -webkit-prijelaz: boja .5s lakoća, padding .5s lakoća; -moz-prijelaz: boja .5s ease, padding .5s ease; prijelaz: boja .5s ease, padding .5s ease; ) /** * stanje veza izbornika pri lebdenju */ .nav > ul > li > a:hover, .nav > ul > li > a:focus ( boja: bijela; padding-left: 15px; ) /** * veza izbornika podcrtana */ .nav > ul > li > a:before ( content: ""; display: block; position: absolute; right: 0; bottom: 0; height: 1px; width: 100 % ; -webkit-transition: širina 0s lakoća; prijelaz: širina 0s lakoća; ) .nav > ul > li > a:after ( sadržaj: ""; prikaz: blok; pozicija: apsolutna; lijevo: 0; dno: 0; visina : 1px; širina: 100%; pozadina: #3bc1a0; -webkit-transition: širina. 5s lakoća prijelaz: širina .5s lakoća; ) /** * animirajte podcrtavanje * veza pri lebdenju */ .nav > ul > li > a:hover:before ( širina: 0%; pozadina: #3bc1a0; -webkit-transition: širina .5s lakoća; prijelaz: širina .5s lakoća; ) .nav > ul > li > a:hover:after ( širina: 0%; pozadina: prozirna; -webkit-transition: širina 0s lakoća; prijelaz: širina 0s lakoća; ) /* izbljeđuje pozadinu u glavnu sadržaj * u ovom slučaju elementi su blokirani * ovo je kontroverzna značajka, ako vam je potrebna * samo skinite komentar */ /* .mask-content ( prikaz: blok; položaj: fiksno; gore: 0; lijevo: 0; z -indeks: 1000; širina: 100%; visina: 100%; boja pozadine: rgba(0, 0, 0, 0.4); vidljivost: skriveno; neprozirnost: 0; ) : označeno ~ .mask-content ( vidljivost: vidljivo ; neprozirnost: 1; -webkit -prijelaz: neprozirnost .5s, vidljivost .5s; prijelaz: neprozirnost .5s, vidljivost .5s; ) */
Kao što razumijete, gotovo sve vrijednosti svojstava su opcionalne, tj. lako možete promijeniti sve njegove elemente po svom ukusu i boji; nadam se da će vam objašnjenja u tome pomoći. Pa, ako nešto pođe po zlu ili se otkriju neke moje pogreške, napišite u komentarima, sigurno ćemo to shvatiti i popraviti.
Zaključno, želio bih vas podsjetiti da ne barataju svi preglednici CSS3 svojstvima jednako dobro. Ovo rješenje je, naravno, vrlo zanimljivo, ali ipak više eksperimentalno. Nakon što ste ga prilagodili svojim potrebama, prije čvrstog pričvršćivanja na mjesto rada svakako provjerite njegov rad u različitim preglednicima i na raznim mobilnim uređajima.
Ponovno pogledajte rezultat, skinite arhivu s izvorima, eksperimentirajte s raznim parametrima i stvarajte, stvarajte, stvarajte...
U bliskoj budućnosti pokušat ću reći i pokazati kako, na temelju ovu odluku , možete jednostavno implementirati uvlačivi, bočne ploče , s ostalim jednako važnim elementima za interakciju s korisnicima na brodu.
Sada korisnici imaju priliku upoznati se s . Svi su predstavljeni u zasebnoj kategoriji, koja se može pronaći na TemplateMonster tržištu. S njima ne bi trebalo biti nikakvih poteškoća. Samo dodajte svoj jedinstveni sadržaj i gotovi ste – možete pokrenuti posao i privući sve više čitatelja. Također je vrlo važno zapamtiti da je tekst za svaki predložak napisan rukom.
Sa svim poštovanjem, Andrew
Vertikalni izbornik
Elementi popisa mogu sadržavati ne samo veze, već i naslove, ikone i slike. Pomoću okomitog izbornika možete kreirati komentare na web mjestu, popis kategorija itd.
1. Okomiti izbornik sa zaglavljem
Jednostavna opcija elegantnog dizajna. Prikladno za stilske kategorije na web stranici. Kada zadržite pokazivač, stavka popisa mijenja boju veze.
* (box-sizing: border-box; margin: 0;).widget ( padding: 20px 30px; background: white; font-family: "Roboto", sans-serif; ) .widget-title (text-transform: velika slova ; razmak između slova: 2px; boja: #222; veličina fonta: 16px; padding-left: 15px; margin-bottom: 15px; border-left: 2px solid #b99d61; ) .widget-list ( padding: 0; popis -style: none; ) .widget-list a:before ( content: "\2014"; margin-right: 14px; ) .widget-list a ( text-decoration: none; outline: none; display: block; padding: 6px 0; razmak između slova: 1px; težina fonta: 300; boja: #444; prijelaz: .3s linearno; ) .widget-list a:hover (boja: #b99d61;)2. Okomiti izbornik u stilu "karte podzemne željeznice"
Zanimljivo rješenje za dizajn okomitog izbornika, moguće je dodati ugniježđene izbornike. “Metro linija” je lijevi rub popisa, oznake se generiraju prije svake veze.
.metro (list-style: none; padding: 0; margin: 30px 0 0 50px; border-left: 5px solid #DAE4F1; ) .metro li (line-height: 2em;) .metro ul ( margin: 20px 0 20px 15px; padding: 0; border: none; list-style: none; ) .metro ul:before, .metro ul:after ( content: ""; width: 5px; height: 28px; background: #DAE4F1; position: relative ; prikaz: blok; lijevo: -9px; ) .metro ul:prije ( transformacija: rotacija(-45deg); margin-top: -15px; ) .metro ul:nakon ( transformacija: rotacija(45deg); dno: -20px ; ) .metro ul li (border-left: 5px solid #DAE4F1;) .metro ul li:first-child ( margin-top: -5px; padding-top: 5px; ) .metro ul li:last-child ( padding -bottom: 9px; margin-bottom: -25px; ) .metro a ( text-decoration: none; display: block; font-family: "Noto Sans", sans-serif; color: #4A4B4D; ) .metro a: prije (sadržaj: ""; prikaz: inline-block; pozadina: #CA682D; širina: 12px; visina: 12px; lijevo: -9px; položaj: relativan; rubni radijus: 50%; margina-desno: .5em; )3. Vertikalni izbornik s efektima lebdenja
Ikona i pozadinska ispuna koje se pojavljuju kada prijeđete pokazivačem iznad stavke popisa pomoći će u diverzificiranju dizajna okomitih elemenata izbornika.
.category-wrap ( padding: 15px; background: white; width: 200px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); font-family: "Helvetica Neue", Helvetica, Arial, sans -serif; ) .category-wrap h3 (veličina fonta: 16px; boja: rgba(0,0,0,.6); margina: 0 0 10px; padding: 0 5px; položaj: relativno; ) .category-wrap h3:nakon ( sadržaj: ""; širina: 6px; visina: 6px; pozadina: #80C8A0; pozicija: apsolutna; desno: 5px; dno: 2px; sjena okvira: -8px -8px #80C8A0, 0 -8px #80C8A0 , -8px 0 #80C8A0; ) .category-wrap ul ( list-style: ništa; margina: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.3); ) .category- wrap li (margina: 12px 0 0 0px;) .category-wrap a ( text-decoration: none; display: block; font-size: 13px; color: rgba(0,0,0,.6); padding: 5px ; pozicija: relativna; prijelaz: .3s linearno; ) .category-wrap a:after ( content:"\f18e"; font-family: FontAwesome; pozicija: apsolutno; desno: 5px; boja: bijela; prijelaz: .2s linearno ; ) .category-wrap a:hover ( pozadina: #80C8A0; boja: bijela; )4. Okomiti izbornik s ikonama
Ikone izbornika stvaraju vizualno sidro, nadopunjujući verbalni opis svake kategorije. Za prikaz ikona morate se povezati. Također možete koristiti bilo koji drugi font ikone ili ikone slike.
* (box-sizing: border-box; margin: 0;).widget ( padding: 20px; border: 5px solid #f1f1f1; background: #fff; border-radius: 5px; font-family: "Roboto", sans- serif; ) .widget h3 ( margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: normal; color: #424949; ) .widget ul ( margin: 0; padding: 0; popis -style: none; width: 250px; ) .widget li ( border-bottom: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px; ) .widget li:last-child ( border-bottom: none; margin-bottom: 0; padding-bottom: 0; ) .widget a ( text-decoration: none; color: #616a6b; display: inline-block; ) .widget li:before (font-family: FontAwesome; font-size : 20px; vertical-align:bottom; color: #dd3333; margin-right: 14px; ) .widget li:nth-child(1):before (content:"\f1fc";) .widget li:nth-child( 2):before (sadržaj:"\f0d0";) .widget li:nth-child(3):before (content:"\f0cd";) .widget li:nth-child(4):before (sadržaj:" \f028";).widget li:nth-child(5):before (content:"\f03d";)5. Vertikalni izbornik sa slikama
Ovaj primjer se može koristiti za dizajn blokova s novim proizvodima, sličnim proizvodima itd. internetska stranica trgovine.
Jpeg">
