Pomagalnik » CSS

WebPutty – »on-line« CSS urejevalnik

Jiga — Wed, 04 Jan 2012 23:01:20 +0000

WebPutty je enostaven CSS urejevalnik z opcijo gostovanja datotek. Poleg urejanja "v živo" v predoglednem okolju, kjer imamo spletno mesto in CSS kodo za lažje urejanje eno ob drugi (side-by-side). Nam slednji ponuja še označevanje sintakse in vpeljavo dodatkov, kot so SCSS (sass-lang.com) in Compass (compass-style.org).

WebPutty vaše CSS datoteke shranjene na svojih strežnikih, kjer jih tudi skrči in stisne. Tako lahko uporabljamo na svojih spletnih straneh samo povezavo do CSS datoteke, po želji pa lahko datoteke tudi shranimo in uporabimo klasično metodo, kjer CSS datoteke gostujejo na naših straneh.

Delo z WebPutty-jem je lažje in enostavnejše za vse vrste uporabnikov. Storitev je trenutno še brezplačna, najverjetneje pa bo postala ali saj del nje plačljiv. Njena največja pomanjkljivost pa je ta, da ne ponuja avtomatskega dokončanja kode, kot smo tega navajeni v podobnih programih.

http://www.webputty.net/

Kako lahko s pomočjo CSSja ustvarjamo poljubne like – CSS oblike

Jiga — Wed, 28 Sep 2011 04:22:27 +0000

S pomočjo Cascading Style Sheets-ov (kratica CSS) lahko oblikujemo tudi različne like. Vse kar potrebujemo je nekaj znanja iz CSSja in malo iznajdljivosti.

Do elementov, kot so kocka, pravokotnik, trikotnik in ostale variacije slednjih pridemo hitro. Tudi pravilno prikazovanje v različnih brskalnikih tu še ni problem. Problemi se začnejo pri oblikah, kot so krog, oval, zvezda, pentagon, heksagon, ..., ki niso v celoti podprte v različnih brskalnikih, predvsem starejših.

Primer izrisa kocke

#kocka { width: 100px; height: 100px; background: black; }

Primer izrisa trikotnika

#trikotnik { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid black; }

Primer izrisa kroga

#krog { width: 100px; height: 100px; background: black; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

Nekaj osnovnih primerov, ki vam bodo v pomoè so pripravili pri CSS Tricks - The Shapes of CSS.

Naprednejše CSS oblike

Da domišljija ne pozna meja nam je dokazal Nicolas Gallagher, ki je s svojim projektom "Pure CSS GUI icons", kjer je ustvaril serijo zanimivih ikon. Pri slednjih je uporabljal tako imenovane CSS pseudo classes, ki nam omogočajo ogromno možnosti za ustvarjanje različnih oblik.

http://nicolasgallagher.com/pure-css-gui-icons/demo/

CSS LINT – CSS pregledovalnik

Jiga — Wed, 20 Jul 2011 21:05:15 +0000

CSS Lint je on-line orodje, ki nam olajša izdelavo pravilne CSS kode. Opravi nam osnovni pregled sintakse in ponuja dodatne možnosti pregledovanja, ki iščejo problematične dele ali neskladnosti. Vse dodatne možnosti pregledovanja je možno izklapljati, tako da lahko preverjanje omejimo le na tiste, ki želimo.

http://csslint.net/

CSS3 For Web Designers

Jiga — Tue, 29 Mar 2011 14:42:18 +0000

Knjiga oz. kar knjigica CSS3 For Web Designers je primerna za vse, ki bi radi spoznali CSS3. CSS3 For Web Designers nam v ravno pravem obsegu razloži CSS3, saj se dotika le najpomembnejših CSS značk, ki jih lahko uporabljamo že danes v današnjih brskalnikih.

Lahkotna in enostavna predstavitev CSS3 značk pa bo razumljiva vsem. Priporočeno branje za vse začetnike CSS3ja, za napredne uporabnike pa knjižica prinaša prijetno osvežitev. Cena CSS3 For Web Designers znaša 18$ + poštnina za papirnato obliko, 9$ za digitalno in 23$ + poštnina za tiskano in digitalno.

Več na http://www.abookapart.com/products/css3-for-web-designers.

The Top 5 Mistakes of Massive CSS – Zanimivo predavanje na temo CSSja

Jiga — Thu, 02 Dec 2010 05:40:51 +0000

The Top 5 Mistakes of Massive CSS je zanimiva video prezentacija, ki sta jo pripravila Stoyan Stefanov in Nicole Sullivan na temo Objektno orientiranega CSSja (Object-Oriented CSS). Vsem, ki se ukvarjate z CSS programiranjem priporočam ogled.

Vir: net.tutsplus.com

Kako si olajšati delo pri CSS znački “Font-size” z em enotami

Jiga — Tue, 09 Nov 2010 05:15:56 +0000

Različne enote, ki jih lahko uporabimo pri CSS znački "font-size" smo si ogledali v članku "CSS Font-Size: em-px-pt-procenti". Danes pa si bomo ogledali kako si poenostaviti delo z em enotami.

Če "body" fontu dodelimo vrednost 62.5% si tako poenostavimo pretvorbo px v em enoto. Vse kar moramo narediti je deliti px vrednost z 10 in že dobimo em enoto.

Primer: font velikosti 32px je enako 3.2em.

body {
font-size: 62.5%; /* font-size tako postane 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}

ProCSSor – enostavno do urejenih CSS datotek

Jiga — Fri, 22 Oct 2010 04:06:54 +0000

CSS datoteke lahko oblikujemo na več različnih načinov. Pravilno oblikovanje pa nam omogoča enostavno vzdrževanje in editiranje CSS značk. Velikokrat pa zaradi takšnih ali drugačnih razlogov zanemarimo pravilno oblikovanje in CSS datoteke postanejo prava zmešnjava. V takšnih primerih pa nam pride prav “on-line” aplikacija ProCSSor.

ProCSSor nam omogoča hitro in enostavno oblikovanje CSS datotek ob posredovanju vsebine CSS datoteke. Css značke lahko prekopiramo, naložimo preko datoteke ali pa preko povezave. Predtem si lahko nastavimo tudi ustrezen stil oblikovanja CSS značk v nastavitvah(options).

procssor.com

BonBon – Sladki CSS3 gumbi

Jiga — Sat, 02 Oct 2010 01:08:04 +0000

BonBon so CSS3 gumbi, ki nas spominjajo na bonbone. Odlikuje jih prilagodljivost in minimalistična zgradba.

Primer implementacije BonBon gumba:

Label

Njihova glavna slabost je, da uporabljajo CSS3 značke. Zaradi tega zaenkrat še niso podprti v vseh brskalnikih. Dodatne informacije o BonBon gumbih http://lab.simurai.com/css/buttons/.

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