Avem nevoie de articole interesante și utile pe care să le publicăm pe forumul nostru. Avem un corector și un editor, așa că nu trebuie să vă faceți griji cu privire la ortografie și designul textului. Vom verifica totul și îl vom aranja frumos.
CSS3 a oferit nenumărate posibilități designerilor UX (UX), iar cel mai bun lucru este că cele mai tari elemente sunt cu adevărat ușor de implementat.
Doar câteva linii de cod vă vor oferi efecte de tranziție uimitoare care vă vor entuziasma utilizatorii, vor crește implicarea și, în cele din urmă, utilizarea corectă, vă va crește traficul. Mai mult, aceste efecte folosesc accelerare hardware, acesta este un progres - la care poți participa chiar acum.
Sunt 8 într-adevăr efecte simple, care va adăuga viață interfeței dvs. de utilizare ( interfața cu utilizatorul) și zâmbete pe fețele utilizatorilor dvs.
Toate aceste efecte (un dreptunghi) sunt controlate folosind proprietăți de tranziție. Deci, pentru a vedea cum funcționează aceste efecte, am creat un div în pagina HTML:
Odată ce ați făcut acest lucru, setați-i lățimea și înălțimea (deci să aibă dimensiuni), culoarea de fundal (ca să o putem vedea) și proprietățile efectului.
body > div ( lățime: 483 px; înălțime: 298 px; fundal: # 676470; tranziție: toate 0,3 s ease; )
Proprietatea de tranziție are trei valori: proprietăți ale tranziției (în cazul nostru toate), viteza tranziției (în cazul nostru 0,3 secunde) și o a treia valoare care vă permite să schimbați modul în care sunt calculate accelerația și decelerația, dar noi Vom rămâne cu setările implicite, lăsând acest câmp gol.
Acum tot ce trebuie să facem este să schimbăm proprietățile și ei vor crea animația pentru noi.
Dacă doriți să continuați pe cont propriu, atunci fișierele demo sunt pentru dvs.
1. DimmingEfectele de întunecare sunt o solicitare destul de comună din partea clienților. Acest metodă grozavă subliniați funcționalitatea sau atrageți atenția asupra unui apel la acțiune.
Efectul este codificat în două etape: mai întâi, setați starea inițială; apoi setați modificarea, de exemplu, la trecerea mouse-ului:
Fade ( opacitate: 0,5; ) . fade: hover ( opacitate: 1; )
(Asigurați-vă că dați div-ului dvs. o clasă „fade” pentru a vedea cum funcționează.)
2. Schimbarea culoriiAnterior, animarea schimbărilor de culoare a fost un efort incredibil de complex, implicând matematică implicată în calcularea valorilor RGB individuale și apoi recombinarea acestora. Acum pur și simplu setăm div-ul la clasa „culoare” și setăm culoarea pe care o dorim în CSS:
Culoare: hover ( fundal:#53a7ea; )
3. Mărirea și contracțiaPe vremuri, pentru a face un element mai mare, trebuia să-i folosești lățimea și înălțimea sau o setare de căptușeală. Dar acum putem folosi transformarea CSS3 pentru a o crește.
Setați clasa div-ului dvs. la "creștere" și apoi adăugați acest cod la stilul dvs. de bloc:
Grow:hover ( -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); )
Micșorarea unui element este la fel de ușor ca și mărirea acestuia. Pentru a mari un element specificam o valoare mai mare decat 1, pentru a-l micsoram specificam o valoare mai mica decat 1:
Shrink:hover ( -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); )
4. Torsiunea elementelorCSS oferă o serie de transformări, iar una dintre cele mai bune este torsiunea elementului. Oferă div-ului tău o clasă „rotire” și adaugă următoarele rânduri către CSS-ul tău:
Prezintă-ți atenția curs nou din Echipa Codeby - „Testarea de penetrare a aplicațiilor web de la zero”. Teorie generală, pregătirea mediului de lucru, fuzzing pasiv și amprentare, fuzzing activ, Vulnerabilități, Post-exploatare, Instrumente, Inginerie socială și multe altele.
Rotire:hover ( -webkit-transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); transformare: rotateZ(-30deg); )
5. Transformarea unui pătrat într-un cercÎn zilele noastre efectul transformării unui element pătrat într-unul rotund și invers este foarte popular. CU folosind CSS Acest lucru este ușor de realizat, doar trecem de proprietatea razei frontierei. Vom folosi pur și simplu proprietatea border-radius.
Dați div-ului dvs. o clasă „cerc” și adăugați aceste linii la foile de stil:
Cerc:hover (granița-rază:50%; )
6. Umbra 3DUmbrele 3D au fost descurajate de aproximativ un an pentru că nu se potrivesc cu designul plat, ceea ce este o prostie, desigur, funcționează fantastic de bine, oferind utilizatorului un sentiment de implicare, cum ar fi lucrul cu design plat, și cu o interfață pseudo 3D.
Acest efect se realizează prin adăugarea unui dreptunghi de umbră și apoi mutarea elementului pe axa x prin schimbarea transforma proprietateași traduceți astfel încât elementul să pară să crească din ecran.
Dați div-ului dvs. clasa „trei” și apoi adăugați următorul cod către CSS-ul tău:
Threed:hover (box-shadow: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea; -webkit-transform: translateX(-3px); transform: translateX(-3px); )
7. LegănatNu toate elementele folosesc proprietatea de tranziție. De asemenea, putem crea animații foarte complexe folosind @keyframes, animație și animație de iterație.
În acest caz, definim mai întâi Animații CSSîn stiluri. Veți observa că din cauza problemelor de implementare, trebuie să folosim @-webkit-keyframes precum și @keyframes (da, Internet Explorer cu adevărat mai bun decât Chrome în acest sens, cel puțin).
@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(5px); transform: translateX(5px); ) 30% ( -webkit-transform: translateX(-5px); transform: translateX(-5px); ) 50% ( -webkit-transform: translateX(3px); transform: translateX(3px); ) 65% ( -webkit-transform: translateX(-3px); transform: translateX(-3px); ) 80% ( -webkit -transform: translateX(2px); transform: translateX(2px); 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing ( -webkit-transform: translateX); (5px); transform: translateX(5px) 30% ( -webkit-transform: translateX(-5px); transform: translateX(-5px); ) 50% ( -webkit-transform: translateX(3px); translateX(3px); 65% ( -webkit-transform: translateX(-3px); transform: translateX(-3px); ) 80% ( -webkit-transform: translateX(2px); transform: translateX(2px); ) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) )
8. Inserarea unui chenarUnul dintre cele mai populare stiluri de buton în acest moment este butonul fantomă; buton fără fundal și chenar îndrăzneț. Putem, desigur, să adăugăm pur și simplu un chenar elementului, dar acest lucru va schimba poziția elementului. Am putea rezolva această problemă folosind dimensiunile cutiei, dar mult mai mult solutie simpla este trecerea la margine prin inserarea unei umbre.
Dați cazului dvs. o clasă „de frontieră” și adăugați următorul css pentru stilurile tale:
Border:hover (box-shadow: insert 0 0 0 25px #53a7ea; )
Vrei sa stii, ? sau ? Toate acestea și multe altele pe site. Abonează-te la nostru newsletter prin e-mail(în josul paginii) sau pe și vei fi primul care află despre articole noi! Alăturați-vă de asemenea
Dacă vă place efectul, atunci puteți pur și simplu să copiați cod gata si foloseste-l!
Dă viață site-ului tău!
Diferite efecte de hover pot adăuga prospețime paginilor site-ului dvs. Anterior, pentru orice efect trebuia să te ocupi de javascript, dar astăzi, după apariția tehnologiei CSS3, totul se poate face fără a folosi javascript.
Exemplele de astăzi sunt toate implementate și optimizate pentru altele noi browsere moderne, și cu siguranță va funcționa în ele (de exemplu, în Mozilla sau browserele din familia WebKit). Nu vă putem asigura că funcționează în IE, dar majoritatea ultimele versiuni efectele vor funcționa cu siguranță așa cum ar trebui. Dar nu uitați că pentru fiecare efect a fost pregătită o opțiune de rollback atractivă în cazul în care browserul încă nu acceptă efectul.
01. Zoom
Demo: Pentru vizionare
Acest efect este foarte ușor de implementat și poate fi realizat în mai multe moduri. Am folosit o metodă în care se adaugă un parametru de marjă la fiecare imagine, iar apoi, când treceți cursorul mouse-ului, acest parametru este eliminat. Să presupunem că setarea marginii începe de la 15 pixeli, iar la trecerea cu mouse-ul devine 2 pixeli, ceea ce face ca imaginea să pară să sară. De asemenea, puteți utiliza pur și simplu acest efect cu text, chiar dacă legăturile sunt poziționate pe verticală și nu pe orizontală.
Tranziția aici poate fi setată la discreția dvs., iar efectul va fi, de asemenea, atractiv fără nicio tranziție. De exemplu, am făcut efectul puțin neted, ceea ce ne-am gândit că va adăuga un pic de fler efectului.
Bump Up Effect Cod CSS
Ex1 img(
chenar: 5px solid #ccc;
plutește la stânga;
marginea: 15px;
-webkit-tranziție: margine 0.5s ease-out;
-moz-tranziție: margine 0.5s ease-out;
-o-tranziție: margine 0,5s ease-out;
}
Ex1 img:hover (
margine-sus: 2px;
}
02. Stack & Grow
Demo: Pentru vizionare
Se pare că autorul acestui efect a dorit să obțină un fel de efect de lampă de lavă, deoarece atunci când treceți cursorul mouse-ului peste lista de link-uri, fiecare imagine se extinde încet și apoi revine la dimensiunea inițială.
Pentru implementare aici, au fost folosite imagini de 400x133 pixeli. Au fost apoi redimensionate la 300x100 pixeli folosind CSS și extinse la trecerea cu mouse-ul. Deoarece în exemplu întreaga listă este centrată, dimensiune nouă imaginile au refractat întregul aliniament. Această problemă poate fi rezolvată prin setarea marginilor negative la jumătate din lățimea imaginilor mărite.
Cod CSS pentru Stack & Grow
/*Exemplu 2*/
#container (
latime: 300px;
marja: 0 auto;
}
#ex2 img(
înălțime: 100px;
latime: 300px;
marjă: 15px 0;
-webkit-tranziție: ușurința tuturor celor 1;
-moz-tranziție: toate 1-urile ușurință;
-o-tranziție: toate 1-urile ușurință;
}
#ex2 img:hover (
înălțime: 133px;
latime: 400px;
margine-stânga: -50px;
}
03. Fade Text in
Demo: Pentru vizionare
Aici autorul a vrut să creeze ceva ca un eveniment tip javascript, când treceți cu mouse-ul peste un element și efectul apare pe altul. Aici textul și imaginea au fost luate și apoi plasate într-un div separat aliniat la stânga. Apoi, parametrii color: transparent și line-height: 0px au fost adăugați la div. Acest lucru ne-a permis să plasăm textul de-a lungul marginii de sus a div-ului și să-l ascundem cu totul.
Pentru a face textul să apară din nou, pur și simplu schimbăm culoarea și înălțimea liniei. Când treceți cu mouse-ul peste imagine, textul apare din nou. Efect foarte amuzant și ușor.
Fade Text In Effect Cod CSS
#ex3 (
latime: 730px;
înălțime: 133px;
înălțimea liniei: 0px;
culoare: transparent;
dimensiunea fontului: 50px;
familie de fonturi: „Helvetica Neue-Light”, „Helvetica Neue Light”, „Helvetica Neue”, Helvetica, Arial, sans-serif;
greutate font: 300;
text-transform: majuscule;
}
#ex3:hover (
înălțimea liniei: 133px;
culoare: #575858;
}
#ex3 img(
plutește la stânga;
marjă: 0 15px;
}
04. Fotografie strâmbă
Demo: Pentru vizionare
Acest efect este foarte simplu, dar ar fi grozav pentru o galerie de miniaturi. Pentru a începe, trebuie să creați o grilă de imagini și apoi să rotiți imaginile când treceți cu mouse-ul peste ele, ceea ce creează un efect atractiv.
Există o mulțime de altele noi de folosit aici. Valori CSS, așa că merită să luați în considerare și opțiunea de rollback pentru mai multe versiuni anterioare browsere. Galeria noastră va folosi tranziții, transformări și umbre blocate, totuși, la cererea dvs. Transformarea va fi responsabilă pentru rotirea imaginii, iar tranzițiile vor fi responsabile pentru efectul moale și neted.
Aici puteți folosi pseudo-selectori.
Cod CSS pentru Crooked Photo
#ex4 (
latime: 800px;
marja: 0 auto;
}
#ex4 img (
marja: 20px;
chenar: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-tranziție: toate 0.5s ease-out;
-moz-tranziție: toate 0.5s ușurință;
-o-tranziție: toate 0.5s ușurință;
}
#ex4 img:hover (
-webkit-transform: rotire(-7deg);
-moz-transform: rotire(-7deg);
-o-transform: rotire(-7deg);
}
05. Fade In and Reflect
Demo: Pentru vizionare
Acest efect este un pic mai greu de implementat, așa că a trebuit să-l refacem puțin pentru a obține un efect decent. Poziția implicită a imaginii este ușor transparentă. Apoi, când treceți cu mouse-ul peste imagine, nivelul de transparență este scăzut și imaginea revine la aspectul inițial, împreună cu o ușoară strălucire și reflexie (numai browserele WebKit).
Din păcate, reflexia nu este tocmai o tranziție, așa că apare imediat, chiar dacă restul conținutului apare cu încetinitorul.
Dacă sunteți confuz cu privire la reflectarea CSS, puteți citi mai multe despre el în acest articol (David Walsh).
Fade In și Reflect CSS Code
#ex5 (
latime: 700px;
marja: 0 auto;
înălțime minimă: 300px;
}
#ex5 img (
marja: 25px;
opacitate: 0,8;
chenar: 10px solid #eee;
/*Tranziție*/
-webkit-tranziție: toate 0.5s ușurință;
-moz-tranziție: toate 0.5s ușurință;
-o-tranziție: toate 0.5s ușurință;
/*Reflecţie*/
-webkit-box-reflect: sub 0px -webkit-gradient(liniar, stânga sus, stânga jos, de la(transparent), color-stop(.7, transparent), la(rgba(0,0,0,0.1)) );
}
#ex5 img:hover (
opacitate: 1;
/*Reflecţie*/
-webkit-box-reflect: sub 0px -webkit-gradient(liniar, stânga sus, stânga jos, de la(transparent), color-stop(.7, transparent), la(rgba(0,0,0,0.4)) );
/*Strălucire*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
Concluzie
Aceste 5 exemple ar trebui să fie suficiente pentru a vă inspira să creați ceva propriu. Amintiți-vă că puteți experimenta oricând cu ceea ce aveți deja exemple gata făcute si apoi povesteste-ne despre ele.
Dacă ați întâlnit și alte efecte atractive undeva pe net, atunci vă rugăm să ne spuneți nouă și altor cititori despre asta.
Cu siguranță ați văzut pe unele site-uri o interdicție de a folosi butonul drept al mouse-ului. Această funcție îi combate în primul rând pe cei care doresc să vă fure conținutul. Această măsură nu vă va proteja complet de furt, ci de copiere manuală destul de. Alte optiuni .
Nu recomand să-l dezactivați butonul corect mouse-ul dacă postezi materiale destinate copierii pe blogul tău. Acestea pot fi coduri, scripturi, retete culinare, materiale de referinta si altul. Interzicerea copierii în acest caz, va îndepărta vizitatorii de la tine, iar blogul tău va deveni mai puțin util vizitatorilor. Dacă protecția împotriva plagiatului este importantă pentru dvs., atunci este mai bine să adăugați adresa URL la sfârșitul copiei. Atunci vei fi sigur că, dacă cineva dorește să publice ceva copiat de la tine în altă parte pe Internet, atunci copy-paste cu mai probabil va distribui un link către blogul dvs.
Această rețetă este potrivită pentru orice site. Tot ce trebuie să faceți este să lipiți codul pe toate paginile blogului dvs.:
În Blogger, adăugați cod la gadgetul HTML/Javascript în fila Design. Dacă utilizați unul dintre ultimele subiecte pe blogul dvs. (Emporio, Contempo, Soho, Notable), apoi nu uitați să activați vizibilitatea widget-ului (bifați caseta de lângă „Vizibil pentru toată lumea”, „Afișați widgetul „ HTML/JavaScript „”).
Pe Wordpress, adăugați codul la widgetul „Text”.
Sărbătoarea se apropie - Ziua Internațională a Femeii. Să ne pregătim din timp pentru asta. Poți felicita fetele și femeile într-un mod original folosind serviciile de cărți poștale, despre care vom vorbi de mai jos.
Creați online o carte poștală de 8 martie Utilizați următoarele servicii pentru a crea o carte poștală practic de la zero.
Sper că, folosind unul dintre aceste generatoare, veți putea să vă felicitați în mod adecvat doamnele pe 8 martie!
Conținutul articolului:
Google Plus Platforma Google Plus nu s-a ridicat la nivelul sperantelor dezvoltatorilor si va fi eliminata complet pe 2 aprilie 2019. Albumele asociate cu acesta vor dispărea odată cu acesta. Google Foto, va deveni autorizații inaccesibile pe site-uri cu un cont Google Plus. Deja pe 4 februarie a devenit functie indisponibila crearea de profiluri, canale și pagini Google Plus. Dacă conținutul valoros a fost stocat în contul dvs., atunci puteți descărca copie de rezervă.Modificările vor afecta cel mai mult bloggerii care își conduc blogurile pe Blogspot. Unele widget-uri G+, comentarii G+ și profil Google+. Acest lucru este menționat în notificarea din panoul de administrare Blogger:
După anunţarea rezilierii Funcționează API Google+, care este programat să fie lansat în martie 2019, va introduce o serie de modificări în integrarea Blogger cu Google+ pe 4 februarie.
Widgeturi Google+. Design-urile blogurilor nu vor mai accepta widget-urile Butonul +1, Adepții Google+ și Insigna Google+. Toate aparițiile acestor widget-uri vor fi eliminate de pe blogul dvs.
butoane +1. Butoanele +1 și G+ vor fi eliminate, la fel și linkurile „Publicați pe Google+” din postările de pe blog și din bara de navigare.
Vă rugăm să rețineți că, dacă utilizați un șablon personalizat care are Caracteristici Google+, poate fi necesar să fie schimbat. Vă rugăm să contactați persoana care v-a furnizat acest șablon pentru recomandări.
Comentarii Google+. Asistența pentru comentarii va fi întreruptă folosind Google+ și toate blogurile care folosesc această funcție vor avea comentariile standard Blogger restaurate. Din păcate, comentariile postate prin Google+ nu pot fi transferate pe Blogger, așa că nu vor mai apărea pe blogul tău. Îndepărtarea Comentarii Google Plus Din păcate, comentariile care au fost publicate în sistem vor fi șterse definitiv. Puteți folosi doar același instrument https://takeout.google.com pentru a spune comentarii de rezervă din Google+ pe computer. Numai că nu există încărcător de încărcare pentru el și puteți restabili comentariile doar manual într-un mod destul de strâmb. E bine că am fost la timp Cum să înlocuiesc un profil Google Plus cu un profil Blogger Dacă bloguri pe Blogspot, atunci este recomandabil să revii acum de la profilul Google Plus la profilul Blogger (pentru cei care au trecut la Google Plus la. o dată). Recomand să faceți acest lucru chiar acum pentru a evita situațiile neprevăzute care pot apărea în timpul ștergerii Conturi Google La care se adauga. Cum să-ți recuperezi profilul Blogger Acest lucru este ușor de făcut în setările de administrator Blogger:
Setări –> Setari personalizate–> Profil utilizator – aici selectați Blogger
Salvați modificările.
Confirmați trecerea la și introduceți numele sau porecla dvs.
Nu uitați să încărcați un avatar în profilul dvs. Blogger.
Cum să ștergeți un profil Google Plus Dacă decideți să scăpați de profilul dvs. G+ odată pentru totdeauna, atunci accesați pagina dvs. Google Plus -> Setări -> derulați în partea de jos a paginii -> ștergeți contul Google Plus:
Astăzi vă voi spune ce este CSS3, cu ce se folosește, unde să îl căutați și cum să îl scrieți corect. Vă avertizez, voi spune de la mine, simplificat pentru publicul larg, așa cum văd eu + exemple. Deci, să începem de departe.
CSS sunt stiluri în care sunt scrise proprietățile unui obiect. Aceasta înseamnă că sunt în toate motoarele existente, dacă nu le puteți găsi, atunci fie că căutați în locul greșit, fie ele chiar nu există ( site strâmb). Unde se găsesc de obicei? De obicei aceasta este rădăcina site-ului, numele fișierului este style.css, deși, în principiu, numele nu este la fel de important ca extensia .css dacă fișierul cu o astfel de extensie este un fișier de stil.
Vezi si pe blogul meu.
