Web-Design Review Part 3

Full List: https://miliazure.wordpress.com/2017/02/03/web-design-tutorials-and-notes/

Progress bar… I haven’t really used this one much since my projects tend to be finished quickly, but it’s great for people who are working on a fansite or long project to let everyone know how they’re doing. It’s also good to use it as a countdown for special dates, video game release dates, your birthday, etc.

Vertically Centered Layout… this used to be done with tables in the past. This was one of my first experiments with flex and when I started to love it.

CSS Classes… a simple example of how CSS classes work.

Happy Birthday… you’ll never forget a birthday when your tech is there to remind you of it and even publicly post a happy birthday. XD

Parallax… I got the hang of a version of it through experiments though I haven’t been using it much, it still works.

Navigation Bar… a navigation bar appears on top of the page but only when the banner, which would presumably have its own larger navigation, disappears from the screen. There are several ways to do this, here’s a simple CSS alternative.

Random Elements… I highlight on the random element codes, php and JS versions.

Mouse Over Effects… various mouse over effects to show text appearing over an image on hover.

progress_bar_tutorialphp_dates_update

vertically_centered_layout_tutorial

css_classes_tutorial

php_happy_bithday_tutorial

parallax_div

navi_bar_under_banner

random_image_code

mouse_over_effectscss_mouse_over_effects_part_2

Network: http://azurelight.net
Deviant Art: http://mikaristar.deviantart.com

Advertisements

One thought on “Web-Design Review Part 3

  1. […] Part 3: https://miliazure.wordpress.com/2017/02/09/web-design-review-part-3/ […]

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s