CSS3 – Lär dig göra en snygg text shadow med mitt typsnitt

mars 2, 2012 § Lämna en kommentar

Det här är en enkel tutorial för dig som vill använda mitt typsnitt med lite text shadow.

Det här måste du lägga in i din CSS fil för att kunna skriva med mitt typsnitt: @font-face { font-family: saibot; src: url(”http://www.netpage.se/saibot type blue.ttf”); }
Sedan kan du enkelt definera att du ska skriva med mitt typsnitt: h3 { font-family: saibot, tahoma, sans-serif; font-size: 2em; }

Vi ska nu enkelt lägga en text shadow på den här texten. Lägg till koden: text-shadow: 2px 2px 2px #000; inom h3 taggen. Svårare än så var det inte!

Annonser

Jag släpper mitt hemmagjorda typsnitt

mars 1, 2012 § Lämna en kommentar

Jag har suttit och snickrat ihop ett typsnitt med hjälp av min egen handstil.
För er som vill göra något liknande så vill jag beskriva hur min process såg ut:
1 Rita alla bokstäver från A-Ö och små bokstäver a-ö på ett papper.(lite halvslarvigt så att hemmasnickar känslan finns där).
2 Ta kort på dessa bokstäver och överföra till datorn.
3 Justera exponering och ljus så att bokstäverna är helt svarta med en vit bakgrund. Sedan klippa ut alla bokstäver så det finns i 300X300 px.
4 Jag använde mig utav ”High logic – fontcreator” vilket jag tycker är ett utmärkt program. Där omvandlas en 300X300 px enkelt till en vector grafik
5 Det mest tidskrävande momentet var att få alla bokstäver lika stora. Min rekommendation är att gå efter 3 linjer. Hur hög, lång och vilken mitt bokstaven ska ha. Ett litet ”bh” är t.ex längre än många små bokstäver, men måste ha samma höjd på ”mittdelen” som t.ex ”ac”:s topp-höjd är.

Ni hittar typsnittet här: saibot type blue

PDF icon

maj 26, 2011 § Lämna en kommentar

Mitt senaste projekt var att göra en hemsida åt Norsk Energi.
Den hittar ni här: http://www.ccei.org.mk. Det är en Makedonsk hemsida och adressen kan verka konstig men det är en officiell Makedonsk URL. För projektet så skapade jag en PDF icon som jag nu släpper här på bloggen.


För att ladda hem den i vektor format klicka på den här länken: PDF icon

Rita din egen HTML5 canvas

november 13, 2010 § Lämna en kommentar

För er som är intresserade av att rita en egen HTML5 canvas bild så finns det en hemsida som tillåter er att göra det.
Ni hittar den här: http://mrdoob.com/projects/harmony/

CSS3 handbok

september 24, 2010 § Lämna en kommentar

Här nedan presenterar jag några CSS3 nyheter.

För att snedställa ett element:
-webkit-transform: rotate(-11deg) scale(1.25);
-moz-transform: rotate(-11deg) scale(1.25);
(Om du inte skriver dit scale(1.25) så antas det att skalan är 1.00)

En snygg övergång:
-webkit-transition: all 0.5s ease-in-out;
Är samma som:
-webkit-transition-property:all;
-webkit-transition-duration: 1.5s, 1.5s;
-webkit-transition-timing-function: linear, ease-in-out;

Välj din border bild:
-webkit-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;
-moz-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;

För att din bakgrund ska få rundade kanter:
-webkit-border-radius: 4px 3px 6px / 2px 4px;
-moz-border-radius: 4px 3px 6px / 2px 4px;
border-radius: 4px 3px 6px / 2px 4px;

Är samma sak som

-webkit-border-top-right-radius: 3px 4px;
-webkit-border-top-left-radius: 4px 2px;
-webkit-border-bottom-right-radius: 6px 2px;
-webkit-border-bottom-left-radius: 3px 4px;
-moz-border-radius-topleft: 4px 2px;
-moz-border-radius-topright: 3px 4px;
-moz-border-radius-bottomright: 6px 2px;
-moz-border-radius-bottomleft: 3px 4px;
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px:

För att få skugga på text:
text-shadow: 2px 2px 2px #000;

För att få skugga på ett CSS element:
-moz-box-shadow: 15px 15px 0px #999;
-webkit-box-shadow: 15px 15px 0px #999;
box-shadow: 15px 15px 0px #999;
padding: 5px 20px 5px 20px;

Börja med att testa alla dessa. Sedan vill jag att du ska tänka dig hur man använder dessa tillsammans. Med hjälp av pseudo classer såsom :hover och :focus så kan man åstadkomma många snygga fade effekter som tidigare gjordes med javascript.

Fejkade HDR effekter

september 24, 2010 § Lämna en kommentar

Eftersom webben allt mer handlar om grafik i både bild och videos så har jag bestämt mig för att min blogg också kommer handla om sådant.

Jag provade topaz idag som är ett tilläggsprogram till photoshop. Jag blev förvånad över resultatet.

Topaz arbetar bara med en bilds exponering, kontrast, ljusstyrka och skuggor för att dra det kort. Till skillnad från andra liknande program där man kan göra en fejk HDR bild (t.ex photoshop cs3,cs4 inbyggda HDR funktion eller photomatix) så krävs det bara en bild.

I photoshop och photomatix så krävs det 3 bilder med olika exponeringar. Det som är vanligaste exponeringslägena för att få HDR effekten är -2, 0, +2.

Ni ser mitt bild resultat nedan.

Före, efter
fejkhdr

Var befinner jag mig?

Du bläddrar för närvarande i kategorin GrafikTobiasboman's Blog.

%d bloggare gillar detta: