Tutorial nr. 20 (Kanter/hjørner skygger gradienter REN css)

Redaktør: Måns

Tutorial nr. 20 (Kanter/hjørner skygger gradienter REN css)

Indlægaf Måns » søn 6. maj 2012 21:12

Hej TwMagikere

Jeg har rodet lidt med rundede kanter, gradienter og skygger, og derfor besluttet mig for at dele lidt af min indsamlede viden - rettet specielt mod TiddlyWiki (selvfølgelig)...

Vi kan lige så godt slå fast at IE (internet explorer) IKKE er med i overvejelser mht. det færdige grafiske resultat - det skyldes især at IE ikke kan levere de mest basale CSS3 muligheder for gradienter, rammer og skygger...

Er man NØDT til at designe skygger, rundede rammer og gradienter for IE kan det måske hjælpe at se på denne side: http://css3pie.com/
eller http://jonraasch.com/blog/css-rounded-c ... l-browsers

-- Ikke mere IE fra nu af --

Rammer med rundede hjørner:


Når man vil angive at der skal være en linie med rundede hjørner omkring et element, noget tekst eller et billede, skal man først oprette en såkaldt klasse ("class") i StyleSheet tiddleren. (Bemærk at et klassenavn starter med et punktum i StyleSheetet - men IKKE i brug!!)
I øvrigt - fordi der ikke et fastsat standarder der gælder alle browsere (endnu) - skal man lave en ny linie med samme radiusangivelse, for hver enkelt browser man ønsker effekten skal gengives i :whistle: :roll:
F.eks.:
Kode: Vælg alt
.rundehjørner
-moz-border-radius: 10px; /*-moz står for mozilla - dvs. FireFox, iceWeasel m.fl.*/
-webkit-border-radius: 10px; /*-webkit er for Chrome, Chromium, Safari m.fl.*/
border-radius: 10px; /* fremtidssikring  (kommende standard??)*/
-khtml-border-radius: 10px; /* for gamle Konqueror browsere */


Man kan kontrollere hjørnerne individuelt:
Kode: Vælg alt
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;


Radius angiver hvor spidse hjørnerne bliver...
Du kan angive en vis kanttykkelse og/eller kantfarve:
Farver kan angives på (mindst) 4 måder:
HEX
Kode: Vælg alt
border: 3px solid #FFFF00;
eller
RGB
Kode: Vælg alt
border: 3px solid rgb(255,255,0);
eller
Engelsk ord for farven (meget begrænset udvalg)
Kode: Vælg alt
border: 3px solid yellow;
eller
HSL (hue-saturation-lightness > KUN CSS3)
Kode: Vælg alt
border: 3px solid hsl(60, 100%, 39%);
(Se hsl farvekoder).
Man kan oven i købet arbejde med ellipseeffekter - men det vil jeg ikke komme ind på her...
Er du interesseret, kan du læse om ellipseeffekter her:
http://css-tricks.com/snippets/css/rounded-corners/
----
Skygger
Vi kan tilføje skygge til tekst eller elementer (bokse, billeder mm.)
Tekst
Almindelig tekstskygge:
Kode: Vælg alt
p { text-shadow: 1px 1px 1px #000; }

Flere skygger:
Kode: Vælg alt
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

1. værdi = X-koordinatet
2. værdi = Y-koordinatet
3. værdi = Blur radius
4. værdi = Skyggens farve

Husk at tage højde for/hensyn til de browsere der skal understøttes:
Kode: Vælg alt
-webkit-text-shadow:0px 0px 10px #333; /* for chrome */
-text-shadow:0px 0px 10px #333; /* for alle browsere*/
text-shadow:0px 0px 10px #333; /* samme som ovenstående*/
-moz-text-shadow:0px 0px 10px #333; /* for firefox */
-o-text-shadow:0px 0px 10px #333; /* for opera */
-ms-text-shadow:0px 0px 10px #333; /* for ie 9+ */
-khtml-text-shadow:0px 0px 10px #333; /* for gecko baserede browsere*/

Boks skygge (box-shadow)
Kode: Vælg alt
.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

1. Skyggens X-koordinat, en positiv værdi placerer skyggen til højre for boksen, negative værdier vil placere skyggen til venstre for boksen.
2. Skyggens Y-koordinat, en negativ værdi og skyggen vises over boksen, en positiv placerer skyggen under boksen.
3. Blur radius (valgfri), hvis sat til 0 vil skyggen være skarp, jo højere værdi, des mere uskarp vil den blive.
4. Spredningsradius (valgfri), positive værdier forstørrer skyggens størrelse, negative værdier formindsker størrelsen. Standard er 0 (skyggen har samme størrelse som blur).
kilde

Rammer og skygger - for at lave flere rammer om et element
Kode: Vælg alt
box-shadow:
  0 0 0 10px hsl(0, 0%, 80%),
  0 0 0 15px hsl(0, 0%, 90%);

Eksempel med 5 rammer omkring et billede (her= ALLE billeder):
Kode: Vælg alt
img {
    /* #1 */
    border: 5px solid hsl(0, 0%, 40%);
   
    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);
   
    /* #3 */
    outline: 5px solid hsl(0, 0%, 60%);
   
    /* #4 OG UENDELIGT!!! (KUN CSS3) */
    box-shadow:
        0 0 0 10px hsl(0, 0%, 80%),
        0 0 0 15px hsl(0, 0%, 90%);
   
/*HSL er smart men lad være med at bruge det hvis du har brug for understøttelse af GAMLE browsere */
}

#1 er en almindelig ramme
#2 er baggrundsfarven (giver en ekstra rammeeffekt) og lidt indryk af tekst.. (padding)
#3 er HTML outline tagget - der IKKE kan andet end at lave en firkantet ramme omkring et element. (ingen rundede kanter her)
#4 er box-shadow effekten for to rammer - kan udvides til lige så mange rammer/skygger som du har brug for...
Når alle sættes sammen på denne måde får du en effekt af at have en stor ramme med flere lag...
kilde
Skygge på kun een side
Ved at bruge en negativ spredningsradius, kan du presse en "box shadow" sammen og sende den ud fra en enkelt side:
Kode: Vælg alt
.one-edge-shadow {
   -webkit-box-shadow: 0 8px 6px -6px black;
      -moz-box-shadow: 0 8px 6px -6px black;
           box-shadow: 0 8px 6px -6px black;
}

kilde1
kilde2

GRADIENTER
TiddlyWiki har sin egen indbyggede gradient makro. Den bruges f.eks. i et standard PageTemplate til at tegne en vertikal gradient i headeren:
Kode: Vælg alt
<div class='header' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>

Hele headeren med titel og undertitel:
Kode: Vælg alt
<div class='header' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
<div class='headerShadow'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>


Hvis vi fjernede gradient makroen fra PageTemplatet - kunne vi stadig lave en tilsvarende effekt ved at skrive "lidt" css i StyleSheet tiddleren:
Kode: Vælg alt
.header {
   background: [[ColorPalette::PrimaryLight]];
   background: -moz-linear-gradient(top, [[ColorPalette::PrimaryLight]] 0%, [[ColorPalette::PrimaryMid]] 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,[[ColorPalette::PrimaryLight]]), color-stop(100%,[[ColorPalette::PrimaryMid]]));
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='[[ColorPalette::PrimaryLight]]', endColorstr='[[ColorPalette::PrimaryMid]]',GradientType=0 );
   height:80px;
}

(Der ER taget højde for IE i ovenstående kode ....)
Det er unægteligt nemmere med en gradientmakro :thumbup: :thumbup: :grin:

Vi kan lægge en horisontal gradient ned over hele baggrunden (vha. gradientmakroen) hvis vi vil:
Skriv først dette i StyleSheetet:
Kode: Vælg alt
#sidebar{
 position: static;
 float: right;
}

#contentWrapper #gradientContent{
 min-height: 1000px;
}


Dernæst dette i PageTemplatet (før alt der skal påvirkes):
Kode: Vælg alt
<div id='slickGradient' macro='gradient hort [[ColorPalette::SecondaryLight]] [[ColorPalette::SecondaryMid]]'>
<div id='gradientContent'>

INDHOLD
Kode: Vælg alt
</div>
</div>

----
TIP
Hvis man installerer RandomColorPalettePlugin og skriver:
Kode: Vælg alt
<<RandomColorPaletteButton>>
i SideBarOptions tiddleren - så kan man teste sin opsætning af farver ved at generere automatiske ændringer af ColorPalette tiddleren... (forudsætningen er naturligvis at man referer til farver i ColorPalette tiddleren - i stedet for at "hardcode" dem... eks: [[ColorPalette::SecondaryMid]] etc ...)

Jeg vil snarest uploade nogle eksempler, der viser ovenstående eksempler i praksis...
Dette er foreløbige notater til noget jeg laver lokalt...
:red-cheers: :red-cheers:
Mvh Måns
Quote: "Give a man a tiddler and he might digest it today, show a man how to use TIddlyWiki and he'll be writing his own tiddlers for a lifetime .."
Brugeravatar
Måns
Site Admin
Site Admin
 
Indlæg: 1755
Tilmeldt: tirs 5. jan 2010 18:32
Geografisk sted: Havbro, Aars, Himmerland, Nordjylland, Jylland, Danmark
Brugererfaring med Linux:: Øvet

Re: Tutorial nr. 20 (Kanter/hjørner skygger gradienter REN css)

Indlægaf Måns » søn 6. maj 2012 21:32

Her er et sjovt "regnbueeksempel" hvor det hele er samlet imellem HTML tags :
Kode: Vælg alt
<html>
<div style="padding: 100px;font-size: 20pt; color: #000; text-shadow: 0 0 4px white, 0 -5px 4px violet, 2px -10px 6px indigo, -2px -15px 11px blue, 2px -25px 18px green, -2px -40px 25px yellow, 2px -60px 33px orange, 0px -85px 40px red;">

REGNBUETEKSTEN ER SMUK :-)

</div>
</html>


Skriv det i en tiddler og se effekten.. :thumbup:
:red-cheers: :red-cheers:
Mvh Måns
Quote: "Give a man a tiddler and he might digest it today, show a man how to use TIddlyWiki and he'll be writing his own tiddlers for a lifetime .."
Brugeravatar
Måns
Site Admin
Site Admin
 
Indlæg: 1755
Tilmeldt: tirs 5. jan 2010 18:32
Geografisk sted: Havbro, Aars, Himmerland, Nordjylland, Jylland, Danmark
Brugererfaring med Linux:: Øvet

Re: Tutorial nr. 20 (Kanter/hjørner skygger gradienter REN css)

Indlægaf Måns » søn 6. maj 2012 21:42

Dette hersens projekt startede med et forsøg på at efterligne Uffes guldramme svg-grafik med ren css...
Her er et par foreløbige resultater - baseret på betragningerne i første post:

Guldramme 1:
Kode: Vælg alt
.guldramme1
   { display:block; padding:1em; -moz-border-radius:1.5em;-webkit-border-radius:1.5em; border:4.3px solid yellow; -moz-box-shadow: -1px 1px 2px 3px orange;  -webkit-box-shadow: -1px 1px 2px 3px orange; box-shadow:-1px 1px 2px 3px orange;}

Guldramme 2 + gradient:

Kode: Vælg alt
.guldramme2 {
color:white; /*tekstfarve*/
text-shadow: 1px 1px 1px #000, 3px 3px 5px [[ColorPalette::PrimaryDark]]; /*tekstskygge*/
-moz-border-radius:1.5em;-webkit-border-radius:1.5em;border: 3px solid hsl(60, 100%, 39%); /*rundede kanter*/
    padding: 5px; /*tekstindryk*/
/*Gradient - der efterligner gradientmakroen i headeren*/
    background: [[ColorPalette::PrimaryLight]];
   background: -moz-linear-gradient(top, [[ColorPalette::PrimaryLight]] 0%, [[ColorPalette::PrimaryMid]] 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,[[ColorPalette::PrimaryLight]]), color-stop(100%,[[ColorPalette::PrimaryMid]]));
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='[[ColorPalette::PrimaryLight]]', endColorstr='[[ColorPalette::PrimaryMid]]',GradientType=0 );
   height:80px;
    /*Skygger til to ekstra rammer/kanter */
    box-shadow:
        0 0 0 4px hsl(60, 100%, 45%),
        0 0 0 8px hsl(63, 100%, 50%);
}

:red-cheers: :red-cheers:
Mvh Måns
Quote: "Give a man a tiddler and he might digest it today, show a man how to use TIddlyWiki and he'll be writing his own tiddlers for a lifetime .."
Brugeravatar
Måns
Site Admin
Site Admin
 
Indlæg: 1755
Tilmeldt: tirs 5. jan 2010 18:32
Geografisk sted: Havbro, Aars, Himmerland, Nordjylland, Jylland, Danmark
Brugererfaring med Linux:: Øvet

Re: Tutorial nr. 20 (Kanter/hjørner skygger gradienter REN c

Indlægaf Måns » tors 2. maj 2013 23:29

Hej HtmlEntusiaster

Jeg har leget lidt mere med rammer omkring et billede,der består af flere lag/klasser og billed-udsnit - og også givet mig i kast med et voldsom REN CSS øvelse i rammer med css3 - uden hjælp af billedudsnit.

Inspiration: https://groups.google.com/group/tiddlyw ... 038842487d

Se her:
http://xn--mns-ula.dk/TWsOS/benzin
css+billedudsnit#1.png


Css3 eksemplerne:
Css3#1.png

Klik "edit" i højre sidemenu (lige under søgefeltet) for at kunne skifte rammen vha. en dropdown menu...
Css3#2.png
Css3#3.png

(css3 rammer kræver Chrome eller Firefox - der er desværre ingen fallback til IE endnu... det betyder at det ser helt galt ud i IE...)

:red-cheers: :red-cheers: :red-cheers:
Mvh Måns
Quote: "Give a man a tiddler and he might digest it today, show a man how to use TIddlyWiki and he'll be writing his own tiddlers for a lifetime .."
Brugeravatar
Måns
Site Admin
Site Admin
 
Indlæg: 1755
Tilmeldt: tirs 5. jan 2010 18:32
Geografisk sted: Havbro, Aars, Himmerland, Nordjylland, Jylland, Danmark
Brugererfaring med Linux:: Øvet

Re: Tutorial nr. 20 (Kanter/hjørner skygger gradienter REN c

Indlægaf Måns » fre 3. maj 2013 22:32

Hej igen
Her er en TW, med rammer omkring tiddlere, indlejrede fonte og baggrundsbillede + gradient. Jeg har kopieret temaet herfra.
Forskellen på min kopi og originalen er at jeg har indlejret alle nødvendige filer som binære data - originalen referer til filer, der ligger i samme mappe...

Den findes også her: http://dfiance.tiddlyspot.com/
DOWNLOAD (fra tiddlyspot)
DOWNLOAD (fra tiddlyhome)
:red-cheers: :red-cheers: :red-cheers:
Mvh Måns
Quote: "Give a man a tiddler and he might digest it today, show a man how to use TIddlyWiki and he'll be writing his own tiddlers for a lifetime .."
Brugeravatar
Måns
Site Admin
Site Admin
 
Indlæg: 1755
Tilmeldt: tirs 5. jan 2010 18:32
Geografisk sted: Havbro, Aars, Himmerland, Nordjylland, Jylland, Danmark
Brugererfaring med Linux:: Øvet

Re: Tutorial nr. 20 (Kanter/hjørner skygger gradienter REN c

Indlægaf Måns » tirs 7. maj 2013 10:39

Hej igen

Her er en TW, der anvender baggrunden(e) (indlejret) fra den tidligere TW og Css3 til at lave rammer om tiddlere, header, MainMenu og SideBarOptions...
I MainMenuen er der et godt eksempel på hvordan man kan lave et template til en automatisk genereret tagliste.
Klik på den lille pil umiddelbart over den øverste tiddler til højre - for at åbne SidebarOptions (højre sidemenu)...
css3-rammer.png


Det er (mit) første forsøg med Css3 rammer på TW-elementer...
Måske kan en anden gøre det lidt mere spændende???
:red-cheers: :red-cheers: :red-cheers:
Mvh Måns
Quote: "Give a man a tiddler and he might digest it today, show a man how to use TIddlyWiki and he'll be writing his own tiddlers for a lifetime .."
Brugeravatar
Måns
Site Admin
Site Admin
 
Indlæg: 1755
Tilmeldt: tirs 5. jan 2010 18:32
Geografisk sted: Havbro, Aars, Himmerland, Nordjylland, Jylland, Danmark
Brugererfaring med Linux:: Øvet


Tilbage til TiddlyWiki

Hvem er online

Brugere der læser dette forum: Ingen og 1 gæst