Pomagalnik » CSS

CSS3 PIE

Jiga — Thu, 15 Jul 2010 21:13:36 +0000

CSS3 PIE je vtičnik, ki omogoči Internet Explorerju 6-8 uporabo nekaterih uporabnejših CSS3 funkcij.

Primer uporabe za preliv in zarobljene robove:

#polje {
border: 1px solid #696;
padding: 60px 0;
text-align: center;
width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99; background:
-webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(PIE.htc); /* vstavimo vticnik */
}

css3pie.com

CSS Inliner Tool

Jiga — Thu, 01 Jul 2010 04:37:48 +0000

Vsi, ki ste že kdaj pošiljali e-mailinge (Newsletterje) veste, da če CSS značke niso zakodirane na CSS inline način, obstaja velika verjetnost, da jih bo večina e-mail klientov odstranila in tako uničila e-mailing oziroma njegovo vizualno podobo.

Pisanje CSS značk v metodi CSS inline, kjer vsakemu elementu v sami kodi določimo stile pa je precej naporno in zamudno. MailChimp pa ima v svojem asortimanu orodij tudi CSS inline tool, ki nam omogoča avtomatsko pretvorbo klasične metode CSS značk v inline metodo. Orodje lahko uporabljate tudi, če nimate MailChimp računa.

http://www.mailchimp.com/labs/inlinecss.php

CSS znački: First-child in Last-child

Jiga — Tue, 04 May 2010 04:55:30 +0000

First-child in Last-child so precej neznane CSS značke, ki so zelo uporabne za oblikovanje besedil in navigaciji spletnih strani. V praksi lahko npr. prvemu odstavku v besedilu enostavno določimo still brez določanja posebnih klasov (class) ali poseganja v HTML del. Prav tako lahko v navigaciji, ki so zgrajene s pomočjo seznamov (buletov) določimo poseben stil prvemu in zadnjemu vnosu – npr. drugačen zaključek, … možnosti je skratka ogromno.

Spodaj je podan primer, kjer prvi odstavek označimo z krepkim besedilom (bold) in pisavo v zadnjem odstavku obarvamo v sivo.

Koda:

p:first-child { font-weight:bold; }
p:last-child { color:#666666; }

Pri last-childu zna imeti Internet Explorer (IE) težave. Zaradi slednjega je pametno uporabljati Javascript knjižnico, ki odpravi pomanjkljivosti IE-ja. O tej temi smo govorili v članku IE7 – Javascript knjižnica, ki odpravi večino napak Internet Explorerja.

CSS značka: white-space

Jiga — Thu, 29 Apr 2010 11:34:00 +0000

CSS značka »white-space« določa kako se besedilo oz. prostor v elementu obnaša.

Primer kode odstavka (

), kjer se besedilo nikoli ne bo prelomilo.

P { white-space:nowrap; }

CSS znački »white-space« lahko uporablja naslednje vrednosti:

normal – Besedilo se bo avtomatsko prelomilo. To je tudi standardna nastavitev,
nowrap – Besedilo bo vedno ostalo v eni vrsti in se nikoli ne bo prelomilo. Besedilo se nadaljuje dokler ne uporabimo značke,
pre – Besedilo se bo prelomilo le ob prelomu vrstice. Prikazani bodo vsi presledki, tudi če jih imamo več. Obnaša se podobno, kot CSS značka,
pre-line – Besedilo se bo prelomilo po potrebi in ob prelomu vrstice. Uporabi le en presledek, tudi če jih je več,
pre-wrap – Besedilo se bo prelomilo po potrebi in ob prelomu vrstice. Prikazani bodo vsi presledki, tudi če jih imamo več,
inherit – Atributi značke »white-space« bodo podedovani od starša.

Centriranje vsebine na sredino ekrana – vertikalno in horizontalno centriranje

Jiga — Thu, 04 Mar 2010 05:20:44 +0000

Centriranje vsebine na sredino ekrana po horizontali in vertikali je lahko precej zapletena zadeva. Medtem, ko je centriranje po horizontali dokaj enostavno nam centriranje po vertikali povzroča sive lase, saj CSS funkcije, ki bi vsebino poravnala po vertikalni ni. Pomagati si moramo z nekaterimi drugimi značkami s katerimi dosežemo želeni efekt.

Vsebino najlažje centriramo, če ustvarimo DIV polje, ki mu določimo širino, višino, pozicioniranje, odmike in »margin«. Za lažje predstavljanje si bomo ogledali samo kodo.

Primer centriranja po horizontali in vertikali:

Centriranje vsebine na sredino ekrana

Opis kode:

width:600px; // Širina polja
height:300px; // Višina polja
position:absolute; // Pozicioniranje
top:50%; // Odmik od zgornjega roba
left:50%; // Odmik od sponjega roba
margin:-150px 0 0 -300px; // Margin, zgornji odmik za polovico višine polja, desno nič, spodaj nič in levo polovični odmik širine
border:1px solid black; // Obroba, ni potrebna za delovanje