Pomagalnik » Cascading Style Sheets

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/

CSS transparenca za vse brskalnike – CSS Transparency for All Browsers

Jiga — Tue, 15 Nov 2011 21:53:26 +0000

CSS Transparenca je ena tistih CSS lastnosti, ki potrebuje precej različnih vrednosti, da zanesljivo deluje v vseh brskalnikih. Za pokritje vseh brskalnikov potrebujemo precej CSS stilov, ki pa se sreči med seboj dobro razumejo.

Spodnji primer prikazuje CSS transparenco 50%.

.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;

/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5;

/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}

Kodo za CSS transparenco je Chris Coyier (CSS-Tricks) še nadgradil oziroma prečistil. Zadnja priporočena uporaba kode za CSS transparenco pa je sedaj spodnja.

.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}

CSS transparenca ima na pseudo classu :hover v starejših verzijah IE težave.

Vir: http://css-tricks.com/64-css-transparency-settings-for-all-broswers/

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 Pseudo classes

Jiga — Mon, 12 Sep 2011 19:08:38 +0000

"CSS Pseudo classes" se uporabljajo za dodeljevanje dodatnih efektov na posamezno CSS značko. Nekaj jih prav gotovo že uporabljate pri svojih spletnih projektih. Najbolj znan "CSS Pseudo class" pa je seveda "hover" efekt.

a:hover {
/* hover je pseudo class */
}

"CSS Pseudo classes" nam pridejo prav v različnih situacijah. Nekateri so CSS2 drugi CSS3, vse je odvisno od tipa slednjega. Razen brskalnika IE, izvzeta je verzija IE9, jih podpirajo praktično vsi brskalniki.

"CSS Pseudo classe" lahko razdelimo v naslednje skupine:

Link-related pseudo class selectors so namenjeni efektom za povezave (:link, :visited, :hover, :active)
Input & link related pseudo class selectors se uporabljajo za vnosna polja (:focus, :target, :enabled, :disabled, :checked, :indeterminate)
Position/Number-based pseudo class selectors se uporabljajo za pozicioniranje (:root, :first-child, :last-child, :nth-child(N), :nth-of-type(N), :first-of-type, :nth-last-of-type(N), :nth-last-child(N), :only-of-type)
Relational pseudo class selectors namenjeni določenim pogojem (:not(S), :empty)
Text-related pseudo class selectors / elements namenjeni delu z besedilom (:first-letter, :first-line, :lang, ::selection )
Content-related pseudo elements namenjeni dodajanju elementov (:before, :after)

Zanimvo branje na temo "CSS Pseudo classes":

Five Questions with Nicolas Gallagher http://css-tricks.com/five-questions-with-nicolas-gallagher/
#94: Intro to Pseudo Elements http://css-tricks.com/video-screencasts/94-intro-to-pseudo-elements/ (video)
Nicolas Gallagher blog http://nicolasgallagher.com/tag/pseudo-elements/

Uporaben video, ki predstavita "CSS Pseudo classes" je Work Backwards to Understand CSS Structural Pseudo Classes.

Vir in podrobnejši opis: http://css-tricks.com/pseudo-class-selectors/

normalize.css – Normalizacija CSS značk v različnih brskalnikih

Jiga — Fri, 09 Sep 2011 18:07:07 +0000

Normalize.css je datoteka z CSS stili, ki omogoča različnim brskalnikom prikazovanje HTML elementov bolj konsistentno. Avtorja Nicolas Gallagher in Jonathan Neal sta raziskala razlike med posameznimi brskalniki z namenom, da izluščita točno določene stile, ki jih moramo normalizirati.

Kaj točno normalize.css naredi?

Ohrani določene uporabne stile, ki jih večina reset.cssjev ne
Normalizira stile obširni zbirki elementov
Popravi napake in neskladnosti v običajnih brskalnikih
Izboljša uporabnost z subtilnimi popravki
Jasno razloži, kaj določen del kode naredi z deteljnimi opisi

Več informacij o projektu je na voljo na http://necolas.github.com/normalize.css/.

Prenos zadnje verzije: https://github.com/necolas/normalize.css

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/

Kako vertikalno poravnamo sliko z besedilom v CSSju

Jiga — Thu, 23 Jun 2011 23:26:54 +0000

Pri ustvarjanju različnih spletnih projektov se velikokrat srečamo z različnimi poravnavami slike z besedilom v vrstici. Na voljo imamo več možnosti in sicer zgoraj (top), sredinsko (middle), spodaj (bottom) in rob (baseline). Slednje pa enostavno določimo preko class-a, ki ga dodelimo sliki.

Poravnava zgoraj (top)

.zgoraj {vertical-align:top;}

Poravnava sredisnko (middle)

.sredinsko {vertical-align:middle;}

Poravnava spodaj (bottom)

.spodaj {vertical-align:text-bottom;}

Poravnava rob (baseline)

.rob {vertical-align:baseline;}

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

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.