Než se podíváme na tlačítka, podívejme se na nastavení společná pro všechna z nich.
HTMLTlačítka budou používat velmi jednoduchý HTML kód:
předplatit
CSSVšechna tlačítka budou mít také společné nastavení pro text titulků a zruší výběr odkazů:
ButtonText ( písmo: 18px/1,5 Helvetica, Arial, bezpatkové; barva: #fff; ) a ( barva: #fff; zdobení textu: žádné; )
Uživatel obvykle očekává poměrně měkký efekt, když najede myší na odkaz nebo tlačítko. A v našem případě tlačítko změní velikost - zvětší se a zobrazí další zprávu.
Základní CSS kódPro začátek potřebujeme pouze dát tlačítku tvar a barvu. Definujte výšku 28px a šířku 115px, přidejte okraje a odsazení a také dejte tlačítku světlé ohraničení.
#button1 ( pozadí: #6292c2; ohraničení: 2px plné #eee; výška: 28px; šířka: 115px; okraj: 50px 0 0 50px; výplň: 0 0 0 7px; přetečení: skryté; zobrazení: blok; )
CSS3 efektyNěkomu se líbí, když je jednoduché tlačítko doprovázeno poměrně velkým množstvím CSS kódu. Tato část poskytuje další styly CSS3 pro naše tlačítko. Obejdete se bez nich, ale tlačítku dodávají modernější vzhled.
Zaoblete rohy rámu a přidejte přechod. To využívá malý trik s tmavým přechodem, který interaguje s jakoukoli barvou pozadí.
/*Zaoblené rohy*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
CSS animaceNyní nastavíme přechod CSS. Animace bude použita pro jakékoli změny vlastností a bude trvat půl sekundy.
Přejet myšíZbývá pouze přidat styl pro rozbalení tlačítka, když na něj najedete myší. Aby se zobrazila celá zpráva, musí být tlačítko široké 230 pixelů.
#button1:hover ( šířka: 230px; )
Jednoduchá změna barevného tónu
Velmi jednoduché a oblíbené CSS efekt pro tlačítko. Když najedete kurzorem myši, tón barvy pozadí se plynule změní.
Základní CSS kódCSS kód je velmi podobný předchozímu příkladu. Je použita jiná barva pozadí a tvar se mírně změní. Také vycentruje text a nastaví výšku řádku tlačítka tak, aby došlo ke svislému vystředění.
#button2 ( pozadí: #d11717; ohraničení: 2px plné #eee; výška: 38px; šířka: 125px; okraj: 50px 0 0 50px; přetečení: skryté; zobrazení: blok; zarovnání textu: na střed; výška řádku: 38px; )
CSS3 efektyNastavte zaoblení rohů, přechod pro pozadí a další stín. Pomocí rgba uděláme stín černý a průhledný.
/*Zaoblené rohy*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Stín*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2);
CSS animaceAnimace se prakticky neliší od předchozího příkladu.
/*Přechod*/ -webkit-transition: Všech 0,5 s snadnost; -moz-transition: Všechny 0,5s volnosti; -o-přechod: Všechny 0,5s snadnost; -ms-transition: Všechny 0,5s snadnost; přechod: všech 0,5 s lehkost;
Přejet myšíPři najetí kurzorem myši se nastaví jiná barva pozadí. Zkuste ve Photoshopu vybrat světlejší barvu, abyste dosáhli skvělého efektu.
#button2:hover (barva pozadí: #ff3434; )
Tento efekt může být docela působivý v závislosti na výběru obrázku na pozadí. Demo používá nepopsatelné pozadí a efekt vypadá nepopsatelně. Zkuste použít jiný obrázek a efekt může být ohromující.
Základní CSS kódHlavní část kódu je stejná jako v předchozích příkladech. Upozorňujeme, že používáme obrázek na pozadí. Začáteční pozice pozadí je nastaveno na "0 0". Když najedete kurzorem, pozice se posune vertikálně.
#button3 ( background: #d11717 url("bkg-1.jpg"); background-position: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0,3); font-size: 22px; height : 58px; šířka: 155px; okraj: 50px 0 0 50px; přetečení: skryté; zobrazení: blok; zarovnání textu: na střed; výška řádku: 58px; )
CSS3 efektyV tomto příkladu není nic zvláštního - zaoblené rohy a stíny.
/*Zaoblené rohy*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Stín*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2);
CSS animaceAnimace v tomto případě trvá déle, aby vytvořila plynulý a zajímavý efekt.
/*Přechod*/ -webkit-transition: Vše 0,8s snadnost; -moz-transition: Všechny 0,8s volnosti; -o-přechod: všech 0,8s lehkost; -ms-transition: Všech 0,8s snadnost; přechod: všech 0,8 s lehkost;
Přejet myšíNyní je čas přesunout obrázek na pozadí. Výchozí pozice byla "0 0". Nastavte druhý parametr na 150px. Chcete-li se posunout vodorovně, musíte změnit první parametr.
#button3:hover (pozice na pozadí: 0px 150px; )
3D simulace stisknutí tlačítka
Poslední příklad v naší lekci je o oblíbené 3D metodě simulace stisknutí tlačítka při najetí kurzorem myši na něj. Animace pro tento případ je tak jednoduchá, že ani nevyžaduje přechod CSS. Ale konečný výsledek je docela působivý.
Základní CSS kódCSS kód pro naše tlačítko.
#button4 ( pozadí: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0,3); velikost písma: 22px; výška: 58px; šířka: 155px; okraj: 50px 0 0 50px; přetečení: skryté ; display: block; text-align: center; line-height: 58px; )
CSS3 efektyV v tomto případě CSS3 už není dobrá volba. K dosažení efektu jsou zapotřebí stíny a přechod. Ostrý stín vytváří vzhled 3D tlačítka.
/*Zaoblené rohy*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Stín*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0,8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0,8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0,8); /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Přejet myšíV tomto případě máme největší hoverovou sekci. Délka stínu se zkrátí a okraje se použijí k vytvoření prolnutí tmavé oblasti. Vše dohromady vytváří iluzi stisknutí tlačítka. Převrácení přechodu zesiluje efekt.
#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*/ obrázek na pozadí: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); obrázek na pozadí: -moz-linear-gradient(dole, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4 )); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); background-image: -ms-linear-gradient( bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4));
Dobrý den všem. Kdysi dávno jsem zveřejnil příspěvek jako blog. Dnes jsem měl náladu začít to navrhovat. Nativní gadget o samotném autorovi je naprosto nudný a nijak atraktivní.
V důsledku toho bylo možné vytvořit individuální styl, docela atraktivní a informativní pro váš vlastní design, pravděpodobně ani ne widget, ale profilová karta. Tak tomu budeme říkat. No, něco takového
Pracovní verze na testovacím blogu v postranním panelu úplně dole
Co je na něm
1. Vaše profilová fotka.
2. Krásný design samotné karty, kterou lze snadno přizpůsobit
3. Vaše přezdívka, jméno nebo příjmení
4 Můžete uvést své povolání, koníčka
5. Přidejte 2 tlačítka do požadované stránky. Mohou to být odkazy na vaši úplnou stránku autora, na domovská stránka, mapa, mistrovské kurzy, veřejné stránky v sociálních sítích. Cokoliv.
6. Karta se perfektně vejde do postranního panelu blogu.
Zkopírujte níže uvedený kód a my vaši profilovou kartu dále vytvarujeme.
![](https://fighters.ru/wp-content/uploads/2020/" alt=)
" alt="profil" class="profile" />!}
Blogerka Vika Barad
můj blogGroup na VK
.snip1 (
font-family: "Roboto", Arial, bezpatkové;
barva: #fff;
poloha: relativní;
přepad: skrytý;
okraj: 10px;
min-width: 230px;
max-width: 315px;
šířka: 100 %;
barva: #ffffff;
text-align: left;
výška řádku: 1,4em;
barva pozadí: #141414;
}
.snip1 * (
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: všech 0,25s snadnost;
přechod: všech 0,25s lehkost;
}
.snip1 img (
max-šířka: 100 %;
svisle zarovnat: nahoře;
krytí: 0,85;
}
.snip1 figcaption (
šířka: 100 %;
barva pozadí: #141414;
odsazení: 25px;
poloha: relativní;
}
.snip1 figcaption:before (
pozice: absolutní;
obsah: "";
dno: 100 %;
vlevo: 0;
šířka: 0;
výška: 0;
styl ohraničení: pevný;
border-width: 55px 0 0 400px;
border-color: transparent transparent transparent #141414;
}
.snip1 figcaption a (
výplň: 5px;
ohraničení: 1px solid #ffffff;
barva: #ffffff;
velikost písma: 0,7 em;
text-transform: velká písmena;
okraj: 10px 0;
displej: inline-block;
krytí: 0,65;
šířka: 47 %;
text-align: center;
váha písma: 600;
mezera mezi písmeny: 1px;
text-dekorace: žádná;
}
.snip1 figcaption a:hover (
krytí: 1;
}
.snip1 .profile (
hraniční rádius: 50 %;
pozice: absolutní;
dno: 100 %;
vlevo: 25px;
z-index: 1;
max-width: 90px;
krytí: 1;
box-shadow: 0 0 15px rgba(0, 0, 0, 0,3);
}
.snip1 .follow (
pravý okraj: 6 %;
barva ohraničení: #2980b9;
barva: #2980b9;
}
.snip1 h2 (
okraj: 0 0 5px;
váha písma: 300;
}
.snip1 h2 span (
displej: blok;
velikost písma: 0,5 em;
barva: #2980b9;
}
.snip1 p (
okraj: 0 0 10px;
velikost písma: 0,8 em;
mezera mezi písmeny: 1px;
krytí: 0,8;
}
.snip1:hover:before,
.snip1.hover:before (
dole: 0;
box-shadow: 0 0 0px bílá;
-webkit-transition-delay: 0s;
přechodové zpoždění: 0s;
}
$(".hover").mouseleave(
funkce()(
$(this).removeClass("hover");
}
);
https://w-dog.ru/wallpapers/10/19/380923269777589.jpg - toto je adresa obrázku - pozadí nahoře
https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc – adresa vaší miniatury. Můžete jej zkopírovat do svého profilu Google nebo nastavit jiného avatara.
Do růžově označených řádků napište svou přezdívku, jméno, povolání a vysvětlující text.
V souladu s tím jsou zeleně zvýrazněny adresy stránek, na které dojde po kliknutí na tlačítko k přechodu.
Také jsem barevně na několika místech označil hlavní pozadí profilové karty #141414;
Nastavení jsou velmi základní a nemyslím si, že vyvstanou nějaké otázky. Pokud ano, napište do komentářů. Pojďme na to přijít.
Hotový kód widgetu nainstalujeme do sekce DESIGN - HTML/JavaScript gadget v postranním panelu blogu. Mimochodem si myslím, že to nahoře nebude vypadat špatně, když má uživatel možnost hned poznat autora. Pozadí a obrázek lze snadno změnit v závislosti na vaší náladě nebo ročním období. Vždy to bude nové. No, je to na vás.
Všechno nejlepší a hodně štěstí.
CSS je bezpochyby jedním z nejdůležitějších značkovacích jazyků, které používáme. A přestože HTML popisuje strukturu dokumentu, jeho chování může být nepředvídatelné v závislosti na verzi prohlížeče. CSS je nástroj, který nám umožní opravit veškeré nesrovnalosti v zobrazení stránky a navrhnout její vzhled.
Skrytí textu pomocí odstavceTato technika bude velmi užitečná pro firemní logo. Nejčastěji se jako logo používá obrázek, ale pro SEO by bylo hezké zobrazit název společnosti v h1 tagech. Tento příklad je nejvíce Nejlepší způsob implementovat toto. Ve skutečnosti jednoduše skryjeme text mimo obrazovku a místo něj přiřadíme obrázek na pozadí.
H1 (text-odsazení:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url("images/logo.jpg") bez opakovaného posouvání; )
Stylování odkazů v závislosti na formátu souboruTento příklad má za cíl zlepšit uživatelskou zkušenost. Často na internetu sledujeme odkazy, aniž bychom věděli, kam vedou. Následující fragment kódu se používá k zobrazení malých ikon vedle odkazů. Takové obrázky uživateli řeknou, že se jedná o externí odkaz, emailová adresa, soubor pdf, obrázek atd.
/* externí odkaz */ a( padding-right: 20px; background: url(external.gif) no-repeat center right; ) /* email */ a( padding-right: 20px; background: url(email.png ) bez opakování vpravo uprostřed; ) /* pdf */ a( padding-right: 20px; background: url(pdf.png) no-repeat center right; )
Odstranění posuvníků z víceřádkového pole v IEInternet Explorer má nepříjemný zvyk přidávat posuvníky do víceřádkového pole, i když jeho obsah nepřesahuje daná velikost. Tuto chybu lze snadno opravit pomocí následujícího řádku kódu:
Textarea( overflow:auto;)
Počáteční písmenoDnes je to velmi častý jev na blozích a zpravodajských webech. Budete překvapeni, jak snadno se implementuje a jak dobře se degraduje ve starších prohlížečích.
P:first-letter( display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px; font-family:Georgia; )
Průhlednost CSSTransparentnost je vlastnost, která různé prohlížeče, se předepisuje různými způsoby. Pomocí následujícího fragmentu kódu můžete přiřadit průhlednost všem prohlížečům najednou.
Transparentní ( filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; )
CSS Reset od Erica MeyeraVe skutečnosti se css-reset, navržený Ericem Meyerem, již stal rozšířeným standardem použití. Vzhledem k tomu, že byl upraven mnoha slavnými vývojáři, můžete si být jisti jeho kvalitou.
Html, tělo, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, citovat, code, 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 ( margin: 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 (quote: none; ) blockquote:before, blockquote:after, q:before, q :after ( content: ""; content: none; ) /* nezapomeňte definovat styly zaměření! */ :focus ( obrys: 0; ) /* nezapomeňte nějak zvýraznit vložky! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* tabulky stále potřebují "cellspacing="0"" v označení */ tabulka ( border-collapse: Collapse; border-spacing : 0 ;)
Preloader obrázkůNěkdy je užitečné obrázky předem načíst, abyste eliminovali zpoždění a blikání při přístupu k požadovanému prvku.
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: -10 000 pixelů ;)
Jednoduchý css sprite pro tlačítkoDostupnost tlačítka nebo odkazu s obrázek na pozadí- běžný jev, navíc jsou na takové prvky často aplikovány dodatečné efekty, aby se zlepšilo uživatelské rozhraní. Jedním z těchto efektů je indikátor tlačítka myši. Pomocí spritu můžeme tento efekt implementovat změnou vlastnosti background-position na danou hodnotu tak, aby se při najetí myší na tlačítko zobrazil obrázek na pozadí. Jednoduché, ale účinné řešení.
A ( display: block; background: url(sprite.png) no-repeat; height: 30px; width: 250px; ) a:hover (back-position: 0-30px; )
Google Font APINení to tak dávno, co Google implementoval skvělý zdroj pro webové vývojáře, který jim umožňuje stahovat a používat nová, nestandardní písma na stránce. Existují dokonce různé možnosti písma ke stažení, tučné, kurzíva atd. Přestože je kolekce Google stále omezená, na skladě je spousta velký počet fonty. Nejprve zahrňte dynamicky generovaný soubor CSS s názvy písem a variant, které potřebujete, a pak už jen použijte názvy písem v CSS jako obvykle. Dodatečné informace Můžete jej číst pomocí Google Font API.
Inconsolata:italic|Droid+Sans"> tělo ( rodina písem: "Tangerine", "Inconsolata", "Droid Sans", patka; velikost písma: 48px; )
Hacky pro různé prohlížečeNěkdy je užitečné opravit chybu v konkrétním prohlížeči a podmíněné komentáře nejsou vždy nejlepší řešení pro tohle. Tento seznam hacků prohlížeče od Chrise Coyiera vám pomůže přiřadit vlastnosti konkrétním prohlížečům pomocí jednoduchého css.
/* IE 6 */ * html .yourclass ( ) /* IE 7 */ *+html .yourclass() /* IE 7 a moderní prohlížeče */ html>body .yourclass ( ) /* Moderní prohlížeče (ne IE 7) */ html>/**/body .yourclass ( ) /* Opera 9.27 a nižší */ 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+ */ obrazovka @media a (-webkit-min-device-pixel-ratio:0) ( .yourclass ( ) )
Pevný suterénMožná si myslíte, že vytvořit zápatí, které je vždy přilepené ke spodní části obrazovky, je obtížný úkol. Není to však vůbec těžké, pokud chcete jednoduchý suterén. Zde budeme muset použít malý hack IE6, ale kromě toho je to velmi snadné.
#footer ( position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; ) /* IE 6 */ * html #footer ( position:absolute; 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"); )
Otočte obrázekOtočení obrázku může být docela užitečné, zvláště pokud jej lze použít místo načítání nového, předem otočeného obrázku. Řekněme, že chcete pro šipku použít pouze jeden obrázek, ale na stránce jich máte několik a všechny směřují různými směry. Zde je řešení vašeho problému:
Img.flip ( -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filtr: FlipH; - ms-filtr: "FlipH"; )
ClearfixNení to tak dávno, co se někdo rozhodl, že je čas zbavit proud plováků bez přidání dalšího označení do dokumentu. V důsledku tohoto řešení byla vytvořena třída, kterou lze použít na kontejner obsahující plovoucí prvky a vymazat je. To je dnes velmi pohodlná a rozšířená metoda.
Clearfix:after ( viditelnost: skryté; zobrazení: blok; velikost písma: 0; obsah: " "; clear: both; height: 0; ) .clearfix ( display: inline-block; ) /* začít s komentářem zpětné lomítko hack */ * html .clearfix (výška: 1%; ) .clearfix ( display: block; ) /* zavřít komentovaný hack zpětného lomítka */
Zaoblené rohyS postupným zaváděním CSS3 do moderních prohlížečů je vytváření zaoblených rohů velmi snadné. Podpora CSS3 v IE zatím bohužel není včetně verze 8, ale v IE9 bude přidána.
Round( -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* budoucí kontrola */ -khtml-border-radius: 10px; /* pro staré prohlížeče Konqueror */ )
Převažující stylyLidé, kteří o !important v CSS nevědí, mě nepřestávají udivovat, protože je to tak mocný a snadno použitelný nástroj. Velmi jednoduše, každé pravidlo s !important na konci přepíše stejné pravidlo aplikované na tento prvek kdekoli v souboru CSS nebo ve stylech řádků.
P( font-size:20px !důležité; )
Tvář písmaFont-face se až do loňského roku příliš nepoužíval, i když existuje již od dob, kdy byl IE6 považován za moderní prohlížeč. Tato funkce je v současné době dobře podporována. moderní prohlížeče a nabídky skvělá cesta používání nebezpečných písem ve vašich projektech. Chcete-li ušetřit čas, můžete použít speciální generátor Font Squirrel Font Face.
@font-face ( font-family: "Graublau Web"; src: url("GraublauWeb.eot"); src: local("☺"), formát url("GraublauWeb.woff") ("woff"), url ("GraublauWeb.ttf") format("truetype"); )
Centrování webuBěžnou konstrukční technikou je horizontální centrování místa. To je velmi snadné implementovat.
Minimální výška v IETento příklad opravuje jednoduchou, ale nepříjemnou chybu v IE při nastavování minimální výšky. Obecně IE interpretuje výšku jako minimální výšku, takže pokud IE nemá výšku nastavenou na auto, následující trik tuto chybu opraví.
Box ( min-height:500px; height:auto !důležité; výška:500px; )
Nahrávání obrázkuTento efekt načítání obrázku simuluje načítání ajaxu zobrazením preloaderu, dokud se nenačte veškerý obsah. Toto řešení je ideální pro velké, pomalu se načítající obrázky.
Img ( pozadí: url(loader.gif) bez opakování 50 % 50 %; )
Vertikální centrováníTento malý kousek kódu vám umožní svisle vycentrovat obsah kontejneru bez použití dalších značek. Vše, co musíte udělat, je vykreslit kontejner jako buňku tabulky a poté nastavit atribut vertical-align na hodnotu.
Kontejner ( min-výška: 10 em; displej: tabulka-buňka; svislé zarovnání: střed; )
Vytváření střihůNejprve si ujasněme, co je to cut-in? Postranní panely se obvykle nacházejí na zpravodajských zdrojích a stránkách časopisů ve formě malého bloku textu umístěného uvnitř článku, někdy obsahují názory nebo citace lidí. Budete rádi, když víte, že jsou velmi snadno vyrobitelné a při správném použití mohou vložky výrazně zlepšit uživatelský dojem z článku.
Pullquote ( šířka: 300px; plovoucí: vpravo; okraj: 5px; rodina písem: Georgia, "Times New Roman", Times, patka; písmo: tučné kurzíva #ff0000 ; )
Výběr textuNe každý ví, že je možné změnit barvu textu vybraného v prohlížeči. To vyžaduje pouze dva voliče.
::selection ( barva: #000000; barva pozadí: #FF0000; ) ::-moz-selection ( barva: #000000; pozadí: #FF0000; )
Přidání konce stránkyTento příklad je opět zaměřen na vylepšení uživatelského rozhraní při tisku. Například při tisku článku může být užitečné oddělit komentáře od textu článku a přesunout je na samostatnou stránku. Pokud přidáte class.page-break do bloku komentářů, všechny komentáře se po vytištění zobrazí na samostatná stránka. Obecně lze tuto třídu použít kdekoli na vašem webu.
Page-break( page-break-before:always; )