Viewing Popup Windows Revisited

Popup Windows Revisited



User: Roddy 10 years ago
I described the head gymnastics I had to go through to implement modals using java script in this topic...

http://ragesw.net/easyweb-beta/viewtopic.php?f=6...t=413...p=1900...hilit=modal#p1900

Since I'm always encouraging others to use CSS rather than java script where possible, I decided to put my money where my mouth is and try a CSS modal. It turns out that it's a lot easier than the java script version. Demo...

http://roddymckay.com/EasyWeb/test/css-modal.html

If anybody is interested enough to try it I'll post the code.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Guest 10 years ago
I want to try something similar that I found that uses CSS, but I was wondering if it could be applied to EasyWeb: http://sarasoueidan.com/blog/windows8-animations/. Sorry, I haven't showed you the site yet, but I'm making a site that has "kinda" metro Windows 8 looking tiles, but I found this and thought that adding animation would be cool.
Edit
User: Christopher 10 years ago
Good thing I'm an alien with a PEAR certificate. I was thinking I might not be able to apply. :D

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 10 years ago
@luis.web
The site you referred to is responsive so creating this type of effect in a fixed width site should be easier. You could either create a grid and apply the animations to each rectangle or create each rectangle in a separate snippet and line them up manually.

This is a mouse over flip effect that I tried the other day...

http://ezmacwebdesign.com/Demo/CSS-flip/css-flip.html

Here's a bunch of simple animations that I did about a year ago to give you an idea of the things you can do...

http://ezmacwebdesign.com/animation/index.html

@Christopher
I spent the last 18 years in California as a REAL (Resident Alien American Lowlife) so I know how it feels. Now that I'm back in Scotland I blend in inconspicuously and nobody knows what I really am!

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 10 years ago
Here's a demo of CSS fade in/fade out applied to the background and text colors of different blocks that may give the effect you are trying to create...

http://ezmacwebdesign.com/Demo/CSS-FadeIn-FadeOut/block.html

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 10 years ago
This is a work in progress!

I've added icons and got them to fade as well...

http://ezmacwebdesign.com/Demo/CSS-FadeIn-FadeOut/block.html

I suppose the next step is to create a proper responsive grid for them.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 10 years ago
I've made it responsive now but it looks kind of scary on an iPhone - as though it's running windows!

http://ezmacwebdesign.com/Demo/CSS-FadeIn-FadeOut/block.html



Remember that you have to tap the blocks on iPad/iPhone to get them to react since iOS doesn't do hover!

Last edit 10 years ago

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Guest 10 years ago
Wow, that looks great!
Edit


Post Reply
You must login or signup to post.