Nu ska jag gästblogga om nästan helt irrelevanta saker om HTML5 på en CSS3 BLOGG!
I’m crazy in the coconut!
Den stora nyheten är den coola uppdateringen av DOCTYPE:n i HTML5.
För er som inte redan visste… är DOCTYPE ett standard element som enligt standard ska stå överst i varje HTML fil. DOCTYPE:n talar om för webbläsaren vilken version av HTML/XHTML filen är skriven i så att webbläsaren kan tolka och visa det rätt.
Exempel på en XHTML DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Och nu det magiska som gör att man älskar HTML5 redan innan man ens hunnit skriva html elementet i en ny fil. HTML5 DOCTYPE:
In: HTML5, Nyheter |
I CSS3 finns det goda möjligheter att göra former av olika slag som inte består av bildfiler. Här är ett exempel på populära stjärnor/klistermärken och liknande som är vanligt på sidor med ”web 2.0″-stil.
Exempel på css3-stjärna
In: Okategoriserade |
I CSS3 finns det två nya funktioner för att lägga till skuggor på text och andra objekt. Dessa är box-shadow och text-shadow där den första skapar skuggor på blockelement och den andra enkelt kan användas för textskuggor.
Syntaxen är som följer:
box-shadow: 1px 1px 1px black;
text-shadow: 1px 1px 1px black;
Det första argumentet är den horisontella offseten på skuggan, det andra vertikala, det tredje hur mycket blur den skall ha och ett eventuellt fjärde vilken färg den skall ha.
Detsamma gäller text-shadow. Exempel följer nedan!
Box och text-shadow
In: Okategoriserade |
Har ni märkt att webbläsarna har egna prefix för något som borde vara standard? Ta
som exempel. Det borde se ut såhär:
.box {
border-radius:10px;
}Men som ni som har provat i fler webbläsare har antagligen märkt att det ser snarare ut såhär:
.box {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}Det finns ett javascript-bibliotek som ändrar på detta. Om du använder dig utav eCSStender så blir det:
.box {
border-radius:10px;
}Erkänn snyggt? Allt kan ju inte ligga i ett bibliotek, men det finns även extensions. Släng bara in följande i din html.
<script src="eCSStender.js" type="text/javascript" />
Tags: bibliotek, eCSStender
In: CSS3.se, Javascript |
I en liten följetång på css3.se kommer vi gå igenom olika texteffekter man enkelt kan åstadkomma med hjälp av de nya funktionerna i CSS3.
Först ut är reflektioner som är en vanlig effekt att använda i alla typer av logos, bilder med mera där text förekommer. Genom att använda egenskapen box-reflect kan man välja var reflektionen på ett objekt skall ske , hur långt ifrån(offset) den skall förekomma samt om man vill maska reflektionen med en bild.
Syntaxen är som följer:
box-reflect: <above | below | left | right> Npx bild;
.reflect {
color:blue;
-webkit-box-reflect:below 2px ;
}
.reflect2 {
margin-top:40px;
-webkit-box-reflect:below 5px -webkit-gradient(linear, 50% 0, 0 100%, from(transparent), color-stop(.4, transparent), to(white));
}Reflekterad text !
Se fler exempel på reflekterad text
Tags: CSS3, del1, reflektioner, Text
In: Guider, exempel |
Med CSS3 är det enkelt att rotera element på olika sätt utan att behöva använda javascript eller liknande språk. Genom att använda transition och rotate kan man både animera och rotera samtidigt.
.rotera {
color:red;
-webkit-transform: rotate(40deg);
position:absolute;
-moz-transform: rotate(-90deg);
top:140px;
}
.rotera:hover,active {
-webkit-transform: rotate(20deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}CSS3-rotation exempel!
In: Okategoriserade |
I CSS3 är det lätt att använda customfonter för att presentera sitt innehåll. Till skillnad från tidigare kan man med regeln @font-face.
Genom att placera fontfilen på servern så kan alla användare vars webläsare har stöd för CSS3 och @font-face ladda ner dessa och visa dem direkt på hemsidan.
Här är ett exempel på hur man specificerar att fonten BaroqueScript skall användas.
@font-face {
font-family: BaroqueScript;
src: url("fonts/BaroqueScript.ttf");
}
.barock {
font-family: BaroqueScript;
color: blueviolet;
}
<span class="barock"> Här är text i barockstil!</span>Text i barockstil!
Tags: CSS3, exempel, Text
In: Okategoriserade, Text, exempel |
Ett populärt sätt för att få tabeller att se mer estetiskt tilltalande ut och mer lätta att ta till sig är att skapa ett zebraliknande mönster där varannan rad är i en annorlunda färg än de angränsande raderna. Tidigare har man använt två olika klasser på varannan tabellrad för att åstadkomma denna effekt, men med CSS3 och pseudoklassen nth-child kan man göra detta mycket enklare och smidigare!
För att göra varannan cell röd kan följande kan vi använda nyckelordet ”odd” som då kommer göra att regeln endast appliceras på varannan cell.
tr:nth-child(odd) {
background-color:darkred;
}
| Stad |
Del |
| Stockholm |
Öst |
| Örebro |
Mitt |
| Gävle |
Norr |
| Helsingborg |
Syd |
| Norr |
Kiruna |
| Visby |
Ö |
| Malmö |
Syd |
| Gällivare |
Norr |
Läs merhär.
Tags: CSS3, exempel, tabeller, zebramönster
In: exempel |
I css3 kan du lägga in flera bakgrunder i samma element, du behöver bara kommaseparera dem. Det är lite tufft.
Exempel:
.multiple-backgrounds {
background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg) top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;
}
Tags: CSS3, exempel, tutorial
In: exempel |
Nu har jag lagt upp ett nytt tema gjort i HTML5. Design är inte min starka sida så jag valde ett som såg lite lustigt ut!
In: Okategoriserade |
