Sveigir borðar Ég hef ákveðið að skrifa eina létta grein til að lífga upp áhugamálið að ég held.

Þetta er mjög mikilvægt áhugamál á Huga, en svo virðist sem næstum enginn skrifar í það minnsta einhvern kork í hverri viku.

Þið megið senda mér PM og segja mér frá síðum á íslandi þar sem talað er mest um vefsíðugerð því ég þarf constant að tala um vefsíðugerð ef ég á að læra eitthvað meir, líka þið.

Þetta er grein um hvernig skal búa til sveiga borða á síðum og líka hvernig hægt er að setja opacity til að sjá í gegnum Layers.

Þessi aðferð er ekki alveg glæný en ég hef ekki séð hana notaða á neinum síðum nema Wordpress síðum sem ég hef skoðað á netinu.

* Athugið

Þetta getur virkað hægt á síðum því þetta tekur smá höndlun þ.e.a.s ef opacity aðferðin er notuð, svo ég bið ykkur að nota hana varlega.

Þetta virkar ekki með Internet Explorer eða svo segir -> http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

En, annars þá nota ég ekki Windows svo ég get ekki séð hvort þetta virkar þar.


-> Sveigir borðar

Það eru notaðar þrjár aðferðir til að sveigja borða í CSS 3 og koma þær við hvaða Browser þú ert að nota.
Það er ein sér aðferð fyrir Safari, önnur fyrir Firefox, og þriðja er fyrir alla aðra vafra sem styðja CSS 3 Border Layouts.
Aðferðin notuð til að sveigja borðana er þannig að tekinn er radíusinn frá hlið til hlið og sveigir borðana með pixlum.

* Aðferð fyrir Safari

Safari notar þennan CSS kóða til að sveigja borðana hjá sér
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

* Firefox

Firefox notar þennan CSS kóða til að sveigja borðana hjá sér
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;

* Aðrir vafrar sem styðja CSS 3 Border Layouts
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;

-> Opacity á Layerum

Notaðar eru tvær stillingar við Opacity á Layerum og eftir því sem ég veit best þá þarf að nota þær saman svo aðferðin virkar.

* Fyrri aðferð

Setur 70% Opacity á Layerinn.
opacity: 0.7

* Seinni aðferð

Setur 70% alpha á Layerinn.
filter: alpha(opacity=70);

Ég er ekker viss um að margir vita um þessar CSS aðferðir, en þær eru mjög þægilegar þegar maður er að gera síður eins og bloggsíður og fleira sem þurfa að hafa einhvern stíl.

Maður þarf ekki lengur að búa til myndir og adda þeim inn í bakgrunninn á Layers til þess eins að búa til sveiga borða.

En þegar útlit síðunnar á að vera með hlykkjum og svoleiðis þá verður maður að nota gömlu aðferðina.


— Takk fyrir að lesa og endilega gefið góðar athugasemdir :)