2013-02-28

Little, sweet menu in CSS3 with using 'nth-child'~

In CSS3, I found 'nth-child' as very useful property. See by yourself (but remember don't use IE browser, because CSS3 doesn't work as it should works on Internet Explorer!):



The code doesn't look too much complicated, because the main trick, that I used, is contained in 'nth-child':

a {
display: block;
width: 100px;
height: 50px;
background-color: #98FB98;
color: #000000;
text-decoration: none;
float: left;
margin: 5px;
text-align: center;
padding-top: 5px;
opacity: 0.3;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 2px 3px 3px #22D;
-moz-box-shadow: 2px 3px 3px #22D;
-webkit-box-shadow: 2px 3px 3px #22D;
}
a:hover {
opacity: 1;
transform: scale(1.1) rotate(-5deg);
-moz-transform: scale(1.1) rotate(-5deg);
-webkit-transform: scale(1.1) rotate(-5deg);
-o-transform: scale(1.1) rotate(-5deg);
}
#all a:nth-child(1) { background-color: #00FFFF; color: #2F4F4F;}
#all a:nth-child(2) { background-color: #ADD8E6; color: #000000;}
#all a:nth-child(3) { background-color: #7FFF00; color: #ffffff;}
view raw gistfile1.css hosted with ❤ by GitHub
Etykiety:

6 komentarzy:

  1. matiit28 lutego 2013 05:38

    You could experiment a little bit and try to achieve something like this:
    Hovering top left element rotate box like now.
    Hovering top right element rotate box right
    Hovering bottom-left element rotate box like top right element
    Hovering bottom-right element rotate box like top left element.

    like that:

    / \
    \ /

    I think you'll know what I'm talking about.

    OdpowiedzUsuń
  2. Anonimowy28 lutego 2013 05:45

    I thought about it, but after this changes, this code wouldn't be looking so cute :P Or I just didn't know how to give hiding other rotate properties in nth-child bracket :) Anyway, I wanted to use minimal number of classes ;)

    OdpowiedzUsuń
  3. matiit28 lutego 2013 05:59

    You could do this whit minimum effort by using jquery :)
    Or even better: class inheritance (it's not the same like in PHP or Python).
    I will try to show you what's this about.
    Imagine you have a website which needs to have a messages.

    Standard message would be styled like that:
    - have a 10px size
    - have a solid 1px black border
    - and let's say rounded boxes and shadow

    Then you realized that you need to have a warning message.
    Basically it's like standard message, but should be red.

    And then you need success message. It need to be like standard message but green.

    What now?

    .message { font-size: 10px; border: solid 1px black; border-radius: 15px; box-shadow: 3px 3px 3px 3px #000;}

    .warning { color: red; }

    .success { color: green;}

    And in html it need to be like that:

    http://paste.laravel.com/j4H

    OdpowiedzUsuń
    Odpowiedzi
    1. Anonimowy28 lutego 2013 06:11

      For sure, you're right, and it doesn't even look scary, but I'm still green about jQuery and I need to learn JS first, I think. But thank you for such a long-winded speech and advices ;)

      Usuń
  4. matiit28 lutego 2013 06:14

    That "class inheritance approach" have nothing to do with jQuery.

    OdpowiedzUsuń
  5. Anonimowy28 lutego 2013 06:19

    ??? so what are we talking about now? I told you that I didn't want to use more classes in my .css file to not to do the code more messy, so I thought that you're talking about JS capabilities..-,-

    OdpowiedzUsuń

Dziękuję Ci za poświęcony czas i pozostawienie komentarza :)

Subskrybuj: Komentarze do posta (Atom)