Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ

Efektet hover HTML. Efektet e pezullimit CSS - për imazhet, butonat, kur rri pezull mbi lidhje, blloqe, etj.

Ne kemi nevojë për artikuj interesantë dhe të dobishëm për të publikuar forumin tonë. Ne kemi një korrektues dhe një redaktues, ndaj mos u shqetësoni për drejtshkrimin dhe hartimin e tekstit. Ne do të kontrollojmë gjithçka dhe do ta rregullojmë bukur.


CSS3 u ka dhënë mundësi të panumërta stilistëve UX (përvojë), dhe gjëja më e mirë në lidhje me të është se elementët më të lezetshëm janë vërtet të lehtë për t'u zbatuar.

Vetëm disa rreshta kodi do t'ju japin efekte të mahnitshme tranzicioni që do të emocionojnë përdoruesit tuaj, do të rrisin angazhimin dhe në fund, nëse përdoren si duhet, do të rrisin trafikun tuaj. Për më tepër, këto efekte përdorin përshpejtimin e harduerit, që është përparim - në të cilin mund të merrni pjesë tani.

Këtu janë 8 efekte vërtet të thjeshta që do t'i japin jetë UI-së tuaj (ndërfaqes së përdoruesit) dhe do të bëjnë buzëqeshje në fytyrat e përdoruesve tuaj.

Të gjitha këto efekte (një drejtkëndësh) kontrollohen nga vetia e tranzicionit. Pra, për të parë se si funksionojnë këto efekte, ne kemi krijuar një div në faqen HTML:

Pasi të keni mbaruar, vendosni gjerësinë dhe lartësinë e tij (kështu që të ketë dimensione), ngjyrën e sfondit (që të mund ta shohim) dhe vetitë e tij të efektit.

Vetia e tranzicionit ka tre vlera: një veçori tranzicioni (në rastin tonë, të gjitha), një shpejtësi tranzicioni (në rastin tonë, 0,3 sekonda) dhe një vlerë të tretë që ju lejon të ndryshoni mënyrën se si llogariten nxitimi dhe ngadalësimi, por ne' Do t'i përmbahemi cilësimeve të paracaktuara, duke e lënë këtë fusha të jetë bosh.

Tani gjithçka që duhet të bëjmë është të ndryshojmë vetitë dhe ata do të krijojnë animacionin për ne.

Nëse dëshironi të vazhdoni vetë, atëherë skedarët demo janë për ju.

1. Zbehja

Krijimi i efekteve zbehëse është një kërkesë mjaft e zakonshme nga klientët. Kjo është një mënyrë e shkëlqyer për të theksuar funksionalitetin ose për të tërhequr vëmendjen te një thirrje për veprim.

Efekti kodohet në dy hapa: së pari, vendosni gjendjen fillestare; më pas vendosni ndryshimin, për shembull në lëvizjen e miut:

Fade ( opacity:0.5; ) .fade:hover (opacity:1; )

(Sigurohuni që t'i jepni div tuaj klasën "fade" për të parë se si funksionon kjo.)

2. Ndryshimi i ngjyrës

Në të kaluarën, animimi i një ndryshimi ngjyrash ishte tepër kompleks, duke përfshirë matematikën e përfshirë në llogaritjen e vlerave individuale të RGB dhe më pas rikombinimin e tyre. Tani thjesht vendosim klasën e div në "color" dhe vendosim ngjyrën që duam në CSS:

Ngjyra: rri pezull ( sfond: # 53a7ea; )

3. Zmadhoni dhe zvogëloni

Njëherë e një kohë, për ta bërë një element më të madh, duhej të përdorje gjerësinë dhe lartësinë e tij, ose parametrin e mbushjes. Por tani për tani, ne mund të përdorim transformimin CSS3 për ta bërë atë më të madh.

Vendosni klasën e div-it tuaj në "rritje" dhe më pas shtoni këtë kod në stilin tuaj të bllokut:

Rritje: rri pezull ( -webkit-transform: scale (1.3); -ms-transform: scale (1.3); transform: scale (1.3); )

Tkurrja e një elementi është po aq e thjeshtë sa zgjerimi i tij. Për të rritur një element, ne specifikojmë një vlerë më të madhe se 1; për ta ulur atë, ne specifikojmë një vlerë më të vogël se 1:

Shrink:Hover ( -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); )

4. Përdredhja e elementeve

CSS ofron një numër transformimesh, dhe një nga më të mirat është përdredhja e elementeve. Jepini div tuaj klasën "rotate" dhe shtoni linjat e mëposhtme në CSS tuaj:

Ne paraqesim në vëmendjen tuaj një kurs të ri nga ekipi Codeby- "Testimi i depërtimit të aplikacionit në ueb nga e para". Teoria e Përgjithshme, Përgatitja e Mjedisit të Punës, Fuzimi pasiv dhe Gjurmët e Gishtave, Fuzimi aktiv, Dobësitë, Post-Shfrytëzimi, Mjetet, Inxhinieria Sociale dhe më shumë.


Rrotulloni: rri pezull ( -webkit-transform: rrotullojZ(-30deg); -ms-transformoj: rrotullojZ(-30deg); transformim: rotateZ(-30deg); )

5. Kthimi i një katrori në një rreth

Tani efekti i shndërrimit të një elementi katror në një të rrumbullakët dhe anasjelltas është shumë i popullarizuar. Me CSS, kjo është e lehtë për t'u arritur, ne thjesht kalojmë pronën e rrezes kufitare. Ne thjesht përdorim veçorinë e rrezes kufitare.

Jepini divit tuaj klasën "rreth" dhe shtoni këto rreshta në fletët tuaja të stilit:

Rrethi: rri pezull (rreze kufitare: 50%; )

6. Hije 3D

Hijet 3D ishin të neveritshme për një vit apo më shumë sepse ato nuk përshtateshin me dizajnin e sheshtë, e shihni, kjo është budallallëk, natyrisht, ato funksionojnë në mënyrë fantastike, duke e bërë përdoruesin të ndihet i angazhuar si në dizajnin e sheshtë ashtu edhe në ndërfaqen pseudo 3D.

Ky efekt arrihet duke shtuar një drejtkëndësh hije dhe më pas duke lëvizur elementin në boshtin x duke ndryshuar vetitë e transformimit dhe të përkthimit në mënyrë që elementi të duket se rritet jashtë ekranit.

Jepini div tuaj klasën "tre" dhe më pas shtoni kodin e mëposhtëm në CSS tuaj:

Threed:hover (box-hije: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea; -webkit-transform: translateX(-3px); transformimi: translateX(-3px); )

7. Lëkundje

Jo të gjithë elementët përdorin veçorinë e tranzicionit. Ne gjithashtu mund të krijojmë animacione shumë komplekse duke përdorur @keyframes, animacione dhe animacione-përsëritje.

Në këtë rast, ne fillimisht do të përcaktojmë animacionet CSS në stile. Do të vini re se për shkak të problemeve me zbatimin, ne duhet të përdorim @-webkit-keyframes si dhe @keyframes (po, Internet Explorer është në të vërtetë më i mirë se Chrome, të paktën në këtë aspekt).

@-webkit-keyframes lëkundje ( 15% ( -webkit-transformim: translateX(5px); transformim: translateX(5px); ) 30% ( -webkit-transform: translateX(-5px); transformim: translateX(-5px); ) 50% ( -webkit-transform: translateX(3px); transformim: translateX(3px); ) 65% ( -webkit-transform: translateX(-3px); transformim: translateX(-3px); ) 80% ( -webkit -transformoj: translateX(2px); transformim: translateX(2px); ) 100% ( -webkit-transform: translateX(0); transformo: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: translateX(5px); transformim: translateX(5px); ) 30% ( -webkit-transform: translateX(-5px); transformoj: translateX(-5px); ) 50% ( -webkit-transform: translateX(3px); transformoj : translateX(3px); ) 65% ( -webkit-transform: translateX(-3px); transform: translateX(-3px); ) 80% ( -webkit-transform: translateX(2px); transform: translateX(2px); ) 100% ( -webkit-transformim: translateX(0); transformim: translateX(0); ) )

8. Ngjit një kufi

Një nga stilet më të nxehta të butonave tani është butoni fantazmë; buton pa sfond dhe kufi të trashë. Sigurisht, ne mund të shtojmë vetëm një kufi në një element, por kjo do të ndryshojë pozicionin e elementit. Ne mund ta zgjidhnim këtë problem me përmasat e kutive, por një zgjidhje shumë më e thjeshtë është kalimi në kufi duke futur një hije.

Jepini rastit tuaj "kufirin" e klasës dhe shtoni CSS-në e mëposhtme për stilet tuaja:

Kufiri: rri pezull ( kuti-hije: futur 0 0 0 25px #53a7ea; )

Dëshironi të dini,? ose ? E gjithë kjo dhe më shumë në faqe. Abonohuni në buletinin tonë të postës elektronike (në fund të faqes) ose në dhe do të jeni të parët që do të mësoni për artikujt e rinj! Bashkohuni gjithashtu me tonën

Nëse ju pëlqen efekti, atëherë thjesht mund të kopjoni kodin e përfunduar dhe ta përdorni!

Gjallëroni faqen tuaj të internetit!

Efekte të ndryshme hover mund të sjellin freski në faqet e faqes tuaj. Më parë, për çdo efekt, duhej të merreshe me javascript, por sot, pas ardhjes së teknologjisë CSS3, gjithçka mund të bëhet duke anashkaluar përdorimin e javascript.

Shembujt e sotëm janë implementuar dhe optimizuar të gjithë për shfletues të rinj modernë dhe do të funksionojnë patjetër në to (për shembull, në shfletuesit e familjes Mozilla ose WebKit). Nuk mund t'ju sigurojmë për punën në IE, por në versionet më të fundit efektet do të funksionojnë patjetër ashtu siç duhet. Por mos harroni se për çdo efekt, është përgatitur një opsion tërheqës rikthimi në rast se shfletuesi ende nuk e mbështet efektin.

01. Zmadhoni

Demo: Të shikosh

Ky efekt është shumë i thjeshtë për t'u zbatuar dhe mund të zbatohet në disa mënyra. Ne përdorëm një metodë ku një parametër marzh i shtohet çdo imazhi dhe më pas, kur kursori i miut qëndron pezull, ky parametër hiqet. Le të themi se cilësimi i marzhit fillon në 15 pikselë dhe kur rri pezull bëhet 2 pikselë, gjë që e bën imazhin të duket sikur kërcehet. Ju gjithashtu mund ta përdorni këtë efekt vetëm me tekst, edhe nëse lidhjet janë vertikale në vend të horizontale.

Tranzicioni këtu mund të vendoset sipas gjykimit tuaj, dhe efekti do të jetë gjithashtu tërheqës pa asnjë tranzicion. Ne, për shembull, e bëmë efektin paksa të butë, gjë që menduam se do t'i shtonte gjallërinë efektit.

Bump Up CSS

Ex1 img(
kufiri: 5px solid #ccc;
noton: majtas;
diferenca: 15 px
-webkit-tranzicioni: diferencë 0,5s lehtësim;
-moz-tranzicioni: diferencë 0,5s lehtësim;
-o-tranzicioni: diferencë 0,5s lehtësim jashtë;
}

Shembull 1 imazh: rri pezull (
margin-top: 2px;
}
02. Stack & Grow


Demo: Të shikosh

Autori i këtij efekti me sa duket donte të arrinte një lloj efekti të llambës llave, pasi kur kaloni pezull mbi listën e lidhjeve me miun, çdo imazh zgjerohet ngadalë dhe më pas kthehet në madhësinë e tij origjinale.

Për zbatim, këtu janë përdorur imazhe me madhësi 400x133 piksele. Më pas, madhësia e tyre u ndryshua në 300x100 pikselë me CSS dhe u zgjeruan kur rri pezull. Meqenëse e gjithë lista është e rreshtuar në qendër në shembull, madhësia e re e imazheve e refraktoi të gjithë shtrirjen. Ky problem mund të zgjidhet duke vendosur kufijtë negativë në gjysmën e gjerësisë së imazheve të zmadhuara.

Kodi CSS për Stack & Grow

/*Shembulli 2*/
#konteiner(
gjerësia: 300 px
marzhi: 0 auto;
}

#ex2 img(
lartësia: 100 px;
gjerësia: 300 px
diferenca: 15 px 0;
-webkit-tranzicioni: të gjitha lehtësitë e 1-ve;
-moz-tranzicioni: të gjitha 1s lehtësi;
-o-tranzicion: të gjitha 1s lehtësi;
}

# ex2 img: rri pezull (
lartësia: 133 px;
gjerësia: 400 px
margjina-majtas: -50px;
}
03. Zbeh tekstin në


Demo: Të shikosh

Këtu, autori donte të krijonte diçka si një ngjarje e tipit javascript kur rri pezull mbi një artikull dhe efekti shfaqet në një tjetër. Këtu, teksti dhe imazhi janë marrë dhe më pas janë vendosur në një ndarje të veçantë të rreshtuar majtas. Më pas, ngjyra: transparente dhe lartësia e vijës: 0 px u shtuan në div. Kjo lejoi që teksti të pozicionohej në krye të ndarjes dhe të fshihej krejtësisht.

Për ta bërë tekstin të rishfaqet, ne thjesht ndryshojmë ngjyrën dhe lartësinë e rreshtit. Kur rri pezull mbi imazhin, teksti rishfaqet. Efekt shumë argëtues dhe i lehtë.

Zbeh tekstin në kodin CSS në fuqi

# ish 3 (
gjerësia: 730 px
lartësia: 133 px;
lartësia e vijës: 0 px
ngjyra: transparente
madhësia e shkronjave: 50 px;
font-familja: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
pesha e shkronjave: 300
tekst-transformim: shkronja të mëdha;

}

# psh 3: rri pezull(
lartësia e vijës: 133 px;
ngjyra: #575858;
}

#ex3 img(
noton: majtas;
diferenca: 0 15 px;
}
04. Foto e shtrembër


Demo: Të shikosh

Ky efekt është shumë i thjeshtë, por është i shkëlqyeshëm për një galeri fotografish. Së pari ju duhet të krijoni një rrjet me imazhe dhe më pas t'i rrotulloni imazhet kur rri pezull mbi to, gjë që krijon një efekt tërheqës.

Ka shumë vlera të reja CSS për t'u përdorur këtu, kështu që ia vlen të merret parasysh një opsion kthimi edhe për shfletuesit më të vjetër. Në galerinë tonë, tranzicionet, transformimet, si dhe hijet e bllokut do të përdoren, megjithatë, sipas dëshirës tuaj. Transformimi do të jetë përgjegjës për rrotullimin e imazhit, dhe tranzicionet do të jenë përgjegjëse për efektin e butë dhe të qetë.

Këtu mund të përdorni pseudo-zgjedhës.

Kodi CSS për fotografinë e shtrembër

# ish 4 (
gjerësia: 800 px
marzhi: 0 auto;
}

#ex4 img(
diferenca: 20 px
kufiri: 5px solid #eee;
-webkit-box-hije: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-hije: 4px 4px 4px rgba(0,0,0,0.2);
kuti-hije: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-tranzicioni: të gjitha 0,5s lehtësim;
-moz-tranzicioni: të gjitha lehtësitë 0.5s;
-o-tranzicioni: të gjitha lehtësitë 0,5s;
}

# ex4 img: rri pezull (
-webkit-transform: rrotulloj(-7deg);
-moz-transformoj: rrotulloj(-7deg);
-o-transformoj: rrotulloj(-7deg);
}
05. Zbehet dhe Reflekto


Demo: Të shikosh

Ky efekt është pak i ndërlikuar për t'u zbatuar, kështu që na u desh të merreshim me të paksa për ta vënë në punë. Pozicioni i paracaktuar i imazhit është paksa transparent. Më pas, kur rri pezull mbi imazh, niveli i transparencës ulet dhe imazhi kthehet në pamjen e tij origjinale, si dhe një shkëlqim dhe reflektim i lehtë (vetëm për shfletuesit e familjes WebKit).

Fatkeqësisht, reflektimi nuk është saktësisht një tranzicion, kështu që shfaqet menjëherë, edhe pse pjesa tjetër e përmbajtjes shfaqet në lëvizje të ngadaltë.

Nëse jeni të hutuar rreth reflektimeve të CSS, mund të mësoni më shumë rreth tij në këtë artikull (David Walsh).

Zbehet dhe reflektoni kodin CSS

# ish 5 (
gjerësia: 700 px
marzhi: 0 auto;
Min-lartësia: 300 px
}

#ex5 img(
diferenca: 25 px
tejdukshmëria: 0.8
kufiri: 10px solid #eee;

/*Tranzicioni*/
-webkit-tranzicioni: të gjitha lehtësitë 0.5s;
-moz-tranzicioni: të gjitha lehtësitë 0.5s;
-o-tranzicioni: të gjitha lehtësitë 0,5s;

/*Reflektimi*/
-webkit-box-reflect: nën 0px -webkit-gradient(lineare, majtas lart, majtas poshtë, from(transparent), color-stop(.7, transparent), to (rgba(0,0,0,0.1)) );
}

# ex5 img: rri pezull (
errësirë: 1

/*Reflektimi*/
-webkit-box-reflect: nën 0px -webkit-gradient(lineare, majtas lart, majtas poshtë, from(transparent), color-stop(.7, transparent), to (rgba(0,0,0,0.4)) );

/*Shkëlqim*/
-webkit-box-hije: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-hije: 0px 0px 20px rgba(255,255,255,0.8);
kuti-hije: 0px 0px 20px rgba(255,255,255,0.8);
}
konkluzioni

Këta 5 shembuj duhet të jenë të mjaftueshëm për t'ju frymëzuar të krijoni diçka tuajën. Mos harroni se gjithmonë mund të eksperimentoni me shembuj të gatshëm dhe më pas të na tregoni për to.

Nëse keni hasur në efekte të tjera tërheqëse diku në rrjet, atëherë ju lutemi na tregoni neve dhe lexuesve të tjerë për këtë.

Sigurisht, ju keni parë në disa faqe një ndalim të përdorimit të butonit të djathtë të miut. Kjo veçori kryesisht lufton ata që duan të vjedhin përmbajtjen tuaj. Kjo masë nuk do t'ju mbrojë plotësisht nga vjedhja, por do t'ju mbrojë plotësisht nga kopjimi manual. Opsione të tjera.
Unë nuk rekomandoj çaktivizimin e butonit të djathtë të miut nëse postoni materiale të destinuara për kopjim në blogun tuaj. Këto mund të jenë kode, skripta, receta, materiale referimi dhe më shumë. Një ndalim i kopjimit në këtë rast do t'i largojë vizitorët nga ju dhe blogu juaj do të bëhet më pak i dobishëm për vizitorët. Nëse mbrojtja nga plagjiatura është e rëndësishme për ju, atëherë është më mirë të përdorni shtimin e url-së tuaj në fund të kopjes. Atëherë do të jeni të sigurt se nëse dikush dëshiron të publikojë diku tjetër në internet, të kopjuar nga ju, atëherë ka më shumë gjasa që copy-pastor të ndajë një lidhje me blogun tuaj.
Kjo recetë është e përshtatshme për çdo faqe interneti. Ju vetëm duhet të ngjisni kodin në të gjitha faqet e blogut tuaj:

Bloger shtoni kodin në vegël HTML/Javascript në skedën Dizajn. Nëse jeni duke përdorur një nga temat më të fundit në blogun tuaj (Emporio, Contempo, Soho, Notable), atëherë mos harroni të aktivizoni dukshmërinë e miniaplikacionit (shënoni "E dukshme për të gjithë", "Shfaq miniaplikacionin "HTML/JavaScript" ").
Wordpress shtoni kodin në miniaplikacionin Tekst.

Autori: Ivanova Natalia

2019-03-03

Festa po afron - Dita Ndërkombëtare e Gruas. Le të përgatitemi për të. Ju mund të përgëzoni vajzat dhe gratë në një mënyrë origjinale duke përdorur shërbimet e kartolinave, të cilat do të diskutohen më poshtë.

Ju mund të përdorni të njëjtat shërbime që kemi përdorur.

Shërbime të gatshme për kartolina

Krijo një kartolinë 8 Mars në internet

Përdorni shërbimet e mëposhtme për të krijuar një kartolinë nga e para.

  1. Canva është një redaktues i mirënjohur funksional i fotografive. Këtu do të gjeni shumë shabllone. Kërkohet regjistrim.
  2. Printclick Nëse keni biznesin tuaj, mund të porosisni një grup kartolinash me logon dhe kontaktet e kompanisë suaj. Ju gjithashtu mund të përdorni gjeneratorin e kartolinave princlick. Promovim i madh dhe i lirë.
  3. Crello është një redaktues që kërkon regjistrim. Mos kini frikë nga gjuha angleze, në cilësimet mund të kaloni në rusisht.
  4. Kartolina në internet - për ata që kanë një imagjinatë të zhvilluar mirë, pasi do të duhet të krijojnë një kartolinë nga e para.
  5. Mumotiki - përgatitni një foto të bukur dhe mund të shtoni një tekst urimi këtu. Nga rruga, nëse thjesht duhet të shtoni tekst në foto, atëherë mund të shikoni.

Shpresoj që duke përdorur një nga këta gjeneratorë, ju do të jeni në gjendje t'i përgëzoni në mënyrë adekuate zonjat tuaja me 8 Mars!

Autori: Ivanova Natalia

2019-02-17

Përmbajtja e artikullit:

Google Plus po mbyllet

Platforma Google Plus nuk i përmbushi shpresat e zhvilluesve dhe do të hiqet plotësisht më 2 Prill 2019. Së bashku me të, albumet e lidhura me të në Google Photos do të zhduken dhe autorizimi në sajtet me një llogari Google Plus do të bëhet i paarritshëm. Që nga 4 shkurti, funksioni i krijimit të profileve, kanaleve dhe faqeve të Google Plus është bërë i paarritshëm. Nëse përmbajtje e vlefshme është ruajtur në llogarinë tuaj, atëherë mund të shkarkoni një kopje rezervë.
Shumica e ndryshimeve do të prekin blogerët që drejtojnë bloget e tyre në Blogspot. Disa miniaplikacione të G+, komentet e G+ dhe profili juaj në Google+ nuk do të jenë më të disponueshme. Kjo thuhet në njoftimin në panelin e administrimit të Blogger:
Pas njoftimit për përfundimin e API të Google+ të planifikuar për në mars 2019, do të ketë një sërë ndryshimesh në integrimin e Blogger me Google+ më 4 shkurt.
Widgets Google+. Miniaplikacionet Butoni +1, Ndjekësit e Google+ dhe Distinktivët e Google+ nuk do të mbështeten më në dizajnet e blogut. Të gjitha rastet e këtyre miniaplikacioneve do të hiqen nga blogu juaj.
Butonat +1. Butonat +1 dhe G+ do të hiqen, si dhe lidhjet "Ndaj në Google+" poshtë postimeve të blogut dhe në shiritin e navigimit.
Ju lutemi vini re se nëse jeni duke përdorur një shabllon të personalizuar që përfshin veçoritë e Google+, ai mund të ketë nevojë të modifikohet. Kërkoni udhëzime nga personi që ju ka dhënë këtë shabllon.
Komentet e Google+. Mbështetja për komentet që përdorin Google+ do të ndërpritet dhe komentet standarde të Blogger do të rikthehen për të gjitha blogjet që përdorin këtë funksion. Fatkeqësisht, komentet e postuara nëpërmjet Google+ nuk mund të transferohen te Blogger, kështu që ato nuk do të shfaqen më në blogun tuaj.

Fshirja e komenteve të Google Plus

Fatkeqësisht, komentet e publikuara në sistem do të fshihen përgjithmonë. Ju mund të përdorni vetëm të njëjtin mjet https://takeout.google.com për të thënë komente rezervë nga Google+ në kompjuterin tuaj. Për të nuk ofrohet vetëm një ngarkues, dhe komentet mund t'i rivendosni vetëm manualisht në një mënyrë mjaft të shtrembër. Është mirë që jam në kohën time në kohë.

Si të zëvendësoni profilin e google plus me profilin e blogerit

Nëse jeni duke bërë blogje në Blogspot, është një ide e mirë të ktheheni nga profili juaj Google Plus në profilin tuaj në Blogger tani (për ata që kaluan në Google Plus në të kaluarën). Unë rekomandoj ta bëni këtë tani për të shmangur situatat e paparashikuara që mund të ndodhin kur fshini llogaritë e Google Plus.

Si të riktheni profilin tuaj në Blogger

Kjo është e lehtë për t'u bërë në cilësimet e administratorit të Blogger:
Cilësimet –> Cilësimet e përdoruesit –> Profili i përdoruesit – zgjidhni Blogger këtu


Ruani ndryshimet tuaja.

Konfirmoni kalimin në dhe shkruani emrin ose pseudonimin tuaj.

Mos harroni të ngarkoni një avatar në profilin tuaj në Blogger.

si të fshini profilin e google plus

Nëse vendosni të hiqni qafe profilin tuaj G+ njëherë e përgjithmonë, atëherë shkoni te faqja juaj e Google Plus –> Cilësimet –> lëvizni në fund të faqes –> fshini llogarinë tuaj Google Plus:


Autori: Ivanova Natalia

Sot do t'ju tregoj se çfarë është CSS3, me çfarë hahet, ku ta kërkoni, si ta shkruani saktë. Ju paralajmëroj, do ta them nga vetja, e thjeshtuar për publikun e gjerë, siç e shoh unë + shembuj. Pra, le të fillojmë nga larg.
CSS është stile që përshkruajnë vetitë e një objekti. Kjo do të thotë që ata janë në të gjithë motorët ekzistues, nëse nuk mund t'i gjeni, atëherë ose shikoni në vendin e gabuar, ose ata me të vërtetë nuk ekzistojnë ( faqe kurbë). Ku gjenden zakonisht? Zakonisht kjo është rrënja e faqes, emri i skedarit style.css, megjithëse, në parim, emri nuk është aq i rëndësishëm sa shtrirja .css nëse skedari me një shtesë të tillë është një skedar stili.
Shihni gjithashtu në blogun tim.

Ku t'i kërkoni ato?

Rruga për në skedar atribuohet në shabllonin ndërmjet
" />
Blogspot është pak më ndryshe, ku stilet shkruhen pikërisht në kod, përpara etiketës ndërmjet
këtu stilet

Si duken stilet?

le të shohim një shembull:
#header ( sfond: #fff; madhësia e shkronjave: 13 px; lartësia e rreshtit: 1.5; font-familja: Georgia,"Times New Roman","Bitstream Charter",Times,serif; ngjyra: #333; ) .kontaktet ( pozicioni: absolut; lart: 20 px; djathtas: 10 px; )
kontaktet e autorit të faqes së internetit
Ju mund t'i shikoni stilet në çdo faqe, gjithçka që ju nevojitet është një shfletues. Tani mund t'i dalloni lehtësisht duke lexuar se si duken në këtë artikull.
Siç mund ta shihni, stilet janë shkruar ndryshe. Stilet që fillojnë me një shenjë paund kanë një id të bllokut specifik në , stilet me një pikë kanë një klasë specifike blloku. Përndryshe, stilet nuk do të funksionojnë. Ju mund të dilni me çfarëdo emri që dëshironi, gjëja kryesore është që ato të korrespondojnë me ID-në dhe klasën e shkruar në html. Karakteristikat e stilit duhet të mbyllen në kllapa dhe të pasohen nga një dy pika ( shikoni shembullin e mësipërm), parametri shkruhet dhe mbyllet me pikëpresje. Lejohet që në pronën e fundit në fund të mos vendosni një pikëpresje, por vetëm një kllapë mbyllëse.
Ndodh që CSS të shkruhet menjëherë në një bllok, pa e nxjerrë atë në një skedar të veçantë:
kreu i faqes

CSS në Blogspot

Stilet mund të shkruhen ndryshe, do ta shpjegoj më vonë për shkak të asaj. Duke hapur kodin, ne mund ta shohim këtë (shikoni stilet me kujdes dhe do të shihni etiketat e njohura të blogimit që vendosin stilet):
Siç mund ta shihni, vetia e stilit .Titulli h1 të listuara veçmas më sipër. Si të kuptoni dhe gjeni një pronë? shume e thjeshte, font ka një parametër kokë.font, kjo është ajo që ne po kërkojmë. E gjejmë në grupin e vetive "Blog Title" për stilin ".header h1", brenda 2 vetive "header.font" dhe "header.text.color". Këtu po i ndryshojmë. Kjo bëhet për të përshpejtuar leximin e stileve nga shfletuesi, në mënyrë që të bëjë më pak kërkesa. Në fund të fundit, prona koka.teksti.ngjyra mund të përsëritet diku tjetër. Më poshtë ka më shumë header.shadow.offset.left dhe të tjerat, kuptimi në to është i njëjtë, nuk do ta përsëris.
Kur ata thonë të kërkoni në css (ose stile), do të thotë që ne po kërkojmë në blogspot midis etiketave
dhe zakonisht para etiketës
përveç nëse sigurisht ato shkruhen drejtpërdrejt në html (shembulli më sipër, stilet në blloqe). Në cmimet e tjera, çdo gjë zakonisht vendoset në një skedar të veçantë me shtesën .css

Autori: Ivanova Natalia

2019-02-15

Ky artikull i fundit është shkruar për të ofruar informacione të përditësuara për heqjen e lidhjeve të tepërta nga shabllonet e Blogspot, si dhe temat e reja të Blogger. Siç e dini, ka pasur ndryshime në kodet e Blogger në 2018, kështu që shumë veprime të kodit duhet të bëhen në një mënyrë të re. Plus, ka tema të reja që janë formuar ndryshe. Në lidhje me këto ndryshime, ne do të analizojmë temën e fshirjes së lidhjeve.
Ju mund të kontrolloni blogun tuaj për lidhje të jashtme në shërbimet https://pr-cy.ru/link_extractor/ dhe https://seolik.ru/links. Mos harroni se duhet të kontrolloni jo vetëm faqen kryesore të blogut, por edhe faqen e regjistrimeve (postimeve) dhe faqeve (Faqja). Një numër i madh lidhjesh të jashtme hapen për indeksimin e pengesave.

Si të hiqni lidhjet nga shablloni standard i vjetër i Blogger

Duke përdorur shabllonin Simple si shembull.
Modele të tilla japin më shumë lidhje hyrëse. Në blogun tim të testimit, kur instaloja një temë të thjeshtë, kur kontrolloja, u gjetën 25 lidhje të jashtme në faqen kryesore, nga të cilat 14 u indeksuan.
Ju kujtoj se përpara se të bëni ndryshime në kodin e shabllonit, bëni një kopje rezervë!
  1. Hiq lidhjen e Blogger - https://www.blogger.com/. Kjo lidhje është e mbështjellë në një miniaplikacion Attribution. Në skedën "Dizajni i blogut", shfaqet si një vegël Attribution dhe . Për ta hequr atë, shkoni te skeda "Tema"-> modifikoni HTML. Duke kërkuar për miniaplikacionet (lista e miniaplikacioneve), gjejmë Attribution1 dhe fshijmë të gjithë kodin së bashku me pjesën e fundit në të cilën është mbyllur. Ja si duket kodi i hequr në formë të palosur:


    Dhe kështu kodi i plotë:














    Ne i ruajmë ndryshimet dhe kontrollojmë blogun për Attribution.
  2. Ju me siguri keni parë ikonat "Pikëllim dhe kaçavidë" në blogun tuaj për redaktimin e shpejtë të miniaplikacioneve. Çdo ikonë e tillë mbart me vete një lidhje të jashtme për në Blogger. Tani ato janë mbyllur nga etiketa nofollow, por ju ende duhet t'i hiqni qafe. Ju do të modifikoni miniaplikacionet në skedën Dizajn.
    Këtu është një listë jo e plotë e lidhjeve që janë të koduara në ikonat e çelësit (ID-ja e blogut do të jetë e juaja)
    - Widget HTML1: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=header
    - Widget HTML2 http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML2&action=editWidget§ionId=header
    - Arkivi i blogut: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget§ionId=kryesore
    - Etiketat e blogut: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=Label&widgetId=Label1&action=editWidget§ionId=main
    - Postimet e njohura: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=PopularPosts&widgetId=PopularPosts2&action=editWidget§ionId=kryesore
    Të gjitha këto lidhje janë të lehta për t'u hequr qafe. Gjeni etiketën në shabllonin tuaj të blogut . Ndodh aq herë sa ka miniaplikacione në blogun tuaj. Hiq të gjitha dukuritë e një etikete .
  3. Ne heqim lidhjet për redaktimin e shpejtë të një hyrjeje në blog (ikona "Laps"). E bën më të lehtë modifikimin e postimeve, por mbart kërcënimin si një lidhje e jashtme e formularit: https://www.blogger.com/post-edit.g?blogID=1490203873741752013&postID=4979812525036427892&from=laps
    Si të fshini:
    Metoda 1. Në skedën "Dizajni", modifikoni elementin "Postime në Blog" dhe zgjidhni kutinë "Trego "Redaktimi i shpejtë"".
    Metoda 2. gjeni etiketën në shabllonin e blogut dhe fshijeni atë. Ruani ndryshimet tuaja dhe kontrolloni blogun tuaj për ikonën dhe lidhjen.
  4. Fshi Navbar. Kërkoni miniaplikacione në shabllonin html të blogut Navbar1 dhe fshini të gjithë kodin së bashku me seksionin.

    Gjegjësisht:









    Tani Navbar në blog nuk ofron lidhje të jashtme të indeksueshme, por besoj se ky është një element shtesë që nuk mbart një ngarkesë funksionale dhe është më mirë ta hiqni atë.
  5. Hiq lidhjet e jashtme të imazheve. Kur imazhet ngarkohen në një postim në blog, një lidhje futet automatikisht në to. Për të hequr lidhje të tilla, duhet të redaktoni të gjitha postimet e blogut. Në modalitetin "Shiko" dhe më pas në ikonën "Lidhja". Nëse imazhi nuk përmban një lidhje të jashtme, atëherë kur klikoni në foto në redaktuesin e postimit, ikona "Lidhja" nuk është aktive (ikona nuk është e theksuar).

  6. Hiq lidhjen në profilin e autorit të blogut. Fshi autorin e blogut nën hyrje. Për ta bërë këtë, gjeni kodin e vërtetëdhe shkruani false në vend të vërtetë. Doli qe i rremë
  7. Mbyllni lidhjen nga miniaplikacioni " " nga indeksimi me etiketën nofollow. Nëse përdorni miniaplikacionin "profili" në blogun tuaj, atëherë përdorni një kërkim të shpejtë të miniaplikacionit në shabllonin e blogut për të gjetur kodin e veglës Profile1. Duhet të redaktoni kodin e miniaplikacionit, duke zëvendësuar rel='autor' me në dy vende dhe duke shtuar në dy lidhjet. Ju duhet të merrni diçka si në pamjen e ekranit:


    Bërë duke përdorur shembullin e redaktimit të një profili Google Plus. Si kujtesë, Google Plus do të hiqet gradualisht më 2 prill 2019. Prandaj, pas kësaj date, do të jetë e nevojshme të bëhen ndryshime të tjera në kodin e miniaplikacionit "Rreth meje".

  8. Kontrolloni për lidhje të jashtme në çdo faqe postimi në Blogspot që ka komente. Gjeni dhe fshini kodin në shabllonin e blogut:

    Në Cilësimet e Blogut përgjatë shtegut Cilësimet e Blog -> Tjetër -> Furnizimi i faqes -> Lejo furnizimin e blogut, zbatoni cilësimet e mëposhtme:

Hiq lidhjet e jashtme nga shablloni i ri i paracaktuar i Blogger

Duke përdorur temën Notable si shembull
  1. Heqja e atribuimit (lidhja më poshtë - Blogger Technologies)
    Ne gjejmë Attribution1 në shabllonin e blogut të kërkimit të miniaplikacioneve (lista e miniaplikacioneve) dhe fshijmë kodin së bashku me seksionin në analogji me shabllonin e vjetër të Blogger (shih më lart 1).
  2. Hiq lidhjen nga miniaplikacioni "Raporto abuzimin". Ky është miniaplikacioni ReportAbuse1. Ne gjejmë në kërkimin e miniaplikacioneve:
    I gjithë kodi duket si ky:




  3. Ne kontrollojmë faqen e postimeve në blog me komente dhe heqim lidhjet në analogji me shabllonet e vjetra të blogut (shih më lart - pika 8).
  4. Hiqni lidhjet nga postimet e blogut që janë të ngulitura në imazhet e postimeve (shih pikën 5).

Autori: Ivanova Natalia

Fillimisht, për ata që nuk janë plotësisht në këtë temë ose nuk janë fare në këtë temë, unë do të shpjegoj shkurtimisht se çfarë është hover-. Këto janë lloje të ndryshme efektesh (titrat pop-up, këshilla, tranzicion të qetë, transformim, rrotullim, rritje, zhvendosje, etj., etj.) të aplikuara në elementët e faqes së internetit në to me kursorin e miut. Këto mund të zbatohen si me ndihmën e shtojcave të ndryshme jQuery, ashtu edhe në Pure.
Sot përgatita një përzgjedhje të madhe të efekteve origjinale hover për imazhet e krijuara me CSS3, pa përfshirë bibliotekat javascript. Unë nuk do të flas për avantazhet dhe disavantazhet e zbatimit të efekteve hover në CSS3 të pastër, kjo është një temë tjetër, thjesht shikoni shembujt dhe, nëse është e nevojshme, përdorni atë që ju pëlqen në faqen tuaj. Të gjitha efektet e paraqitura në rishikim janë të pajisura me një demo dhe dokumentacion të detajuar me kodet burimore. Manualet janë kryesisht në gjuhën borgjeze, por gjithçka është pak a shumë intuitive.

Thjesht dua të tërheq vëmendjen tuaj për faktin se të gjithë këta shembuj do të funksionojnë siç duhet vetëm në shfletuesit modernë që mbështesin vetitë CSS3.

Për të mos prishur pamjen e përgjithshme, nuk i shtrembërova emrat e efekteve me përkthim makine (me përjashtim të disa), i lashë titujt origjinalë siç i quajti zhvilluesi.

Efekt shumë interesant hover në miniaturat e imazheve, duke përdorur vija të holla në dizajn dhe tipografi. Disa lloje të ndryshme të efekteve të titrave të imazhit, transformime të buta dhe jo penguese 3D dhe tranzicion të qetë pseudo-elementesh. Punon vetëm në shfletuesit modernë.

iHover është një koleksion mbresëlënës i efekteve të pastra CSS3 hover me mbështetje Bootstrap 3. Ndërtuar në Scss CSS (skedar), lehtësisht i modifikueshëm me variabla. Kodi është modular, nuk ka nevojë të përfshijë të gjithë skedarin. Mbi 30 efekte të ndryshme në një paketë. Gjithçka është mjaft mirë e dokumentuar, efektet janë shumë të lehta për t'u përdorur. E tëra çfarë ju duhet të bëni është të ndërtoni saktë shënimin HTML dhe të përfshini skedarin CSS për të punuar.

Krijon disa efekte të thjeshta, por me stil qëndrimi për titrat e imazheve. Ideja është që kur rri pezull mbi miniaturat, mund të marrësh titullin, emrin e autorit dhe butonin e lidhjes që të shfaqen në mënyrë efektive. Disa efekte përdorin transformime vizuale 3D.

Një efekt tranzicioni shumë i thjeshtë, pa asnjë zile dhe bilbil, një imazh tërësisht i rrumbullakët në një kornizë, ai transformohet duke ndryshuar fokusin në hover dhe kaq.

për fotografitë e CSS3

Zhvilluesi e pozicionon punën e tij si një shembull të një galerie imazhesh me efekte tranzicioni kur shfaqen shënimet (titrat) në miniaturë. Mbështetja e sigurt deklarohet nga shfletuesit modernë, duke përfshirë IE 9+. Sigurisht, është e vështirë ta quash një galeri të plotë, por efekti i shfaqjes së nënshkrimeve është mjaft interesant.

Një grup tjetër rregullash CSS për të krijuar efekte mbresëlënëse pezullimi në miniaturë të rrumbullakëta të përsosura. Paketa përmban 7 lloje të tranzicioneve CSS3, dokumentacion shumë të detajuar për konfigurimin dhe përdorimin. Efektet mbështeten nga të gjithë shfletuesit modernë.

Rrotulloni miniaturat kur rri pezull

Një efekt i thjeshtë i rrotullimit të miniaturave të rrumbullakëta kur rri pezull mbi to me kursorin e miut, mund ta shihni për të njëjtën gjë në blogun tim, në njoftimet e postimeve në faqen kryesore. Ai zbatohet në disa rreshta të kodit css.

Nëse përkthehet fjalë për fjalë: "Efekti i seksit kur rri pezull". Sigurisht, nuk ka gjasa të vini re diçka kaq seksi në këtë efekt, përveç nëse keni një imagjinatë të egër, por efekti është interesant në mënyrën e vet dhe ia vlen t'i kushtoni vëmendje.

Pesë efekte të ndryshme për imazhet kur rri pezull mbi to. Nënshkrime pop-up në tre variacione, perde në formën e ndryshimit të shkallës së transparencës dhe rrotullimit me lëvizje horizontale.

4 Llojet e efekteve të animacionit për titrat e imazheve, të zbatuara ekskluzivisht me anë të CSS3. Pozicione të ndryshme në pamjen dhe efektet e tranzicionit, një performancë mjaft standarde. Për të kuptuar se si funksionon animacioni, hidhini një sy kodit burimor të faqes demo, nuk gjeta ndonjë dokumentacion të veçantë.

Galeritë e miniaturave të rreshtuara në rrjet me pamje të ndryshme të titrave, efekte rrotullimi, zbehjeje, notimi, etj. Dokumentacioni për përdorimin dhe konfigurimin është mjaft i pakët, por mund ta kuptoni me një dëshirë të veçantë.

Ky efekt nuk përfaqëson asgjë të veçantë, një ndryshim banal në ndriçimin e imazheve në lëvizje, përveçse shtohen elementë të animacionit. Ju do të duhet të merreni vetë me detajet e zbatimit duke dekompozuar kodet burimore demo.

Një grup tjetër prej 10 efektesh pezullimi për imazhe, modifikime të ndryshme të miniaturave në lëvizje, zmadhimi, rrotullim, rrotullim, errësim, etj.

Efektet e ndryshme të animacionit të kornizës rreth imazheve, duken mjaft tërheqëse, ekziston një udhëzues i detajuar për konfigurimin dhe përdorimin.

Efektet origjinale të pezullimit CSS3 të përdorura për t'i bërë titrat e miniaturave të imazheve të shfaqen në mënyrë efektive në lëvizje. Seti i rregullave CSS përfshin 10 efekte të ndryshme që mund t'i përdorni veçmas për imazhe të ndryshme. Efektet janë vërtet mbresëlënëse, veçanërisht duke pasur parasysh se gjithçka është bërë me CSS3. Një udhëzues i detajuar do t'ju ndihmojë të kuptoni se çfarë është.

Ideja është të krijohet një SVG që është një formë sfondi për disa tekste dhe kthehet në një formë tjetër kur rri pezull. Në këtë mënyrë, ju mund të bëni shumë opsione të ndryshme, por në shembull, tregohen tre lloje të efekteve të tranzicionit. Avantazhi i përdorimit të SVG është se ne mund të ndryshojmë madhësinë e formularit që të përputhet me madhësinë e kontejnerit prind.

Imazhe rrëshqitëse

Thelbi i këtij efekti është se imazhi lëviz lart e poshtë për të shfaqur titullin. Nëse punoni me parametrat e stilit, mendoj se mund të arrini efekte mjaft të këndshme, dhe si parazgjedhje, gjithçka duket shumë e thjeshtë.

Me këtë efekt, gjithçka është e thjeshtë, titrat e fotografive rrëshqasin lart djathtas ose poshtë majtas, në formën e një fjongo me një sfond të errët të tejdukshëm, gjithçka riformohet shumë thjesht duke përdorur vetitë css.

Një zgjidhje interesante, miniaturat paraqiten në një formë të errët, kur rri pezull mbi to, shfaqen imazhet dhe nënshkrimi shfaqet në një sfond të lehtë.

Titulli për imazhin shfaqet nga këndi dhe zgjerohet diagonalisht në të gjithë zonën e figurës.

Disa zgjidhje më interesante për zbatimin e titrave pop-up për miniaturat e imazheve. Në redaktorin online, mund të eksperimentoni me opsionet dhe të arrini rezultate më mbresëlënëse.

Një grup efektesh të bukura kur rri pezull mbi miniaturat, lloje të ndryshme të pamjes dhe dizajnit të titrave për fotografitë. Linjat e holla në kontrast me një sfond pak të errësuar krijojnë blloqe informacioni të lexueshëm.

Forma të çuditshme dhe efekti i zmadhimit në lidhje me efektin e animuar të shfaqjes së titrave në miniaturat e imazheve.

Efekte të mrekullueshme të mbivendosjes së ikonave në miniaturat e imazheve në variacione të ndryshme të pamjes. Shembulli përdor një karakter (+) të përshkruar nga një rreth duke përdorur rreze-kufitare: në CSS, mund të përdorni gjithashtu një font ikonash për ta bërë panelin kërcyes më informativ.

Një shembull i krijimit të një efekti vizual rrëshqitës për shfaqjen e titrave voluminoze të imazheve duke përdorur vetëm CSS3 dhe HTML5.

6 titrat e fotografive

6 Variante të paraqitjes së titrave pop-up për imazhet në lëvizje duke përdorur CSS3. Një mësim i detajuar mbi zbatimin dhe konfigurimin, kodet burimore të disponueshme për shkarkim.

Dhe së fundi, në fund, si të thuash, nuk mund të mos përmend mënyrën më të thjeshtë për të krijuar një titull pop-up për një miniaturë duke përdorur CSS3.

Unë fola për këtë metodë në një nga mësimet e mia të mëparshme:.

Me gjithë respekt, Andrew

Ky postim përmban një përzgjedhje të efekteve dhe animacioneve të ndryshme CSS që mund të jenë të dobishme në punën tuaj, dhe gjithashtu eliminojnë nevojën për t'u përdorur vazhdimisht në JavaScript. Ndoshta shembujt nuk janë më të rinjtë dhe më të pazakontët, por për mendimin tim, të dobishëm.

1. Ora CSS3 me jQuery

Kjo orë u krijua duke përdorur një nga mjetet kryesore CSS3 - rrotullo dhe me përfshirjen e bibliotekës jQuery.

2. Ora analoge CSS

Orë më klasike, analoge. Ato janë krijuar duke përdorur tranzicionin e uebkit dhe vetinë e transformimit CSS. Por në mënyrë që koha të përputhet me atë aktuale, ju duhet JavaScript.

3. Kubi 3D rrotullues

Rrotullimi dhe lëvizja përgjatë anëve të kubit do të bëhet me tastet standarde "lart", "poshtë", "majtas" dhe "djathtas". Vetë forma 3D është ndërtuar duke përdorur webkit-perspective, -webkit-transform dhe -webkit-transition.

4. Kube të shumta 3D të anulueshme

Këtu janë tashmë disa kube 3D që përdorin CSS3 dhe vetitë e transformimit dhe tranzicionit drejtpërdrejt. Rri pezull mbi kub bën që ai të lëvizë anash, duke zbuluar tekstin që është në anën tjetër të formës.

5. Menuja e fizarmonikës

Efekti i pastër i menysë së fizarmonikës CSS, ku klikimi në secilën prej rreshtave hap një dritare shtesë në trupin e vetë listës. Animacioni origjinal në shfletuesit e bazuar në WebKit.

6. CSS Parallax Scrolling

Ky është një lëvizje automatike e animuar me paralaksë duke përdorur tranzicionet CSS bazuar në WebKit. Kur rri pezull mbi kutinë e tekstit, yjet në sfond fillojnë të lëvizin pa probleme anash. Efekti i fluturimit krijohet.

7. Matricë

Filmi kult "Matrix" është një nga filmat më të mirë fantashkencë. Shembulli tregon se si të rikrijoni të njëjtin animacion të mahnitshëm (ekran i zi me numra që funksionojnë) në CSS3.

8 Palaroide dinamike

Ky shembull ofron një përshkrim të detajuar të krijimit të fotove të animuara bazuar në komandat CSS3. Klikimi mbi një imazh e zmadhon atë dhe e sjell atë në pjesën e përparme.

9. Shkallëzimi i imazhit

Në këtë shembull, imazhet thjesht zmadhohen kur rri pezull. Një efekt i thjeshtë, por ndonjëherë shumë i dobishëm.

10. Efektet JavaScript në CSS3

Si një alternativë ndaj JavaScript, postimi sugjeron shtatë efekte CSS3: blloqe të ndryshme që rrotullohen, zhduken, lëvizin, rriten, etj.

11. DJ Hero Virtual Records

Postimi shpjegon se si të krijoni rekorde rrotulluese. Shpejtësia e rrotullimit mund të rregullohet drejtpërdrejt në ekran.

12. Vinil rrëshqitës

Efekti rrëshqitës i regjistrimit vinyl krijohet duke përdorur tranzicionet CSS3 dhe HTML. Animacion si ky i jep jetë një faqe interneti, i shton origjinalitet një kopertine standarde të albumit, etj.

13. Efektet hover të imazhit

Kur rri pezull mbi një imazh, ai mund të lëvizë anash, të rrotullohet, të zvogëlohet, të shndërrohet nga katrori në rrumbullak, të bëhet i paqartë ... Me një fjalë, fotografitë do të ndryshojnë vetitë e tyre në çdo mënyrë të mundshme.

14. Trekëndësh rrotullues

Kur klikoni në trekëndësh, ai fillon të rrotullohet.

15. Hapësirë

E gjithë hapësira, përshtatet në CSS. Vepron si shembull i mbivendosjes së shtresave rrotulluese (më e dukshme kur zmadhohet në shfletues).

16. Las Meninas në 3D

Një efekt interesant CSS që e bën Las Meninas të famshëm të Diego Velázquez të duket tredimensionale.

17. CSS për Mac OS X

Në fund të ekranit është një grup ikonash bazë të Mac OS X që zmadhohen kur rri pezull. Efekti i jep dinamikë faqes.

18. Modalet Drop-In

Efektet CSS3 dhe vetitë e Drop-In Modals do të ndihmojnë në krijimin e dritareve modale të shpejta, të animuara dhe me ndryshim të lehtë.

19. Animimi i objekteve

Një transformim ndryshon pamjen e një elementi në shfletues. Tregohet në shembullin e një rakete që "fluturon" nga një skaj i ekranit në tjetrin. Mund të përdoren mjete për lëvizje, rrotullim etj.

20. Orë me ngjyra

Ora me ngjyra bazohet në jQuery dhe CSS3. Një efekt i ngjashëm do të jetë i dobishëm në kontekstin e pritjes për përfundimin e disa garave, votimit dhe të ngjashme.

21. Galeria Lightbox me jQuery dhe CSS3

Kjo është një galeri e mrekullueshme që ju lejon të renditni dhe rregulloni imazhet në një mënyrë selektive. Për interaktivitet, galeria përdor jQuery, jQuery UI dhe shtojcën jQuery FancyBox. Lightbox mbështet titullin dhe përshkrimin e fotografive, i grupon ato dhe i rregullon automatikisht rrëshqitjet në një rresht.

22. Parashikime "Elastike".

Zmadhoni pamjet paraprake të imazheve kur rri pezull. Kështu, kur klikoni menuja rritet proporcionalisht.

23. Kartat dinamike

Ky shembull është një grup dinamik kartash që përdorin veçoritë HTML dhe CSS3.

24. Menyja rrëshqitëse e jQuery

Menuja me rrëshqitje në shembull u krijua duke përdorur një kombinim të CSS3 dhe jQuery. Kur rri pezull mbi imazh, shfaqet një dritare kërcyese me tekst.

25. Skedat CSS

Në shembull, vendosja e miut mbi titujt e skedave ndryshon listën e mëposhtme.

26. Menuja e syve të peshkut

Shembulli tregon se si të krijoni një menu Fisheye duke përdorur animacion CSS dhe SVG. Si një bonus shtesë, ekziston një SVG demo në etiketën IMG.

27. Menyja rënëse

Ky lloj ofron një navigim shumë të përshtatshëm përmes menysë kryesore, falë përdorimit të tranzicioneve CSS3.

28. Tituj nga Star Wars

Tituj të famshëm nga Star Wars. HTML dhe CSS do të jenë të mjaftueshme për t'i ekzekutuar ato.

29. Më shumë Efekte CSS Fisheye

Përsëri, ikona që rriten duke qëndruar pezull.

30. Animacion kornizë për kornizë

Ekzistojnë disa opsione demonstrimi.
Në shembullin e parë, duhet të klikoni mbi imazhin për të ndryshuar kornizat. Çdo klikim është një lëvizje. Kornizat përsëriten, krijohet një lak i caktuar.
Në shembullin e dytë, për të ndryshuar kornizat, mjafton të lëvizni kursorin mbi imazh. Prandaj, shpejtësia e animacionit do të varet nga shpejtësia e lëvizjes së miut.

31. Walker perandorak AT-AT

Është përsëri Star Wars - ky shëtitës AT-AT është bërë me CSS3.

32. Një tjetër fizarmonikë CSS

Kur klikoni në një rresht, tabela zgjerohet.

33. Menu e thjeshtë me rrëshqitje

40. Menyja rënëse
Një tjetër version i një menuje të thjeshtë dhe të bukur CSS.

Artikujt kryesorë të lidhur