Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /var/www/webitricerne.dk/public_html/wp/wp-content/plugins/revslider/includes/operations.class.php on line 2734

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /var/www/webitricerne.dk/public_html/wp/wp-content/plugins/revslider/includes/operations.class.php on line 2738

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /var/www/webitricerne.dk/public_html/wp/wp-content/plugins/revslider/includes/output.class.php on line 3679
Typografi - eksempler & experimenter - Webitricerne skip to Main Content

Inline styling - eksempler & eksperimenter

indlæg_TinyMCE

I teksteditorens fane Visuel findes der diverse knapper, som kan formatere typografien.
Disse knapper kaldes "TinyMCE" i fagsprog.

Når du klikker på en af TinyMCE-knapperne kan du i fanen Tekst se, at der tilføjes kode omkring den formaterede tekst:

Fed!

<strong>Fed</strong>!

kursiv!

<em>kursiv</em>!

Centreret!

<p style="text-align: center;">Centreret!</p>

RØD - GRØN!

<span style="color: red;">RØD</span> - <span style="color: green;">GRØN</span>!

Du  - og dine  kunder - kan komme rigtig langt med tekstformatering via TinyMCE + plugins som Easy Google Fonts og købe-temaer med typografiske valgmuligheder, men vil du mere, så er der ingen vej uden om: Eksperimentér og leg med CSS:-)))

Hvis du kun skal bruge en styling en gang, så kan du style direkte i teksteditoren - i fanen Tekst.

Eksempler til at eksperimentere videre med:

Her er nogle eksempler på hvordan du kan lege med HTML og CSS-stylyling direkte i fanen Tekst!

Kopiér/ indsæt eksemplerne herunder ind på en (evt. ikke offentlig;-) side i din WordPress-installation - i tekst-editoren: fanen Tekst!

Prøv (i fanen Tekst!) at ændre på parametrene: farver, font-size, padding etc, og se hvad der sker!!!

.class-selector {
    property: value(s);
}

Vi har lavet en masse css-eksempler, hvorfra du kan kopiere “property” og “value(s)”, og teste dem i dit eget stylesheet:

Her er en tekst med grøn "border" til venstre.
Se CSS-eksempler på "border" 

Kopier til fanen TEKST

<p style="border-left: 10px solid yellowgreen; padding-left: 10px;">Her er en tekst med grøn "border" til venstre.
Lorem ipsum osv.</p>

Herunder tekst med stiblet "border" i top og bund:

20. februar, 2015  Webitricerne

Kopier til fanen TEKST

Herunder tekst med stiblet "border" i top og bund:
<p style="border-top: 1px dashed #70673B; border-bottom: 1px dashed #70673B; font-size: 13px; margin: 15px 0px; padding: 3px; text-transform: uppercase; color: #bfb585;">20. februar, 2015  <span style="color: #800000;"><a style="color: #800000;" href="#">Webitricerne</a></span></p>

Unicial. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Kopier til fanen TEKST

<span style="font-size: 50px; font-family:'impact',sans-serif; font-weigth: 900; margin: -12px 2px -16px -2px; padding: 0px; float: left; color: orange;">U</span>nicial. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Baggrundsbillede

Kopier til fanen TEKST

<h2 style="width: 100%; background-image: url('http://webitricerne.dk/wp/wp-content/uploads/2014/10/Baggrund_striber.png'); text-align: center; padding: 35px 5px; font-weight: 900; color: rgba(255,140,0,0.4); margin-top: 0px; border: 1px solid darkgrey;">Baggrundsbillede</h2>

SHADOW

Kopier til fanen TEKST

<p style="text-align: center; font-size: 60px; text-shadow: 2px 2px 18px rgba(0,0,0,0.5); color: #ffffff;">SHADOW</p>

Erhvervslejemål

8000 km2

Sat med Times New Roman

Kopier til fanen TEKST

<div style="text-align: center; background-color: lemonchiffon; font-family: 'times new roman', times; padding: 20px 20px 25px 20px; border: 3px double DarkKhaki;">
<p style="font-size: 28px; margin-bottom: 22px;">Erhvervslejemål</p>
<p style="font-size: 18px;">8000 km<sup style="font-size: 0.7em;">2</sup></p>
<em>Sat med Times New Roman</em>
</div>

Lorem ipsum!!!

Kopier til fanen TEKST

<p style="-webkit-transform: rotate(-10deg); transform: rotate(-10deg); font-family: impact, chicago; font-size: 36px;"><mark>Lorem</mark> ipsum!!!</p>

SKYGGER

Eksempel med 2 skygger

Kopier til fanen TEKST

<p style="background-color: lightgrey; color: darkgrey; text-align: center; font-size: 60px; text-shadow: 1px 1px 0px rgba(255,255,255,0.9), -1px -1px 0px rgba(0,0,0,0.5);">SKYGGER</p>

H2O

Kopier til fanen TEKST

<h2 style="font-size: 60px; text-align: center; margin: 0px auto; padding-top: 30px; background-color: steelblue; color: #fff; width: 170px; height: 170px; border: 5px solid white; border-radius: 50%; text-shadow: -2px 0px 8px #fff; box-shadow: 8px 8px 8px rgba(0,0,0,0.2);">H<span style="font-family: 'comic sans ms', sans-serif; color: #ccffcc;"><sub style="font-size: 0.6em;">2</sub></span>O</h2>

Flere skygge-eksempler: http://designshack.net

Back To Top
Search