Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

CSS – Rundade kanter på menyn

Här är CSS koden som du lägger in i din stilmall för att det ska bli rundade kanter på menyn. Leta upp det som styr menyn, ofta är det #side eller aside.

Vill du ha olika rundning på alla kanter får du skriva såhär:

-webkit-border-top-left-radius: 5px; /* det vänstra, övre hörnet för Chrome & Safari */
-webkit-border-top-right-radius: 5px; /* det högra, övre hörnet för Chrome & Safari */
-webkit-border-bottom-right-radius: 5px; /* det högra, nedre hörnet för Chrome & Safari */
-webkit-border-bottom-left-radius: 5px; /* det vänstra, nedre hörnet för Chrome & Safari */
-moz-border-radius-topleft: 5px; /* det vänstra, övre hörnet för Firefox */
-moz-border-radius-topright: 5px; /* det högra, övre hörnet för Firefox */
-moz-border-radius-bottomright: 5px; /* det högra, nedre hörnet för Firefox */
-moz-border-radius-bottomleft: 5px; /* det vänstra, nedre hörnet för Firefox */
border-top-left-radius: 5px; /* det vänstra, övre hörnet för övriga/CSS3 */
border-top-right-radius: 5px; /* det högra, övre hörnet för övriga/CSS3 */
border-bottom-right-radius: 5px; /* det högra, nedre hörnet för övriga/CSS3 */
border-bottom-left-radius: 5px; /* det vänstra, nedre hörnet för övriga/CSS3 */

Om du ska ha samma pixlar på varje hörn (alltså lika mycket “rundning”) så räcker det att skriva såhär:

-webkit-border-radius: 5px; /* Webkit */
-moz-border-radius: 5px; /* Gecko */
border-radius: 5px; /* CSS3 */

Vill du ha olika pixlar på övre och undre kanterna så kan du skriva såhär:

-webkit-border-radius: 5px; /* övre hörnen, för Safari & Chrome */
-webkit-border-bottom-right-radius: 2px; /* högra nedre hörnet, för Safari & Chrome */
-webkit-border-bottom-left-radius: 2px; /* vänstra nedre hörnet, för Safari & Chrome */
-moz-border-radius: 5px; /* övre hörnen, för Firefox */
-moz-border-radius-bottomright: 2px; /* högra nedre hörnet, för Firefox */
-moz-border-radius-bottomleft: 2px; /* vänstra nedre hörnet, för Firefox */
border-radius: 5px; /* övre hörnen, för övriga/CSS3 */
border-bottom-right-radius: 2px; /* högra nedre hörnet, för övriga/CSS3 */
border-bottom-left-radius: 2px; /* vänstra nedre hörnet, för övriga/CSS3 */

Anledningen till att koden är så lång är för att just border-radius är en egenskap i CSS som inte stöds av alla webbläsare. Därmed har man special-rader för olika webbläsare – webkit är för OS X-webbläsare så som Safari & Chrome och moz är för Gecko, alltså Firefox. Jag rekommenderar att man använder både webkit och moz i sina koder så att alla webbläsare har förutsättningen att läsa din webbplats likadant.

 

 

Transkribering av filmen:

Rundade kanter på menyn

Hej hörni.
Idag så ska jag visa er hur man gör så att det blir rundade kanter på menyn utan att man behöver ha bilder. Och då gör man helt enkelt så att ni kopierar koden som finns här nedan. Det här är superlätt. Ni kopierar koden som finns nedan. Sedan så går ni in på Design, redigera stilmall, trycker på control-f eller command-f om ni har Mac och så söker ni på #side då kommer ni ner till det som är menyn och då är det helt enkelt bara att, vad heter det, klistra in den här koden i slutet av det här stycket och man måste klistra in den innan den sista klammern eller vad man ska säga, ni vet en sån här klammer, den som är här. Och sen kan man helt enkelt ändra pixlarna här till större eller mindre. Mindre så blir det mindre rundat och större tal så blir det mer rundat, mer runt liksom. Så, det är helt enkelt det man behöver göra för att få rundade kanter då på den här menyn. Och ja, det var helt enkelt det jag skulle visa er idag, ett jättekort tips men det kan bli skitsnyggt verkligen. Så får ni ha det så bra. Hejdå.

24 år, läser till Webbutvecklare, driver eget företag inom design, grafik & SEO samt ett företag som designar posters. På fritiden skapar jag bloggar, hemsidor och gör andra projekt inom webb. Jag har bloggat sedan 2007 under namnet Sannas Rum och har också två egna Youtubekanaler.

Läs mina andra inlägg

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *