Just nu i: Webbutveckling

Kopiera text utan formatering

Vill bara tipsa om PureText, ett fantastiskt litet program som gör att man kan kopiera text i Windows utan att all formatering följer med. Detta går visserligen lösa genom att klistra in texten i Notepad först, men med PureText blir det betydligt smidigare. När du klistrar in texten använder du snabbtangenten WIN + V istället för CTRL + V.

Snygga WordPress-teman på svenska


 
Jag gillar verkligen Elegant Themes. De håller en helt annan klass än vilket gratis WordPress-tema som helst. Nick skapar WordPress-teman som är grafiskt snygga, samtidigt som de är stilrena, enkla och eleganta. Fri tillgång till dessa teman kostar $19.95 per år, vilket är riktigt billigt med tanke på att det släpps ett par nya teman varje månad.

Det finns dock en sak som irriterat mig – samtliga teman var på engelska, men mina sajter är på svenska. Lyckligtvis var de flesta Elegant Themes översättningsbara via .po och .mo-filer. Det var därför bara att bita i det sura äpplet och sätta igång med översättningen av 25 WordPress-teman…

Ladda ner mina svenska språkfiler för Elegant Themes här!

OBS! Ovanstående fil innehåller endast mina svenska språkfiler för Elegant Themes. För att ladda ner dessa WP-teman måste du bli medlem på Elegant Themes webbplats.

Eget typsnitt med CSS (cross-browser)

Många väljer av estetiska skäl att använda bilder istället för rubriker på sin webbplats. Bilder som rubriker har i huvudsak två nackdelar:

  • Det är tidskrävande och oflexibelt
  • Sökmotorer går miste om viktig information

Med CSS3 begränsas du inte till de typsnitt som besökaren installerat på sin dator. Genom att lägga typsnittet på servern och referera till det via CSS öppnas helt nya möjligheter.

Det huvudsakliga problemet är att IE inte stödjer TrueType-typsnitt. För att fixa detta krävs att typsnittet finns som både TrueType (TTF) och OpenType (EOT). Ett TTF-typsnitt kan enkelt konverteras online till EOT med hjälp av TTF to EOT Font Converter. Ladda sedan upp bägge typsnitten till servern…

Exemplet nedan ser ut som en skärmdump från Commodore 64 BASIC, men skenet bedrar. Jag har endast använt mig av CSS3 och typsnittet ”Commodore 64″ (prova gärna att markera gärna texten).

**** COMMODORE 64 BASIC V2 ****

64K RAM SYSTEM  38911 BASIC BYTES FREE

READY.

 

Så ser koden ut:

<style type=”text/css”>
@font-face {
font-family: ”Commodore 64″;
src: url(‘/c64.eot’); /* IE */
src: local(‘Commodore 64′), url(‘/c64.ttf’) format(‘truetype’); /* non-IE */
}

.c64-screen  {
width: 320px;
height: 200px;
font-family: ”Commodore 64″;
font-size: 10px;
color: #7777ff;
background: #110099;
border: #7777ff 32px solid;
padding-top: 1px;
line-height: normal;
}

.c64-header  {
text-align: center;
}
</style>

<div class=”c64-screen”>
<div class=”c64-header”>
**** COMMODORE 64 BASIC V2 ****<br /><br />
64K RAM SYSTEM &nbsp;38911 BASIC BYTES FREE<br /><br />
</div>
READY.
</div>

Små verktyg för webbutveckling

Tänkte lista lite verktyg som jag använder allt som oftast när jag jobbar.

Min egen kräft-mouseover!

En riktigt enkel mouseover-effekt som jag kom på i natt. Skapa en bild 200×300 px, skriv fånga överst, kräftor i mitten och för fan underst.

Lägg sedan in följande kod:

<style type=”text/css”>
.bild a {
display: block;
width: 200px;
height: 100px;
background: url(‘/bild.png’);
}

.bild a:hover {
background-position: center;
}

.bild a:active {
background-position: bottom;
}
</style>

<div class=”bild”>
<a href=”#”></a>
</div>

Det fantastiska resultatet (klicka på den också):

Sida 1 av 212