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':
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.
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 ;)
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.
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 ;)
??? 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..-,-
You could experiment a little bit and try to achieve something like this:
OdpowiedzUsuń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.
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ńYou could do this whit minimum effort by using jquery :)
OdpowiedzUsuń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
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ńThat "class inheritance approach" have nothing to do with jQuery.
OdpowiedzUsuń??? 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ń