Pomagalnik » CSS

Kako ugasnemo zunanji sij vnosnih form v Safariju in Chromu – Disable Safari & Chrome input focus outer glow

Jiga — Thu, 26 Jan 2012 23:15:17 +0000

Če ste se že kdaj srečali z naprednejšim oblikovanjem vnosnih form in slednje testirali v različnih brskalnikih ste zagotovo naleteli na zunanji sij. Slednji se pojavlja le ob aktivnem stanju vnosnega polja v brskanilih Safari in Chrome.

Zunanji sij lahko za oba Brskalnika izklopimo s pomočjo CSS značke "outline". Primer izklopa za vsa vnosna polja je prikazan spodaj.

Koda:

input {
outline: none;
}

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/

Predavanja o pseudo elementih – Pseudo elements talks

Jiga — Mon, 03 Oct 2011 21:12:12 +0000

Chris Coyier (CSS-Tricks) je imel nekaj zanimivih in zabavnih predavanj na temo pseudo elemntov. Prvi je iz »Front End Design Conference« in govori o pseudo elemntih na splošno. Drugi pa je iz »WordCamp-a San Francisco« in govori o pseudo elemtih in njihovi uporabi v WordPressu.

Front End Design Conference

St. Petersburg, Florida - Juli 2011.

WordCamp San Francisco

San Francisco, California - Avgust 2011

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/

Min/max-width CSS3 Media Queries za IE 6-8 – Respond

Jiga — Sun, 18 Sep 2011 18:06:34 +0000

"CSS3 Media Queries", ki se med drugim uporabljajo tudi v "Responsive Web Design-u" imajo eno veliko pomanjkljivost, in sicer to, da ne delujejo v Internet Explorerju (IE) 6,7 ali 8.

Zato moramo v teh primerih, kjer uporabljamo "CSS3 Media Queries" in želimo podporo tudi v IE 6-8 brskalnikih uporabiti katero izmed alternativnih metod. Ena izmed teh metod je uporaba skripte Respond, ki jo je pripravil Scott Jehl.

Respond.js je hitra in "lahka" scripta, ki doda podporo za "CSS3 Media Queries" IE 6-8 in še nekaterim drugim brskalnikom. Scripto Respond.js in dodatne informacije o slednji lahko najdete na https://github.com/scottjehl/Respond.

Vir in dodatne informacije: https://github.com/scottjehl/Respond

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;}

Kako ustavimo nekontrolirano večanje besedila na iPhone-u ali iPad-u?

Jiga — Wed, 04 May 2011 22:46:26 +0000

Pri pregledovanju spletnih strani na iPhonu/iPadu nam slednji avtomatsko prilagajajo velikost besedila, da izboljšajo branje vsebine. Žal pa velikokrat ta prednost prilagajanja besedila spreminja velikost posameznih polj, slednji pa posledično tako deformirajo postavitev strani oziroma design.

Samo spreminjanje velikosti lahko sicer preprečimo z uporabo CSS značke »html { -webkit-text-size-adjust:none; } ». Problem te rešitve pa je, da ugasne prilagajanje na vseh brskalnikih, ki podpirajo webkit značke. Tako tudi v Safariju ali Chromu funkcija »spremeni velikost besedila« ne bo delovala.

Rešitev tega problema je dokaj enostavna, saj moramo že omenjeni znački dodati pogoj o resoluciji zaslona. Rešitev bi tako bila

@media only screen and (max-device-width: 960px) {
html { -webkit-text-size-adjust:none; }
}

Maksimalna širina je nastavljena na 960px zaradi ležečega formata iPhona 4.

Primerjave pred in po uporabi CSS značke
»html { -webkit-text-size-adjust:none; } ».