Prije nego što pogledamo gumbe, pogledajmo zajedničke postavke za sve njih.
HTMLGumbi će koristiti vrlo jednostavan HTML kod:
Pretplatite se
CSSTakođer, svi će gumbi imati zajedničke postavke za tekst naslova i veze za poništavanje odabira:
ButtonText ( font: 18px/1.5 Helvetica, Arial, sans-serif; boja: #fff; ) a (boja: #fff; tekstualni ukras: ništa; )
Tipično, korisnik očekuje prilično mekan učinak kada mišem lebdi iznad veze ili gumba. A u našem slučaju, gumb mijenja veličinu - povećava se, prikazujući dodatnu poruku.
Osnovni CSS kodZa početak gumbu trebamo dati samo oblik i boju. Definirajte visinu od 28 px i širinu od 115 px, dodajte margine i ispunu, a također dajte gumbu svijetli obrub.
#button1 ( pozadina: #6292c2; obrub: 2px puni #eee; visina: 28px; širina: 115px; margina: 50px 0 0 50px; padding: 0 0 0 7px; overflow: skriveno; display: block; )
CSS3 efektiNeki ljudi vole kada jednostavan gumb prati dosta CSS koda. Ovaj odjeljak pruža dodatne CSS3 stilove za naš gumb. Možete i bez njih, ali gumbu daju moderniji izgled.
Zaokružite kutove okvira i dodajte gradijent. Ovdje se koristi mali trik s tamnim gradijentom koji je u interakciji s bilo kojom bojom pozadine.
/*Zaobljeni kutovi*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; radijus granice: 15px; /*Gradijent*/ pozadinska slika: -webkit-linearni-gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -moz-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -o-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -ms-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
CSS animacijaSada postavimo CSS prijelaz. Animacija će se koristiti za sve promjene svojstava i trajat će pola sekunde.
Prijeđite mišemSve što preostaje je dodati stil za proširenje gumba kada prijeđete mišem iznad njega. Gumb mora biti širok 230 px za prikaz cijele poruke.
#button1:hover (širina: 230px;)
Jednostavna promjena tona boje
Vrlo jednostavno i popularno CSS učinak za gumb. Kada zadržite kursor miša, ton boje pozadine se glatko mijenja.
Osnovni CSS kodCSS kod je vrlo sličan prethodnom primjeru. Koristi se drugačija boja pozadine i oblik je malo promijenjen. Također centrira tekst i postavlja visinu retka za gumb tako da dolazi do vertikalnog centriranja.
#button2 ( pozadina: #d11717; granica: 2px puna #eee; visina: 38px; širina: 125px; margina: 50px 0 0 50px; preljev: skriven; prikaz: blok; poravnanje teksta: središte; visina linije: 38px; )
CSS3 efektiPostavite zaokruživanje uglova, gradijent za pozadinu i dodatnu sjenu. Pomoću rgba sjenu činimo crnom i prozirnom.
/*Zaobljeni kutovi*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; rubni radijus: 10px; /*Gradijent*/ pozadinska slika: -webkit-linearni-gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -moz-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -o-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -ms-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Sjena*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); okvir-sjena: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS animacijaAnimacija se praktički ne razlikuje od prethodnog primjera.
/*Transition*/ -webkit-transition: Svih 0,5s jednostavnost; -moz-prijelaz: Svih 0,5s lakoća; -o-prijelaz: Svih 0,5s lakoća; -ms-transition: Svih 0,5 s jednostavnost; prijelaz: sve 0,5s lakoća;
Prijeđite mišemKada lebdite kursorom miša, bit će postavljena druga boja pozadine. Pokušajte odabrati opciju svjetlije boje u Photoshopu za izvrstan učinak.
#button2:hover (boja pozadine: #ff3434;)
Ovaj efekt može biti prilično impresivan ovisno o izboru pozadinske slike. Demo koristi neupadljivu pozadinu i efekt izgleda neupadljivo. Pokušajte upotrijebiti drugu sliku i učinak bi mogao biti zapanjujući.
Osnovni CSS kodGlavni dio koda je isti kao i prethodni primjeri. Imajte na umu da koristimo pozadinsku sliku. Početna pozicija pozadina je postavljena na "0 0". Kada zadržite kursor, položaj se pomiče okomito.
#button3 ( pozadina: #d11717 url("bkg-1.jpg"); položaj pozadine: 0 0; sjena teksta: 0px 2px 0px rgba(0, 0, 0, 0.3); veličina fonta: 22px; visina : 58px; širina: 155px; margina: 50px 0 0 50px; overflow: skriveno; display: block; text-align: center; line-height: 58px; )
CSS3 efektiNema ništa posebno u ovom primjeru - zaobljeni kutovi i sjene.
/*Zaobljeni kutovi*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; rubni radijus: 5px; /*Sjena*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); okvir-sjena: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS animacijaAnimacija u ovom slučaju traje dulje kako bi stvorila gladak i zanimljiv učinak.
/*Transition*/ -webkit-transition: Svih 0,8s jednostavnost; -moz-prijelaz: Svih 0,8s lakoća; -o-prijelaz: Svih 0,8s lakoća; -ms-transition: Svih 0,8s lakoća; prijelaz: sve 0,8s lakoća;
Prijeđite mišemSada je vrijeme da premjestite pozadinsku sliku. Početna pozicija bila je "0 0". Postavite drugi parametar na 150px. Za vodoravni pomak morate promijeniti prvi parametar.
#button3:hover (background-position: 0px 150px; )
3D simulacija pritiska gumba
Posljednji primjer u našoj lekciji govori o popularnoj 3D metodi simulacije pritiska na tipku kada iznad nje lebdi pokazivač miša. Animacija za ovaj slučaj je toliko jednostavna da čak ne zahtijeva CSS prijelaz. Ali krajnji rezultat je prilično impresivan.
Osnovni CSS kodCSS kod za naš gumb.
#button4 ( pozadina: #5c5c5c; sjena teksta: 0px 2px 0px rgba(0, 0, 0, 0.3); veličina fonta: 22px; visina: 58px; širina: 155px; margina: 50px 0 0 50px; preljev: skriveno ; prikaz: blok; poravnanje teksta: središte; visina linije: 58 px; )
CSS3 efektiU u ovom slučaju CSS3 više nije dobra opcija. Da bi se postigao učinak, potrebne su sjene i gradijent. Oštra sjena stvara izgled 3D gumba.
/*Zaobljeni kutovi*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; rubni radijus: 5px; /*Sjena*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); okvir-sjena: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradijent*/ pozadinska slika: -webkit-linearni-gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -moz-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -o-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -ms-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Prijeđite mišemU ovom slučaju imamo najveći dio lebdenja. Duljina sjene je smanjena, a rubovi se koriste za stvaranje spoja tamnog područja. Sve zajedno stvara iluziju pritiskanja gumba. Okretanje gradijenta pojačava učinak.
#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0) , 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ pozadinska slika: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); pozadinska slika: -moz-linearni gradijent(dno, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) )); pozadinska slika: -o-linearni-gradijent(dno, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); pozadinska slika: -ms-linearni-gradijent( dno, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); pozadinska slika: linearni gradijent(dno, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); )
Dobar dan svima. Davno sam objavio post kao blog. Danas sam bio raspoložen da ga počnem dizajnirati. Sam izvorni gadget o autoru potpuno je dosadan i nije privlačan.
Kao rezultat toga, bilo je moguće stvoriti individualni stil, prilično atraktivan i informativan za vlastiti dizajn, najvjerojatnije čak ni widget, već karticu profila. Tako ćemo ga nazvati. Pa ovako nešto
Radna verzija na testnom blogu na bočnoj traci na samom dnu
Što je na njemu
1. Vaša profilna fotografija.
2. Prekrasan dizajn same kartice koju je lako prilagoditi
3. Vaš nadimak, ime ili prezime
4 Možete navesti svoje zanimanje, hobi
5.Dodajte 2 gumba na potrebne stranice. To mogu biti poveznice na vašu punu autorsku stranicu, na početna stranica, karta, majstorske tečajeve, javne stranice u društvenim mrežama. Bilo što.
6. Kartica će savršeno stati u rubnu traku bloga.
Kopirajte donji kod i mi ćemo dalje isklesati vašu karticu profila.
![](https://fighters.ru/wp-content/uploads/2020/" alt=)
" alt="profil" class="profile" />!}
Blogerica Vika Barad
moj blogGrupa na VK
.snip1 (
obitelj fontova: "Roboto", Arial, sans-serif;
boja: #fff;
položaj: relativan;
preljev: skriven;
margina: 10px;
min-width: 230px;
max-width: 315px;
širina: 100%;
boja: #ffffff;
poravnanje teksta: lijevo;
visina linije: 1.4em;
boja pozadine: #141414;
}
.snip1 * (
-webkit-box-sizing: border-box;
veličina okvira: border-box;
-webkit-transition: svih 0,25s jednostavnost;
prijelaz: svih 0,25s lakoća;
}
.snip1 img (
maksimalna širina: 100%;
okomito poravnanje: gore;
neprozirnost: 0,85;
}
.snip1 figcaption (
širina: 100%;
boja pozadine: #141414;
ispuna: 25px;
položaj: relativan;
}
.snip1 figcaption:before (
pozicija: apsolutna;
sadržaj: "";
dno: 100%;
lijevo: 0;
širina: 0;
visina: 0;
rubni stil: čvrsta;
border-width: 55px 0 0 400px;
boja obruba: prozirna prozirna prozirna #141414;
}
.snip1 figcaption a (
ispuna: 5px;
rub: 1px puni #ffffff;
boja: #ffffff;
veličina fonta: 0,7em;
transformacija teksta: velika slova;
margina: 10px 0;
prikaz: inline-block;
neprozirnost: 0,65;
širina: 47%;
poravnanje teksta: središte;
težina slova: 600;
razmak između slova: 1px;
tekst-ukras: nema;
}
.snip1 figcaption a:hover (
neprozirnost: 1;
}
.snip1 .profil (
rubni radijus: 50%;
pozicija: apsolutna;
dno: 100%;
lijevo: 25px;
z-indeks: 1;
max-width: 90px;
neprozirnost: 1;
okvir-sjena: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1 .slijedi (
margina-desno: 6%;
boja obruba: #2980b9;
boja: #2980b9;
}
.isječak1 h2 (
margina: 0 0 5px;
težina slova: 300;
}
.snip1 h2 raspon (
prikaz: blok;
veličina fonta: 0,5em;
boja: #2980b9;
}
.snip1 p (
margina: 0 0 10px;
veličina fonta: 0,8em;
razmak između slova: 1px;
neprozirnost: 0,8;
}
.snip1:hover:before,
.snip1.hover:before (
dolje: 0;
box-shadow: 0 0 0px bijela;
-webkit-transition-delay: 0s;
kašnjenje prijelaza: 0s;
}
$(".lebdjeti").mouseleave(
funkcija()(
$(this).removeClass("lebdjeti");
}
);
https://w-dog.ru/wallpapers/10/19/380923269777589.jpg - ovo je adresa slike - pozadina na vrhu
https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc - adresa vaše minijature. Možete ga kopirati u svoj Google profil ili postaviti drugi avatar.
U redove označene ružičastom bojom upišite svoj nadimak, ime, zanimanje i tekst objašnjenja.
Sukladno tome, ono što je označeno zelenom bojom su adrese stranica na koje će doći do prijelaza kada kliknete na gumb.
Također sam na nekoliko mjesta bojom označio glavnu pozadinu kartice profila #141414;
Postavke su vrlo osnovne i mislim da neće biti nikakvih pitanja. Ako jeste, napišite u komentarima. Hajdemo shvatiti.
Instaliramo gotov kod widgeta u odjeljak DIZAJN - HTML/JavaScript gadget na bočnoj traci bloga. Inače, mislim da neće izgledati loše na vrhu, kada korisnik ima priliku odmah upoznati autora. Pozadina i slika mogu se jednostavno mijenjati ovisno o vašem raspoloženju ili godišnjem dobu. Uvijek će biti novo. Pa, na vama je.
Sve najbolje i sretno.
CSS je bez sumnje jedan od najvažnijih jezika za označavanje koje koristimo. Iako HTML opisuje strukturu dokumenta, njegovo ponašanje može biti nepredvidivo, ovisno o verziji preglednika. CSS je alat koji će nam omogućiti da ispravimo sve nedosljednosti u prikazu stranice, kao i da dizajniramo njen izgled.
Skrivanje teksta pomoću odlomkaOva tehnika će biti vrlo korisna za logotip tvrtke. Najčešće se slika koristi kao logo, ali za SEO bi bilo lijepo da se naziv tvrtke prikaže u h1 tagovima. Ovaj primjer je najviše Najbolji način implementirati ovo. Zapravo, mi jednostavno skrivamo tekst izvan zaslona i umjesto njega dodjeljujemo pozadinsku sliku.
H1 ( text-indent:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url("images/logo.jpg") pomicanje bez ponavljanja; )
Stiliziranje veza ovisno o formatu datotekeOvaj primjer ima za cilj poboljšati korisničko iskustvo. Često na internetu pratimo poveznice ne znajući kamo vode. Sljedeći isječak koda koristi se za prikaz malih ikona pored veza. Takve slike će reći korisniku da je ovo vanjska poveznica, email adresa, pdf datoteka, slika itd.
/* vanjska veza */ a( padding-desno: 20px; pozadina: url(external.gif) bez ponavljanja središnje desno; ) /* e-pošta */ a( padding-desno: 20px; pozadina: url(email.png ) središnje desno bez ponavljanja; ) /* pdfs */ a( padding-right: 20px; pozadina: url(pdf.png) središnje desno bez ponavljanja; )
Uklanjanje traka za pomicanje iz višerednog polja u IEInternet Explorer ima neugodnu naviku dodavanja traka za pomicanje u polje s više reda čak i kada njegov sadržaj ne prelazi zadana veličina. Ovaj se nedostatak može lako ispraviti pomoću sljedećeg retka koda:
Textarea( overflow:auto; )
Početno slovoDanas je to vrlo česta pojava na blogovima i stranicama s vijestima. Iznenadit ćete se koliko ga je lako implementirati i koliko se dobro degradira u starijim preglednicima.
P:prvo-slovo( display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px; font-family:Georgia; )
CSS transparentnostTransparentnost je svojstvo koje različitim preglednicima, propisuje se na različite načine. Sa sljedećim isječkom koda možete dodijeliti transparentnost svim preglednicima odjednom.
Prozirno ( filter:alpha(opacity=50); -moz-opacity:0,5; -khtml-opacity: 0,5; neprozirnost: 0,5; )
CSS Reset by Eric MeyerZapravo, css-reset, koji je predložio Eric Meyer, već je postao raširen standard uporabe. Budući da su ga prilagodili mnogi poznati programeri, možete biti sigurni u njegovu kvalitetu.
Html, tijelo, div, raspon, aplet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, citat, pre, a, skraćenica, akronim, adresa, veliki, citat, kod, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ( margina: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align : baseline; background: transparent; ) body (line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q :after ( content: ""; content: none; ) /* ne zaboravite definirati stilove fokusa! */ :focus ( outline: 0; ) /* ne zaboravite nekako istaknuti umetke! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* tablice i dalje trebaju "cellspacing="0"" u označavanju */ table ( border-collapse: collapse; border-spacing : 0; )
Predučitavač slikaPonekad je korisno unaprijed učitati svoje slike kako biste uklonili kašnjenje i treperenje prilikom pristupa željenom elementu.
Div.loader( background:url(images/hover.gif) no-repeat; background:url(images/hover2.gif) no-repeat; background:url(images/hover3.gif) no-repeat; margin-left: -10000px; )
Jednostavan css sprite za gumbDostupnost gumba ili veze s pozadinska slika- česta pojava, osim toga, dodatni efekti se često primjenjuju na takve elemente za poboljšanje korisničkog sučelja. Jedan od tih učinaka je pokazivač miša iznad gumba. Koristeći sprite, možemo implementirati ovaj efekt mijenjanjem svojstva background-positon na zadanu vrijednost tako da se pozadinska slika prikazuje kada miš prijeđe iznad gumba. Jednostavno, ali učinkovito rješenje.
A ( display: block; background: url(sprite.png) no-repeat; height: 30px; width: 250px; ) a:hover (background-position: 0 -30px; )
Google API za fontoveNedavno je Google implementirao prekrasan resurs za web programere koji im omogućuje preuzimanje i korištenje novih, nestandardnih fontova na stranici. Postoje čak i različite opcije fontova dostupne za preuzimanje, podebljano, kurziv itd. Iako je Googleova kolekcija još uvijek ograničena, ima ih dosta na zalihama veliki broj fontovi. Najprije uključite dinamički generiranu CSS datoteku s nazivima fontova i varijacija koje trebate, a zatim jednostavno upotrijebite nazive fontova u CSS-u kao i obično. Dodatne informacije Možete ga pročitati pomoću Google Font API-ja.
Inconsolata:italic|Droid+Sans"> tijelo (familija fonta: "Tangerine", "Inconsolata", "Droid Sans", serif; veličina fonta: 48px; )
Hakovi za različite preglednikePonekad je korisno ispraviti grešku u određenom pregledniku, a uvjetni komentari nisu uvijek najbolje rješenje za ovo. Ovaj popis hakiranja preglednika Chrisa Coyiera pomoći će vam da dodijelite svojstva određenim preglednicima koristeći jednostavan css.
/* IE 6 */ * html .yourclass ( ) /* IE 7 */ *+html .yourclass( ) /* IE 7 i moderni preglednici */ html>body .yourclass ( ) /* Moderni preglednici (ne IE 7) */ html>/**/body .yourclass ( ) /* Opera 9.27 i niže */ html:first-child .yourclass ( ) /* Safari */ html body:last-child .yourclass ( ) /* Safari 3+ , Chrome 1+, Opera 9+, Fx 3.5+ */ body:nth-of-type(1).yourclass ( ) /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:first -of-type .yourclass ( ) /* Safari 3+, Chrome 1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) ( .yourclass ( ) )
Uređeni podrumMožda mislite da je stvaranje podnožja koje je uvijek zalijepljeno na dno zaslona težak zadatak. Međutim, to uopće nije teško ako želite jednostavan podrum. Morat ćemo upotrijebiti mali IE6 hack ovdje, ali osim toga, vrlo je jednostavno.
#footer (position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; ) /* IE 6 */ * html #footer ( position:apsolute; top:expression(( 0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop)) +"px"); )
Rotirajte slikuRotiranje slike može biti vrlo korisno, pogotovo ako se može koristiti umjesto učitavanja nove, unaprijed rotirane slike. Recimo da želite koristiti samo jednu sliku za strelicu, ali imate nekoliko njih na svojoj stranici, sve okrenute u različitim smjerovima. Evo rješenja vašeg problema:
Img.flip ( -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transformacija: scaleX(-1); filter: FlipH; - ms-filter: "FlipH"; )
ClearfixNe tako davno, netko je odlučio da je vrijeme da se tok skine s plovaka bez dodavanja dodatnih oznaka u dokument. Kao rezultat ovog rješenja stvorena je klasa koja se može primijeniti na spremnik koji sadrži plutajuće elemente kako bi ih očistio. Ovo je danas vrlo praktična i raširena metoda.
Clearfix:after ( vidljivost: skriveno; prikaz: blok; veličina fonta: 0; sadržaj: " "; jasno: oboje; visina: 0; ) .clearfix ( prikaz: inline-block; ) /* početak komentiranog hakiranja obrnute kose crte */ * html .clearfix ( visina: 1%; ) .clearfix ( prikaz: blok; ) /* zatvori komentirani hack obrnute kose crte */
Zaobljeni kutoviS postupnim usvajanjem CSS3 u modernim preglednicima, stvaranje zaobljenih kutova postalo je vrlo jednostavno. Nažalost, još nema podrške za CSS3 u IE-u, uključujući verziju 8, ali bit će dodan u IE9.
Okrugli ( -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* provjera budućnosti */ -khtml-border-radius: 10px; /* za stare preglednike Konqueror */ )
Prevladavajući stiloviLjudi koji ne znaju za !important u CSS-u nastavljaju me zadivljivati jer je to tako moćan alat koji je jednostavan za korištenje. Vrlo jednostavno, svako pravilo s !important na kraju će nadjačati isto pravilo primijenjeno na taj element bilo gdje u CSS datoteci ili u stilovima linija.
P(veličina-fonta:20px !važno; )
Lice fontaFont-face nije bio široko korišten sve do prošle godine, iako postoji još od dana kada se IE6 smatrao modernim preglednikom. Ova je značajka trenutno dobro podržana. moderni preglednici i ponude odličan način korištenje nesigurnih fontova u vašim projektima. Kako biste uštedjeli vrijeme, možete koristiti poseban Font Squirrel Font Face generator.
@font-face (font-family: "Graublau Web"; src: url("GraublauWeb.eot"); src: local("☺"), url("GraublauWeb.woff") format("woff"), url ("GraublauWeb.ttf") format ("truetype"); )
Centriranje straniceUobičajena tehnika dizajna je horizontalno centriranje mjesta. Ovo je vrlo lako implementirati.
Min. visina u IEOvaj primjer ispravlja jednostavnu, ali neugodnu pogrešku u IE-u prilikom postavljanja minimalne visine. Općenito, IE tumači visinu kao minimalnu visinu, pa ako IE nema visinu postavljenu na auto, sljedeći trik će popraviti ovu grešku.
Okvir ( min-height:500px; height:auto !important; height:500px; )
Prijenos slikeOvaj efekt učitavanja slike simulira učitavanje ajaxa prikazivanjem predučitavača dok se sav sadržaj ne učita. Ovo je rješenje savršeno za velike slike koje se sporo učitavaju.
Img ( pozadina: url(loader.gif) no−repeat 50% 50%; )
Okomito centriranjeOvaj mali dio koda omogućit će vam okomito centriranje sadržaja spremnika, bez korištenja dodatnih oznaka. Sve što trebate učiniti je prikazati spremnik kao ćeliju tablice i zatim postaviti atribut vertikalnog poravnanja na vrijednost.
Spremnik ( min. visina: 10 em; prikaz: ćelija tablice; okomito poravnanje: sredina; )
Stvaranje rezovaPrvo, shvatimo što je cut-in? Bočne trake se obično nalaze na izvorima vijesti i stranicama časopisa, u obliku malog bloka teksta unutar članka, ponekad sadrže mišljenja ili citate ljudi. Bit će vam drago znati da ih je vrlo jednostavno napraviti, a ako se pravilno koriste, umetci mogu uvelike poboljšati korisničko iskustvo članka.
Pullquote (width: 300px; float: right; margin: 5px; font-family: Georgia, "Times New Roman", Times, serif; font: italic bold #ff0000 ; )
Izbor tekstaNe znaju svi da je moguće promijeniti boju teksta odabranog u pregledniku. Ovo zahtijeva samo dva selektora.
::odabir (boja: #000000; boja-pozadine: #FF0000;) ::-moz-odabir (boja: #000000; pozadina: #FF0000;)
Dodavanje prijeloma straniceOvaj primjer ponovno je usmjeren na poboljšanje korisničkog sučelja pri ispisu. Na primjer, kada ispisujete članak, može biti korisno odvojiti komentare od teksta članka i premjestiti ih na zasebnu stranicu. Ako bloku komentara dodate class.page-break, tada će svi komentari, kada se ispišu, biti prikazani na zasebna stranica. Općenito, ova se klasa može koristiti bilo gdje na vašoj web stranici.
Prijelom stranice( prijelom stranice-prije:uvijek; )