Hittade en till grej som jag ska fixa på min egen site så fort jag får en stund över, Image Sprites! Just nu använder jag ett gammalt crappy javascript för att köra hover-effekten på min meny och den har dessutom strulat och bilderna hoppar, men det går ju superenkelt att fixa till med bara css. Riktigt sugen på att koda ordning på den nu, måste bara få en stund över! Har minst en idé till för en ny design också, men att få ordning på koden och innehållet får gå först :)
http://www.w3schools.com/css/css_image_sprites.asp
torsdag 3 november 2011
CSS3 *dreggel*
Sitter och läser om och testar CSS3, och blir så jäkla glad!
En sån där enkel grej som att varannan rad i en tabell ska vara olikfärgad för bättre läsbarhet som förut måste fixas med javascript eller något server side script går nu hur enkelt som helst att lägga in med hjälp av dessa två rader css:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Så smutt!
Fler nya saker jag gillar med CSS3: runda hörn, text och box-skuggor, form-validering!
En sån där enkel grej som att varannan rad i en tabell ska vara olikfärgad för bättre läsbarhet som förut måste fixas med javascript eller något server side script går nu hur enkelt som helst att lägga in med hjälp av dessa två rader css:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Så smutt!
Fler nya saker jag gillar med CSS3: runda hörn, text och box-skuggor, form-validering!
onsdag 2 november 2011
Ett till CSS trick
Hittade ett till trick som jag har letat efter en lösning på nån gång tror jag:
8. Style Your Ordered List
Style numbers of an ordered list in different way than the content of each list item.
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
Css trick
Hittade ett css trick som jag tänkte testa och postar för att komma ihåg :)
First of all, you'll need to assign a class to each navigation item:
You'll then need to insert an
Next, you create a new CSS rule:
This basically creates a rule that only takes effect when
10. Same navigation code on every page
Most websites highlight the navigation item of the user's location in the website, to help users orientate themselves. This is a fundamental requirement for basic usability, but can be a pain as you'll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds? Is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on each and every page? Of course it is...First of all, you'll need to assign a class to each navigation item:
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>
You'll then need to insert an
id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section. When in ‘Home’ it should read <body id="home">, in ‘About Us’ it should be <body id="about"> and in ‘Contact Us’ <body id="contact">.Next, you create a new CSS rule:
#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
} This basically creates a rule that only takes effect when
class="home" is contained within id="home", and when class="about" is in id="about" and class="contact" is in id="contact". These situations will only occur when the user is in the appropriate site section, seamlessly creating our highlighted navigation item.
Prenumerera på:
Inlägg (Atom)