CSS3 border radius

september 25, 2010 § Lämna en kommentar

Jag vill förklara närmare hur border radius fungerar. Här är en grafik så att ni förstår vad jag menar.

Koden till den bilden ser ut såhär:
-webkit-border-top-left-radius: 40px 30px;
-webkit-border-top-right-radius: 20px 50px;
-webkit-border-bottom-right-radius: 60px 10px;
-webkit-border-bottom-left-radius: 30px 90px;

Eller såhär i Firefox

-moz-border-radius-topleft: 40px 30px;
-moz-border-radius-topright: 20px 50px;
-moz-border-radius-bottomright: 60px 10px;
-moz-border-radius-bottomleft: 30px 90px;

W3C vill att det ska se ut såhär

border-top-left-radius: 40px 30px;
border-top-right-radius: 20px 50px;
border-bottom-right-radius: 60px 10px;
border-bottom-left-radius: 30px 90px;

Det kan vara bra att använda alla för att säkra utseendet i många webbläsare.

Annonser

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.

Tankar om multimedia som studieverktyg.

september 24, 2010 § Lämna en kommentar

Att vi lär oss bättre genom videos är inget som förvånar mig. Människan är närmast beroende av TV apparaten. Om vi inte får den dagliga dosen av stimulans som vi behöver så känner man sig otillfredsställd.

Idag kan man via några enkla gratis program göra en egen video av det som visas på en skärm. Så kallad ”screencast” är när en person spelar in sin skärm och gör en video av det. ”Podcast” är när man sänder video eller ljud i realtid. Det här är en marknad som kommer att expandera med webbens framsteg. Genom att peka musen på vad åhöraren bör klicka på så förenklar vi hela processen. Det blir lättare att visa i en video än att skriva en beskrivning med bilder. För åhöraren så blir det också mer stimulerande & lärorikt.

Här nedan så visas en graf över hur människans tänk fungerar. Det här grafen förklarar hur hjärnan samarbetar jobbar ihop på olika områden. Vi får lättare att lära om vi jobbar med flera delar i hjärnan. Det blir lagring i dubbel bemärkelse.

Redan i den kursen jag läste senast (år 2010) så experimenterade läraren med podcasts. Jag vill se en fullt funktionell undervisningsplattform på internet där läraren kör skärmdelning. Alla elever sitter hemma vid sina datorer och tittar spänt på undervisningen. Det har en aktiv chatt där elever kan välja att fråga andra elever eller läraren genom att skriva privata meddelanden.
Det är framtiden inom distansundervisning.

Webbapplikationer – links

september 24, 2010 § Lämna en kommentar

FillAnyPDF
On this homepage you can upload a PDF and then it creates a link to the PDF who another part can sign. This is an alternative instead of using regular postmail.

Type font
This homepage makes it possible for designers to upload a font. Then link to the font through CSS.

Wizi
You can share your location through SMS. Receivers of the SMS does get a map to your location.

CV online
Here can you as a job seeker fill in your qualifications. This site will in turn create a PDF file which becomes you online CV. You can then send a link to employers.

Tyda
Here you can translate from english to swedish and the other way around. Also translate a block of text against decent payment.

LiveJournal
LiveJournal can be used in many ways. As a private journal, a blog, a forum or as a social network.

Blogger
Register a blog fast and easy. Blogger is owned by google and is one of the worlds absolutely most used blogsystem.

CrocoDoc
Upload your PDF files, word documents or powerpoint slides. You can highlight certain parts of the text and add a comment to it. Makes it easy for other people to find the important part of documents.

Appcelerator
Build your telephone applications through webbtechnology. This program is for free and is open sourced. At the time of speaking there are 26 000 developers.

Uptimerobot
Check if your homepages are online.

Google Docs
Import your existing documents or create new ones. Is used as microsoft office but online.
Storing, Sharing and collaborating documents online with google docs

Itunes
A service by Apple to sell audio/video materials online which also includes many free and community broadcast channels called podcasts.
You have to install Itunes client on your computer and the connect to Apple Itunes services via Internet

Spotify
A free peer to peer musicservice where the users can stream live music directly from internet.

CanYouRunIt?
A free service which analyzes your PC’s performance against a special product, for example a pc-game. The service evaluates and even recommends what hardware/software that would need
an upgrade if the performance not reach the product demands.

Befunky
Turn your pictures to a cartoon online.

Quakelive
Play quake3 online in your browser. Play with your friends or chat with others at the same time as you are playing. No purchase is needed, just register and play for free.

Battlefieldheroes
Is a online game made by EA sports. It has 3d graphic and is played with help by your browser (IE or firefox). No purchase is needed, just register and play for free.

Mp3Cut
Upload your Mp3 online and cut and clip.

Livestream
Livestream is the most powerfull live broadcast platform on the internet.

Bilder, videos & ljud – links

september 24, 2010 § Lämna en kommentar

Synch Tube
Makes it possible for the user to watch YouTube videos in realtime.

LastFM
Makes it possible to listen to music online. Everything you listen to will be registered and you can watch what your friends have recently listened to.

Tinypic
This site makes it possible to upload a picture, tag a picture or search for a pic. Also supports videos.

FlickR
FlickR is one of our worlds largest company for digital media. You can upload, share, tag or search for a picture. Have a huge library of pictures.
Came out 2004 but was bought by Yahoo! 2005.

YouTube
YouTube is right now the biggest video uploading site in the world. Upload your own videos or search on others. YouTube was founded in year 2005. It was sold to Google for $1.65 billion the 9 october 2006. Have since then keept expanding. Made even more famous to host President Obama’ health care debate in 2010

TeacherTube
Upload your videos. It works like YouTube but is focused on education.

Collegehumor
Upload funny videos and comment others.

Vimeo
A hosting video service which provides good quality videos.

Aggregators – links

september 24, 2010 § Lämna en kommentar

AddThis
Create your own bookmarks and share through internet. One of the worlds most used social bookmarking site.

Diigo
A social bookmarking site where the opportunities to document homepages is big. Make your own bookmark-portfolio with interesting writings or pictures. Bookmark homepages and share with others.

Magma
A video aggregator.

Google reader
A common ordinary aggregator. Is used daily by a many people. Subscribe your favorite homepages with this tool.
RSS reader service by google.

Netvibes
Subscribe to RSS feeds with this aggregator.

Digg
Digg is a place for people to discover and share content from anywhere on the web. From the biggest online destinations to the most obscure blog, Digg surfaces the best stuff as voted on by it’s users.

Reddit
Vote up or down links. You can also vote on comments that has been submited about the links. A headline/news aggregator.

Miro
Subscribe to podcasts or videos. Offers great HD quality on every video.

Social network – links

september 24, 2010 § Lämna en kommentar

Google buzz
Start conversations about things you find interesting. Share photos and videos with your friends.

Facebook
One of internets most popular social networking site.You can share text, pictures, and videos with eachother.

Twitter
A social network where you can blog and upload pictures. It differences from facebook because you don’t need to be ”friends” with a person you want to interact with.

Myspace
Here you can create an own ”site”. The adress will be http://www.myspace.com/youradress.
One of the more popular social networking site in North America, now owned by Microsoft.

deviantART
Art community. Upload your pictures and share them with other creative designers or photographers around the world.

Badoo
Badoo is like a chat room, dating site and picture site(give grade) at the same time.

Classmates
Find people you know through school, highschool, work or the military.
Social networking site mainly for searching and contact again with your class-mates

Wikispaces
Register and get your own adress (youradress.wikispaces.com). An easy way of sharing knowledge within a network. The creator can choose if he wants everbody too edit the content or if he has to invite people.

Ning
Ning have specialized in making it easy for the users to create an own social network.

Omegle
Chat with people from around the world. Randomizes who you should chat with.

Chatroulette
Chat with other who has a webcam. Randomly chooses a person who is also active.

Language exchange
Find someone who wants to learn out their language, or you can learn others.

Resedagboken
Swedish community. Follow your friends on their travel journey. You can see where they are on a world map. Or as a traveler you can share location, blog and pictures with friends.

Var befinner jag mig?

Du tittar för närvarande i arkivet för september, 2010Tobiasboman's Blog.

%d bloggare gillar detta: