what do you think about this design?

medina

x10 Addict
Community Support
Messages
1,811
Reaction score
7
Points
38
Some time ago to stop designing in html and css so now that's a vacation I'm back, I've decided now I upgrade to HTML5 and CSS3.


I made this simple interactive menu with a background so I wonder you are saying. That changed or fixed.

http://alejandrom.com/casas/


We also need to continue to make suggestions to put the container or the body text of the page, what color or style could use ... I thought of a simple white container but will lose or cover with clouds.

PD: Remember that is made only with HTML5 and CSS3, without images or jquery or Javascript... its only HTML and CSS

And sorry for the bad english....
 
Last edited:

mailboxer12322

New Member
Messages
8
Reaction score
1
Points
3
Wow that is cool. It is amazing how the clouds move and the best part is that you did not use an animated gif to achieve that. Great work.
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
Remember that when you have CSS3 support, you also have rgba support. That will allow you to use semi-transparent backgrounds without affecting the opacity of the entire container. Setting the background-color to, say, rgba(255, 255, 255, 0.8) (white at 80% opacity) will allow things "behind" the text container to show through the background, but the text itself can stay at 100% opacity for improved readability and contrast.

I don't know about the clouds passing in front of the ends of the ribbon but behind the centre. It kills the illusion that they're part of the same (folded) ribbon. The effect itself, having the clouds pass between layers, is good; it just doesn't work with the ribbon. Oh, and the frontmost clouds are popping in and out of existence in a disturbing way on my wide monitor. It probably works very well at a 1200 or 1400 pixel width, but at 1920px it's kind of distracting. (That's just a matter of playing with the numbers a little bit. Have you taken a look at the vw and vh size units?)
 
Last edited:

medina

x10 Addict
Community Support
Messages
1,811
Reaction score
7
Points
38
Thanks for your comments,especially mailboxer12322 i have this problems with the ends of the ribbon, im trying to fix it, but i dont see where is the problem, and also when reduce the height of the web browser the green footer is place over the container, i think that the problem is in the CSS position:relative and Absolute.http://alejandrom/casas
 

chatngox

Member
Messages
122
Reaction score
3
Points
18
The cloud is coming between the banner left layer and the banner center layer. If you know what I mean.Maybe set the cloud's z-index?
 
Top